Carousels are a great tool for displaying a lot of information in a creative and engaging way. With the DiviFlash Advanced Carousel Module, you can take your creativity up a notch.
In this article, we will go through all the settings the Advanced Carousel Module has to offer.
Adding a Single Item to the Carousel
Once you open the Carousel module, you will see the Advanced Carousel Settings window. To add a single carousel item, click on the (+) button.
Customizing a Single Carousel Item
Upon clicking the plus button you will be taken to the Advanced Carousel Item Settings window, where you can customize the carousel item you just added.
The Advanced Carousel Item Settings have three tabs: Content, Design, and Advanced.
Advanced Carousel Item Settings – Content
In the content tab, you can define and edit the content of the carousel item.
Content
Expand the content section to input different contents of your carousel item.
- Title: Define the title of the carousel item.
- Subtitle: Define the subtitle of the carousel item.
- Body: A text editor to input the body content of the item.
Image
Expand the image section to add the image of the carousel item.
- Image Alt Text: Input the alt text of the carousel image.
- Use Icon: A toggle button to enable the use of an icon instead of an image. Once enabled, the following options will appear-
- Icon: Choose an icon of your choice from Divi’s default collection.
- Icon Color: Configure the icon’s color.
- Icon Size: Select the icon’s size.
- Icon Align: Adjust the icon’s placement.
- Icon Background: Set the icon’s background color.
- Circle Icon: Toggle this option on to choose a circle background instead of a square for the icon.
Button
Put in the content and the URL of the carousel item button.
- Button Text: Input the button text.
- Button URL: Input the URL for the button.
- URL Opens: Choose if the link will open in the new tab or not.
Item Order
Set the order of each component of the carousel item. For example, there are 5 components in the carousel item. You can assign each component a number and they will appear in that order.
For example, the title order is set as 1, the subtitle as 2, and so on; which is reflected in the carousel item.
Link
Link this carousel item to a URL.
Background
Customize the background of the item.
Advanced Carousel Item Settings – Design
In the design tab, you can edit the look of the carousel item.
Note: Remember, you can only make changes to a single carousel item from here. If you want to edit the entire carousel, go to Advanced Carousel Settings.
Image
- Image Alignment: Select the placement of the image.
- Force Full Width: Toggle this option on to make the image full-screen.
- Max Width: Limit the maximum width of the image.
Note: If you enable the Force Full Width option, Image Alignment and Max Width will be disabled.
Title
- Title Tag: Choose the HTML tag for the title from the dropdown.
- Background: Pick the background of the title text. Three options are available: Color, Gradient, and Image.
- Title Font: Specify the font of the title text from a range of options.
- Title Font Weight: Decide the thickness of the font.
- Font Style: Choose the style of the title font. If you choose to underline or strikethrough your title, you can also pick the color and style of the underline and just the color of the strikethrough.
- Title Text Alignment: Set the placement of the title text.
- Title Text Color: Change the color of the text.
- Title Text Size: Determine the size of the text.
- Title Letter Spacing: Set the gap between the letters of the title.
- Title Line Height: Set the distance between each line of title text.
Subtitle
The subtitle section has the same settings as the title section, but the changes you make will be applied to the subtitle.
Content
The content section is for the body of text in the carousel item. The settings are the same as in the title section.
Button
- Alignment: Choose the horizontal orientation of the button.
- Button Background: Choose a background style for the button from solid colors, gradients, or an image.
- Button Wrapper Margin: Define the wrapper margin of the button.
- Button Wrapper Padding: Define the wrapper padding of the button.
- Button Margin: Define the margin for the button.
- Button Padding: Define the padding for the button.
- Button Font: Choose the font for the button text.
- Button Font Style: Choose the font style of the button text. If you choose to underline and strikethrough the button text, you can also specify the color and style of the underline and just the color of the strikethrough.
- Button Text Alignment: Choose how you want the button text to be placed.
- Button Text Color: Choose the color of the button text.
- Button Text Size: Customize the size of the button text.
- Button Letter Spacing: Customize the gap between the letters of the button text.
- Button Line Height: Determine the gap between each line of the button text.
- Rounded Corners: Modify the sharpness of the button corners.
- Border Styles: Modify the button’s border’s width, color, and style. You can edit all of them together or individually.
- Box Shadow: Choose if you want a box shadow for your button; you can choose from 8 different styles. Depending on your choice, you can customize the shadow’s position, color, etc.
Custom Spacing
Customize the spacing of each component of the carousel item.
- Wrapper: Customize the padding and margin of the wrapper for both the item and the image individually.
- Content: Customize the padding and margin of each component of the carousel item separately.
Sizing
Edit the height, width, and placement of the carousel item.
Border
Modify the sharpness of the carousel item’s corners as well as the width, color, and style of the item’s border.
Box-Shadow
Apply a box shadow to the carousel item.
Filter
Add different color filters to the item.
Transform
Change the item’s size, position, orientation, angle, and origin.
Advanced Carousel Item Settings – Advanced
The advanced tab is a default tab for all modules of Divi. It contains the option to add custom CSS code, conditions, scroll effects, transitions, etc.
Adding More Items to the Carousel
Once you are done customizing the single item, click on the back icon of the Advanced Carousel Item Settings window.
This will take you back to the Advanced Carousel Settings window, where you can see the plus (+) icon to add another item. You can click on the plus icon to add more items to the carousel or use the duplicate icon to make a copy of the current item.
Customizing the Whole Carousel
From the Advanced Carousel Settings window, you can make changes to the whole carousel instead of just an item.
The Advanced Carousel Settings also have three tabs: Content, Design, and Advanced.
Advanced Carousel Settings – Content
From this window, you can modify the content and arrangements of the entire carousel.
Carousel Setting
- Carousel Type: Choose if you want your carousel to be a slide or a coverflow.
- Max Slide Desktop: Choose the maximum number of slides you want to display at once on desktops.
- Max Slide Tablet: Choose the maximum number of slides you want to display at once on tablets.
- Max Slide Mobile: Choose the maximum number of slides you want to display at once on mobile phones.
- Spacing: Change the spacing between each slide.
- Speed: Adjust how fast the carousel items will slide.
- Centered Slides: Toggle this option to start the slides from the center.
- Loop: Toggle on to create a loop with the items.
- Autoplay: Turn this option on to automatically start the slideshow and also determine the delay in autoplay.
- Pause on Hover: Enable to pause the autoplay when hovered over.
- Arrow Navigation: Enable the use of arrows as navigation.
- Dot Navigation: Enable the use of dots as navigation.
- Equal Height Item: Enable to ensure that each item has the same height regardless of the length of the content.
- Use Lightbox: Make your carousel images appear as in a lightbox when you click them. You can also show the carousel title along with the image in Lightbox.
Advanced Settings
If you choose the coverflow as the carousel type, this section will appear where you can customize the coverflow carousel.
- Enables Slides Shadows: Adds a shadow effect to the carousel items. It’s also possible for you to pick two colors as the shadow.
- Slide Rotate in Degrees: Adjust the angle of the carousel items.
- Stretch Space Between the Slides: Adjust the gap between the slides.
- Depth Offset: Adjust the depth of the carousel items.
- Effect Multiplier: Determines how many times the carousel items will slide or rotate.
Item Order
Choose the item order of the whole carousel. Just like in the Advanced Carousel Item Settings, you can define the order of the carousel components but it will affect the order of the whole carousel.
Background
Add a background to all the carousel items.
Divi Content Carousel Module Design Tab
These options let you change the look and the style of all the carousel items.
Title, Subtitle & Content
The same options as the title in Advanced Carousel Item Settings.
Button
The same options as the button in Advanced Carousel Item Settings.
Arrows
If you turn on the arrow navigation from Carousel Settings, you can customize the navigational arrows here.
- Arrow Icon Color: Change the color of the arrows.
- Arrow Background: Change the background color of the arrows. You can use two colors, one by default and another on hover.
- Arrow Position: Change the position of the navigation arrows.
- Arrow Alignment: Change the placement of the navigation arrows.
- Opacity: Adjust how transparent you want the arrow background to be.
- Circle Arrow: Make the arrow background circle or square.
- Arrow Prev Icon: Turn on to use a custom icon and size for the “prev” button.
- Arrow Next Icon: Turn on to use a custom icon and size for the “next” button.
- Arrow Margin and Padding: Customize the previous and next arrow button’s margin and padding separately.
Dots
If you turned the dot navigation on in the Carousel Settings you can customize the navigational dots here.
- Alignment: Change the placement of the dots.
- Large Active Dot: Toggle this option to use a large dot to indicate the active carousel item.
- Dots Color: Define the color of all the dots.
- Active Dots Color: Use a different color to indicate the active carousel dot.
Custom Spacing
Create custom spacings between the carousel items and each of the components of the carousel items.
- Wrapper: Customize the padding and margin of the wrapper for the entire carousel, the item, and the image individually.
- Content: Customize the padding and margin of each component of all the carousel items separately.
Sizing
The same options as the sizing in Advanced Carousel Item Settings.
Spacing
Divi’s default spacing option is to set the margin and padding of the whole carousel.
Border
The same options as the border in Advanced Carousel Item Settings.
Box-shadow
The same options as the box shadow in Advanced Carousel Item Settings.
Animation
Use an animation effect on the carousel from 8 different animation effects.
Advanced Carousel Settings – Advanced
A default Divi tab for adding custom CSS codes, scroll effects, and more.
