Overview
In this guide, you will learn everything you need to know about the carousel design settings and how they work. You can also choose to highlight the left, center, or right module in the carousel and design the default and highlighted modules differently to make one stand out from the others. You can adjust all the design settings like spacing, borders, box shadows, background color, opacity, blur, and size for all the modules. The design settings can all be found with the other carousel settings in Row settings>Column settings>Carousel tab in the Design Settings toggle. You should also check out the design 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, colors, background color, opacity, blur, size, borders, and box shadows.
To highlight a module, first select Left, Center, or Right (the default is None). This will activate the Default and Highlighted tabs for adjusting the design settings.
Equalize Module Height
This feature allows you to make all the modules in your carousel appear at the same height, even if the content inside each module is different. To achieve this effect, you will need to set some design settings like border, background color in the carousel. Remember, this is about making the slides in the carousel equal height, not about making the actual module height the same. So even if the modules are different heights, the design settings on the carousel make it appear to be the same.
Default
The Default tab has settings that will affect all the modules by default, or if the highlighted module setting is used, it will affect the modules that are not highlighted. This includes settings for spacing, background color, opacity, blur, size, borders, and box shadows. These will affect all modules that are not highlighted. If you are not using any highlighted module, this Default tab will affect all slides.
Default Module Spacing
The spacing settings allow you to adjust the margin and padding on each default and non-highlighted module within the carousel. The Module Spacing is like margin around the outside of each slide, and the Module Padding is like padding around the inside of each slide.
Default Module Background Color
This color picker is used to set the background color of the default and non-highlighted modules within the carousel. You can use this to replace the background color within each of the modules within the carousel, and instead set it here. You may need to adjust the background colors to transparent in the actual modules when using this setting.
Default Module Opacity
This setting only appears if you are using the highlighted module setting. It allows you to adjust is the opacity filter of the default and non-highlighted modules. This setting decreases the opacity of the modules which are not highlighted, meaning if the center module is highlighted it will not have the opacity effect applied to that one in order to draw more focused attention to it. The default value of opacity is set to 50% and has a range from 0% to 100% with 1% increments.
Default Module Blur
This setting only appears if you are using the highlighted module setting. It allows you to add a blur effect to the default and non-highlighted modules. This setting adds a blur effect to the modules that are not highlighted, meaning the highlighted module will appear clear without any blur to draw more focused attention to it. The default value of blur is set to 1px and has a range from 0px to 5px with 1px increments.
Default Module Size
This setting only appears if you are using the highlighted module setting. It allows you to change the size of the default and non-highlighted modules. This setting decreases the size of the modules that are not highlighted, meaning the highlighted module will be regular size and appear bigger than the others to draw more focused attention to it. The default value of the size is set to 0.9 and has a range of 0 to 1 with .1 increments.
Default Module Border Settings
The border settings allow you to add and adjust the border applied to all the default and non-highlighted modules. This includes the normal features like border radius, color, width, and style.
Default Module Box Shadow Settings
The border settings allow you to add and adjust the box shadow for all the default and non-highlighted modules. This includes all the standard box shadow settings like horizontal and vertical position, blur and spread strength, color, and position.
Highlighted
The Highlighted tab is only used if you are using the highlighted module setting. These settings will only affect the highlighted module. This includes settings for spacing, background color, opacity, blur, size, borders, and box shadows.
Highlighted Module Spacing
The highlighted spacing settings allow you to adjust the margin and padding for the highlighted module within the carousel. The Module Spacing is like margin around the outside of each slide, and the Module Padding is like padding around the inside of each slide.
Highlighted Module Background Color
This color picker is used to set the background color of the highlighted module within the carousel. You can use this to set a different background color than the other default modules.
Highlighted Module Opacity
This setting only appears if you are using the highlighted module setting. It allows you to adjust is the opacity filter of the highlighted module. The default value has full opacity and is set to 100% and has a range from 0% to 100% with 1% increments.
Highlighted Module Blur
This setting only appears if you are using the highlighted module setting. It allows you to add a blur effect to the highlighted module. This setting can be used to add a blur effect to the module that is highlighted. The default value is not blurred and is set at 0px and has a range from 0px to 5px with 1px increments.
Highlighted Module Size
This setting only appears if you are using the highlighted module setting. It allows you to change the size of the highlighted module. This setting decreases the size of the module that is highlighted. The default value is full regular size is set to 1 and has a range of 0 to 1 with .1 increments.
Highlighted Border Settings
The border settings allow you to add and adjust the border applied to the highlighted module. This includes the normal features like border radius, color, width, and style.
Highlighted Module Box Shadow Settings
The box shadow settings allow you to add and adjust the box shadow for the highlighted module. This includes all the standard box shadow settings like horizontal and vertical position, blur and spread strength, color, and position.
