The Page Builder & Universal Section Options

Every page on your site is built by stacking sections on top of one another, like building blocks. A section might be a big welcome banner, a paragraph of text, a photo gallery, a contact form, or a row of customer reviews. You add the sections you want, arrange them in the order you like, and edit each one until it looks right. This article explains how the builder works, then walks through the settings that every section shares, so you only have to learn them once.

How the page builder works

When you open a page for editing, you'll see your sections listed in the order they appear on the live page, top to bottom. Working with them is straightforward:

  • Add a section. Click the Add block button where you want the new section to go. A menu of section types appears (Hero, Rich Text, Gallery, Form, and so on). Pick the one you want and it drops into place, ready to edit.
  • Choose the right type. Each section type is built for a job: a Hero for your opening banner, a Testimonial for reviews, a Pricing Table for your plans. The section guides in this help center describe every type so you can pick with confidence.
  • Edit a section. Click a section to open its settings. Most sections have up to three tabs: Content (your words, images, and links), Style (the layout or look, for example, image on the left vs. the right), and Appearance (the shared background, spacing, and finishing touches covered below).
  • Reorder by dragging. Grab a section by its drag handle and move it up or down. The page rebuilds in that new order. This is the easiest way to experiment. Try moving your testimonials above your pricing, for instance, and see which flows better.
  • Delete a section. Remove any section you no longer need. If you might want it back later, consider saving it first (see the article on Saved Sections).

Your work saves automatically as you go, and you can preview the page or publish it whenever you're ready. Nothing goes live until you publish.

The three tabs on most sections

Open almost any section and you'll find the same three-tab layout:

  • Content, the actual material: headings, text, images, buttons, and links.
  • Style: the layout choice for that section type, such as whether an image sits left or right, or whether a set of reviews shows as a grid or a slider.
  • Appearance: the universal background, spacing, and finishing options described next. These work the same on every section.

Because the Appearance tab is identical everywhere, learning it once means you can style any section on your site the same way.

One thing worth knowing about the Content tab: anywhere you type words, you can also pull in your business details by typing them in curly brackets, such as "Call us on {site.phone}". The real value appears on the page and updates everywhere when you change it in Site Settings.

The Appearance tab

This tab controls how a section sits on the page: its background, how much breathing room it has, and a few optional finishing touches.

Background color

Set the background behind the section. Your choices are:

  • White: a clean, plain background.
  • Light Gray: a soft, subtle shade that helps a section stand apart from a white one above or below it.
  • Dark: a deep background for dramatic contrast.
  • Primary: your main brand color.
  • Secondary: your secondary brand color.

The Dark, Primary, and Secondary backgrounds are colored, so your text and buttons automatically switch to a light version to stay readable. You don't have to change any text colors yourself. A handy trick for a long page is to alternate White and Light Gray backgrounds so each section reads as its own band.

Spacing

This sets the vertical padding (the empty room above and below your content inside the section) from None up through Extra Large. More spacing gives a section room to breathe and feels calmer and more premium; less spacing pulls sections closer together for a tighter, more compact page. Use None when you want two sections to butt right up against each other.

Minimum section height

By default, a section is only as tall as its content. If you want it to fill more of the screen, set a minimum height:

  • Auto: the section hugs its content (the default).
  • Medium: a taller minimum, good for making a small section feel more substantial.
  • Tall: taller still.
  • Full screen: the section fills the whole browser window, so it's the only thing a visitor sees before scrolling.

When you pick anything other than Auto, your content is centered vertically within that taller frame. This is a great way to turn a short section, like a call to action or a single stat, into a full-screen moment between larger sections.

Contained panel

Turn this on to render a colored section as a rounded, inset card that floats within the page rather than stretching edge to edge. It's a nice way to make a colored call-to-action or highlight feel like a distinct, self-contained card instead of a full-width band.

Advanced options

These are optional finishing touches. You can safely ignore them and your section will look great, but they're there when you want extra polish.

  • Reveal animation on scroll: the section gently animates into view as a visitor scrolls down to it. Choose Fade in, Slide up, or Slide in from the left or right. These respect a visitor's "reduce motion" setting, so anyone who prefers less movement won't see the animation.
  • Parallax: a subtle depth effect where the section's background shifts at a slightly different speed than the rest of the page as you scroll. Choose Subtle for a gentle touch or Standard for a more noticeable effect.
  • Divider lines: add a thin line at the top and/or bottom of the section to visually separate it from its neighbors.
  • Anchor ID: give the section a short name (for example, pricing or contact). Once set, you can link directly to it. A visitor who follows a link ending in #pricing jumps straight to that section. This is what powers "jump to" buttons and menu links that scroll a visitor down to a specific spot on the same page.

The eyebrow (the small label above a heading)

Many sections offer an eyebrow: a small line of text that sits just above the main heading, like a category label or teaser (for example, "WHAT WE DO" above a heading that says "End-to-end brand and website design"). It's optional on every section that has it. You control:

  • Show eyebrow: a toggle to turn it on or off. Leave it off and no eyebrow appears at all.
  • Eyebrow text: the words themselves. Keep it short. A few words works best.
  • Marker: the small shape that sits before the label. Choose from Use brand default, None (text only), Dot, Short line, Vertical bar, Left indent bar, Slash, Plus, Brackets, Pill, Underline, or Index number. The marker's color isn't a per-section choice; it's set once for your whole site under Branding (Identity).

Buttons

Lots of sections let you add buttons so visitors can take the next step. You typically get a Primary button (the main action, styled to stand out) and an optional Secondary button (a softer, secondary choice beside it). For each button you set:

  • Button text: what the button says, like "Get a free quote" or "See our work."
  • Link: where the button takes the visitor. You can point it to:
    • A web address (URL): any page on the internet, including a phone number or email link.
    • An internal page: one of your own pages, entered as a path (for example, /contact) in the link box, and stored exactly as you type it.
    • A section anchor on the same page: scrolls the visitor to another section further down (this uses the Anchor ID described above).
    • Open a modal: opens a pop-up dialog instead of going anywhere (see the article on pop-ups).
  • Button style: choose Solid (filled with color, for maximum emphasis) or Outline (just a bordered outline, for a lighter look).
  • Icon: optionally add a small icon, such as an arrow, to draw the eye toward the action.
  • Reassurance line: a small line of text beneath the buttons for a bit of comfort, like "No credit card required" or "Free, no-obligation estimate."

Stats belt

Some sections offer a stats belt: a slim strip of up to four value-and-label pairs that acts as quick social proof. Each pair is a big number or short value with a small caption under it, for example "500+ projects completed," "20 years in business," or "4.9★ average rating." It's a compact, credible way to reinforce your message without adding a whole separate section. Fill in only the pairs you want; leave the rest blank and they won't show.

Was this helpful?