How to Style the Divi Theme Pricing Table Modules

For Divi Theme and Divi Builder users. This free tutorial on How to Style Divi Theme Pricing Table Modules has been made to help you work more quickly and save you time and money. In an easy to follow tutorial that you can come back to any time you get stuck you will find useful ‘how to’ instructions.

Introduction

In this tutorial, you will learn how to create good looking Divi Theme Pricing Table Modules. The tutorial will be separated into several sections. The main sections you are going to learn about are:

  • Creating a Section
  • Customising a CTA Module
  • Customising a Pricing Table Module
DemoDownload

Creating the Section Structure

Create a section 1/3 + 2/3. In the first column add two CTA modules. In the latter one, add the Pricing Tables module, as shown in the image below:

Pricing Tables Module section structure

Section structure

Add the class

Click the section settings icon and add the class: day1-pt2 day1-pt. Now it should look like this:

section class

Section class

Add the CSS

Now that we have added the class let’s also add some CSS. While you are on the edit page screen, in your Divi Builder, click the settings icon:

page settings

Page settings

Then, paste this CSS:

.day1-pt .et_pb_pricing_content .et_pb_pricing li span:before {
 display: none !important;
}

#page-container .day1-pt .et_pb_button_wrapper a.et_pb_pricing_table_button {
 padding: 11px 5px !important;
}

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_dollar_sign {
 color: #fff !important;
}

.day1-pt .et_pb_row {
 width: 95% !important;
}

.day1-pt2 .et_pb_promo .et_pb_button_wrapper {
 margin-top: 40px !important;
}

.day1-pt2 .et_pb_button_wrapper {
 margin: 0 0 0;
 padding: 0 !important;
}

.day1-pt2 .et_pb_column_2_3 {
 width: 57.1% !important;
}

.day1-pt2 .et_pb_column_1_3 {
 width: 33.666% !important;
 margin-right: 9.2% !important;
}

.day1-pt2 .et_pb_pricing_table {
 padding: 2.4vw 3vw 2.6vw !important;
}

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table {
 padding: 3.5vw 2.9vw 3.9vw !important;
}

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 1.1vw !important;
}

.day1-pt2 ul.et_pb_pricing li {
 margin-bottom: 13px;
}

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_dollar_sign,
.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_sum {
 font-size: 82px !important;
}

#page-container .day1-pt2 .et_pb_pricing_table.et_pb_featured_table a.et_pb_pricing_table_button:hover {
 color: #bc1544 !important;
 background-color: #fff !important;
}

#page-container .day1-pt2 .et_pb_pricing_table.et_pb_featured_table a.et_pb_pricing_table_button {
 color: #fff !important;
 background-color: #bc1544 !important;
 border: none !important;
}


/*Responsive*/

@media only screen and (min-width: 1930px) {
 .day1-pt2 .et_pb_pricing_table.et_pb_featured_table {
 padding: 64px 40px !important;
 }
 .day1-pt2 .et_pb_pricing_table {
 padding: 40px !important;
 }

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 22px !important;
 }
}

@media only screen and (max-width: 1390px) {
 .day1-pt2 .et_pb_column_1_3 {
 width: 33% !important;
 margin-right: 3% !important;
 }

.day1-pt2 .et_pb_column_2_3 {
 width: 64% !important;
 }
}

@media only screen and (max-width: 980px) {
 .day1-pt2 .et_pb_promo .et_pb_button_wrapper {
 margin-top: 0px !important;
 }

.day1-pt2 .et_pb_column_1_3 {
 width: 100% !important;
 margin-right: 0% !important;
 }

.day1-pt2 .et_pb_column_2_3 {
 width: 100% !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table {
 padding: 4.9vw 2.9vw 4.9vw !important;
 }

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 2vw !important;
 }

.day1-pt2 .et_pb_column:first-child {
 margin-bottom: 40px !important;
 }

.day1-pt2 .et_pb_promo .et_pb_promo_description h2 {
 padding-bottom: 15px !important;
 }

.day1-pt2 .et_pb_promo:first-child .et_pb_promo_description h2 {
 padding-bottom: 9px !important;
 }
}

@media only screen and (max-width: 767px) {
 .day1-pt2 .et_pb_promo .et_pb_promo_description p,
 .day1-pt2 .et_pb_promo .et_pb_promo_description h2 {
 text-align: center !important;
 }

.day1-pt2 .et_pb_pricing_table {
 width: 100% !important;
 max-width: 400px;
 margin: 0 auto !important;
 float: none;
 margin-top: 0 !important;
 margin-bottom: 0 !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_dollar_sign,
 .day1-pt2 .et_pb_pricing_table.et_pb_featured_table .et_pb_sum {
 font-size: 52px !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table,
 .day1-pt2 .et_pb_pricing_table{
 padding: 40px !important;
 }

.day1-pt2 ul.et_pb_pricing li {
 margin-bottom: 0px;
 }

#page-container .day1-pt2 .et_pb_pricing_content {
 padding: 0 0 30px !important;
 }

.day1-pt2 .et_pb_promo .et_pb_button_wrapper {
 text-align: center !important;
 }

.day1-pt2 .et_pb_pricing_table:not(.et_pb_featured_table ) {
 margin-top: 30px !important;
 }


 #page-container .day1-pt2 .et_pb_pricing_heading {
 margin-bottom: 20px !important;
 }

#page-container .day1-pt2 .et_pb_pricing_content_top {
 padding-bottom: 12px;
 }

}

@media only screen and (max-width: 480px) {
 .day1-pt .et_pb_row {
 width: 90% !important;
 }

.day1-pt2 .et_pb_pricing_table.et_pb_featured_table,
 .day1-pt2 .et_pb_pricing_table{
 padding: 25px !important;
 }
}
 

Into Custom CSS box:

Custom CSS box

Custom CSS box

Click Save.

 

Click the  Row Settings icon:

Row settings

Row settings

Select the Design Tab in the Divi Builder and set these options:

  1. Use custom width – Yes, then set width to 1170px
  2. For Column1 Padding, add 7.1vw value to Top option

 

Designing the first CTA

In your Divi Builder, click your first CTA module settings button.

Call To Action module settings icon

CTA settings

In the Content Tab:

  1. Add Title
  2. Set Background to – No

In the Design Tab:

  1. Set Text Orientation to left
  2. Change Title color to #a7a7a7
  3. Change font to Lato
  4. Change font size to 16px

In the Advanced Tab:

You need to add a bit of CSS code here.

 

In the Promo Description field, paste this CSS:

padding-bottom: 0;

In the Promo Title field, paste:

padding-bottom: 27px;

 

Designing the second CTA

This CTA is going to be more detailed than the first one. Fill in all the fields. Title, Button text and URL and Content.

CTA content

CTA content

Also, set Background to No.

That was for the Content tab.

 

For the Design tab, set this option:

  1. Text orientation should be left
  2. Title font to be Poppins and font weight bold
  3. Title size 36px, colour should be black
  4. Add letter spacing of 1px too
  5. Set Title line height to 120%
  6. For body text, choose Lato, Regular, 16px with colour: #a7a7a7

Also, enable Button Custom Styles option. Then, set this option for the button:

  1. Button text size to be 18px
  2. White text colour
  3. Background colour to: #ff0f53
  4. Border width to 1px and colour #ff0f53 with radius 27px
  5. Disable option to show button icon
  6. Font to Poppins and font weight to be Medium
  7. Hover colour should be #bc1544, both background and border colour
  8. Hover text colour remains white
  9. Hover border radius should be as same as 27px
  10. Button alignment to left

Now select the Advanced Tab.

Here you need to add bits of CSS code.

Add this to the Promo button:

  padding: 12px 46px !important;

And also this for the Promo title:

  font-weight: 400;
  padding-bottom: 38px;

Designing the Divi Theme Pricing Table Modules

First, add two tables by clicking “Add New Pricing Table” button. I created two tables and named them “Starter” and “Pro”.

Adding new Pricing Tables

Adding new Pricing Tables

 

Once  you have added tables, click the settings button to edit them. Add subtitle, currency, price, button text and of course content. Do this for both tables.

Also, add Button URL to hyperlink the buttons.

Now that we have content ready, select the Design Tab to make it look better.

Use these here options:

  1. Set Center items to – Yes
  2. Featured colour to #ff0f53
  3. Show Featured Table Drop Shadow – No
  4. For text, set Text Orientation to Center
  5. Table Header Background Colour: rgba(0,0,0,0)
  6. Make Title: Poppins, centered, black, 24px, regular
  7. Body text should be Poppins, regular, 16px, #8d8d8d with body line height of 24px
  8. Featured Table Header Text Colour: #fffff
  9. rgba(0,0,0,0)
  10. Featured Table Body Text Colour: #ffffff
  11. Subheader text: Poppins, Regular, 16px, black, line height 1em
  12. Currency and price text: Poppins, Regular, white, 52px
  13. Button: background #ff0f53. font white 16px, centered. You can use the same hover options as before
  14. Button border-width should be 1 and border colour #f8fafb, border-radus to 0.
  15. Set width to 100%
  16. Border width to 1px #bebebe

In Advanced Tab:

To the Pricing Heading add:

padding: 0 !important;
margin-bottom: 27px;

To the Pricing Title add:

padding-bottom: 13px;
font-weight: 500;

To the Pricing Subtitle add:

font-size: 16px;

To the Pricing Top:

border-bottom: 0 !important;
padding-bottom: 35px;

Currency:

margin-left: 0 !important;
position: static !important;

Pricing Content:

padding: 0 0 1.3vw;

Pricing Item:

padding: 0 !important;
list-style: none !important;
line-height: 230%;

And lastly, for the Pricing Button:

width: 100% !important;
padding: 11px 0 !important;

 

I just added some general design elements but let’s now stylize the two tables I created.

Select the first one you created and switch to Design tab.

  1. Make this table featured.
  2. Subheader: Lato, Regular, 16px, colour: rgba(255,255,255,0.5)
  3. Currency & Price: Poppins, Medium, 82px
  4. Set border width to be 0px
  5. Border radius should be 7px
  6. Center the button position
  7. Also, enable box shadow:

    box-shadow

    box-shadow

     

Switch to the Advanced Tab now.

In the Pricing Heading field, add:

 margin-bottom: 36px !important;

In the Pricing Content:

padding: 0 0 1.7vw!important;

Let’s edit the second table as well:

Open module settings, then second table settings and select Design Tab.

  1. Title: Poppins, Regular, 24px
  2. Body text: Poppins, Regular, 16px, body line-height: 24px
  3. Subheader text: Poppins, Regular, uppercase, centered, 16px
  4. Currency and Price: Poppins, Medium, 52px
  5. Use Custom Styles for the button
  6. Make button white with text colour: #ff0f53
  7. On hover, make the button text black and the background to white, use no borders
  8. Rounded corners 7px each
  9. Border width: 0px
  10. Enable Box shadow and use same values as for the first table

Advanced Tab settings:

Main Element CSS:

margin-left: -10px !important;
z-index: 10 !important;

 

That’s it, all done! Hope you enjoyed this ‘How to Style Divi Theme Pricing Table Modules’ tutorial. Feed-back is welcome. Use our Support page to send through suggestions or queries.

For more tutorials click here