Showcase Element

The Showcase Element presents a series of slides, each of which can hold any Builder content: text, buttons, images, even containers and columns. It is meant for storytelling sections such as company values, a product tour or a history timeline, where each slide is a small page of its own.

Five templates give the same slides a very different look: a clean slider with a divider line, a feature image with a label list, a full background with a vertical tab list, a full-screen timeline that advances as the visitor scrolls, and centered content over a full background.

In this article: How To Use · Element Options · Showcase Slide Options · Tips · Related Elements · Example

Add the Showcase Element and create your slides with the Add Slide button. Give each slide a Slide Label (used in the editor and read out by screen readers on the pagination), fill the Slide Content with elements, and add a Nav Label and Feature Image where your template uses them. Then choose the Template; it applies to the whole showcase.

Each template has its own options on the General tab. Templates 2 and 3 show a static Title and a navigation list styled with Nav List Style; Templates 3 and 5 let you set Content Width and Background Width independently; Template 4 has timeline colors, a Background Overlay Type for legible text and an optional Show Scroll-Down Cue. Viewport Height sets the height to the tallest slide, a fixed value or an aspect ratio.

The Motion tab controls how slides change: separate Transition In (Incoming Slide) and Transition Out (Outgoing Slide) effects, their speed, and Autoplay with an optional pause on hover. The Pagination, Arrows, Layout and Divider tabs style the controls. Each option says which templates use it; options for other templates have no visible effect.

The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.

Each slide has a label for the editor and screen readers, its own Builder content, and an optional nav label and feature image for the templates with a navigation list or a background image. Template 1 uses neither.

• Template 4 is driven by scrolling: each slide is a full-screen section and the side timeline follows the scroll position. Autoplay and swipe do not apply to it.
• On touch screens, visitors can swipe between slides in every template except Template 4.
• Autoplay moves content away while people read. If you use it, keep Pause Autoplay On Hover on and give each slide enough time with Autoplay Speed (ms).
• Write a meaningful Slide Label for every slide even though it is never shown: it is the name screen readers announce for each pagination button.
• When you leave the Nav Label empty, the navigation list and the Template 4 timeline show the Slide Label instead.
• Use Show Scroll-Down Cue when the full-screen timeline is not the whole page. The cue scrolls to the content after the showcase, not to the next slide.

• Tirenoa Slider Element – a slider with its own managed slides
• Tabs Element – content switched by labeled tabs
• Image Carousel Element – a row of images that slides sideways
• Container Element – the building block used inside slide content