Skip to main content
Most sections share a few tabs that work the same way everywhere: Background, Fonts, Button (or Buttons) and CSS. Sections with cards also share one set of card styles. Learn them once here, and you know them in every section. Who can do this: anyone who can edit the page. The CSS tab is for Admins and Owners.
The Testimonials section editor open beside the page, with its tab list ringed and the shared tabs (Background, Fonts, Button, CSS) badged 1–4.The Testimonials section editor open beside the page, with its tab list ringed and the shared tabs (Background, Fonts, Button, CSS) badged 1–4.

A section's own tabs come first. The shared ones follow.

The idea

Most sections open on a tab named after the section, such as Hero or Stats, for their content and layout. Some spread that content over several tabs instead. Team, FAQ, Testimonials, Google Reviews, Instagram Feed, Service Area Map and the gallery sections start with a Header tab, then a tab for their content, such as Team or Questions. The shared tabs come after the section’s own tabs. They look and behave the same in a Hero, a FAQ or a Pricing section. Everything here is optional. Leave a shared tab alone, and the section follows the rest of your site.
  • Colors come from Site design.
  • Fonts come from the page first, then the site. A section’s own Fonts tab wins. Without one, the section uses the page’s Fonts tab, if that’s set. Without either, it uses Site design → Typography.

Lists of items

Many sections hold a list, such as the cards in Feature Cards, the numbers in Stats or the logos in Logos / Partners. Each list works the same way.
  1. In the section editor, find the list, such as Feature cards, and choose its Edit button, such as Edit Feature cards. The list opens in its own window.
  2. To add an item, choose the + button (Add Item) at the top of the list, then fill in its settings.
  3. To change an item, choose it in the list, then edit its settings.
  4. To reorder items, drag them up or down the list.
  5. To remove an item, choose the ✕ (Remove Item) beside it in the list.
  6. Choose Save. The page beside the editor updates.

Colors for light and dark

Your site has a light and a dark theme, and visitors can switch between them. So most color options come in pairs, such as Section background (dark theme) and Section background (light theme).
  • Set the dark one only, and it’s used in both themes.
  • Set the light one too, to use a different color in the light theme.
  • Leave both empty, and the section uses your site’s colors from Site design (the Colors · Brand, Colors · UI and Colors · Status tabs).

Background

The Background tab gives a section its own full-width color band. Bands make a long page easier to read, because each section stands apart from the next.
  • Section background (dark theme): the band in the dark theme. Choose Transparent (page background) to let the page show through, or one of your site’s colors:
    • Surface: your page background color.
    • Raised (card): your card color, a little lighter than the page in the dark theme.
    • Sunken: your band color, a little darker than the page.
    • Hill: a built-in neutral shade between the page and the band colors. You can’t change it in Site design.
    • Accent (soft tint): a pale wash of your Primary / brand color.
    You set the first three on Site design → Colors · UI, and the brand color on Colors · Brand.
  • Section background (light theme): Match dark theme uses the same choice, or pick a different one.
  • Custom color…: for an exact color. It opens Custom background (dark theme) or Custom background (light theme), where you pick the color.
The site colors follow your palette and switch with the theme. A custom color stays the same until you change it. New sections start on Transparent (page background). The Page Header starts on Sunken.
3 stacked sections on Parker's page: Intro / Trust on Transparent, Feature Cards on Sunken, Testimonials on Accent (soft tint), so each reads as its own band.3 stacked sections on Parker's page: Intro / Trust on Transparent, Feature Cards on Sunken, Testimonials on Accent (soft tint), so each reads as its own band.

Alternate the bands so each section stands apart.

The Hero and the Final CTA have no Background tab. They have richer backgrounds of their own, on their first tab.

Fonts

The Fonts tab sets part of one section in a different font. (The CMS calls a font a “typeface”.) For example, give one section’s headings a playful display font, a bold font made for big headings. Use it sparingly: a site looks best with few fonts. When the list is empty, it reads “No overrides — this follows the site’s fonts”. Choose Add typeface to add a row and change a font. Each row has:
  • Apply to: which text changes: Everything in this section, Headings, Body text, Eyebrows / kickers, Buttons or Code / monospace.
  • Typeface: where the font comes from.
    • One of the site’s three typefaces: pick the Display font, Body font or Accent / mono font from Site design → Typography. These are already loaded, so they keep pages fast.
    • Curated pick: a ready-checked typeface from Bunny Fonts or Fontshare.
    • CDN family by name: load any font from an online font library.
      1. Choose the Provider: Bunny Fonts (Google Fonts catalog) or Fontshare.
      2. Use the link under it to browse the library (fonts.bunny.net or fontshare.com).
      3. Type the font’s name in Family name exactly as the library spells it, such as “Space Grotesk”.
      4. In Weights, list the weights you want, such as 400, 700. A weight is how bold the letters are, from 100 (thin) to 900 (black). 400 is normal and 700 is bold. A font’s page in the library shows the weights it has. Leave Weights empty to load 400, 500 and 700.
    • Uploaded font files: upload your own font files, one per weight or style.
You can add up to 4 rows, and they apply in order. So a first row for Everything in this section and a second for Headings gives the section a base font plus a different heading font. To change fonts for a whole page, use the Fonts tab of the page settings window instead (More Options → Edit in the edit bar). See Typography for the site’s own fonts.
The Fonts tab of a Feature Cards section with one row (Apply to: Headings, Typeface: Curated pick), and the card titles on the page in that typeface.The Fonts tab of a Feature Cards section with one row (Apply to: Headings, Typeface: Curated pick), and the card titles on the page in that typeface.

One row changes the card titles in this section only.

The Form section keeps these options on its Styling tab. They show once you turn on Restyle for this placement.

Buttons

Every button on your site has the same options. A section with one button has a Button tab, and a section with two has a Buttons tab. What it says and where it goes
  • Button label: the text on the button. Leave it empty to hide the button.
  • Button link: a page on your site, such as /contact-us, or a full web address.
  • Open in new tab: opens the link in a new browser tab.
A link button shows only when it has both a label and a link. Sign-up and form buttons have no link: they send the form. How it looks
  • Button style: Solid (filled), Outline, Soft (tinted fill) or Text link.
  • Button size: from Small to Large.
  • Corner radius: how rounded the button’s corners are, from Pill (fully round ends) to Square.
  • Button color, Label color and Hover color: each comes as a dark and a light theme pair. These three are the exception to the rule above: an empty button color means no color, not your site’s color. So clear a solid button’s Button color, and you get an outline-only button.
On hover
  • Hover surface: what appears behind the button, such as Soft shadow, Soft glow or Fill sweep.
  • Hover motion: Lift (small slide up), Scale (grow), Lift + scale or None.
Icon
  • Icon name and Icon family: add an icon to the button. Find an icon at fontawesome.com/icons and type its name without “fa-”, such as arrow-right. Then pick its look in Icon family, such as Classic Regular. Feature Cards, Stats and How it works / Steps use the same two fields for their icons.
  • Icon position: Before label or After label. Turn on Nudge icon on hover to slide it a little on hover.
The Page Header’s Buttons tab also has a Live preview, with a Dark and Light switch. Under each button, Primary Default and Secondary Default reset its look to one of your site’s two standard buttons. Your label, link and icon stay as they are. Other sections don’t need a preview: the page updates beside the editor. For every option in detail, see Buttons and card styles.

Card styles

Sections that show cards, such as Feature Cards, Testimonials or Pricing / Packages, share 2 options for the cards. Card style sets how each card looks at rest. In How it works / Steps it’s called Step style. There are 12 styles: Beside it, Card corners sets the rounding: Default, Square, Slight, Rounded or Large. Default keeps the section’s own corners (Forge gets tight corners). Some styles bring extra options:
  • Card style color: the color of the Spine rail, the Bracket marks, the Forge frame and the Press margin line. Leave it empty to use your accent color.
  • Forge color placement and Forge line weight: for Forge only. Color just a corner mark or the whole frame, in a fine, medium or bold line.
A few sections leave out styles that don’t fit their cards. Team, for example, has no Forge or Press. Hover effect sets what a card does when a visitor points at it. The blog sections, Feature Cards and Pricing / Packages call it Card hover effect. Feature Cards and Pricing / Packages also have their own choices. The shared choices are:
  • Lift, Pop, Press, Glow and Outline: quick reactions such as rising or glowing.
  • Sheen: a soft light sweeps across the card.
  • Tilt, Magnetic and Spotlight: the card follows the visitor’s pointer. These need animations turned on in Site design → Motion.
The same row of 3 Feature Cards shown 4 times, in Raised, Luxe, Forge and Press.The same row of 3 Feature Cards shown 4 times, in Raised, Luxe, Forge and Press.

One set of cards in four card styles.

CSS

The CSS tab is an optional, advanced feature. CSS is the styling language web pages use, so this tab is for small touches the other options don’t cover. Admins and Owners can use it. Everyone else sees “Custom CSS needs the “Write custom CSS” permission. Saving keeps the CSS as it is.” The tab holds one Custom CSS field. In it, each part of the section has its own slot, such as its heading, its cards or its buttons. Type CSS into the slot of the part you want to change, and it styles that part of this one section only.
  • Point at a slot to outline its part on the page.
  • Open Currently applied in a slot to see what already styles that part.
  • CSS with mistakes isn’t saved. The CMS lists each problem and how to fix it.
A section’s CSS wins over Site design → Custom CSS, which styles every section of a type at once. Rich Text and Layout have no editor window, so they have a Custom CSS button in their side toolbar instead. For slots, examples and every message, see Custom CSS.

Which sections have what

Every section in the list also has a CSS tab.

A short example

Parker’s Puppy Playland wants its home page to feel less like one long block.
  1. Jordan opens the Feature Cards section’s Background tab and sets Section background (dark theme) to Sunken. The light theme follows, because it’s on Match dark theme.
  2. On the Testimonials section, Jordan picks Accent (soft tint), so the reviews get a soft band of the brand color.
  3. On the Fonts tab of Feature Cards, Jordan adds a row: Apply to Headings, Typeface One of the site’s three typefaces, Site typeface Accent / mono font. The card titles change, and nothing else on the site does.
  4. Jordan publishes the page.
The sections now alternate, and every color still follows the site’s palette in both themes.

Buttons and card styles

every button and card option in depth.

Typography

choose your site’s three typefaces.

Colors

the palette every section draws from.

Custom CSS

slots, examples and messages.