How to style a pricing table in Divi

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:

The Insert Column(s) button

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:

The single column option

Next, click on Insert Module(s) and select Pricing Tables:

The Pricing Tables button

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:

The Add New Pricing Table button

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:

The top section of the General Settings screen

Next, scroll down to input the button link, button copy, and list of features.

The lower section of the General Settings tab

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:

The pricing table with default styling

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:

The pricing table with the middle tier highlighted

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:

The Advanced Design Settings tab

After applying this change to both outside tiers (which also causes their button sizes to automatically decrease), our middle button definitely stands out:

The pricing table with the outer tier buttons made smaller

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:

The global settings for the pricing table module

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:

Advanced Design Settings tab showing body settings

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:

The border settings

Finally, we selected Use Custom Styles For Buttons and set the button text to black and the background to white:

Button settings

Here’s how we’re looking so far:

The pricing table almost complete
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:

The section settings button highlighted

From here, you can select Upload Image and either add an image from your library or upload a new one.

The background image field and upload button

Once you’ve saved your changes, all that’s left is to stand back and admire your work:

The final pricing table design

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!

  • divi builder pricing table styling
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

6 of the best online bookings plugins for WordPress

Whether you run a hair salon, work as a consultant or manage a hotel or guesthouse, being able to...

Change Divi Primary Menu font weight

In order to change your Divi Primary Menu font weight then insert the following css code under...

Divi Layout & Typography Customizer Settings

In Divi Theme you can customize just about everything when it comes to layout & typography....

Divi Resources Blog

Stay up to date with Elegant Themes most recent news and updates...

Documentation and Tutorials

Please click on the link below for useful tutorials on using Divi Builder to build your perfect...