How to Create Content Toggle in Divi?

There are very few better interactive ways to show content than a content toggle. It reduces website scroll time as well as facilitates an intuitive switcher to entice visitors. You can showcase two types of content in the same area of your website with this switcher or toggle button.

Although Divi Builder comes with a Toggle module, it doesn’t include content toggle functionalities. As a Divi user, a solution without coding difficulties may suit best.

And, here we have found DiviFlash with an easy answer to the Divi user’s popular question, “How to create content toggle in Divi.”

We are creating a fascinating content toggle with the help of the DiviFlash Content Toggle module. It will be a pricing plan where content can be toggled between annual and lifetime plans.     

Here is a sneak peek of this interactive content toggle.

You can also download the demo and import it to your Divi builder to better understand this content toggle design.

Prerequisites:

1. Install the latest version of the Divi theme.
2. Latest version of the DiviFlash Plugin.

By default, the Content Toggle module is turned OFF. Here is a guide on how you can turn this ON.

How to Add Toggle content to DiviFlash?

Before starting the design process, let’s learn about inserting toggle content in this DiviFlash module. There are four ways. You can find them from the dropdown of the Content-Type. For this, go to the module setting and follow Content Tab> Toggle Content> Content Type.

Further, the primary & secondary toggle area changes according to the selection of your content type. The list of 4 content type options are:

• Content:  Can add and edit text. 
• Shortcode: Can attach shortcode here.
• Library: Shows the library items.
• HTML Class: Can apply CSS class here.

Here, in our tutorial, we are choosing the library option for including toggle content. And we have already imported primary & secondary toggle content into the Divi Library.

So if you are designing the same content toggle as our demo. Go to the Divi library and import the toggle content file from the downloaded demo file. Once you have finished importing, you are ready to start.

How to Create Content Toggle in Divi

All set. Let’s start with our main content toggle design. Simply add a new section to the page you want to create the toggle.

Section Design

Take a regular section and add a background image in the content tab. 

• Background Image source

Next, go to the design tab and add padding to the top & bottom.

In the Design Tab,

Under Spacing options,

• Padding: Top & Bottom- 95px (Desktop), 75px (Tablet), 50px (Mobile)

No more customization. Leave other section settings as their default.

Row Design

We are taking a single-column row for our design. Here, you don’t have to touch the content tab. Just go to the design tab and make the changes below.

In the Design Tab,

Under Sizing option,

• Use Custom Gutter Width: Yes.
• Gutter Width: 1
• Max Width: 980px

Under Spacing option,

• Padding: 0px (Top/Bottom)

That’s all for the row customization. Now you can add modules.

Divi Modules

Coming to modules, there will be two DiviFlash modules. At first, we will add the Advanced Blurb Module, and then beneath it will be the Content Toggle module.

Modules Designs:

Every time you want to add a module, click the gray plus icon. Then, you can either search or find the required module by scrolling. 

Advanced Blurb

We are adding text to the title and body area according to our design. You can edit & style text as you wish. Here we have made the customizations as follows:

In the Content Tab,

Under Content option,

• Title: Pricing Plan
• Content: Dummy Text.

In the Design Tab,

Set the content area alignment to the middle under the content area option. And make the following changes below.

Under Title option,

• Title Heading Level: H2
• Title Font: Inter
• Title Font Weight: Bold
• Title Text Color: #000000
• Title Text Size:  64px (Desktop), 48px (Tablet), 32px (Mobile)
• Title Line Height: 75px (Desktop), 56px (Tablet), 38px (Mobile)

Under Content option,

• Body Font: Inter
• Body Text Color: #1f2d3d
• Body Text Size: 18px (Desktop), 16px (Tablet), 14px (Mobile)
• Body Line Height: 30px (Desktop), 28px (Tablet), 26px (Mobile)

Under Custom Spacing option, (Content)

• Title Padding: Bottom- 24px (Desktop), 16px (Tablet), 10px (Mobile)

Content Toggle

After adding the Content Toggle module, you will see a switcher button. Here, we will include our primary & secondary toggle content. And as we have mentioned, use the library option from the content type dropdown to include toggle content. Follow the customizations below:

In the Content Tab,

Under Toggle Content option,

• Primary Label: Annual
• Secondary Label: Lifetime
• Content Type: Library
• Primary Content Library: 13 Content Toggle-> annual
• Secondary Content Library: 13 Content Toggle-> lifetime

Note here, in our Divi Library, we have imported and named toggle content as 13 Content Toggle-> annual & 13 Content Toggle-> lifetime. Hence, we have found them with those titles. So, in your case, the content library dropdown will show those titles as you define them.

Now, on some occasions, you may not find toggle content in the dropdown. To sort out this issue, click the save button in the bottom right. Once it is saved, reload the page again. Then recheck the content library dropdown. Now you will see toggle content on the list.

Hopefully, by now, you have added your toggle content. Afterward, move to the toggle control option.

Under Toggle Control option,

• Toggle Control Type: Square 2
• Toggle Control Size: 12px

You can also insert a badge in your design. To do this, ‌enable the primary or secondary badge under the badge option. We are giving a badge to the secondary toggle area for our design purpose.

Under Badges option,

• Secondary Badge: ON
• Secondary Badge Text: 4 Months Off
• Left To Right Position: 110%
• Top To Bottom Position: 2% (Desktop), 10% (Mobile)
• Arrow Placement: Left

By default, the Content animation option is enabled. Turn it off as well.

Under Content Animation option,

• Animation: OFF

Nothing more in the content tab. Now we want to draw your attention to the design tab.

Here in the design tab, we will change the distance between label or button of the tablet & mobile.

In the Design Tab,

Under Toggle bar option,

• Label Or Button Distance: ON
• Distance Between Label Or Button (px): 18px (Tablet), 12px (Mobile)

Now we will style the primary & secondary text and color the toggle switch.

Under Primary & Secondary Label Option:

• Font: Inter
• Font Weight: Bold
• Text Color: rgba(45,52,54,0.5)
• Text Size: 20px (Desktop), 18px (Tablet), 16px (Mobile)
• Line Height: 24px

Under Active Label Option:

• Text Color: #2d3436

Under Primary & Secondary Toggle Switch option:

• Toggle Color: #fd3a84
• Background Color: #ffa68d

Under Secondary Badge option:

• Background Color: #e3478c
• Arrow Color: #e3478c
• Font: Inter
• Font Weight: Medium
• Font Style: TT (Uppercase)
• Text Color: #ffffff
• Text Size: 12px (Desktop), 8px (Mobile)
• Rounded Corners: 33px 
• Border Width: 1px
• Border Color: #ffffff
• Box Shadow Presets: 1st one
• Box Shadows Vertical Position: 6px
• Box Shadows Blur Strength: 8px
• Shadow Color: rgba(0,0,0,0.15)

Under Custom Spacing option:

• Toggle Bar Margin: 40px (Bottom)
• Toggle Bar Padding: 0px (Top/Bottom)

Under Spacing option:

• Margin: Top- 60px (Desktop), 40px (Tablet), 20px (Mobile)
• Padding: 0px (Top)
• Secondary Badge Padding: Desktop: 2px (Top/Bottom) 8px (Left/Right), Mobile: 0px (Top/Bottom) 4px (Left/Right) 

Finally, hit the save button and exit the visual builder. You can see a beautiful pricing plan with a colorful toggle button there. Hopefully, you can now design a unique content toggle with texts, layouts, images, carousels, galleries, etc.

Why Choose DiviFlash to Add Content Toggle in Divi?

With this dedicated content toggle module from DiviFlash, you can create eye-catching content toggle by displaying two versions of a product, food menus, team members, pricing tables, services, showing before-after images, and so on. Let’s see what it brings out more:

• Can choose from five different toggle styles.
• Get vast customization options to style the toggle.
• Also include custom icons at primary & secondary toggle labels.
• Apply different animation types and define the duration.
• Add any type of content to primary & secondary toggle content areas.
• Inclusion of badge with the switcher button.
• Embellish the background with various colors.

Ending Thoughts

That’s our look at how to create content toggle in Divi. Hopefully, you have enjoyed the tutorial. And it comes in handy for creating content toggle without giving you a bitter experience with code.

Let us know what kind of content you show with the content toggle on your Divi website in the comment box.