Before you can add a Toggle module to your page, you must first jump into the Divi Builder. Once the Divi theme installed on your Website, you will notice a button Use Divi Builder above the post editor whenever you create a new page. Click on this button to activate Divi Builder and access all the Divi Builder modules. Then click on the button Use Visual Builder to start the generator in visual mode. You can also click the button Enable Visual Builder when you browse your Website in the foreground if you are logged into your WordPress dashboard.

access to the visual builder

Once you are on 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 rows. If you are starting a new page, remember to add a row to your page first.

flip flop divi module.png

Locate the toggle module in the list of modules and click on it to add it to your page. The list of modules is searchable, which means you can also type "toggle" and then press enter to automatically search and add the toggle module! Once the module is added, you will be greeted by the module options list. These options are separated into three main groups: Contents , Design et Advanced .

Example use case: FAQ page

An FAQ page is one of the best places to consolidate information using the Toggle module. It allows the user to quickly identify the question they are looking for without having to read tons of text. For this example, I'll show you how you can use the Toggle module to design a modern FAQ section for your FAQ page in a matter of minutes.
sample page FAQ.jpg

Using the Visual Builder, add a new section with a fullwidth row (1 column). Then add a Divider module to the row. Under the Content tab of the Divider module settings, select the “Show Divider” option.

example of a flip-flop button divi.png

On the Design tab, enter the following options:

Color: # 000000 (black)
Divider Style: Solid
Separator Position:
Vertically centered divider Weight: 4px
Height: 1

configuration options toggle divi.png

Then add a toggle module under the divider I just created in the same row. In the Toggle module settings, update the following:

Content tab

Title: [enter your title]
Content: [enter your content]
Status: Close
Open Background color: #ffffff
Closed Toggle the background color: #ffffff
Background color: #ffffff

Design tab

Icon Color: # 000000
Open Toggle Text Color: # 000000
Closed Toggle Text Color: # 000000
Title Font: Open Sans, Bold
Font size: 24px
Title Text Color: # 000000
Body Font: Open Sans
Body Font Size: 18px
Body Text Color: # 666666
Height of the body line: 1.6em
Use the border: YES
Width of the border: 0px
Custom padding: Top 2px, Bottom 2px

new content with divi.png rocker

After saving your setting for the toggle module, duplicate the divider module you created and place it under the toggle module. This will frame the seesaw with an upper and lower dividing line. After that, duplicate your flip-flop module and place it after the bottom separator line. Since this is a duplicate Toggle module, all design parameters have been transferred to the new Toggle module and all you need to do is update the contents of the new Toggle module. Then continue the process of duplicating the Division and Scale Modules modules and update the contents of your scales until you have completed the entire FAQ section.

That's all. You now have a modern FAQ section using the Toggle module to consolidate your questions and answers.

module toggle divi.gif

Now that you've seen the toggle module in action, dive into ALL of its settings in the sections below. We've provided a detailed look at what you'll find in each tab of the module's settings and an explanation of what each does.

The content parameters of the Toggle module

parameters flip-flops divi.png

The toggle module content tab is organized in the following parameter groups (which also alternate!).

texts

This is where you can add the title and toggle content.

State

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

Context

Here you can change the background color when the toggle is open and the background color when it is closed. You can also easily make them the same 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 generator. Admin tag allows you to change this tag for easy identification.

The design parameters of the rocker module

option design toggle wordpress.png

The design parameters of the toggle module have been grouped together in the following drop-down toggles under the Design tab.

Icon

This is where you can change the color of the toggle icon.

texts

Here you are 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.

The body of the text

Here you can adjust the font, weight, size, color, spacing, row height and more.

Bordures

Here you can choose to use a border. And if you choose to use a border, you can also select its color, change its width, and choose its style.

Spacing

In the spacing area, you can add custom padding to the top, right, bottom, or left of the toggle. You can also change these values ​​for desktops, tablets, or mobile devices.

The advanced settings of the module toggle

flip-flop parameter divi.png

In the Advanced tab of your toggle module, you can add a unique ID and css class. You can also add custom css to various predefined (and preselected) css selectors in custom css drop down video slider module. Finally, in the visibility drop-down list, you can adjust the visibility of your module on phones, tablets and desktops.

That's all for this tutorial, I hope it will allow you to better use the Divi Toggle module.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1/2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD THE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Other Divi tutorials