Divi Builder Plugin Documentation

Return To Divi Builder Plugin Documentation Documentation

The Divi Toggle Module

How to add, configure and customize the Divi toggle module.

divi-toggle-module-1

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.

View A Live Demo Of This Module

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.

divi-toggle-module-3

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

divi-toggle-module-2

The toggle module’s content tab is organized into the following groups of settings (which also toggle!).

Text

This is where you are able to add the toggle title and content.

State

You can choose whether or not you want your toggle to appear open or closed by default with this setting.

Background

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.

Admin Label

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

divi-toggle-module-4

The toggle module’s design settings have been grouped into the following dropdown toggles under the design tab.

Icon

This is where you can change the toggle icon color.

Text

Here you’re able to set the color for open and closed toggle text.

Title Text

Here you can adjust the title text font, weight, size, color, spacing, line height, and more.

Body Text

Here you can adjust the body text font, weight, size, color, spacing, line height, and more.

Border

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.

Spacing

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

divi-toggle-module-5

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.

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today