How to Creatively Use Divi’s Toggle Module to Showcase Pricing Plans

Posted on February 1, 2019 by in Divi Resources | 10 comments

How to Creatively Use Divi’s Toggle Module to Showcase Pricing Plans

When it comes to showcasing pricing plans on your website, you can take many turns and create absolutely stunning and attractive pricing pages or sections. When building a website with Divi, you’ll most likely go for the Pricing Tables Module. This module allows you to quickly add pricing tables and style them however you want to. But if you want to add more interaction to this particular section of your page, you can also use the Toggle Module to show pricing plans on click. This a great way to highlight a specific pricing plan by keeping its state open and closing the other two.

In this tutorial, we’ll show you step by step how to create a gorgeous toggle pricing table design using Divi’s Toggle Module. Once you get the approach, you’ll be able to create all kinds of toggle pricing plans on click for any kind of website you build.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

pricing plans

Let’s Start Creating!

Subscribe To Our Youtube Channel

Add New Section

Spacing

Create a new page or open an existing one using Divi’s Visual Builder. Add a new section to the page, open the section settings and add some custom top and bottom padding to create some space at the top and bottom of the section.

  • Top Padding: 160px
  • Bottom Padding: 160px

pricing plans

Add Row #1

Column Structure

Once you’re done modifying the section spacing settings, you can go ahead and add a new row using the following column structure:

pricing plans

Add Text Module

Add Content

There’s no need to make changes to the row so go ahead and add a Text Module right away. Enter some H2 content of choice in the content box of the module.

pricing plans

Heading Text Settings

Continue by going to design tab and change the heading text settings.

  • Heading 2 Font: Didact Gothic
  • Heading 2 Font Weight: Regular
  • Heading 2 Text Alignment: Center
  • Heading 2 Text Color: #000000
  • Heading 2 Text Size: 40px
  • Heading 2 Letter Spacing: -1px

pricing plans

Add Divider Module

Visibility

Add a Divider Module right below the Text Module you’ve added and modified in the previous steps. Make sure the ‘Show Divider’ option of the Divider Module is enabled.

  • Show Divider: Yes

pricing plans

Color

Continue by going to the design tab and change the divider color.

  • Color: #000000

pricing plans

Sizing

Change the width of the module in the sizing settings as well.

  • Width: 39%
  • Module Alignment: Center

pricing plans

Spacing

Add some custom bottom margin as well.

  • Bottom Margin: 50px

pricing plans

Add Row #2

Column Structure

We’re done modifying the first row and its modules. Time to add a new row using the following column structure:

pricing plans

Column 1 Gradient Background

Without adding any modules yet, open the row settings and add a gradient background to column 1.

  • Color 1: #00fff2
  • Color 2: rgba(255,255,255,0)
  • Column 1 Gradient Type: Radial
  • Column 1 Radial Direction: Bottom Right
  • Column 1 Start Position: 30%
  • Column 1 End Position: 30%

pricing plans

Column 2 Gradient Background

Do the same for the second column as well.

  • Color 1: #fce96f
  • Color 2: rgba(255,255,255,0)
  • Column 2 Gradient Type: Radial
  • Column 2 Radial Direction: Top Right
  • Column 2 Start Position: 40%
  • Column 2 End Position: 40%

pricing plans

Column 3 Gradient Background

Likewise, add a gradient background to the third column using the following settings:

  • Color 1: #a659ff
  • Color 2: rgba(255,255,255,0)
  • Column 3 Gradient Type: Radial
  • Column 3 Radial Direction: Bottom
  • Column 3 Start Position: 30%
  • Column 2 End Position: 30%

pricing plans

Sizing

Once you’re done adding the gradient background, move on to the design tab and change the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 2

pricing plans

Add Toggle Module to Column 1

Add Content

Time to start creating different pricing plans! Add a new Toggle Module to the first column and enter a title. To style the different elements in the content box, we’ve used some extra HTML tags. Go ahead and copy the following lines and add them to the Text tab of your content box:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

pricing plans

pricing plans

State

You can choose if you want the state of the Toggle Module to be open or closed. To be able to see all the changes you make throughout the rest of the tutorial, I recommend keeping the state ‘open’ until you’re done modifying all the different design settings.

pricing plans

Background Color

Continue by going to the background settings of the Toggle Module and add a white background color.

  • Background Color: #ffffff

pricing plans

Icon Settings

Change the icon color in the design tab next.

  • Icon Color: #000000

pricing plans

Toggle Settings

And modify the Open Toggle Background Color in the toggle settings as well.

  • Open Toggle Background Color: rgba(255,255,255,0)

pricing plans

Title Text Settings

Then, make some changes to the title text settings.

  • Title Font: Didact Gothic
  • Title Font Weight: Bold
  • Title Text Color: #000000
  • Title Text Size: 3.5vw (Desktop), 60px (Tablet), 40px (Phone)

pricing plans

Body Text Settings

Modify the body text settings as well.

  • Body Font: Didact Gothic
  • Body Text Alignment: Left
  • Body Text Color: #000000
  • Body Text Size: 18px
  • Body Line Height: 1.5em

pricing plans

Clone Toggle Module Twice & Place in Remaining Two Columns

Once you’re done modifying the Toggle Module in column 1, you can go ahead and clone it twice and place the duplicates in the two remaining columns.

pricing plans

Change Copy

Make sure you change all the copy of the duplicates and you’re done!

pricing plans

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome of the design we’ve created on different screen sizes.

pricing plans

Final Thoughts

In this tutorial, we’ve shown you a creative approach on using Divi’s Toggle Module to showcase pricing plans on your website. This is a great way to interact with visitors and elevate your design style. It makes it easier to highlight a specific pricing plan in your section by keeping that one open and the other two options closed. You can use this approach for any kind of website you’re building. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

10 Comments

  1. If only Divi let you add modules into an Accordion/Toggle

    • Yes! I agree as well.

    • I also would like to see nesting of modules and perhaps also rows and sections in all suitable elements

  2. Always great to see new ways to approach something. Thanks for sharing…

  3. this is great, thank you for the post

  4. Wonderful. This is a great post

  5. Hello, Love this design, however I am having trouble getting the add to cart link to work. I pasted the href=”http://yourdomain.com/cart/?add-to-cart=25″ code (That is specific to my website and product number) into the links section of the toggle module. What am I doing wrong?

576,027 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest