Divi’s Full-width Toggle module allows you to display additional content per click, without the need for additional jQuery code. Similar to the Accordion module, toggle modules are typically used to share bundled content, 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 Divi’s Full-width Toggle module to create a simple page design that behaves on click. The design style we are dealing with is bold and clean.
Divi’s Full-width Toggle module: 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 row
Column structure
Continue by 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 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 it is placed in.
- Top Padding: 0px
- Bottom padding: 0px
Add a toggle module
Insert title and content
It’s time to start adding modules! The only module we need in this row is a Toggle module. We’re going to use the title area to add a title and put all the content 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
The settings of the hover icon
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 while hovering too.
- Toggle background-color: # 000000
Title text settings
Continue by changing the title text settings as follows:
- Color Text Title: # 000000
- Title Level: H2
- Font Title: Montserrat
- Text title: left alignment
- Text Title Size: 8vw (desktop), 10vw (tablet and phone)
- Title letter-spacing: -1vw (desktop), -0.5vw (tablet and phone)
- Title Line Height: 0.7em
Default closed title text settings
Next, go to the closed title text settings and change them accordingly:
- Closed Police Title: Montserrat
- Closed title Text size: 18vw (desktop), 16vw (tablet and phone)
- Closed title height: 0.8em
Hover over the title text settings
Change the color of the text of the closed title on hover.
- Closed title Text color: # f4f4f4
Body text settings
Go to body text settings and make some changes as well.
- Police Corps: Fira Sans
- Font Weight: Light
- Body text alignment: 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
Frontier
Continue by removing the module’s default border in border settings.
- Border Width: 0px
Toggle CSS content
Define the parameters of the Toggle module by adding the following lines of CSS code to the desktop:
width: 60vw; border-left: 0.2vw solid black; padding: 5vw 5vw 5vw 5vw;
Change the width of the CSS code line on tablet and phone:
width: 85vw;
Clone the whole section as many times as you want
Once you have completed the first section, row, and Toggle module, you can clone the entire section as many times as you want. depending on how much content you want to display on your page.
Change content
Make sure to change all of the contents of the toggle in each duplicate toggle module.
Read more: How to keep modules fixed in their column container with Divi
Change icon colors
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
Overview
Now that all the steps have been taken, let’s take a final look at what happened with different screen sizes.
Final thoughts
In this article, we have shown you how to be creative with Divi’s Toggle module. More precisely; we created them in full width and used them to display the content of different sections creatively. This tutorial shows that you can easily use Divi’s modules outside of the box when you take into account the various containers.
For website maintenance service contact us.