One of the most important points of showing a product or service on your website is presenting the price. One of the best ways to present your prices is through pricing tables. This is a type of call to action. Well-designed pricing tables help maximize conversions. They can make the difference between someone overlooking your options and prices or making the choice you want them to make.
Fortunately, Divi has what you need to design effective pricing tables. In this article, we’ll take a look at the Divi pricing table, see how to use it, and see some examples of pre-designed pricing tables available in the Divi marketplace.
What is the Divi Pricing Table?
The Divi Builder includes a pricing table module built in (to see more about Divi Builder modules, see the article Divi Modules Ultimate List here on the Divi Cake blog).
Many of the Divi child themes and layouts available in the marketplace and within the Divi Builder (such as this one from the Elegant Themes’ Digital Product Pricing page as seen in the image above) include styled pricing tables.
The pricing table shows each price as a card within a table. The module includes an editor where you can create the pricing cards, or tables, and style them. Add as many tables as you want and style them as a group or individually.
A well-designed pricing table will:
- Show the benefits of your products or services
- Use titles that make sense
- Be easy to understand
- Make it easy to see the best option
With this in mind, let’s take a look at how to use the Divi pricing table.
How to Use the Divi Pricing Table
The module includes the expected tabs. It also includes an option to add a new pricing table. The Content tab includes an area where you can add a new price, show bullets, add a link, and customize the background.
The Design features are extensive. They include layout options, bullets, text, button, size, spacing, border, box shadow, filters, and animation. You can set the default settings for the module here.
The Advanced tab includes the expected CSS, attributes, and visibility options. It also includes options for transitions. You can set the default settings for the module here.
When you click to add a new pricing table it opens the settings for that table. In the Content tab, you can add the title, subtitle, currency symbol, the subscription cycle (if applicable), price, button text, content, link, and background. The Design and Advanced tabs are the same as the module. They can use the settings for the module, or you can override those settings for each price in the table individually.
In this example, I’ve added three prices to the pricing table. Each has its own title, price, and content, but they use the same styling.
For this one, I’ve added some styling to the module. Since I haven’t added styling to the prices, each of the prices use this styling. I’ve also drag-and-dropped the Best price to the center location and set it to be the featured table.
Now I’ve added styling to the center price and left the others at default. I’ve added spacing between the text, increased the size of the body text, changed the price to semi-bold, darkened the dollar sign and billing cycle, increased the size of the button, and added a touch of color to the background.
It’s easy to adjust any of the elements you want. This is just scratching the surface of what can be done with the pricing table.
Divi Pricing Table Layouts
There are several pre-styled Divi pricing table layouts available in the marketplace. Here’s a look at a few of them.
Colorful Pricing Table
Colorful Pricing Table is a pricing table with bold and soft colors to stand out. It also includes hover animation so the one you’re hovering over zooms and comes to the front. It comes with four custom CSS classes that you can use, modify, etc. It’s great for agencies, designers, developers, and more.
Price: $3.50 | More Information
Divi Pricing Tables Bundle 1 (Templates 1-10)
Divi Pricing Tables Bundle 1 comes with 10 pre-styled pricing table designs with each design having 3 layouts. The styling is colorful and elegant. I especially like the color patterns behind the titles. They also include box shadow hover animations.
Price: $25 | More Information
Pricing Table Section
Pricing Table Section comes with pre-styled colors that look great for services, membership sites, gyms, etc. The gold titles stand out well. It would look great over light or dark backgrounds, and over images.
Price: $3 | More Information
Elegant Pricing Tables
Elegant Pricing Tables is great for any type of digital product or monthly subscription. It has a clean design with title backgrounds matching the body and button backgrounds covering the full width of the bottom of the pricing tables.
Price: $9 | More Information
No matter how good your product or service pricing is, you still need to grab the attention of your audience and move them through your call to action. A well-designed pricing table can help. Fortunately, Divi has pricing tables built in and it includes lots of styling features to give your pricing tables a unique design.
You can customize them yourself, or use a premade design. If you want a head-start on your pricing table design, take a look at the pre-styled layouts available in the marketplace.
Do you use Divi pricing tables? Let us know about your experience in the comments.