The Divi Toggle Module
How to add, configure and customize the Divi toggle module.
Toggles are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of toggles that will look great inside any sized column.
How to Add a Toggle Module to Your Page
Before you can add a toggle module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Enable Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.
Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don’t forget to add a row to your page first. We have some great tutorials about how to use Divi’s row and section elements.
Locate the toggle module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type “toggle” and then hit enter to automatically find and add the toggle module! Once the module has been added, you will be greeted with the module’s list of options. These options are separated into three main groups: Content, Design and Advanced.
The Toggle Module Content Settings
The toggle module’s content tab is organized into the following groups of settings (which also toggle!).
This is where you are able to add the toggle title and content.
You can choose whether or not you want your toggle to appear open or closed by default with this setting.
Here you can change the open toggle background color and the closed toggle background color. You can also easily make them the same thing by setting the background color option. There is also the option to set or upload a background image.
By default, your toggle module will appear with a label that reads ‘Toggle’ in the builder. The Admin Label allows you to change this label for easy identification.
The Toggle Module Design Settings
The toggle module’s design settings have been grouped into the following dropdown toggles under the design tab.
This is where you can change the toggle icon color.
Here you’re able to set the color for open and closed toggle text.
Here you can adjust the title text font, weight, size, color, spacing, line height, and more.
Here you can adjust the body text font, weight, size, color, spacing, line height, and more.
Here you can choose to use a border. And if you do choose to use a border, you’re also able to select it’s color, change it’s width, and choose it’s style.
In the spacing area you’re able to add custom padding to the top, right, bottom, or left of the toggle. You can also change these values for desktop, tablet, or mobile devices.
The Toggle Module Advanced Settings
In the Advanced tab of your toggle module you are able to add a unique css id and class. You are also able to add custom css to various pre-defined (and pre-selected) css selectors within the video slider module in the custom css dropdown. And finally in the visibility dropdown you are able to adjust the visibility of your module on phones, tablets, and desktops.