This tutorial will explain how to add and utilize the pricing tables module using the Divi Visual Builder in the Divi Theme for WordPress.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

 

Text Version Of This Divi Tutorial

Hello, this is Jimi Blevins. Today I’m going to show you how to: “Add A Pricing Table Using The Divi Visual Builder.

So, I’ve already got my pricing table module up here, by selecting the gray plus (+) sign and searching for and selecting “Pricing” Module.

AddAPricingTable

To start off, we’re going to want to “Add New Item.”

AddAPricingTable2

This is just going to create one of the columns for our table. I’ll leave the “Make This Table Featured” option off for the first table, this feature allows you to have custom settings for one of the pricing tables. So if you’ve got two side-by-side or three side-by-side, you can make one of them stand out more if you’d like to. I’m going to do that to the next table that I build.

So, first off, we put in a “Title,” and you can put in a little “Subtitle.”AddAPricingTable3

Denote your currency, if you want it to be dollars, or if you want to put a pound sign (#) in there. The “Per” option is if you wanted to do this price for one item or 10 items, or per month pricing.

AddAPricingTable4Then you can put the price in.AddAPricingTable5

So we’ll do this one at 29.95, you can see that it’s already got kind of a standard style sheet to dress it up a little bit.

AddAPricingTable6So, we can put a button on there as well, with a link to you know an opt-in page form. AddAPricingTable7

Then, we can “Add Media,” or add content in the “Content” section. These are pretty much just bullet points, so this is where we want to line out the features of our package and it automatically puts in a bullet point for you.
Then, if you want one of them to be opted out, you just put a minus sign in front of it.

AddAPricingTable8

So, when we come to our next table you can add that feature back in and we’ll “Make This Table Featured” as well. Currency set to a dollar per month, and the price on this will be 59.95. (That one’s a little pushier.) So you can you can see that this gives you the ability to really make one of your packages stand out and you’ve got a lot of design options as well, which I’m going to get into.

AddAPricingTable9

I just wanted to show you the basic outline first.

AddAPricingTable10Our awesome pricing tables are done.AddAPricingTable11

Now I want to come in and change up the “Design” settings.

AddAPricingTable12

 

I’ve got the standard ones where I can go in and change my “Table Background Color,” and my “Table Header Background Color.” So if I want my feature table to be pink in the background and the header to be orange.

You can change text color, price color. So this is where you go in and you pretty much do the design elements for your main two things: your regular pricing table and your featured pricing table. You can change full of color featured bullets, take off the drop shadow, you usually have a little drop shadow under here you can get rid of that.

AddAPricingTable13

I did another website, where actually space these out a little bit and made them all the same size in the same color without a featured one and it worked out really well. You’ve got a lot of control over how you want this to look.

AddAPricingTable14

Then, of course, you’ve also got control over the buttons, “Custom Styles For Buttons.” You can also change the border.

Then, if you come into the individual elements themselves, you have even more control over the design. You can do this by selecting the little gear control next to your list of Pricing Table items. So you can get into each individual column or pricing item and have each one of them haveunique text colors, pricing colors, all kinds of different options that you’ve got there.

AddAPricingTable17

These pricing tables have become pretty standard on websites these days, so it’s nice to know that Divi has a really robust option for you to be able to put those in and really dial in how they look so they can dress up your website.

AddAPricingTable19

That covers everything with the pricing table, my name is Jimi Blevins and thank you so much for watching.