Buttons, accordions, FAQs with structured data, slideshows, tab switchers, reviews, panels, overlays, and trigger-based popups.
Loading the guide...
Did this answer your question?
Help us make the guides more useful.
0 helpful · 0 not helpful
Buttons, accordions, FAQs with structured data, slideshows, tab switchers, reviews, panels, overlays, and trigger-based popups.
Loading the guide...
Help us make the guides more useful.
0 helpful · 0 not helpful
These elements add interaction and structure: Button, Accordion, FAQ, Slideshow, Switcher, Reviews, Panel, Overlay, Before / After Slider, and Popup. Most are containers - the parent holds the shared settings, and each child item carries its own content.
A Button element is a container for one or more Button Item children, so a "Get a Quote / Call Us" pair is one element with two items.
| Field | Options |
|---|---|
| Size | Default, Small, Large (applies to all items) |
| Full width button | checkbox |
| Column Gap / Row Gap | Default, Small, Medium, Large, Collapse |
| Field | Options |
|---|---|
| Content | The label text |
| Icon | Optional icon, aligned Left or Right |
| Link | Destination - external URL or an internal page picked from your pages list |
| Style | Inherit, Default, Primary, Secondary, Outline, Danger, Text, Link |
Primary is your main call-to-action style and comes from the brand colors in Site Settings. Internal links use the page picker, which keeps working even if the target page's slug changes later.
Collapsible panes for content that benefits from progressive disclosure. Each Accordion Item carries its own title, content, and (when enabled on the container) icon, image, meta text, and link.
Container settings include display toggles (Show image, Show title, Show meta text, Show link), behavior (Allow multiple open items, Collapsible), pane animation with duration, content padding, a Title Size on the standard X-Small through X-Large scale, a Marker (Chevron or Plus / minus), Item Padding for row density, and a Divider setting (a rule under every item, only between items, or none).
Use an Accordion for general collapsible content. For questions and answers, use the FAQ element instead - it emits structured data.
The FAQ element renders question-and-answer pairs and emits FAQ structured data (schema.org FAQPage markup) so search engines understand the content. Each FAQ Item is one question and its answer.
| Field | Options |
|---|---|
| Heading | Optional heading above the list |
| Style | Accordion (collapsible) or List (all visible) |
| Heading Element | h2, h3, h4, div |
Write real questions people ask, phrased the way they search. One FAQ element per topic area is plenty.
A rotating display of Slideshow Item children - each slide has its own title, content, media, and link, gated by the container's display toggles.
Each slide carries its own Alt text field in the Content tab, beside the image picker. Fill it in: it is what screen readers announce and what search engines read for each slide image.
Key container settings:
| Field | Options |
|---|---|
| Slide layout | Cover (image fills the frame) or Card (contained) |
| Card image size / shape | Small through Extra large; Circle, Rounded, Square |
| Corner Radius | Rounds the slide images - Default, None, Small through the larger steps |
| Transition | Slide animation options |
| Slides Per View | Separate counts for desktop and mobile, plus a Full Width (edge-to-edge) option |
| Autoplay, ratio, navigation | Shared across all slides |
The Card layout with a circle image is the classic testimonial carousel.
A tabbed content switcher: one list of items rendered as tab navigation plus swappable content panes.
| Field | Options |
|---|---|
| Navigation Style | Tabs, Subnav Pill, Nav Default, Nav Primary |
| Position | Top, Bottom, Left, Right; a left or right nav stacks responsively on phones |
| Alignment | Left, Center, Right, Justify |
| Item Max Width | None, Small through 2X-Large |
| Navigation label / thumbnail | Show a separate nav label or nav image on the tab instead of the pane's own title or image |
Each item is one tab plus its pane: a Title with its own heading-size Title Style, Meta Text rendered above the title, an optional Icon on the tab, an Image with alt text and a Top or Left position, rich-text Content, and an optional Link rendered as a button below the content.
Use a Switcher when visitors need to compare a small number of parallel options (service tiers, locations, audiences).
A container of review items with schema.org Review markup per item, so ratings can surface in search results.
| Field | Options |
|---|---|
| Heading | Optional |
| Aggregate Label | The summary line above the reviews |
| Show rating / date / author / review text | checkboxes |
| Display | Grid, Carousel, or List |
| Shown at once | 1 to 4 - columns in the grid, slides in view in the carousel; phones always show one |
| Auto-slide | Carousel only: Off (default), or every 3, 5, 7, or 10 seconds |
Reviews Source: Connected. With review platforms connected on the location (in Locations, edit the location), set the element's source to Connected and it renders the location's real reviews from an auto-updating widget. Scope it to this page's location (it follows the page and section binding) or to all locations, choose grid, carousel, or list, cap the review count, and show the aggregate header bar with platform tabs and a Write a review link. After the next deploy puts the widget on the live site, new reviews appear on their own without another deploy. Setup and honesty rules: Auto-Updating Review Widgets.
Only publish genuine reviews with real attribution. Fabricated review markup can earn a manual penalty from search engines.
A boxed content panel: optional title, rich-text body, image, and link, with a Style select for the card treatment. It is the simple "one box of content" element - reach for a Grid when you need several matching panels in a row.
An image with text positioned on top of it - title, meta, content, and link over a photo or video, with positioning and hover-transition controls, and an option to fill the available column space. Use it for image tiles that need a caption or a hover reveal.
Two images stacked in one frame, with a divider the visitor drags to wipe between them - a natural fit for renovation, landscaping, and cleaning results.
| Field | Options |
|---|---|
| Before Image / After Image | Each with its own alt text |
| Before Label / After Label | Optional captions for each side |
| Wipe Direction | Horizontal wipe or Vertical wipe |
| Start Position (%) | Where the divider starts (50 by default) |
A modal that stays hidden until a trigger fires.
Heading, Body text, and a call-to-action (Button text + Button link).
| Field | Options |
|---|---|
| Trigger | On page load, After a delay, On scroll depth, Exit intent |
| Delay (seconds) | For the delay trigger |
| Scroll depth (%) | For the scroll trigger |
| Position | Center, Top, Bottom, Bottom-right corner |
| Show close button | checkbox |
| Show once per session | checkbox - strongly recommended |
| Max width, colors | Background, text, button, and button-text colors, overlay opacity |
Keep Show once per session on and use one popup per page at most. An exit-intent offer converts; a load-triggered popup on every page annoys.
| Element | Structured data | Typical use |
|---|---|---|
| Button | - | Calls to action |
| Accordion | - | Collapsible content |
| FAQ | FAQPage | Questions and answers |
| Slideshow | - | Hero rotators, testimonial carousels |
| Switcher | - | Tabbed comparisons |
| Reviews | Review | Testimonials with ratings |
| Panel | - | Single content box |
| Overlay | - | Captioned image tiles |
| Before / After Slider | - | Job-result comparisons |
| Popup | - | Triggered offers |
As always: these render on the live site only after the next manual Deploy.