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 slide in the carousel and design the default and highlighted slides 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 slides. 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.
- General
- Default
- Highlighted
General
The General tab has any shared design settings that affect all the slides in the carousel. This includes the option to highlight a slide, make the slides equal height, and adjust the spacing, borders, and box shadows.
Highlighted Slide
This feature allows you to place an emphasis on the left, center, or right slide in the carousel. This can be done by customizing the highlighted and default slide with various design settings such as spacing, colors, background color, opacity, blur, size, borders, and box shadows.
To highlight a slide, first select Left, Center, or Right (the default is None). This will activate the Default and Highlighted tabs for adjusting the design settings.
Equalize Slide Height
This feature allows you to make all the slides in your carousel appear at the same height, even if the content inside each slide 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 slides by default, or if the highlighted slide setting is used, it will affect the slides that are not highlighted. This includes settings for spacing, background color, opacity, blur, size, borders, and box shadows. These will affect all slides that are not highlighted. If you are not using any highlighted slide, this Default tab will affect all slides.
Default Slide Spacing
The spacing settings allow you to adjust the margin and padding on each default and non-highlighted slide within the carousel. The Slide Spacing is like margin around the outside of each slide, and the Slide Padding is like padding around the inside of each slide.
Default Slide Background Color
This color picker is used to set the background color of the default and non-highlighted slides within the carousel. You can use this to replace the background color within each of the slides 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 Slide Opacity
This setting only appears if you are using the highlighted slide setting. It allows you to adjust is the opacity filter of the default and non-highlighted slide. This setting decreases the opacity of the slides which are not highlighted, meaning if the center slide 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 Slide Blur
This setting only appears if you are using the highlighted slide setting. It allows you to add a blur effect to the default and non-highlighted slides. This setting adds a blur effect to the slide that are not highlighted, meaning the highlighted slide 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 Slide Size
This setting only appears if you are using the highlighted slide setting. It allows you to change the size of the default and non-highlighted slides. This setting decreases the size of the slides that are not highlighted, meaning the highlighted slide 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 Slide Border Settings
The border settings allow you to add and adjust the border applied to all the default and non-highlighted slides. This includes the normal features like border radius, color, width, and style.
Default Slide Box Shadow Settings
The border settings allow you to add and adjust the box shadow for all the default and non-highlighted slides. 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 slide setting. These settings will only affect the highlighted slide. This includes settings for spacing, background color, opacity, blur, size, borders, and box shadows.
Highlighted Slide Spacing
The highlighted spacing settings allow you to adjust the margin and padding for the highlighted slide within the carousel. The Slide Spacing is like margin around the outside of each slide, and the Slide Padding is like padding around the inside of each slide.
Highlighted Slide Background Color
This color picker is used to set the background color of the highlighted slide within the carousel. You can use this to set a different background color than the other default slides.
Highlighted Slide Opacity
This setting only appears if you are using the highlighted slide setting. It allows you to adjust is the opacity filter of the highlighted slide. The default value has full opacity and is set to 100% and has a range from 0% to 100% with 1% increments.
Highlighted Slide Blur
This setting only appears if you are using the highlighted slide setting. It allows you to add a blur effect to the highlighted slide. This setting can be used to add a blur effect to the slide 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 Slide Size
This setting only appears if you are using the highlighted slide setting. It allows you to change the size of the highlighted slide. This setting decreases the size of the slide 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 slide. This includes the normal features like border radius, color, width, and style.
Highlighted Slide Box Shadow Settings
The box shadow settings allow you to add and adjust the box shadow for the highlighted slide. This includes all the standard box shadow settings like horizontal and vertical position, blur and spread strength, color, and position.
