Divi: the easiest WordPress theme to use
Divi: The best WordPress theme of all time!
With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]
Before you can add a Toggle module to your page, you must first jump into the Divi Builder. Once the Divi theme is installed on your website, you will notice a button Use Divi Builder above the publisher each time you create a new page. Click this button to activate Divi Builder and access all Divi Builder modules. Then click on the button Use Visual Builder to start the generator in visual mode. You can also click on the button Enable Visual Builder when you browse your website in the foreground if you are connected to your WordPress dashboard.
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 the lines. If you start a new page, do not forget to add a line to your page first.
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 that you can also type "toggle" then press enter to search and automatically add the module toggle! Once the module is added, you will be greeted by the list of options of the module. These options are separated into three main groups: Contents , Design et Advanced .
Sample 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 he is looking for without having to read tons of text. For this example, I'm going to show you how you can use the Toggle module to design a modern FAQ section for your FAQ page in minutes.
Using the Visual Builder, add a new section with a fullwidth (1 column) row. Then add a Divider module to the line. On the Divider Module Settings Contents tab, select the "Show Divider" option.
On the Design tab, enter the following options:
Color: # 000000 (black)
Divider Style: Solid
Vertically centered divider Weight: 4px
Then add a rocker module under the divider I just created in the same row. In the Toggle module settings, update the following items:
Easily create your website with Elementor
Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]
Title: [enter your title] Content: [enter your content] Status: Close
Open Background Color: #ffffff
Closed Toggle the background color: #ffffff
Background color: #ffffff
Color of the icon: # 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
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 Flip with an upper and lower separation line. After that, duplicate your toggle module and place it after the bottom separation line. Since this is a Duplicate Toggle module, all design parameters have been transferred to the new Toggle and all you need to do is update the contents of the new Toggle module. Then continue the process of duplicating the split modules and flip-flops and update the contents of your flip-flops 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.
Are you looking for the best WordPress themes and plugins?
Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]
Now that you've seen the rocker module in action, dive into ALL of its settings in the sections below. We have provided a detailed overview of what you will find in each tab of the module parameters and an explanation of what each does.
The content parameters of the Toggle module
The content tab of the toggle module is organized in the following groups of parameters (which also alternate!).
This is where you can add the title and the contents of toggle.
You can choose whether or not you want your button to appear open or closed by default with this setting.
Here, you can change the background color when the flip-flop is open and the background color when it's closed. You can also easily make them the same by setting the background color option. There is also the option to set or download a background image.
By default, your toggle module will appear with a tag that reads 'Toggle' in the generator. The Admin tab allows you to change this tag for easy identification.
The design parameters of the rocker module
The design parameters of the toggle module have been grouped in the following drop-downs on the Design tab.
This is where you can change the color of the toggle icon.
Here you are 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.
The body of the text
Here you can adjust the font, weight, size, color, spacing, line height and more.
Easily create your Online Store
Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]
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.
In the spacing area, you can add custom padding to the top, right, bottom, or left of the scale. You can also change these values for desktops, tablets, or mobile devices.
The advanced settings of the module toggle
In the Advanced tab of your flip module, you can add a unique css ID and class. You can also add custom css to various predefined (and preselected) css selectors in the video cursor module of the custom css drop-down list. 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.
Other Divi tutorials
- 5 websites for restaurant use Divi theme
- How to add text on a Divi WooCommerce product
- How to change the menu color between Divi pages
- How to personalize the grids of a blog with Divi
- How to use the role Divi editor on WordPress
- How to create a full screen Divi slider
- How to change the color of menus between Divi pages
- Features you probably do not know about Divi
- How to use Divi Builder on WordPress
- How to use the Divi video scrolling module
- How to use the Divi Builder Flip module
- How to add a testimonial module on Divi Builder
- How to use the Divi text module
- How to create a slider on Divi
- How to edit a Divi user role
- How to use the Divi Social Media module
- How to use the shop module on the theme WordPress Divi
- How to use the Divi sidebar module
- How to use the Divi Price Table Module
- How to use the title module of Divi publications
- How to add a video module of Divi
- How to use the article navigation module
- How to use the Divi search module
- How to use the Divi wallet module
- How to use the person module on Divi Builder
- How to use the wallet module with Divi filter
- How to use the full width slider module
- How to use the Divi Builder Image Module
- How to use the full-width navigation module of Divi Builder
- How to use the image gallery module
- How to use the Divi Builder Full-Width Card Module
- How to use the Divi Full Width Portfolio Module
- How to use the Divi full-width header module
- How to use the Divi Counter Module
- How to use the articles slider on Divi Builder
- How to use the Divi Email Optin module