How to create Content Toggle in Divi

Ever thought about creating Content Toggle in Divi but there’s no way for you to do it? Well, no need to be frantic about this anymore because Divi Supreme has got you covered. Using the newly released Divi Supreme Content Toggle, you can now easily create Content Toggle in Divi without any coding or any technical knowledge. We’ve made it so easy for you!

Let’s Get Started

Simple Toggle

So Let’s see how to use the Content Toggle Module. Add the Module to your page.

Once added you’ll see the content settings of the Module. In “Content One” and “Content Two”, this is where you need to add content.

So let’s add content to “Content One”. Simple add your Title/Heading you want to show in the Switch for the Content One and then add the content you want to show.

Now do the same for “Content Two”.

Once you’re done with Content, It’s time to move to the Design tab to design the Toggle, Elements, and each and everything. First, let’s design the Switch. Just open the Switcher Panel and make your desired changes, here are the changes we made:

  • Switcher Size – 12px
  • Switcher Primary Background – #fff
  • Switcher Secondary Background – #3affe4
  • Switcher Inner Background – #000

Now in the “Heading One” and “Heading Two” panels you’ll be able to design the Heading showing with the Switch. Just change the design of both of them where it looks good to you. Here are the changes we made to both of them:

  • Heading Font – Montserrat
  • Heading Font Weight – Bold
  • Heading Text Color – #fff

Now It’s time to move to the Content One & Content Two design changes. Simple open the Panel and make your desired changes. Here are the changes we made to both of them:

  • Content Background – #fff
  • Content Padding – 20px 20px 20px 20px
  • Rounded Corners – 8px
  • Box Shadow Vertical Position – 15px
  • Box Shadow Blur Strength – 30px

And that’s it for our Simple Content Toggle, here’s how it looks & works.

Advanced Toggle

So Let’s create something advanced, this time we’ll be creating a Pricing Table Toggle with Monthly & Yearly Switch. The first thing you’ve to do is create layouts in your Divi Library for Monthly & Yearly switch separately means two library layouts and you can create your own one If you’re building something different.

Here’s what we’ve created for Both switches. Make sure you don’t add any padding, Border, Corner Radius, or Box Shadow for the Layouts in the library because there’s are options for this in the Module Design settings

“For Monthly Switch”

“For Yearly Switch”

So once we’re done with Library layouts, now you can move to your Page and Enable Divi Builder. And simply insert the Toggle Module and once you’re in the Content Settings change the layout type to “Library”  and then choose the layout from Library for both “Content One” & “Content Two”. And please note that the Layout might not show properly in the Divi Builder, Only on the front end It will be 100% accurate. This is something Elegant Themes will be improving in the near future for rendering the Divi library layout in the visual builder.

So now you can move to the Design tab and make your desired changes as mentioned in this article before. And here’s how the Pricing Tables will look on the frontend.

So that’s it for today, If you want to download the same layout used in this article you can click here, and along with this, you’ll find other different examples and Free downloads. We hope you found this article helpful and let us know what you think about our Module in the comment section below.

Have a great day!

How to access the Divi Supreme Content Toggle

To use the Divi Supreme Content Toggle, you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

So, give Divi Supreme Pro a try today, and don’t forget to share your experience with the Content Toggle Module in the comments section below.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality. There’s much more coming to our Lite/Free Version of Divi Supreme.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

3 Comments

  1. Joerg Baaden

    really cool!!!! Thank you

    Reply
  2. Jake

    I have installed Divi Supreme and all modules are here except for this one (the Supreme Content Toggle is not showing). Is this a known bug? Any ideas why this may be?

    Reply
    • John Wooten

      This is resolved! I had an old plugin version installed.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Divi Supreme
Divi 5 is coming soon, and we are diligently converting all our Modules to the Divi 5 Infrastructure. Take a look at a Quick Demo →
Divi 5 is coming soon. Take a quick look at a demo of our modules in Divi 5.