Any Sections Or Rows Can Be Slides!
Divi comes with a slider module and a fullwidth slider section, but as you probably know, they are pretty limited. What if you could design your own slide layouts for a slider in Divi? Well, you can, and this tutorial will show you how to make a slider using any Divi sections or rows that you design as the slides.
This tutorial today is specifically intended for using sections or rows as more of a “slider” than a “carousel.” I am referring to this tutorial as a slider since usually when using an entire section it functions as one slide at a time rather than a carousel of multiple slides showing at one time. If you want to make a carousel using Divi modules, please be sure to check our previous tutorial for instructions.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Prerequisites
Install The Divi Carousel Maker Plugin
In order to make the slider, we need a slider maker. The only way to do this is with a plugin that we created called the Divi Carousel Maker. Basically this plugin creates a carousel from your existing Divi modules, rows, or sections, so it’s pretty unique and clever. If you are not yet a member of our Divi Adventure Club, or have not yet purchased the individual plugin, you will need to do so first in order to complete the tutorial. Take a moment and head on over and purchase or install the Divi Carousel Maker plugin and proceed to the steps below.
1. Understand What This Plugin Does
First, it is important to understand what this plugin does and get familiar with how it works. This plugin is unique in the world of carousels and sliders. Most other WordPress slider plugins would make the content using some kind of special system that is proprietary to them. There is nothing like this for the Divi Builder, so this makes it unique and keeps the building process familiar to you.
The “maker” part of the name Divi Carousel Maker implies that something is different with our plugin. It’s fun thinking outside the box as product creators, and we feel like this solution is innovative and fun to use. Our carousel plugin does not create the slide content, but instead makes your existing Divi builder sections, rows, or modules into a carousel or slider!
What does this mean practically? It means you may want a slider that has a WooCommerce product module featured in it, but also want a button, some text or an image. Now you can do it! Or maybe you want to just move the title and image of your slide around – now you can, using the familiar Divi builder to create your slide.
The key part then is getting the sections or rows to display as slider. That’s where our plugin does the work. First you will need to save each section or row to the Divi Library, and they will be loaded to the slider from there.
2. Make Your Slides Using The Divi Builder
The first main step is to build your slides using the Divi Builder. You can do this either on a random page, or in the Divi Library. The key here is that the section or row will need to untimely be saved to the Divi Library, but you can build it wherever you want.
You can choose to either use a blue section or a green row as the main slide container. It doesn’t really matter, but may depend on what kind of slide design you need to create. You can use any number of columns in the row and add any modules that you want. Set background color, add text, images, buttons, or other modules.
3. Save Each slide To The Divi Library
When you are completely finished adjusting the design of your Divi sections or rows that you are using as slides, the next step is to save each one to the Divi Library.
To do that, hover over the section or row and click on the “down” icon that says “Save Section To Library.”
Give the section a name that will make it easy for you to reference later.
4. Add The Slides To Your Page
Now that you have the slides created and saved to the Divi Library, it’s time to add them to your page or layout. This is where it could be confusing, and that is because of the nature of Divi and our Divi Carousel maker plugin. When we created this feature, the question was how to get the layouts into a carousel. We solved this by created a new custom module called “Carousel Layouts” that is available in your Divi Builder when our plugin is active. It may not make sense yet, but it works, so just follow along and note some important details.
When you open this module settings, you will see it is extremely simple on purpose. It only has one function – to allow you to select which layouts from the Divi Library you want to include in a slider. Any layouts, sections, rows, or modules saved in the Divi Library will appear here as checkboxes which you can select.
Now, here are some very important points to make about how this works:
You can only use one Carousel Layouts module per slider.
Each library layout = one side.
You cannot mix regular modules with this Carousel Layouts module. You can either use all regular modules, or only this module.
The Divi Library layout slides will appear in chronological order according to the date they were created. Because of this, in order to adjust the order of the slides, you may need to go to your Divi Library and use the Quick Edit feature to change the date of each layout so that your slides appear in the order that you prefer.
Since each slide is most likely created to be fullwidth, this means you would want to set the number of slides in the carousel settings to only 1.
5. Enable The Slider
When the Divi Carousel Maker plugin is installed and active, additional settings to create and design a carousel will appear in all the Divi column settings in the Divi Builder. To find these settings, first open the Row settings and then open the Column settings. There you will see a new fourth tab called “Carousel” which is added by our plugin. Inside that Carousel tab, you will see a toggle called “General Settings.” Click to open this toggle, and then you will see the setting called “Make This Column A Carousel.” This setting is turned off by default, so you need to turn it on to enable the carousel. When the setting is enabled, our plugin code takes all the modules that you have added to this column in step 3 and arranges them into a carousel, which you can see when you exit the Visual Builder and view the site on the frontend.
6. Adjust The Slider Settings And Design
After enabling the slider, all the other settings will appear in the Carousel tab. These settings give you complete control over the functionality and design styling of the carousel. The settings are grouped into toggles for easy organization, and can be seen in the list below.
Go ahead and explore the settings and adjust everything as needed. Be sure to save your changes, and when you exit the builder you will see the modules transformed into a working carousel!
Due to the unique nature of this plugin and the limited ability to customize the core Divi Builder, it is not possible to provide a preview of the carousel in the Visual Builder. The carousel settings will take effect when you exit the Visual Builder. If Elegant Themes makes this possible in the future, we will definitely add support. Please refer to our Suggested Workflow Guide for our recommended workaround for this.
General Settings
The general carousel settings allow you to set up and adjust some important features which affect how your carousel works. This includes things like how many modules to show per device, spacing around the carousel and modules, module width, vertical alignment, and cut off mode.
Scroll Settings
These features allow you to control how the carousel moves and functions, and are great for creating the perfect user experience for your visitors viewing the carousel. This includes options like auto scroll, continuous smooth scroll, animation speed, scroll interval timing, infinite scroll, and scroll direction.
Navigation Buttons Settings
You can control the carousel scrolling with several navigation button options. Choose to show arrows only, text only, or text and arrows. You can use any icon and even customize the button text. All the typical design settings are included like color, background, font and text settings, borders, box shadow, alignment, location options, and vertical and horizontal position settings.
Navigation Controls Settings
You can also control the carousel navigation with dots, numbers, or images. These navigation controls can be fully customized with all the standard design settings like width, height, borders, spacing, alignment, box shadows, font and text settings, etc.
Slide Counter Settings
The slide counter is a way to indicate which slide the user is currently viewing, and also how many total slides there are in the carousel. Each of the numbers and separator can be styled with full design settings.
Design Settings
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.
Hover Settings
There are eleven different hover effects to choose from such as grow, shrink, bounce, pulse, wobble, etc. and each of those allow you to adjust the settings such as the animation duration and other values. These elegant hover effects provide a very nice user experience for website visitors.
Responsive Settings
These settings are spread throughout all the other settings, allowing you to change almost everything per device on Desktop, Tablet, and Phone. The responsive settings are perhaps more important in a carousel than regular rows, so be sure to consider all of these settings carefully. These thoughtful and helpful settings truly set our plugin apart even more, providing exactly what customers and visitors need!
Miscellaneous Settings
As the plugin continues to evolve, we will be adding miscellaneous settings here that do not fit into the other categories. So far, we have added the image module gallery lightbox grouping feature.
0 Comments