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

February 1, 2019

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.

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans Theme Builder Layout

Let’s Start Creating!

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

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-1 Theme Builder Layout

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:

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-2 Theme Builder Layout

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.

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-3 Theme Builder Layout

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

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-4 Theme Builder Layout

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

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-5 Theme Builder Layout

Color

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

  • Color: #000000

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-6 Theme Builder Layout

Sizing

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

  • Width: 39%
  • Module Alignment: Center

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-7 Theme Builder Layout

Spacing

Add some custom bottom margin as well.

  • Bottom Margin: 50px

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-8 Theme Builder Layout

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:

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-9 Theme Builder Layout

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%

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-10 Theme Builder Layout

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%

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-11 Theme Builder Layout

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%

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-12 Theme Builder Layout

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

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-13 Theme Builder Layout

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>

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-14 Theme Builder Layout

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-15 Theme Builder Layout

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.

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-16 Theme Builder Layout

Background Color

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

  • Background Color: #ffffff

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-17 Theme Builder Layout

Icon Settings

Change the icon color in the design tab next.

  • Icon Color: #000000

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-18 Theme Builder Layout

Toggle Settings

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

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

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-19 Theme Builder Layout

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)

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-20 Theme Builder Layout

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

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-21 Theme Builder Layout

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.

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-22 Theme Builder Layout

Change Copy

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

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans-23 Theme Builder Layout

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.

how-to-creatively-use-divis-toggle-module-to-showcase-pricing-plans Theme Builder Layout

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!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

Share this article:
 

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

10-divi-ui-kits-for-your-web-design-toolkit Theme Builder Layout

10 Divi UI Kits for Your Web Design Toolkit

Divi UI kits are a different type of layout. They can include full pages, but rather than only providing a full-page design they mostly focus on one thing, such as headers, footers, sections, and specific modules. They often provide more detail in styling for a module...

inserting-special-characters-into-the-block-editor Theme Builder Layout

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.