S Subster
RUEN

Text and layout

Twelve blocks for writing the text of a screen: headings, paragraphs, lists, columns and empty space between them.

They sit on the "Blocks" tab, in the "Text" and "Layout & visual" groups, and go both into a quiz and onto a paywall. How to put a block on a screen: Build a funnel.

In text fields, a selected piece can be made bold, italic, underlined or struck through, coloured, or turned into a link. Block settings open in the right panel when the block is selected.

The colours and font of the whole funnel come from the theme, not the block: Appearance: theme and style. "Block background", inner padding and the distance to neighbouring blocks are in the same panel for every block and are not repeated below.

Title

The largest text on the screen, centred. Use it for the main idea of the screen. Settings: "Size" in steps S, M, L or an exact number in the "Font size (px)" field (if a number is set, the chosen step is ignored); alignment, colour, font. Does not: collect an answer; quiz questions are asked by the blocks of the "Questions" group.

Subtitle

A line smaller and paler than the title, also centred. Use it for a clarification or a promise in one sentence. Settings: the same as the title. Does not: hold running text; for several sentences there is "Paragraph".

Section heading

Text smaller than the main title, aligned left. Use it when a screen has several parts: a caption above a list, above columns, between paragraphs. Settings: the same as the title. Does not: replace "Title"; the single main line of a screen needs that one, large and centred.

Paragraph

Regular text aligned left. Use it for anything longer than one sentence: an explanation, a description, a caveat. Settings: the same as the title. Does not: make list items; a list is built from the list blocks.

Divider

A horizontal line between parts of a screen. Use it when there is little empty space and a visible border is needed. Settings: "Line style" (solid or dashed), colour, "Edges" (square or rounded), length and thickness. Does not: sit flush against its neighbours; the line keeps 16 pixels above and below on its own.

Line length is set by the "Width (px)" field; empty means full width. Thickness is set by the "Height (px)" field.

Spacer

Empty space between blocks. Use it to separate crowded blocks, move a button away from text, or push a button to the bottom of the screen. Settings: "Mode", either "Fixed" or "Fill free space"; in "Fixed" mode, the "Height (px)" field from 8 to 2000, 32 by default. Does not: draw a line or a backdrop. A gap inside one block is adjusted with its inner padding, not with a "Spacer".

In "Fill free space" mode, the spacer takes all free height of the screen and pushes the blocks below it to the bottom. Instead of "Height (px)" there is another field here, "Min height (px)", 0 by default: when the screen has no room left, the spacer stays at this height and adds no scrolling.

Changing the mode clears the entered height and sets the default of the new mode: 32 or 0.

Icon + text

An icon and a line of text side by side. Use it for a short item that should catch the eye: a benefit, a condition, a caveat. Settings: "Icon" (one of 21 ready icons: star, check mark, lock and others), the text, its size, colour, alignment, font. Does not: take your own picture instead of the icon; "Feature chips" on the Images, video, testimonials page can.

Bulleted list

Items with bullets. Use it for a list of equal items: what the subscription includes, what the person gets. Settings: items, alignment of the whole list, colour, font. Does not: have nested sub-items or your own marker instead of the bullet; a list with check marks is built from several "Icon + text" blocks in a row.

Numbered list

The same, with numbers. Use it when order matters: steps, stages. Settings: the same as the bulleted list. Does not: start from anything but one; there is no way to continue the numbering of a previous list.

Accordion

A list of questions, each expands on tap. Use it for FAQs at the bottom of a paywall: a few lines instead of a screen of text. Settings: items made of "Question" and "Answer" fields, colour and size of questions and answers separately. Does not: show two answers at once; tapping a second question closes the first, and all are closed when the screen opens.

2 columns

Two columns side by side, each with its own heading and text. Use it for a short comparison such as "before and after". Settings: heading, text and alignment of each column, colour and size of headings and text. Does not: stack on a phone; the columns stay side by side, and long text stretches into a narrow strip. A grid of icons with captions is "Feature chips".

For long text, put two "Paragraph" blocks with "Section heading" blocks one under another.

Card

A picture on top, a heading and a description below it, all in a frame. Use it when one idea should be set apart from the rest of the screen. Settings: "Card look", "Card heading", "Description", a picture by link or from "Your media hub", thickness, colour and radius of the frame, alignment, colour and size of text. Does not: lead anywhere on tap; for navigation, put a button next to it.

"Card look" is "Solid" or "Glass". A glass card is semi-transparent and blurs what is under it: use it on a screen with a photo in the background.

A file cannot be uploaded straight into a card. Upload it in the "Image" block with the "Upload from computer" button: it appears in "Your media hub", the shared picture library, and the card takes it from there.

Next