The Toggle module of Divi allows you to display contents additional per click, without the need for additional jQuery code. Similar to the Accordion module, toggle modules are typically used to share a contents grouped, such as frequently asked questions. However, you can also use them for other tasks, for example to structure your page. In this tutorial, we'll use full-width toggle modules to create a simple page design that behaves on click. The design style we deal with is bold and clean. You will also be able to download the JSON file for free!
Let's go.
Before we dive into the tutorial, let's take a quick look at how we look at different screen sizes.
Let's start recreating
Add a new section
Spacing
Start by creating a new page (or opening an existing one) and adding a regular section to it. The only thing to do in the section settings is to remove all the default top and bottom padding from the spacing settings.
- Top Padding: 0px
- Bottom padding: 0px
Add a new line
Column structure
Continue adding a new row using the following column structure:
sizing
Without adding any modules yet, open the row settings and make sure the line touches the left and right sides of the section container by changing the sizing settings. This is an important step in this tutorial. this allows the Toggle module, which we'll add later in this tutorial, to become full width.
- Use a custom gutter width: Yes
- Gutter width: 1
- Width: 100%
- Maximum width: 100%
Spacing
We're also removing the default top and bottom padding from the row. This will remove all the space between the toggle module and the row / column container in which it is placed.
- Top Padding: 0px
- Bottom padding: 0px
Add a rocker module
Insert title and content
It's time to start adding modules! The only module we need in this line is a Toggle module. We will use the title area to add a title and place everything contents that we want to share in the body content area. Feel free to place whatever you want in the content area; from text to images and more.
State
We use a closed toggle state, but feel free to leave it open as well.
- State: close
Default icon settings
Switch to the Design tab and change the module icon settings accordingly:
- Icon Color: # 570fff
- Use custom icon size: YEs
- Icon Font Size: 6vw
Icon settings on hover
Change the color of the hover icon.
- Icon Color: # f2f2f2
Default failover settings
Then change the background color of the closed toggle.
- Toggle background color: #ffffff
Hover over the settings
And change the color hovering too.
- Toggle background color: # 000000
Title text settings
Continue by changing the text settings of the title as follows:
- Color text title: # 000000
- Title Title Level: H2
- Title Police: Montserrat
- Text Title: Left Alignment
- Text Title Size: 8vw (desktop), 10vw (tablet and phone)
- Title letter spacing: -1vw (desktop), -0.5vw (tablet and phone)
- Height of the title line: 0.7em
Default closed title text settings
Then, access the text parameters of the closed title and modify them accordingly:
- Closed Title Font: Montserrat
- Title closed Text size: 18vw (desktop), 16vw (tablet and phone)
- Closed title height: 0.8em
Hover over the text settings of the title
Change the color of the closed caption text in hover.
- Title closed Text color: # f4f4f4
Body text settings
Go to body text settings and make some changes as well.
- Body Font: Fira Sans
- Weight of the font: Light
- Alignment of the body text: Justify
- Body text size: 1.2vw (desktop), 2vw (tablet), 3vw (phone)
- Body height: 2.1em
Spacing
Also add custom padding at the top, bottom and left of the module.
- Top Padding: 10vw
- Bottom padding: 10vw
- Left Padding: 6vw
Border
Continue by removing the module's default border in the border settings.
- Width of the border: 0px
Toggle CSS content
Define Toggle module parameters by adding the following CSS code lines to the desktop:
width: 60vw; border-left: 0.2vw solidblack; padding: 5vw 5vw 5vw 5vw;
Change the width of the CSS line of code on the tablet and phone:
width: 85vw;
Clone the whole section as many times as you want
Once you have completed the first section, the line and the Toggle module, you can clone the entire section as many times as you want. depending on the amount of content you want to display on your page.
Change the content
Be sure to change the entire contents of the flip-flop in each flip-flop module.
Change the colors of the icons
Then open each Toggle module individually and change the icon color. The ones we used for this tutorial are mentioned below:
- Icon color 1: # ff9000
- Icon color 2: # 00ffd4
Preview
Now that all the steps have been taken, let's take a final look at what happened with different screen sizes.
Latest Thoughts
In this article, we showed you how to get creative with the Toggle module of Divi. More precisely; we made them full width and used them to display content from different sections in creative ways. This tutorial shows that you can easily use the modules of Divi outside of the box when you take into account the various containers. You were also able to download the tutorial JSON file for free! If you have any questions or suggestions, please feel free to leave a comment in the comments section below.
