Help Center
Interactive Elements
Buttons, accordions, FAQs with structured data, slideshows, tab switchers, reviews, panels, overlays, and trigger-based popups.
These elements add interaction and structure: Button, Accordion, FAQ, Slideshow, Switcher, Reviews, Panel, Overlay, and Popup. Most are containers - the parent holds the shared settings, and each child item carries its own content.
Button#
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.
Container Settings#
| Field | Options |
|---|---|
| Size | Default, Small, Large (applies to all items) |
| Full width button | checkbox |
| Column Gap / Row Gap | Default, Small, Medium, Large, Collapse |
Per Button Item#
| 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.
Accordion#
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, and a Title Style (Default, Primary, Hero, Divider).
Use an Accordion for general collapsible content. For questions and answers, use the FAQ element instead - it emits structured data.
FAQ#
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.
Slideshow#
A rotating display of Slideshow Item children - each slide has its own title, content, media, and link, gated by the container's display toggles.
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 |
| Transition | Slide animation options |
| Autoplay, ratio, navigation | Shared across all slides |
The Card layout with a circle image is the classic testimonial carousel.
Switcher#
A tabbed content switcher: one list of items rendered as tab navigation plus swappable content panes. Container toggles control what each item shows (title, meta text, content) and whether the tab label uses a separate navigation label or thumbnail. Item Max Width caps pane width (None, Small through 2X-Large).
Use a Switcher when visitors need to compare a small number of parallel options (service tiers, locations, audiences).
Reviews#
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 | checkboxes |
| Display | Grid, Carousel, or List |
| Columns | For the grid display |
Only publish genuine reviews with real attribution. Fabricated review markup can earn a manual penalty from search engines.
Panel#
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.
Overlay#
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.
Popup#
A modal that stays hidden until a trigger fires.
Content#
Heading, Body text, and a call-to-action (Button text + Button link).
Trigger Settings#
| 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.
Summary#
| 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 |
| Popup | - | Triggered offers |
As always: these render on the live site only after the next manual Deploy.