Create Better Divi Headers

Free Download: Divi Pricing Sections with Monthly-Yearly Switch

by | Aug 30, 2018 | 153 comments

Today’s freebie is the Divi Pricing Section layouts with a switch allowing you to switch among two different pricing types or periods, for example, monthly vs yearly. If you want to provide your customers with two different payment choices then these sections are exactly what you need. Check out the demo preview below or click the button to view the live demo.

Demo

How To Download

This download is available to our subscribers only, to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.

The existing subscribers don’t need to subscribe again, they always receive the updated freebies package to their confirmed email address automatically.

Requirements

There are no any special requirements for these section layouts, however, it is advised to use the most recent versions of Divi.

Installation

The download .zip file includes all of the previously available free section layouts plus the newly added two Pricing section layouts.

After you receive the email with the download link and download the freebies .zip file, unzip it and find the divi-pricing-tables folder containing the pricing section layout folders of both Pricing Section layouts(2-table and 3-table sections), each of them containing a JSON file and the custom CSS file as well as the README.txt file with installation instructions.

The installation is straight forward. First import the JSON file of the section layout into the Divi Library.

Then add the CSS from the CSS file into the Custom CSS field on Divi -> Theme Options page or to you child theme style.css file.

Next, open the page or post where you would like to have the Pricing section and add the imported section from the Divi Library.

Save everything and you’re done! At this point you will have a working custom Pricing section with a monthly-yearly switch.

How To Customize

Please note that the pricing switch won’t work in Visual Builder, you will see both pricing sections at the same time being able to customize them like any other section. The 2-table Pricing section will look like this in VB:
And the 3-table Pricing section will look like this in VB:
When customizing the section layouts don’t forget to check the custom CSS as well since some of the custom styling is applied using custom CSS, for example, the active switch button background color.
I hope you’ll find these free pricing sections useful, go ahead and subscribe now to grab your copy for FREE!

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!