The purpose of a video carousel is to provide a more engaging and informative experience for your audience. But you cannot create one with Divi’s Video Slider module.
You will need a module like Divi Carousel. This one comes with tons of functionalities and customization options to give you complete control over video presentations.
In this guide, you will learn how to create video carousel in Divi with Divi Carousel. To make the process even easier, we have included screenshots for each step.
Our Created Video Carousel Preview
Before diving into the video carousel creation process with Divi Carousel, take a look at the final result:
Required Setup
- Divi theme is installed and activated.
- Divi Carousel is installed and activated.
Step 1: Insert Divi Carousel Module
Start with inserting the Divi Carousel module and here is how to do it:
- Open your desired page/post with the Visual Builder.
- Select a single column from the row inserter.
- Search for the “Divi Carousel” module and add it to your page/post.
Note: Based on your design requirement, make necessary customizations on section and row settings. We are skipping this part and focusing solely on the video carousel creation process.
Step 2: Create Video Carousel Items
After inserting the module, start creating the video carousel items:
- Click on “Add New Item,” then add title, subtitle and carousel content under the main content setting.
- In the Content tab, scroll down and click on “Image Settings.” Then click on “Add Image” to add your carousel’s image. Then make these changes:
- Open As Video Lightbox: Toggle on this option
- Video Popup URL: Paste your video URL
- Next, click on the Design tab and click on “Image Styles” to make the following changes:
- Image Position: Left
- Mobile on Top: Toggle on
- In the Design tab, scroll down and click on “Title Style”. Then change the “Title Font” from default to “DM Sans.”
After the title, click on the Subtitle and Content Style settings, and update the font for both to “DM Sans.”
- Next, in the design tab, click on the “Item Border” setting. Then add “4px” in the “Rounded Corners” box.
Note: Follow the exact same steps to create additional video carousel items. Alternatively, you can copy the first item and then change its content.
Step 3: Configure Carousel Related Settings
Once you have created all the carousel items, it’s time to configure the carousel settings. To do this, navigate to the module’s main settings page, click on “Slider Settings,” and make the following adjustments:
- Show item Desktop: 2
- Show item Tablet: 1
- Loop: Toggle on
- Arrow Navigation: Toggle on
- Dot Navigation: Toggle on
- Dot Alignment: Left alignment
- Large Active Dot: Toggle on
- Equal Height Item: Toggle on
- Keyboard Control: Toggle on
Step 4: Customize the Video Carousel’s Appearance
When carousel configuration is done, you can move on to customizing its appearance. For that, navigate to the Design tab and make the following changes:
- Click on “Overlay” and then make these changes:
- Image Overlay: Toggle on
- Overlay Icon Color: #e02b20
- Icon Size: 55px
- Background Color: rgba(255,255,255,0)
- Use Custom Overlay Icon: Toggle on and choose ‘’YouTube” icon
- In the Design tab, scroll down and click on “Color Settings” and then make these changes:
- Arrow Color: #000000
- Dots Color: #ffffff
- Dots Active Color: #000000
- Again in the Design tab, click on “Custom Spacing” and make these changes:
- Container: Content Container Padding 25px for all sides.
- Content: TItle Margin 16px (top), subtitle padding 30px (bottom)
Final Preview of Our Created Video Carousel
After following and applying steps 1 to 4, here is the final preview of our created video carouse:
Conclusion
By now you must know how to create video carousel in Divi. We have shown the complete process in 5 simple and easy-to-follow steps. For your convenience, we have also included screenshots as well.
Now get the Divi Carousel and create your own video carousel. Besides video, you can also create content, testimonial, teams, and image carousel with the very same module.
If you have any questions regarding this module or carousel creation, feel free to comment. You can also check Divi Carousel’s documentation to understand its functionality.
0 Comments