Build a landing page with visual blocks

This walkthrough combines three reusable block types with ordinary slash-command content. It follows the reading-club page used in browser verification, but works with your own copy, images, and active theme. The example types and page are not bundled defaults. It uses the visual builder included in 1.0.0-rc.1.

Before you start

• An administrator needs configuration read/write permission to create types. The page author needs normal page editing permission; image uploads and stock downloads additionally use the site’s media permissions.
• Select Content Editor → FlowEdit in your account. Keep FlowEdit and Shortcode Core enabled, with Markdown processing enabled on the page.
• Use an existing image, upload your own, or use a configured stock provider. A general-media image is a useful reusable default. Page-media filenames are resolved relative to the page containing the instance.

1. Create a split hero

In FlowEdit → Blocks, choose Create block:

Setting	Example
Label	Reading Club Hero
Block ID	reading_club_hero (choose another unused ID if it exists)
Starting design	Hero
Category	Reading Club
Icon	bookmark from the Lucide selector

The Hero preset supplies title, body, image, alt text, button label, and button destination fields. Set useful defaults in Fields, for example:

• Title: “Good books. Better conversations.”
• Body: “A little space for big stories. Make time for a good book and a lively conversation.”
• Button label: “Explore the book reviews”
• Button destination: an existing page on your site, including the site base path when needed, such as /cms/books on a site installed under /cms.

In Layout, select Columns and set Gap to 32. Select the image and set Corner radius to 16. The text and image stay side by side on wide screens and stack at 640 px or narrower. Use Text color and Background on the button to choose a readable combination if the active theme overrides its default appearance.

Open Preview, enter sample values, and use Choose image to test the existing image picker. For a page-media filename, supply that page’s route. The sample form does not change defaults; upload/download actions still create real media files. Check the theme’s typography and spacing, then Save block.

2. Build a repeating program from blank

Create Reading Club Program, ID reading_club_program, starting from Blank. Keep the title field and set its default to “Three ways to make room for reading.” Add a field named sessions, label “Sessions”, type Repeating items.

Repeating items occupy the shortcode body. Do not add a second rich-text body field. Each instance will supply up to 32 title/body pairs.

In Layout:

1. Select the existing Container.
2. Choose Repeating items in the Element picker and Add inside selected container.
3. Confirm its Content source is Sessions.
4. Set the container’s padding to 32 and choose a subtle background with the color picker, such as #e8eee6. Check text contrast with the active theme.
5. Keep the title before the repeater. Try the move buttons, then restore the intended order. Save the definition.

3. Create a closing invitation

Create Reading Club Invitation, ID reading_club_invitation, using Callout. Set the title to “Your next chapter starts here.” and add short welcoming body copy. Pick message-circle as the block icon and Reading Club as its category. Preview its background/text combination and save.

4. Assemble the page through slash commands

Use Pages → Add Page to create a page with the theme’s Default template. For a private test, keep it Draft; publish when you want a public URL. Navigation visibility is separate from publication—you can publish with Visible → No.

In the FlowEdit canvas, type / at the start of an empty paragraph and choose:

Order	Content
1	Reading Club Hero; fill in copy, image, alt text, and a working link
2	Heading 2: “The reading list”
3	A normal paragraph introducing the page
4	Bullet list with three reading suggestions
5	Reading Club Program with three title/body items
6	Quote: “Less scrolling. More stories.”
7	Divider, followed by a Heading 2 for questions
8	The shipped Accordion, with two or three questions and answers
9	Reading Club Invitation

Example program items: “The Sunday reset”, “Notes in the margins”, and “Pass it on”. Fill their body fields, move an item up/down, and verify its title and body move together. Use Edit on a block card to adjust an instance. The card is a compact content preview; Preview page shows the theme output.

Save using the page toolbar. Saving definitions in the library does not save page content. A block definition controls all its instances; changing one instance’s field values only changes that page’s content.

5. Verify the finished page

1. Reopen the page and check that custom blocks, ordinary Markdown, images, and repeating items survived the save.
2. Open Preview page or the published URL. Check image loading, alt text, link destinations, FAQ interactions, spacing, and contrast.
3. Check a wide view, tablet width, and a phone width. Confirm the hero stacks without horizontal overflow. The builder’s Mobile button tests its preview; verify the complete page too.
4. Change a small layout setting on a reusable type, save it, and confirm the existing page reflects the change without reinserting the block.
5. Return to the page editor and verify the slash menu still offers the types. Keep any current document edits and undo history intact.

Anchor links only work when the public heading has a matching ID. Verify this on the actual page; the editor’s heading suggestions alone do not establish how your theme renders anchors. A theme can also override button/FAQ colors, so check open and closed states rather than relying only on the designer controls.

If another session changes the page, follow the conflict recovery steps and reconcile with the saved version. Do not overwrite newer work with a stale draft. Keep intended landing-page content; remove only disposable test fixtures that are no longer needed.