Blocks

A template screen is a stack of blocks. There are thirty-one.

The palette

Block	What it renders
Heading	Display type, sized from your app’s typography tokens
Text	A paragraph of body copy
Icon	One icon, from the same set the navigation uses
Image	An uploaded image
Spacer	Vertical space
Divider	A hairline rule
Button	A tappable button with an action
Buy Button	A button that sells one product through the App Store or Google Play
Award	A myCred award display
Reviews	A reviews display
Section	A row or column of blocks, holding a layout together
Post	One post from your site
Post Grid	Several posts, as a grid or a list
Post Slider	Several posts on a swipeable rail
Categories	Your site’s categories, or any public taxonomy’s terms, each opening its posts
Video	One video, from your library or a link
Video Slider	Several videos on a swipeable rail
Hero Slider	A rotating full-width image or video, each slide with a headline, copy and a button
Entry Form	A form that adds or edits one entry
Entry List	A searchable directory of entries
Entry Field	One value of the entry on screen
Gravity Form	One of your Gravity Forms forms, filled in natively and sent through your site
Gravity Form Entries	Gravity Forms entries a member may see, each with the View, Edit and Delete their role allows
Gravity Form Field	One answer of the Gravity Forms entry on screen
Chip	A small tappable label
Segmented	A row of segments with one shown selected; drawn only, so use Tabs for panels that switch
Tabs	Panels of blocks behind a tab bar members tap or swipe
Gallery	Several images, as a grid or a swipeable rail
List	Rows of title and subtitle, authored or from your site
FAQ	Questions that open to show their answers, or a rail of question cards
In App Products	Everything you sell through the stores, priced by the store

Heading and Text take their sizes from Typography and Layout, so a template stays consistent with the rest of the app rather than becoming its own island.

Heading, Text and Button arrive on the canvas reading Untitled, so a new block is visible the moment you drop it. Replace it with your own copy.

A new Button or Buy Button arrives with 10px of padding above and below its label, so it reads as a control rather than a thin strip. Change it under Spacing. Buttons already on a screen keep the padding they had.

Sample content

Media blocks arrive filled in rather than empty:

Block	Arrives with
Image	A sample nature photograph
Gallery	Four sample nature photographs
Video	A sample YouTube nature film
Video Slider	Six sample YouTube nature films
Hero Slider	Three sample slides, with pictures and headlines
Reviews	Four sample reviews, each with a sample avatar

The samples are there so you can judge a layout before you have your own media. They are not yours to publish. While a block still holds any, its settings panel says Sample content and offers Remove samples. Choosing your own video, photo or avatar replaces that item, and it stops counting as a sample.

Samples that are still on a placed screen when you prepare a store submission raise a warning in the readiness audit, naming the screen.

List and Gallery

List draws rows of title and subtitle: settings screens, menus, link lists. Set Rows come from to choose where they come from.

• What I write here is the usual one. Add rows, give each a title, a subtitle, an optional leading icon or picture, and an optional trailing icon or value. A row with a link opens it in the app’s own browser.
• Posts on the connected site fills the rows from your site instead, using the same filters the Post blocks use. The featured image becomes the leading picture and the excerpt becomes the subtitle.

Both draw identical rows, so the divider, the leading size and the tap action sit below the switch and apply either way.

Gallery shows several images. Leave it as a grid and set Columns, or turn on the swipeable rail and it behaves like the Post Slider, peek and dots included. Captions are off by default and show under each picture when you turn them on. A new Gallery arrives with four sample photographs. Replace or remove them before you publish.

FAQ

FAQ holds questions and their answers. Members tap a question to read the answer, or swipe through them as cards. A new FAQ arrives with three example questions, the first one open. Replace them with your own.

Add questions under Questions. Each one has a Question, an Answer, an optional Icon, and Open by default, which shows that answer before anybody taps. Reorder them with the arrows beside each one. An FAQ holds up to 30 questions.

Display decides how they are drawn:

Display	What members see
Accordion	Each question in a row. Tapping it opens the answer underneath, and tapping it again closes it
Slider	One card per question, answer always showing, on a swipeable rail

Formatting an answer

The answer field has the same toolbar as a Text block: bold, italic, underline, strikethrough, colour and links. Press Enter to start a new line. To start a bulleted line, choose Start a bulleted line on the toolbar. A bullet is the • character at the start of a line, so it looks the same on the phone as on the canvas. A link opens in the app’s own browser.

The accordion

• Only one open at a time closes the open answer when a member opens another. With it on, only the first question marked Open by default starts open.
• Expand icon is a Chevron, which turns over as the answer opens, or a Plus / minus. Icon side puts it before or after the question.
• Show item icons draws each question’s own icon before it, at Item icon size. A question with no icon chosen draws none.
• Icons colours both the expand icon and the item icons. Left blank, the expand icon follows your theme’s secondary colour and an item icon takes the question’s colour.
• Gap between questions spaces the rows. Divider between questions draws a hairline in the middle of that gap, so turning it on does not move anything.
• Question row styles each row’s box: its fill, border, corners, padding and margin. Left alone, a row has no box, and the questions line up with the rest of the screen. Give a row a fill or a border and, unless you set its padding, it is padded by your theme’s wrapper padding.

Animate opening and closing slides an answer open over Duration, up to 600 milliseconds. Turn it off and answers appear and disappear at once.

The slider

Each card shows its question with the answer under it. Peek at the next card leaves the edge of the next card showing, so members can see there is more. Gap between cards spaces the cards; left blank, it is your theme’s wrapper gap. Advance automatically moves to the next card every Interval, and stops while a member is touching or hovering the rail. Show dots and Show previous / next arrows are the controls members use to move it themselves. The arrows are the same as a Hero Slider’s. Dot size sets the dots from 2 to 24 dp (6 when left blank), and Dots colours them; left blank, they take your app’s primary colour, with the inactive ones fainter. With Animate sliding off, the rail jumps between cards instead of sliding.

Show item icons works here too, and Icons colours them.

A card always has edges. Left alone, it takes your theme’s border and card corners, padded by your theme’s wrapper padding; set your own under Question card to change them.

Styling the text

Question and Answer each have their own font, size, weight, line height, letter spacing, letter case, and a light and dark colour. Left blank, both follow the block’s own colour. Without that, the question takes your theme’s text colour and the answer its secondary colour, so the answer reads as the quieter of the two. See Styling a block’s text.

Gradients and shadows

A gradient background takes two colours by default, a From and a To. Colour stops are for everything else.

Add two or more stops and they replace the pair. Each carries a position along the gradient as a percentage, plus a light and a dark colour. Positions run forwards, and two stops at the same position make a hard edge rather than a blend, which is how you get a stripe.

One stop is not a gradient and is refused. Remove it, or add a second, and the two colours take over again.

Stacked shadows work the same way. The single shadow stays where it is, and adding a stack replaces it. The first shadow in the list paints on top, which is what a design tool exports. A card that reads as lifted usually wants two: a tight dark one for contact, and a wide soft one underneath it.

There is no inner shadow. Phones have no equivalent, so a template carrying one would look right in the builder and wrong on a device.

On Heading and Text the setting is called Text shadow, and it is drawn on the letters rather than around the block. It has no Spread, because a shadow on text has none. Stacked text shadows follow the same first-on-top rule.

Fonts

Heading and Text each carry a Font setting. Leave it blank and the block follows the app-wide font from Typography and Layout, which is what you want for most of a screen.

Set one when a design pairs two faces, which most do: a display face for the headline and something plainer underneath. The list is the same Google Fonts catalogue the app-wide setting draws from.

The font is fetched the first time a member opens the screen and then cached on their device, so it costs one download rather than being built into the app. A name that does not resolve falls back to the app’s own font rather than breaking the screen, which also means a typo looks like nothing happened.

Sizes

Icon and Spacer each offer three named steps and a Custom… option that takes a number of dp.

The named steps are the ones to reach for. An icon’s Small, Medium and Large are 16, 24 and 40dp, and a spacer’s are one, two and three times your app’s gap setting, so a spacer moves with the theme when you change it. Custom is there for a design that specifies an exact number, which three names cannot express.

Image takes an aspect ratio by default, and that is usually what you want: the box is reserved before the picture arrives, so a slow load or a broken link does not shift everything below it. Give it a Width or a Height in dp when a design says an exact size. Fill in one and the ratio works out the other. Fill in both and the ratio steps aside.

There is no automatic sizing, and there will not be. An image sized to whatever it happens to be reflows the screen when it finishes loading, and the builder and the phone settle on slightly different numbers when they do it.

Corners on an image includes Circle, which squares the box and rounds it fully. Give a circle a Width and a Height that match, or set a 1:1 ratio, and it is a round avatar.

Section layout

A Section holds other blocks, and four settings decide how it arranges them. Each panel of a Tabs block is the only other container, and it takes the same four.

Direction is Row or Column. A row puts blocks side by side; a column stacks them. Everything else on the panel reads relative to that choice, which is why the two alignment labels change wording when you switch.

Wrap applies to a row. Left on, blocks that do not fit run onto the next line, which is what every Section did before this setting existed. Turned off, they all stay on one line and share the width between them.

Align children spreads the blocks along the direction you chose. Space between pushes the first and last to the edges and divides the rest of the room evenly, which is what a header with a title on the left and a button on the right wants. It replaces the gap rather than adding to it.

Cross-axis is the other direction: on a row it is vertical, on a column it is horizontal. Stretch makes every block take the full measure of that axis, so three cards in a row end up the same height rather than each being as tall as its own text.

Sizing a block inside a Section

Select a block that sits in a Section and a Size in section panel appears.

Setting	What it does
Hug its content	The block takes only the room it needs. The default
Fill the space left over	The block takes whatever the others do not. Two filling blocks split it evenly
A fixed size	The block is exactly the number of dp you give it

Fill needs Wrap turned off. A wrapping row has no leftover space to share, because a block that does not fit moves to the next line instead of competing for room. With Wrap on, a filling block quietly hugs instead. The builder says so under the setting.

A sidebar-and-body split is a row with Wrap off, one fixed block at 96dp and one filling block beside it.

Some blocks have no width of their own, so they always take the section’s width. These are videos, rails, grids, lists, dividers, entry blocks, Segmented, Tabs and full-width buttons. In a wrapping row each one gets a line of its own. In a row with Wrap off it takes the space left over. In a column or a tab it takes the whole width. An image with no width or height set does the same in a column or a tab, and sits at a small inline size in a row. Nothing grows past its section, and a long word wraps onto the next line.

Tabs

Tabs puts a tab bar over a set of panels. Each tab is a panel holding its own blocks, and only the open one is shown. Members tap a tab to open it, or swipe sideways between them.

A new Tabs block arrives with its tabs already in place. Select it, and the Tabs panel lists them: rename a tab, move it up or down, remove it, or Add tab. A block holds one to six tabs. Six labels is about as many as a phone’s width reads comfortably, and a Tabs block with no tabs would be an empty bar, so the last one cannot be removed. Delete the Tabs block instead.

The same panel carries the rest of the block’s settings:

Setting	What it does
Shown first	The tab that is open when the screen opens
Style	Underline draws a line under the selected label; Pill puts it on a filled shape
Size	How large the labels and the bar are
Stretch full width	The tabs share the whole width, rather than each taking only the room its label needs
Swipe between tabs	Lets members swipe sideways to change tab. On by default
Colours	The selected pill, and the selected label and underline, each with a light and a dark value

What goes in a tab

Click a tab’s panel on the canvas, or in the layers panel, and it gets its own settings: a Label, which is the words on the tab, and the layout settings a Section has — Direction, Wrap, Align children, Cross-axis, the gap, the background and the border. A panel arranges its blocks the way a Section does, so drop blocks straight into it. There is no need to put a Section inside first.

A tab can only live inside a Tabs block. A panel on its own would have no bar to open it, so the builder refuses a drop anywhere else.

On the canvas

Clicking a tab on the canvas opens it and selects its panel, so the settings you see belong to the tab you are looking at. Selecting a block in the layers panel opens whichever tab holds it. Without that, you could select a block you cannot see.

Swiping

A swipe changes tab, except where a block inside the tab swipes on its own. A Post Slider, a Video Slider or a sliding Gallery inside a tab keeps its swipe, so a member moving through slides does not land on the next tab by accident. To change tab from there, swipe outside the slider or tap the tab.

Turn Swipe between tabs off when a tab holds a lot of sideways movement, and members change tab by tapping only.

Tabs keep their place. A tab you switch away from is hidden rather than rebuilt, so a slider is still on the slide a member left it on when they come back.

Choosing between Tabs and Segmented

They look alike, and they do different jobs. Tabs switches between panels of blocks. Segmented is drawn only: it shows a row of segments with one selected, and tapping it changes nothing. Use it when a design needs the look of a segmented control on a screen that does not switch, and reach for Tabs when the screen should.

Post, Post Grid and Post Slider

These three are different from the rest: every other block carries content you wrote, while these read your site.

They do not name a post. They name a filter and a position — “the newest post in Guides”, “the six most recent posts”. That is deliberate. A template belongs to you rather than to one app, so the same template can be placed in several apps pointing at different sites, and a stored post ID would mean something in one and nothing in the others. A filter re-resolves wherever the template lands.

Post shows one: featured image, title, date, author, excerpt or the full body, categories and tags — each one switchable. Set Which one to the 2nd or 3rd match and put three Post blocks side by side to hand-lay-out a feature row.

Post Grid shows several, in one to three columns, in the same four card styles the Posts feature offers: card, text over the image, compact row, and magazine.

Post Slider shows the same cards on a swipeable rail, with dots underneath and optional previous/next arrows. Two settings are worth knowing:

• Peek leaves a strip of the next post showing at the edge. That strip is what tells a member the rail swipes, so it is on by default at 24dp. Set it to 0 for a slide that fills the width.
• Slide height is a number rather than “as tall as the content”. A rail on a phone cannot size itself to its tallest slide, so you choose. Leave it blank and it follows the card style — a compact rail is short, a card rail is tall.

Advance automatically is off by default, because a page that moves on its own while you are reading it is worse than one that does not. When you turn it on, the slider pauses whenever a member is touching or hovering it, and picks the cadence back up where it left off rather than jumping the moment they let go.

While you are composing, all three blocks draw sample posts. Choose one of your apps at the top of the canvas and they switch to that site’s real content — and to its real categories and authors in the settings panel.

Tapping a post opens it in the app’s own article screen when a Single Post feature is placed in that app, and the post’s page in the in-app browser when it is not.

Video and Video Slider

Video plays one video. Video Slider puts several on a swipeable rail, with the dots and arrows the Post Slider uses.

A new Video arrives with one sample YouTube nature film and a new Video Slider with six, so you can set up the player before you choose your own. Swap each for your own video, or use Remove samples, before you publish. See Sample content.

Set Source to choose where the video comes from:

• Media library lists the videos on your connected site, the way the Image block lists photographs. Your site needs the Memberside plugin from September 2026 or later, which is the release that taught the library endpoint to hand over videos.
• Link takes a YouTube or Vimeo address, or a direct address ending in .mp4, .webm or .m3u8. Paste the link and the panel names what it found.

What gets stored differs by source, and it matters when you place one template in two apps. A file is stored as its address. A YouTube or Vimeo video is stored as its video ID, and the app builds the player around that — so the block keeps working in every app the template lands in.

Cover image is the still shown before playback. YouTube supplies its own, so you only need one for a Vimeo video or a file. Without one, the block draws a play button on a plain panel.

Four settings control the player, and they apply to every slide of a slider:

• Show controls draws the scrubber, the play button and the mute toggle. Turn it off for a video that behaves like moving wallpaper. A member can still tap to play and pause.
• Play automatically starts the video without being asked. It always starts muted, and Start muted locks on while it is set, because phones and browsers refuse to start sound nobody asked for. A video that ignored this would not play at all.
• Loop restarts the video when it ends.
• Start muted begins silent, with the toggle there for a member who wants sound.

Aspect ratio reserves the space before the video loads, so nothing below shifts while it arrives. It also sets the rail’s height on a slider, which is why there is no height field there.

Peek and Advance automatically work as they do on the Post Slider, and advancing moves the rail rather than the videos. It is off by default, and pauses whenever a member is touching or hovering the rail.

Reels

Turn on Reels for the full-screen vertical video members know from Instagram and TikTok. The block runs to both edges of the phone and fills the height of the screen, and on a Video Slider each video becomes one page that members swipe up and down between.

Because the screen sets the size, the aspect ratio does not apply while Reels is on — the video fills the box and Fit decides whether it is cropped or letterboxed. Your ratio is remembered, so turning Reels back off restores it. A YouTube or Vimeo reel letterboxes inside its own frame, as embeds always do; upload the video to your library for an edge-to-edge one.

For an exact full-screen reel, set the screen’s padding to 0 in the Canvas panel. Anything else on the screen still sits above or below the reel, and a member reaches it by scrolling from there rather than from the reel itself — a swipe on a reel changes reels. A reels slider is best given a screen of its own for that reason.

Peek, dots and arrows are hidden while Reels is on. They belong to the side-to-side rail: nothing sits beside a video that fills the screen, and a row of dots beneath one would fall past the bottom of the phone.

While you are composing, the canvas draws the cover and a play button rather than a working player, so a click still selects the block. Open the device preview to watch the video itself.

Hero Slider

Hero Slider is the panel a screen opens with: a full-width picture or video with a headline, a line of copy and a button on top of it. Each slide carries its own, so one block can make three different offers.

Add slides under Slides. Each one takes an image or a video — choose which with Media — and then a Title, a Description and, if you want one, a Call to action. Reorder them with the arrows beside each slide. A slide with no call-to-action label draws none, which is how you let one slide be quiet.

Layout decides where the words go:

Layout	What it draws
Overlay	The words sit on the picture, over a darkened scrim
Below	The picture, then the words beneath it on the block’s background

In Overlay, Content alignment and Vertical alignment place the words in the picture, and Scrim sets how far the picture is darkened behind them. Turn the scrim down and pale photographs will swallow white text; that is the setting to reach for when a headline is hard to read.

The rest is the rail: Autoplay advances the slides on its own and is off until you turn it on, Interval is how long each one holds, and Dots and Arrows are the controls members use to move it themselves.

A video slide in Overlay shows its cover, not the video. YouTube and Vimeo play inside their own player, which cannot have a button drawn over it, so an Overlay slide shows the cover image with a play control and hands over to the player when it is tapped. YouTube supplies a cover for you. Vimeo does not — set one under Cover, or that slide draws an empty box. In Below the video plays in place, because nothing is over it.

Style the three parts separately: Title, Description and Button each have their own font, size, weight and colour, and the button also has its own fill, border and corners. The block’s own Background, Frame and Spacing work as they do on every block, and paint behind the media.

Each slide’s button is bound separately in Button actions — the panel lists one row per slide, named by its title, so two slides can open two different screens.

Entry Form, Entry List and Entry Field

These three build a directory. Together they let members add, browse, edit and delete entries of anything your site already models: a listings post type, a staff page, your member roll. They need Advanced Custom Fields on the connected site, and they draw the fields you have already set up there.

Entry Form shows one ACF field group as a form and saves it. Choose what it writes to, either a post type or the member themselves, then choose the field group. Add or edit decides whether it creates a new entry or edits the one on screen, which is what an Edit action opens it for.

Entry List is the directory. It shows entries as a list or a two or three column grid, with a search box and any filters you add. Each filter names one ACF field and draws either a text box, a dropdown of that field’s choices, or a pair of number boxes for a range. It loads Per page entries at a time and fetches the next page as the member scrolls to the end. A list of Members shows only the Roles you tick, and your site enforces that; see Members lists.

Entry Field draws one value of the entry being shown. Put several on a screen alongside headings, images and sections, and that screen becomes your detail view. It can show an ACF field or one of the entry’s own parts: title, summary, body, featured image, author or date.

Terms on a sign-up form

An Entry Form whose Entries are is Members and whose This form is Adds a new entry creates accounts. While Who fills this in is Anyone — a public sign-up form, it has one more option: Ask new members to agree to Terms & Conditions, on by default.

With it on, someone signed out who fills in the form sees the same agreement checkbox as your register screens, and cannot submit until they tick it. It appears only when the Terms & Conditions service is on under Memberside → Services. Turn the option off for a form where you collect agreement some other way.

Staff creating members are never asked. The option is hidden when Who fills this in is Signed-in staff only, and a signed-in viewer never sees the checkbox.

Wiring the three together

An Entry List’s View and Edit actions each open a screen from the same template project, carrying the tapped entry. So does an Entry Form’s After saving, open. The screen opens inside the app, under a back bar titled with the entry and with your bottom navigation still showing. The back arrow or the phone’s back gesture returns to the list, and tapping a tab leaves it. Place the browse screen in navigation and the builder adds the screens it opens to the Background zone for you.

Building a directory walks through the whole flow: the three screens, the settings on each, what members are allowed to do, and a worked example.

While you are composing, all three blocks draw a sample entry. Choose one of your apps at the top of the canvas and they switch to that site’s real post types, field groups and content.

Gravity Form

Gravity Form draws one of your Gravity Forms forms natively, and sends what a member fills in through your site exactly as the form on your website does: the same validation, the same entry, the same notifications and confirmation. It needs Gravity Forms 2.6.4 or later on the connected site.

Choose the form under Form. Multi-page forms show their steps with Next and Back, and fields appear and disappear with the conditional logic you set up in Gravity Forms. A field that fails a check shows the same message under it that your website would, and your site checks every page again before the member moves on, so any custom validation you have added still applies.

Who can submit decides which roles may fill it in. Add Signed-in members for everyone with an account, or Visitors to let people who are not signed in use it too, as you would for a contact form. A form you have not placed in an app stays closed to that app. Turn on Turnstile to ask visitors to pass the challenge first. Gravity Forms’ own Require user to be logged in, entry limits and schedules still apply.

After a submission the form clears and shows your form’s confirmation. Set After submitting, open to send members to another screen instead.

A form with a field the app cannot draw — a payment, a captcha, a calculation, a post field or a signature — shows a notice in place of the form, rather than half a form.

While you are composing, the block draws a sample form. Choose one of your apps at the top of the canvas to see your site’s real forms.

Set Mode to Edit the entry this screen was opened for to make the block an edit form. Put it on the screen a Gravity Form Entries block’s Edit opens: it opens holding that entry’s answers, and Save changes runs them through the same Gravity Forms validation as a new submission before your site saves them. Files already on the entry are kept. Opened any other way, the block sends a new entry instead.

Gravity Form Entries

Gravity Form Entries lists Gravity Forms entries, each as a card with its first answer as the title, the next few answers, who sent it and when. Choose a form under Form, or leave it empty to list entries from every form the app offers. Only the member’s own entries narrows it to theirs.

Which entries a member sees is up to your site and their role. Under Who can see every entry, Who can edit every entry and Who can delete every entry choose the roles that manage everyone’s entries; the Members can see, edit or delete their own entries switches decide what everyone else may do with what they sent. Your site enforces all of it, and Edit and Delete only appear on an entry that member may change. Delete moves the entry to Gravity Forms’ trash, where you can restore it.

View opens and Edit opens name the screens a tap opens, carrying the entry. Build the view screen from Gravity Form Field blocks, and put a Gravity Form block in edit mode on the edit screen. With no screen chosen, that action is not shown.

Gravity Form Field

Gravity Form Field draws one answer of the entry the screen was opened for: Shows picks the entry’s first answer, one answer you choose, who sent it, when, or the form’s name. Choose the form to pick a field from its list. Its Label defaults to the field’s own, and When there is no answer is drawn when the member left it empty. With no entry on screen, the block draws a sample entry so you can place and style it.

Button actions

A button does one of four things:

Action	What happens
None	Nothing. Useful while composing
Back	Returns to the previous screen: the list a detail screen was opened from, or the tab the member was on before
Feature	Opens another placed feature in this app
Link	Opens a URL carried by the block

Feature is the one to understand. The button points at a feature you placed in navigation, so a template can be a front door to the rest of the app. Because the target is a property of the app rather than the template, the same template used in two apps can send members to two different places.

A Hero Slider’s buttons are here too, one row per slide rather than one for the block, so each slide can send members somewhere different. Rows are named by the slide’s title and say which hero they belong to.

A Buy Button or In App Products block on the screen adds an After a successful purchase row: stay on this screen, go back to the previous screen, or open a screen. See After a successful purchase.

Adding and configuring blocks on a template screen

Categories

Categories lists your site’s categories, with each one’s name, description and number of posts. It isn’t limited to categories: pick tags, or any public taxonomy your site has, from the Taxonomy list.

Choose how it looks from six templates:

Template	What it draws
List	A bordered row per category with a folder icon, its description, a count and an arrow. Child categories step in under their parent.
Grid	Cards in columns, each with an icon tile, the name, the count and a short description
Tiles	Tinted squares led by the category’s first letter
Chips	Wrapping pills with the name and count
Compact	Plain divided rows, for long lists
Cards	The category’s image as a cover, with the name over it. A category without an image gets a tint and an icon.

Show decides which categories appear: every category as a tree, only the top level, the children of one category, or categories you pick. Picked categories can keep the order you picked them in.

Categories with no published posts are left out unless you turn on Include categories with no posts. A member would tap one and find nothing.

Tapping a category opens its posts in the app. That list is Category Posts, which the app builder adds to Background as soon as a placed screen holds a Categories block, and removes when none does. Its settings decide how the posts look. See Category Posts.

Buy Button and In App Products

These two sell through the App Store and Google Play rather than through your site’s checkout. Apple and Google both require it for anything digital — a membership, a subscription, a course, a download — so this is how a template screen sells one.

They read the products you mapped under Memberside → In-App Purchases on your site, so the picker names them rather than asking you to type an identifier. Set that screen up first; see In-app purchases.

Buy Button sells one product. Leave its label empty and the app uses the store’s own wording — Subscribe for something that renews, Buy for a one-off — which is what store reviewers expect to see.

In App Products lists them. Tick nothing and it lists everything you sell, so a tier you add later appears without the screen being re-authored or the app rebuilt.

Templates belong to your account rather than to one app, so the panel has to know which site to read products from. It uses the app chosen under Theme in the toolbar; with no theme chosen, a Products from list appears at the top of the block’s panel. If only one of your apps can sell in-app, or one app that places this screen can, it is picked for you.

After a successful purchase

Each placed screen decides where a member goes once a purchase from it succeeds. Open the screen’s settings in the app builder and find the block under its button actions, beside the screen’s other buttons:

Choice	What happens
Stay on this screen	The member stays put. This is the default
Go back to the previous screen	Returns to wherever the member came from
Open a screen	Opens another screen you placed in this app

An In App Products block has one row for the whole block and one per product. A product left on Same as the block follows the block’s row, so a monthly and a yearly plan can share one destination while a lifetime plan opens somewhere else.

Whichever you choose, the app confirms every successful purchase with Purchase complete. The app refreshes the member’s roles before it opens the screen, so a screen restricted to what they bought opens rather than showing its lock.

It runs only for a purchase the member has just made. A restore never moves anyone, and neither does a purchase the store finishes later, such as one that was waiting for a parent’s approval.

Like a button’s Feature action, the choice belongs to the placement rather than the template. The same screen can open different screens in two apps.

What a member who owns it sees

A product the member already holds keeps its name and its price, and carries an Owned badge. What the button does depends on what it is:

• A subscription reads Manage, or your When already owned label, and opens the member’s subscriptions on the App Store or Google Play — the only place one can be cancelled.
• A one-off product reads Owned, or your label, and does nothing when tapped. There is nothing more to buy, and nothing for the store to manage.

Turn on Hide it once owned to leave out a product the member already holds. For a subscription that also hides their way to the store’s manage screen, so keep it off unless the screen offers another.

Restore purchases

The Restore purchases link at the foot of In App Products asks the store for everything this store account has bought and gives it back on your site. It then says what happened: how many purchases it restored, that there was nothing to restore for this account, or why it could not finish. A purchase that has since expired or been refunded is not given back.

Restoring checks each purchase with Apple or Google again, so a refund made since the purchase is honoured rather than undone. On sites running plugin 2.72.0 or later, a subscription that has renewed many times is checked once, and an old renewal can never shorten the member’s current period.

Styling them

Both take the ordinary block controls, and two of those behave differently here than the panel suggests:

• Padding, margin and the drop shadow draw on the button itself, not on a box around it. They are in the Spacing and Frame sections like every other block; a button just has no wrapper for them to land on, so they go on the control.
• The Buy Button’s type — size, font, line height, letter spacing — is in its own panel. Weight lives with the other button styles, so there is one control for it rather than two.

An In App Products card draws four separate pieces of text, and each has its own panel: the product name, the renews / one-off line, the price, and the Restore link. Each takes a size, a font, a weight, a colour for light and dark, and a letter case. The row’s Buy button has its own group too, including its own padding and margin — the block’s Spacing section is the box the whole list sits in, not one row.

Everything is blank by default and blank means “follow the theme”, so a card you have not touched keeps tracking your app’s typography.

Four things are true of both, and are worth knowing before you design around them:

• The canvas cannot show a price. Prices are the store’s — localised, tiered, and the only number a member is actually charged — so the builder says where the price comes from instead of inventing one. The device shows the real thing.
• Placing either one is enough. You do not also have to set a shop policy: the app ships store billing because the block is there.
• A member has to be signed in to buy. The purchase is granted to their account on your site, so a signed-out tap asks them to sign in first instead of charging them. A tap that cannot buy always says why — the product is not in the store yet, purchases are off on the device, or the store refused — rather than doing nothing.
• Keep Restore purchases on. Apple requires a visible restore control in any app selling subscriptions, and an app whose only checkout is one of these blocks may have no Settings tab to carry one.

Styling a block’s text

Every block that draws text lets you set that text’s size, font, weight, line height, letter spacing, letter case, and a colour for light mode and another for dark mode. Blocks that draw several pieces of text give each piece its own group in the panel, so you can restyle a title without touching the line under it.

Block	Text you can style
Reviews	Author name, review text, rating number
Post, Post Grid, Post Slider	Title, excerpt, date and author line, categories and tags
List	Row title, subtitle, trailing text
FAQ	The question and the answer. A run you colour in the answer keeps its own colour
Gallery	Captions (shown once Show captions is on)
Entry Form	Field labels (the title and details boxes and every custom field alike), success text
Entry List	Title, excerpt, field rows, author and date line
Gravity Form	Field labels, confirmation text
Gravity Form Entries	Title, answers, author and date line
Gravity Form Field	The value, and its label
Entry Field	The value, and its label when Show the field’s label is on
Award	Each of its three lines
Chip	Its label’s type. Its colours are with the chip’s other styles
Segmented, Tabs	The labels, with a colour for the tabs that are not selected. The selected tab keeps its own colour
Categories, In App Products	See their own sections

Everything is blank by default, and blank follows your app’s theme in both modes. If you set only a light colour, dark mode uses it too. Set a dark colour as well whenever the light one would be hard to read on a dark background. Clearing the dark colour returns it to following the light one.

Letter case changes the words themselves rather than how they are drawn, which is why it looks the same on the phone as on the canvas. The one exception is a Post’s full content, which is the site’s own markup and keeps its own case.

Who sees a block

Every block has a Visibility section at the bottom of its settings. It takes the same rules as a placed feature’s Restrictions: Audience, Restrict roles, Restrict to membership levels, and Match when both are on.

A member who fails the rules does not see the block at all. It leaves the screen, and the blocks below it move up to close the gap. Nothing is drawn locked in its place.

Two common uses:

• A banner for visitors only. Set Audience to Public (not logged in) on a “Join today” block. It disappears the moment someone signs in.
• A shortcut for paying members. Tick your paid levels under Restrict to membership levels on a Button that opens a members-only screen.

The canvas always draws every block, because you need to see what you are editing. A restricted block carries a crossed-out eye in the Layers list. To see what a member sees, open the app preview and use its role and level pickers.

Roles and levels are listed from the app chosen in the Theme menu above the canvas. With no theme chosen, they come from the app that places the screen.

Visibility hides a block; it does not protect it. Everything a block shows, including its text, image addresses and links, is built into the app itself, so someone determined can read it without the right membership. Keep paid content on your site. Restrict the post in Paid Memberships Pro and show it with a Post block, and your site sends its full content only to members.

A tab inside a Tabs block has no Visibility of its own. Hiding a tab would renumber the tabs around it, so restrict the blocks inside it instead.

A change to Visibility reaches members with your next build, like any other change to a screen. A member’s role and level come from your site, so changing those there needs no rebuild.

Working with blocks

Each block has the same actions:

• Name block — a label for your own use while composing. It is not rendered.
• Copy and Paste — including between screens.
• Duplicate — copy and paste in one step.
• Lock and Unlock — stop a block being moved or edited by accident. Useful once a screen is finished.
• Delete.

Naming blocks is worth the moment it takes on any screen with more than a few. Ten unnamed Text blocks are hard to work with a week later.

Searching blocks and layers

Both tabs above the canvas have a search box.

• Blocks narrows the palette to the blocks whose name you type. “slider” leaves Post Slider, Video Slider and Hero Slider.
• Layers finds blocks on the screen by their name or their type. “post grid” and “post_grid” find the same block. A match inside a Section or Tabs block shows with the containers above it, faded, so you can see where it sits. A match inside a collapsed Section still shows.

Reordering is off while a search is active, because the list is showing part of the screen. Clear the search to drag blocks again. Press Escape in the box to clear it.

Composition advice

Lead with one Heading. A screen with three competing headings has none.

Use Spacer rather than empty Text blocks. An empty paragraph is a block that looks like a mistake to the next person editing.

Lock what is finished. Most accidental edits happen to the part of a screen you were not thinking about.

When it does not work

Symptom	Cause	Fix
A button does nothing	Its action is None, or the feature it points at was removed	Set the action, or point it somewhere that exists
A block will not move	It is locked	Unlock it
Heading sizes look wrong	They follow the app’s typography tokens	Change the tokens in Appearance
An Award or Reviews block is empty	Its backing plugin is not active on the site	Activate myCred or the reviews plugin
A Post, Post Grid or Post Slider block is empty	Its filters match nothing on that site — a category that only exists on another one, for instance	Widen the filters, or clear the author filter, which is specific to one site
Post blocks show sample posts in the builder	No app is chosen above the canvas	Pick one of your connected apps
A slide is cut off at the bottom	The card is taller than the rail	Raise Slide height, or clear it to follow the card style
A video plays in the builder and not in the app	Its address starts http://	Use the https:// address. Phones block plain http media, so this only shows on a device
A YouTube or Vimeo video is a grey box	The video is private, or its owner disabled embedding	Open the video’s own page and use its Share link, or ask the owner to allow embedding
An autoplaying video is silent	Phones and browsers only let a video start on its own without sound	Leave Start muted on, or turn Play automatically off so a member starts it
I can’t drop a tab outside a Tabs block	A tab is a panel of its Tabs block and has no bar of its own anywhere else	Drop a Tabs block first, or use a Section
Swiping moves the slider, not the tab	A slider inside a tab keeps its own swipe, on purpose	Swipe outside the slider, or tap the tab
The media library shows no videos	The site’s Memberside plugin is older than the release that lists them	Update the plugin, or set Source to Link
A block shows videos, photos or faces I did not add	New media blocks arrive with sample content	Replace each item with your own, or use Remove samples in the block’s settings
A purchase succeeds and nothing moves	After a successful purchase is Stay on this screen, or the screen it opens was removed	Choose a destination in the screen’s settings
A purchase opens a screen that is still locked	The site has not given the member the role yet, or the site runs a plugin older than 2.72.0	Check the product’s grant under Memberside → In-App Purchases, and update the plugin
Restore says there is nothing to restore	The store account signed in on the device bought nothing from this app	Sign in to the store account that made the purchase
An owned one-off product’s button does nothing	Expected. A one-off cannot be bought twice or managed	Nothing to fix
A block shows on the canvas and not on a phone	Its Visibility rules leave that member out	Check the block’s Visibility, and the member’s role and level on your site
A block I restricted still shows in the app	The app was built before the rule was added	Build the app again
No roles listed under Visibility	No app is chosen in Theme, no app places the screen, or that app has no site connected	Choose a connected app in Theme

Next

Using templates in an app, or Building a directory for the Entry blocks in full.