Step #1: Insert the Pricing Table Module
In the Divi Builder click on Insert Column(s), and select the number of columns you want in your row:
You’ll only need to populate the one column for a pricing table, no matter how many tiers you’re including, so whatever you select here depends on how wide you want your table span. For a full-width table, choose a single column:
Next, click on Insert Module(s) and select Pricing Tables:
From here, you’ll be automatically taken to the General Settings tab where you can start building pricing tiers.
Step #2: Add Your Pricing Tier’s Content
To create the first tier, select Add New Pricing Table:
You’ll come to the General Settings screen, and the first field here is Make This Table Featured – we’ll come back to it later. For now, we’ll want to populate all of the information for our first tier. Firstly, input the title, currency, and price. You can optionally input a subtitle, and also add a time period if the product or service is subscription based:
Next, scroll down to input the button link, button copy, and list of features.
Once the information for one tier is entered, you can repeat the same for the other tiers by copying the module and changing the information within. Now we have something that’s starting to look like a pricing table:
While the default table is functional, we still have some work to do to get to our final design.
Step #3: Make the Middle Tier Pop
One of the first styling elements we can employ is to make the middle tier stand out. Although there are global settings for the entire pricing table, you’ll want to access the settings for each individual tier for this next step. Navigate to the General Settings tab for the middle tier, and select Make This Table Featured. As you can see, this has a significant impact on the design:
However, we want to make even more of an impact by making the middle tier CTA button ‘pop’ a little. To do this, we can go into each of the other tiers and use the Advanced Design Settings tab. Scroll almost to the bottom of the tab to find the Use Custom Styles For Buttons field. When you activate this (i.e. move it to the blue position), you’ll be presented with a whole host of button customization options. For our design, we simply want to reduce the Button Text Size to 14px:
After applying this change to both outside tiers (which also causes their button sizes to automatically decrease), our middle button definitely stands out:
As long as you remember to adjust the individual settings available for each tier, the changes you make will apply correctly. However, for the subsequent changes we’re going to make, we’ll go back to using the overall module’s global settings. This makes it easy to customize all of the tiers at once.
Step #4: Customize the Overall Design
Once you’re back in the Module Settings screen, open up the Advanced Design Settings tab to find with a whole host of options at your disposal:
For our design, we’ve opted for a monochrome look, so we changed the Table Header Background Color to black and Header Text Color to white. However, there are plenty of color customizations to match or contrast with your website’s look. You can also change all of your fonts and font sizes, and for this look we went with 20pt bold Monserrat for the headers:
We also decided not show the bullets in the feature list and to center the list items. In the same tab, we’ve changed the font for all other text options (including currency, price, and body) to Lora, which pairs nicely with the Monserrat headers. We’ve also set all of these font colors to black, and the background to white:
Towards the bottom of the Advanced Design Settings tab is an option to use a border. Move the Use Border button to the Yes (blue position) and you will be presented with a range of options. For our border, we set the color to black, the width to 6px, and the style to Double:
Finally, we selected Use Custom Styles For Buttons and set the button text to black and the background to white:
Here’s how we’re looking so far:
We’re almost finished, but there’s one more step.
Step #5: Add a Background Image
The final step to create a really impactful design is to add a suitable background image. To do this we need to exit the Pricing Table module, and go into the section settings:
From here, you can select Upload Image and either add an image from your library or upload a new one.
Once you’ve saved your changes, all that’s left is to stand back and admire your work:
Although this was a relatively basic tutorial, we encourage you to play around with all of the different settings in order to make your own eye-catching designs. For a little inspiration, you can also check out our creative pricing tables layout kit (released as part of the Divi 100 series) to see if anything piques your interest. While this uses Text modules to create pricing tables, rather than the dedicated module, there’s plenty to get your teeth into!