Overview
In this guide, you will learn everything you need to know about the carousel highlight 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
Setting Tabs
The highlight settings are divided into tabs to make it easier to use.
- Common
- Highlighted
- Non-Highlighted
Common
The Common tab has any shared settings that affect the overall highlight feature in general. This includes any settings that affect both the highlighted and non-highlighted modules.
Highlighted
The Highlighted tab has any setting related to the module that is used to show a special emphasis. This includes things like blur, opacity, scale, and box shadows.
Non-Highlighted
The Non-Highlighted tab has any setting related to the modules that are not highlighted. This includes the same settings as the highlighted, but by default these are set to de-emphasize the modules.
Highlight Center Module
The highlight center module feature allows you to place an emphasis on the center module. This can be done by customizing the non-centered modules with several effects like opacity, blur, and size.
To highlight the center module and adjust the settings, you first need to enable the option. To do this, open up the Highlight Settings toggle and in the common tab enable the setting toggle called Highlight Center Module.Â
Non-Highlighted 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.
Non-Highlighted 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.
Non-Highlighted 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.
