2 cols
The Page Builder Slideshow element is designed to display one or more rotating banners.
It can be used for important announcements, call to action or just a more imposing introduction to a section of the site.
Each banner can have a background image or video and some text displayed over this background.
Each slide can be configured to link to a different Url.
Bullet Navigation
Text in the Bottom left
This text is set to display without shadow, in a 450px width box and 30px padding. The effect selected was the Fade in Bottom.
Text across the full width, aligned center bottom, with a Fade In Effect.
Text background with a vertical gradient in grey and 70%-100% opacity.
Text in Column
Content including image, 70% opacity, vertical 300px column on the right.
Fade in Right effect.
Thumbnail Navigation
Text in the Bottom left
This text is set to display without shadow, in a 450px width box and 30px padding. The effect selected was the Fade in Bottom.
Text across the full width, aligned center bottom, with a Fade In Effect.
Text background with a vertical gradient in grey and 70%-100% opacity.
Text in Column
Content including image, 70% opacity, vertical 300px column on the right.
Fade in Right effect.
No Navigation - Full Width
Text in the Bottom left
This text is set to display without shadow, in a 450px width box and 30px padding. The effect selected was the Fade in Bottom.
Text across the full width, aligned center bottom, with a Fade In Effect.
Text background with a vertical gradient in grey and 70%-100% opacity.
Text in Column
Content including image, 70% opacity, vertical 300px column on the right.
Fade in Right effect.
Configurations
Component Configuration:
- Title
- If the title should be displayed before the slideshow
- An introduction text before the slideshow
- Navigation of the slides by bullets, bullets under the slideshow or thumbnails
- The minimum height of the slides
- Force full width, to make the slides expand to the width of the screen instead of being limited to the width of the page
- A color for the elements of the slideshow
- The width of the element, allowing the slideshow to occupy only a percentage of the width of the page
- The position of the slideshow (inline, top of the content, bottom of the content, etc.)
- Container Settings
Container Settings
Container settings allows the configuration of the container housing the component. It allows the following settings:
- Padding (in px): top, right, bottom, left. Defaults to 0px for all.
- Margins (in px): top, right, bottom, left. Defaults to 32px in the bottom.
Slide Configuration:
- The background color, image or video
- Background gradient, overlay and opacity
- Url
- The text on top:
- The width and position of the text
- Background color, opacity, gradient
- Effect on text display (Fade in from top, bottom, left, right; Zoom in)
- Text shadow
- Margin and Padding
- Type (horizontal full, vertical full or boxed)
- Alignment (horizontal and vertical)