Content blocks

Content blocks carry the words on a page — headlines, prose, calls to action, and pricing highlights. Every block is added from the page editor's left sidebar.

• How the page editor works
• Hero
• Rich text
• Call-to-action banner
• FAQ accordion
• Link list
• Pricing callout

How the page editor works

Every block guide below assumes you already have the page editor open. The flow is the same for every block, so it's worth learning once.

1. Open the editor. In the admin sidebar go to Website, open the Pages tab, and click the page you want to edit (or the pencil icon on its row). The editor opens with the page's live preview on the right and a sidebar on the left.
2. Find the Blocks list. The left sidebar has a narrow rail of icons: Blocks, Page, Global styles, and Revisions. Blocks is selected by default and lists every block already on the page, top to bottom, in the order visitors will see them.
   • On most custom pages there's a single Blocks list.
   • On system pages (like the membership or apply page) the list is split into two zones — Before the form/list and After the form/list — each with its own Add button. The block picker only offers block types that are allowed in that zone.
3. Add a block. Click the blue Add button at the top of the Blocks list. A panel titled Add a section slides in, with blocks grouped by category (Headers, Content, Dynamic, Forms) plus any My saved sections you've saved. Each block shows a small thumbnail and its name. Click one to add it.
4. Edit its fields. The new block is added to the page immediately and its settings open in the sidebar. Fields are grouped into labelled sections (like Content, Design, and Typography) — scroll the sidebar to see them all. As you type or change a field, the preview on the right updates and an autosave note appears in the top toolbar, so there's no separate "save" step for block settings.
5. Preview across devices. Above the preview, use the Desktop / Tablet / Mobile buttons to check how the block looks at each width, or click Open in new tab to see the real page. Your edits are saved to a draft — they aren't live yet.
6. Reorder or delete. Back on the Blocks list (use the ← Blocks arrow at the top of any block's settings), drag a block by its grip handle (the dotted icon on the left of each row) to reorder it. To remove a block, use the trash icon on its row, or the Delete block button at the bottom of its settings.
7. Publish when ready. Nothing is public until you click Publish in the top toolbar. The badge next to the page name flips from Draft to Published. Click Done to return to the Pages list.

Screenshot needed: The page editor with the Blocks list, the Add button, and the preview pane labelled. Save at public/help-images/blocks/editor-overview.png.

Gotcha: editing a block only updates a draft. If your changes don't appear on the live site, you almost certainly haven't clicked Publish yet.

Hero

The hero is the big banner at the top of a page. It anchors a visitor's first impression with a headline, an optional background image, and one or two call-to-action buttons.

When to use it

• The opening of your home page or any landing page.
• Anywhere you want a single, attention-grabbing message above the fold.
• Pair with a rotating word (e.g. "COME WORK / GROW / PLAY WITH US") for a dynamic feel.

What it looks like

Screenshot needed: A live hero on a chamber of commerce site. Save it at public/help-images/blocks/hero/example.png.

Fields

• Headline — The main line of text. Supports the placeholder %{organization_name}, which is swapped for your organization's name.
• Font size (headline row) — The headline's size in pixels. Default is 48.
• Subheadline — A short supporting sentence. Leave blank if the headline stands on its own.
• Background image — Replaces the default hero image for this block only. If both this and the default are blank, the hero falls back to a primary-color gradient.
• CTA label / CTA URL — The primary button. Default URL is /apply.
• Secondary CTA label / URL — An optional second button. Leave both blank to hide it.
• Overlay opacity — Darkens the background image so the headline stays readable. 0 is no overlay, 1 is fully black. Default is 0.55.
• Alignment — Left or center. Center is the default.
• Height — Mini, compact, standard, or full. "Standard" is most common; "full" fills the screen.
• Rotating headline (prefix / words / suffix / size) — Optional. A prefix, comma-separated words, and a suffix cycle through phrases like "COME [Work | Grow | Play] WITH US." Leave the words blank to use the static headline.

Step-by-step: adding a hero

1. Click the blue Add button at the top of the Blocks list. In the Add a section panel, look under the Headers category and click the Hero thumbnail. The hero is added to the page and its settings open in the sidebar.
2. In the Content group, click the Headline field and type your main line (e.g. "Welcome to Downtown"). You can drop in %{organization_name} and it's replaced with your organization's name on the live page. The preview updates as you type.
3. Just below, Subheadline is a shorter supporting sentence — fill it in, or clear it to show the headline alone. The small Font size and Color boxes on each row fine-tune the look; the defaults (48 for the headline, 20 for the subheadline) are fine to start.
4. Open the Primary button group. Type the button text in Label (default "Become a member") and set where it points in URL — /apply sends visitors to your join form. Clearing the Label hides the button entirely.
5. In the Background group, click Background image, then pick an image from your library or upload one. Leave it blank to fall back to your organization's default hero image (or a brand-color gradient if there's no default).
6. Drag the Overlay darkness slider (in Background) up until the headline is easy to read over your photo — 0.55 is the default, 0.6 or higher for busy images.
7. In the Layout group, set Height (mini, compact, standard, or full) and Alignment (left or center).
8. Check the result in the preview, switch to Mobile to confirm the headline still fits, then Publish when you're happy.

Gotcha: the hero can only live in a page's top (intro) zone. On system pages it won't appear in the "After the form/list" picker.

Screenshot needed: The Add a section panel with the Hero thumbnail highlighted. Save at public/help-images/blocks/hero/add-block.png.

Screenshot needed: The rotating-headline fields filled in. Save at public/help-images/blocks/hero/rotating-headline.png.

Tips

• Use a wide, high-resolution image (at least 1920px across) so it looks crisp on big screens.
• Keep your headline under ten words. Heroes work harder when they say less.
• If your image is busy, raise the overlay opacity to 0.6 or higher.

Rich text

The rich text block is a free-form section of formatted content. Use it whenever you need a paragraph of explanation, a list, a quote, or any prose that doesn't fit a more specific block.

When to use it

• Writing the introduction to an About page.
• Adding a short explanation between two structured blocks.
• Any time you need bold, italic, links, or lists in plain copy.

What it looks like

Screenshot needed: A rich text block on a live page. Save at public/help-images/blocks/rich_text/example.png.

Fields

• Body — The full editor area. Supports headings, bold, italic, links, bullet and numbered lists. Default is a single paragraph saying "Your content here."

Step-by-step: adding rich text

1. Click Add at the top of the Blocks list, then under the Content category click the Rich text thumbnail. The block is added with placeholder text ("Your content here.") and its settings open in the sidebar.
2. In the Content group, click into the Body editor. Select the placeholder text and type over it.
3. To format, highlight the words first, then use the toolbar that appears above the editor: B for bold, I for italic, and the link button to turn the selection into a link (paste the URL when prompted).
4. Use the toolbar's heading and list buttons to add a subheading or a bullet/numbered list. Press Enter for a new paragraph.
5. Watch the preview on the right fill in as you type. When it reads well, Publish.

Gotcha: the Body field is the only content field on this block — there's no separate headline. If you want a styled heading above the text, add a heading inside the Body using the toolbar, or use a dedicated block like Hero or CTA banner.

Screenshot needed: The rich text toolbar with text selected. Save at public/help-images/blocks/rich_text/toolbar.png.

Tips

• Keep paragraphs short — three to four sentences is the sweet spot for the web.
• Use headings to break long passages into scannable sections.
• For repeating content (cards, FAQ, CTAs), reach for a dedicated block instead.

Call-to-action banner

The CTA banner is a horizontal strip with a headline and a button. Use it as a focused nudge to drive visitors to one specific action — usually applying for membership.

When to use it

• The bottom of a landing page, just before the footer.
• Between two long content sections, as a breather and a nudge.
• A two-column "Become a member / Sponsor an event" pair using the columns option.

What it looks like

Screenshot needed: A live CTA banner. Save at public/help-images/blocks/cta_banner/example.png.

Fields

• Columns — 1 (default, single banner) or 2 (two side-by-side panels). Set to 2 to expose the second-panel fields.
• Headline / Subheadline — The main message and an optional supporting line.
• CTA label / CTA URL — The button. Default URL is /apply.
• Image — Optional background photo for the panel. Overrides the background color.
• Background color — A solid color used when no image is set.
• Overlay darkness / Overlay color — Darkens the background image so text stays readable.
• Second panel — Headline / Subheadline / CTA label / URL / Image / Background — Only shown when columns is set to 2. Same shape as the first panel, for the right side.

Step-by-step: adding a CTA banner

1. Click Add, then under the Headers category click the Call-to-action banner thumbnail. The block is added and its settings open in the sidebar.
2. In the Content group, type your Headline (default "Ready to join?") and, if it helps, a Subheadline below it.
3. Open the Button group. Set Label (default "Become a member") and URL (default /apply). The Shape, Font size, colors, and border rows below let you style the button; leave them on defaults to match your theme.
4. In the Background group, either pick a Background color for a solid strip, or click Background image to add a photo. If you use a photo, drag Overlay darkness up so the text stays readable over it.
5. To split the banner into two side-by-side calls to action, open the Layout group and change Columns from 1 to 2. A new Second panel group (and its own button group) appears — fill in the second headline, subheadline, button, and background the same way.
6. Preview across Desktop and Mobile (two columns stack on phones), then Publish.

Gotcha: the second-panel fields stay hidden until Columns is set to 2. If you can't find them, that's why.

Screenshot needed: A two-column CTA banner being edited with the Columns field set to 2. Save at public/help-images/blocks/cta_banner/two-columns.png.

Tips

• One banner, one ask. If you find yourself listing two actions, switch to two columns.
• Pick a background color that contrasts with your hero — visitors should feel a clear "now do this" moment.
• One CTA per page is plenty; avoid putting a banner directly above the footer's contact section.

FAQ accordion

The FAQ accordion is a list of expandable questions and answers. Visitors click a question to reveal the answer; everything else stays collapsed.

When to use it

• A "Frequently asked questions" section on a membership or events page.
• Reducing scroll length when you have ten or more short Q&As.
• Surfacing common objections before someone fills out a contact form.

What it looks like

Screenshot needed: A live FAQ accordion with one item open. Save at public/help-images/blocks/faq_accordion/example.png.

Fields

• Section title / Subtitle — Default title is "Frequently asked". The subtitle is optional.
• Questions — Each question has:
  • Answer format — Simple (plain text, single line) or Rich (multi-paragraph with links and formatting).
  • Question — The text shown on the closed accordion row.
  • Answer — Plain text answer (when format is simple).
  • Answer (rich) — Full editor with formatting (when format is rich).

Step-by-step: adding an FAQ accordion

1. Click Add, then under the Content category click the FAQ accordion thumbnail. The block is added and its settings open in the sidebar.
2. In the Heading group, edit the Section title (default "Frequently asked") or clear it to hide the title. Add a Subtitle if you want a supporting line.
3. Scroll to the Questions group. Click Add Question to create the first Q&A row, then click the row to expand its fields.
4. Set Answer format to Simple for a plain one-line answer, or Rich for a multi-paragraph answer with links and formatting. Type the visitor-facing text in Question, then fill in the matching Answer field (the plain box for Simple, the rich editor for Rich).
5. Click Add Question again for each additional Q&A. To change their order, drag a question row by its handle within the Questions list.
6. Check the preview — each question shows collapsed; click one to confirm the answer expands. Then Publish.

Gotcha: the Answer format you pick decides which answer box appears. If you switch a question from Rich back to Simple, text typed in the rich editor is set aside and the plain Answer box shows instead.

Screenshot needed: The Questions list with three items added and one expanded. Save at public/help-images/blocks/faq_accordion/questions.png.

Tips

• Keep questions phrased the way visitors actually ask them ("How do I join?" not "Membership process").
• One paragraph per answer is plenty — link out for the long story.
• Order questions by frequency, not alphabetically.

Link list

The link list block is a curated set of links — either a flat list of titles or a grid of thumbnail cards. Use it for resource pages, partner roundups, or podcast episode rosters.

When to use it

• A "Resources" page linking out to forms, partner sites, or articles.
• A podcast page with one card per episode (thumbnail + blurb).
• A "Local partners" or "Useful links" roundup.

What it looks like

Screenshot needed: A live link list (cards mode). Save at public/help-images/blocks/link_list/example.png.

Fields

• Section title / Subtitle — Optional headings above the list.
• Display style — Text (a flat list of linked titles with optional blurbs) or Cards (thumbnail + title + blurb tiles).
• Columns (cards mode) — 1, 2 (default), 3, or 4.
• Side image / position / aspect / fit — Optional. Position to "left" or "right" to lay out the whole list beside a single side image — handy for "podcast host photo + episode list" patterns.
• Links — Each link has a Title, Blurb, Thumbnail (cards mode only), URL, and a Link label override that replaces "Visit" as the card's button text.

Step-by-step: adding a link list

1. Click Add, then under the Content category click the Link list thumbnail. The block is added and its settings open in the sidebar.
2. In the Heading group, add a Section title and Subtitle if you want them (both optional).
3. In the Display group, set Display style to Text for a plain list of linked titles, or Cards for thumbnail tiles. In Cards mode, set Columns (cards) (1–4, default 2).
4. Scroll to the Links group and click Add Link for the first entry. Click it to expand, then fill in Title, URL, and — in Cards mode — a Thumbnail and a short Blurb. Use Link label override to change the card's button text from the default "Visit".
5. Repeat Add Link for each entry; drag rows by their handles to reorder.
6. Optional: in the Side image group, upload a Side image and set Image position to left or right to run the whole list beside one photo (great for a "podcast host photo + episode list").
7. Preview, then Publish.

Gotcha: the Thumbnail and Blurb on each link only show in Cards mode. In Text mode they're ignored, so switch the display style to Cards if your thumbnails aren't appearing.

Screenshot needed: The Display style field toggled to Cards. Save at public/help-images/blocks/link_list/style-toggle.png.

Screenshot needed: The links list with three items. Save at public/help-images/blocks/link_list/links.png.

Tips

• Use cards mode when each link has a unique image worth showing.
• Use text mode for ten or more links — the wall of cards gets heavy fast.
• Keep blurbs to one sentence; the title should do the heavy lifting.

Pricing callout

The pricing callout is a single-tier price highlight — one price, one CTA, in a centered band. Use it when your organization has a single flat-fee membership or when you want to spotlight one tier.

When to use it

• Organizations with a single flat-rate membership ("$97/year").
• Highlighting one popular tier above a full pricing table.
• Anywhere you want a focused "here's the price, click here to join" moment.

What it looks like

Screenshot needed: A live pricing callout. Save at public/help-images/blocks/pricing_callout/example.png.

Fields

• Eyebrow — A short line above the title (e.g. "Membership").
• Title — The main heading. Default is "Flat-fee membership".
• Price — The number with a dollar sign — e.g. "$97".
• Period — What the price covers — e.g. "/year" (default) or "/month".
• Tagline — A short blurb below the price.
• Features — One feature per line. Each line gets a check mark in the rendered list.
• CTA label / CTA URL — The button. Default URL is /apply.
• Alignment — Center (default) or left.
• Variant — Solid (default, filled band), Outline (bordered card), or Contrast (inverted background).

Step-by-step: adding a pricing callout

1. Click Add, then under the Headers category click the Pricing callout thumbnail. The block is added and its settings open in the sidebar.
2. In the Content group, type the Title (default "Flat-fee membership") and, optionally, an Eyebrow tag above it.
3. Fill in Price exactly as you want it shown, including the currency symbol (e.g. "$97"), and Period (default "/year"; use "/month" for monthly).
4. In the Features field, type one feature per line — press Enter between them. Each line renders with a check mark. Add a one-line Tagline above the features if you like.
5. In the Button group, set Label (default "Join now") and URL (default /apply).
6. In the Display group, choose a Variant — Solid (filled band, loudest), Outline (bordered card, calmest), or Contrast (inverted background) — and set Alignment (center or left).
7. Preview, then Publish.

Gotcha: the callout shows one price, one button. For two or more tiers side-by-side, use the Membership tiers block instead — this one won't pull prices from your tier records.

Screenshot needed: The Features field with several lines filled in. Save at public/help-images/blocks/pricing_callout/features.png.

Tips

• For multi-tier pricing, use the Membership tiers block instead.
• Keep features under five lines — long lists weaken the callout.
• Match the variant to your page's visual rhythm: contrast pops, outline blends.