How to Create Pricing Table in Divi?

Does your Divi pricing table fail to convert visitors into customers?

In that case, DiviFlash’s Advanced Pricing Table module can help you create high-converting pricing tables with its interactive elements. This module has elements like price, feature, image, ribbon, divider, and even rating.

In this guide, we will show you how to create pricing table in Divi using DiviFlash’s module. Let’s get started.

Preview of Our Created Pricing Table

Here is the preview of the pricing table we are going to create with DiviFlash’s Advanced Pricing Table module.

Required Setup

• The latest version of WordPress is installed.
• Divi theme is installed and activated.
• DiviFlash is installed and activated.
• Enable the Advanced Divi Pricing Table Module: Go to WordPress dashboard > DiviFlash > Modules, search for “Advanced Pricing Table” and enable it.

Important Note: If the Pricing Table module is not visible, make sure to update DiviFlash to the latest version.

Step 1: Add New Row and Column

Navigate to the post or page where you want to add the pricing table and add three columns. (When creating a pricing table with DiviFlash, you have to use a separate column for each plan.)

After taking three columns, you have to insert the module to each column separately. We will guide you to each column’s setup and customization. 

Let’s begin with creating and designing the first plan.

Step 2: Create and Design the First Pricing Plan

In the first column, insert the advanced pricing table module the way you insert any other Divi module.

Then, you will see a set of pre-defined items that you can either modify or delete.

We will delete all of them and then add items like text, price, divider, features, and button in the next couple of steps:

2.1: Add Price Plan Name

• Click on “Add New Pricing Item”

• Write down your pricing plan’s name in the “Text Content” field.

• Next, click on the Design tab > Element Text and make these following changes:

• Element Font: Inter
• Element Font Weight: Medium
• Element Text Color: #000000
• Element Text Size: 24px
• Element Line Height: 36px

After doing all these, click on the “Back” icon to go back to the module’s main settings panel.

2.2: Add Plan’s Price

• From the module’s main settings panel, click on “Add New Pricing Item.” Then select “Price” from the “Element Type.”
• After that, customize the pricing details as needed. We made the following changes:

• Regular Price: 14
• Price Prefix:  $
• Prefix Vertical Alignment: Middle
• Price Suffix: /month
• Next, click on the Design tab > Element Text and make these following changes:

• Element Font: Inter
• Element Font Weight: Semi Bold
• Element Text Color: #111927
• Element Text Size: 60px
• Element Line Height: 72px
• In the Design tab, click on Regular Price Prefix Text and make these following changes:

• Regular Price Prefix Font: Inter
• Regular Price Prefix Weight: Semi Bold
• Regular Price Prefix Text Color: #111927
• Regular Price Prefix Text Size: 60px
• Regular Price Prefix Line Height: 72px
• Again, in the Design tab, click on Regular Price Suffix Text and make these following changes:

• Regular Price Suffix Font: Inter
• Regular Price Suffix Text Color: #6c737f
• Regular Price Suffix Text Size: 15px
• Regular Price Suffix Line Height: 16px
• Lastly, click on “Spacing” in the Design tab and set margin to 16px (top and bottom.)

2.3: Add Text Below the Price

• From the module’s main settings panel, click on “Add New Pricing Item”
• Next, if you want to add any text just below the pricing, you can do it here
• Go the Design tab > Element Text and make these following changes:

• Element Font: Inter
• Element Text Color: #252525
• Element Text Color: 16px
• Element Line Height: 25px

2.4: Add Divider to Separate Pricing from Features

• Click on “Add New Pricing Item” from the module’s main settings panel.
• Select “Divider” from the element type’s dropdown menu.

• After that make the following changes:
  • Line Height: 1px
  • Color: #ebe9fe

2.5: Add Pricing Plan’s Feature

• Again from the module’s main settings panel, click on “Add New Pricing Item”
• Click on element type’s dropdown menu, select “Feature” and type your feature text in the “Feature Text”

• Go the Design tab > Element Text and make these following changes:

• Element Font: Inter
• Element Text Alignment: Left align
• Element Text Color: #252525
• Element Text Size: 16px
• Element Line Height: 21px

Next, simply copy the feature element and create as many copies as you need for that plan. Make sure to update the text within each copied feature to list.

However, if you want to dim any feature in your feature list, just choose a dim color. For our demo’s feature list, we added 9 features and will dim two features. 

To do the same, just change the element text color and use this code: #909090

2.6: Add CTA Button

• From the module’s main settings panel, click on “Add New Pricing Item”
• Click on the element type’s dropdown menu, select “Button.”
• Then write your button text and toggle on “Enable Button Fullwidth”

• Go the Design tab > Button Style and make these following changes:
  • Use Custom Styles for Button: Toggle on
  • Button Text Size: 16px
  • Button Text Color: #f2f2f2
  • Button Background: Click on “Background Gradient” and make these changes:
    • Click on “Add Background Gradient”
    • Gradient Stops: 0% (#c444fb) and 100% (#5b56d7), and for hover: 0% (#5b56d7) and 100% (#c444fb)
    • Gradient Direction:  141deg
    • Button Border Radius: 8px
    • Button Font: Inter
    • Button Font Weight: Semi Bold
  • Button Margin: 32px (Top)
  • Button Padding: 14 px (Top and Bottom)

2.7: Add Background Color, Custom Spacing and Border

• From the Advanced Pricing Table module’s main setting panel, click and background. Next, change the background color to #f9f9ff

• In the Design tab, click on Spacing and make the following changes:
  • Padding: 32px for top and bottom. And 34px for (left and right)

• In the Design tab, click on “Border,” then,
  • Round  Corners: 8px
  • Border Width: 1px
  • Border Color: #ebe9fe

Step 3: Create and Design the Second Pricing Plan

After creating the first price plan, it’s time to create and design the second one.

Click on the second column’s plus icon and insert the Advanced Pricing Table module. After that, delete premade pricing elements and add elements from the ground.

We will guide you through each step:

3.1: Add Price Plan, Price, Divider, and Feature

To add the name, price, divider, features, and buttons for the second pricing plan, follow the similar process as the first. But, you must have to tweak the element colors to match the second plan’s background.

Let’s proceed with adding second pricing plan’s elements:

• Add your second pricing plan’s name by following step 2.1. While adding text color by going to Design tab > Element Text > Element Text Color, use this code: #ffffff

• Follow step 2.2 to add your second pricing plan’s pricing. Also, while adding element text, prefix and suffix text color, use the following codes:
  • Element Text Color: #ffffff
  • Regular Price Prefix Text Color: #ffffff
  • Regular Price Suffix Text Color: #eeeeee

• By following step 2.3 you can add a short text just below the price. Add #ffffff as an element text color.

• Follow step 2.4 to add a divider. And set the divider color to #ebe9fe

• To add feature, follow step 2.5 and make sure to add #ffffff as an element text color.

• To add a second pricing plan’s button, follow the same steps of 2.6.  However, you have to make certain changes by going to Design tab > Button Style
  • Button Text Color: #000000 and hover color: #ffffff
  • Button Background: #ffffff and hover color: #000000

Note: 

3.2: Add Ribbon

• To add ribbon on the second pricing plan, click on “Add New Pricing Item”
• Select “Ribbon” from the element type and then make the following changes:
  • Ribbon Text: Write down the text you want to show in the ribbon
  • Ribbon Text Padding: 20px for top and bottom, 4px for left and right

• Ribbon Position: Top Left
• Click on the “Background” setting and add this background color: #faff00

• Go to Design tab > Element Text and then make these changes:
  • Element Font: Inter
  • Element Font Weight:  Regular
  • Element Font Style: Uppercase
  • Element Text Color: #000000
  • Element Line Height: 21px

3.3: Add Background Color, Custom Spacing,and Border

• In the module’s main settings panel, click on “Background” and then make these changes:
  • Click on “Add Background Gradient”
  • Gradient Stops: 0% (#c446fc) and 100% (#6d54de)

• Click on Design tab > Spacing and then make these changes:
  • Padding: 32px (top and bottom), 34px (left and right)

• In the Design tab, click on “Border,” then,
  • Round  Corners: 8px
  • Border Width: 1px
  • Border Color: #ebe9fe

Step 4: Create and Design the Third Pricing Plan

The design of the first and third plans of our demo is almost the same, and the only difference is price and feature description. So simply follow step 2 to create a third pricing plan.

Final Preview Our Created Pricing Table

Have a look at the final preview of our created pricing table in Divi:

BONUS: Create Pricing Table with Pre-made Template

After seeing steps one to four, you might think it’s a lot of work. 

Actually, it’s not! You can easily create a completely similar table within a minute by using DiviFlash’s no. 4 pre-made templates.

In the demo section, you will also see a total of 13 table layouts, all of which are free to download and use.

Wrapping Up

Now you know how to create pricing table in Divi both manually and with the help of a pre-made template.

Manually, you can create a table by following just 4 simple steps. Alternatively, you can use DiviFlash’s free templates to create a pricing table in no time. 

The choice is yours!

If you have any questions regarding pricing table creation, don’t hesitate to leave a comment. We will provide a personalized solution just for you.