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.