Highlights
Overview:
The Highlights section features a vertically scrolling slideshow designed to showcase key products, services, or features with rich visual storytelling. Each slide can include a background image, heading, caption, button, and a set of up to six optional feature rows. This section is optimized for full-screen vertical navigation and supports autoplay, pagination, and various layout customizations.
Section Configuration:
Color Scheme
| Setting |
Description |
| Color Scheme |
Applies a predefined color palette to the section background and text. |
Slideshow
| Setting |
Description |
| Show Pagination |
Enables or disables pagination dots to indicate the number of slides. |
| Autoplay |
When enabled, the slides advance automatically without user interaction. |
| Autoplay Interval |
Sets the time delay between slides in milliseconds. |
Blocks Configuration:
Block: Highlight
Each Highlight block represents one slide in the vertical slideshow. Blocks can be reordered, and up to five blocks are supported.
Image & Basic Content
| Setting |
Description |
| Image |
Background image used for the highlight slide. |
| Heading |
Main title displayed on the slide. Supports rich text. |
| Heading Size |
Controls the heading tag used (H1–H6). |
| Heading Weight |
Sets the font weight of the heading text (300–900). |
| Caption |
Optional subtitle or tagline below the heading. |
| Caption Size |
Selects the font size for the caption text. |
| Caption Weight |
Sets the font weight of the caption (300–900). |
| Setting |
Description |
| Button Label |
Text displayed inside the call-to-action button. |
| Button Type |
Choose between primary or secondary button styling. |
| Button URL |
Sets the link destination when the button is clicked. |
| Open in New Tab |
When enabled, opens the button link in a new browser tab. |
Feature Rows
Each Highlight block supports up to six Feature Rows, allowing you to showcase additional supporting points or benefits with a small image and heading.
| Feature |
Image Setting |
Heading Setting |
| One |
Feature One Image |
Feature One Heading |
Feature Styling
| Setting |
Description |
| Feature Heading Size |
Controls the size of all feature headings (h5 or h6). |
| Feature Heading Weight |
Sets the font weight for all feature headings (300–900). |
Block Layout
| Setting |
Description |
| Content Max Size (Desktop) |
Sets the maximum width of the content area in pixels. |
| Container Layout |
Selects between boxed (container) or full-width (container-fluid). |
| Text Alignment (Desktop) |
Sets horizontal alignment of content on desktop (left, center, right). |
| Text Alignment (Mobile) |
Sets horizontal alignment of content on mobile (left, center, right). |