NOTE: The details on this page are being updated for version 1.4, which is coming soon! Some settings may be shown which are not available yet.
Overview
In this guide, you will learn everything you need to know about the carousel design settings and how they work. You can make the center module in the carousel stand out from the others to draw attention and focus. When this option is enabled, additional design settings will appear to adjust the size, opacity, and blur of the other modules. The highlight settings can all be found in with the other carousel settings in Row settings>Column settings>Carousel tab in the Highlight Settings toggle. You should also check out the highlight settings demo to get some inspiration, or download our free layouts in the demo site to give you a quick start!
View Live Demo
View Settings List
Design Setting Tabs
The design settings are divided into tabs to make it easier to use.
- Common
- Default
- Highlighted
Common
The Common tab has any shared design settings that affect all the modules in the carousel. This includes the option to highlight a module, make the modules equal height, and adjust the spacing, borders, and box shadows.Â
Highlighted Module
This feature allows you to place an emphasis on the left, center, or right module in the carousel. This can be done by customizing the highlighted and default modules with various design settings such as spacing, opacity, blur, size, borders, and box shadows.
To highlight a module and turn on the Default and Highlighted design settings, you first need to choose either Left, Center, or Right from the dropdown menu (the default is None).
Module Spacing
Adjust the spacing around the outside of each of the carousel modules. This affects the spacing of each “slide” within the carousel. The default value is set to 10px, but can be adjusted to anything.
Background Color
This color picker is used to set the background color of the “slides” within the carousel. This essentially replaces the background color of the modules within the carousel, so be sure to adjust the background colors to transparent in the actual modules when using this setting.
Default
The Default tab has any setting related to the modules that are not highlighted. This includes things like spacing, blur, opacity, scale, borders, and box shadows. These will affect all modules that are not highlighted.
Default Module Opacity
The first setting allows you to adjust is the opacity filter of the non-highlighted modules. This setting decreases the opacity of the other modules which are not in center, which means the highlighted center module will be fully visibility and draw more focused attention. By default, the value of opacity is set to 100% which makes the modules completely visible, so you will need to manually adjust this as desired. The opacity effect has a range is 0% to 100% with 1% increments.
Default Module Blur
The second setting allows you to add a blur effect to the non-highlighted modules. This setting blurs out the other modules which are not in center, which means the highlighted center module will be clear and draw more focused attention. By default, the value of opacity is set to 0px which makes the modules completely clear, so you will need to manually adjust this as desired. The blur effect has a range of 0px to 5px with 1px increments.
Default Module Size
The third setting allows you to change the size of the non-highlighted modules. This setting decreases the size of the other module which are not in the center, which means the center module will be full size and appear bigger than the others to draw more focused attention. By default, the value of this property is set to 1 which makes the size of the highlighted and non-highlighted modules the same, so you will need to manually adjust this as desired. The size effect has a range of 0 to 1 with .1 increments.
Highlighted
The Highlighted tab has any setting related to the module that is selected as the Highlighted Module setting, either left, center, or right. It is used to show a special emphasis. This includes things like spacing, blur, opacity, scale, borders, and box shadows.