Pricing tables are often the main CTA of a page. That’s why it is important to style them properly. With Divi, you can take many turns and create pricing tables exactly the way you imagine them. To give you some food for thought, we’ve created a stunning pricing table that you can use for any kind of website you’re working on. We’ll guide you through creating the outcome from A to Z using Divi’s built-in options only.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome on different screen sizes.

Desktop

styling a pricing table

Mobile

styling a pricing table

Download The Images for FREE

To lay your hands on the images that are used within this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Let’s Start Creating!

Add New Section

Gradient Background

Create a new page and add a regular section using the following gradient background:

  • Color 1: #ffffff
  • Color 2: #353272
  • Start Position: 50%
  • End Position: 50%

styling a pricing table

Spacing

Then, go to the spacing settings of the section and modify the custom margin and padding values.

  • Bottom Margin: 50px (Desktop), 20px (Tablet & Phone)
  • Left Margin: 50px (Desktop), 20px (Tablet & Phone)
  • Right Margin: 50px (Desktop), 20px (Tablet & Phone)
  • Top Padding: 0px
  • Bottom Padding: 0px

styling a pricing table

Add New Row

Column Structure

Once you’re done modifying the section settings you can go ahead and add a new row using the following column structure:

styling a pricing table

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings in the design tab.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

styling a pricing table

Spacing

Then, go to the spacing settings and add some custom padding values.

  • Top Padding: 94px
  • Bottom Padding: 177px
  • Left Padding: 150px (Desktop), 30px (Tablet & Phone)
  • Right Padding: 150px (Desktop), 30px (Tablet & Phone)
  • Column 1, 2 & 3 Left Padding: 10px
  • Column 1, 2 & 3 Right Padding: 10px

styling a pricing table

Add Text Module #1 to Column 1

Add Content

Time to start adding modules! We’re customizing the pricing table we want to create by using various modules. The first module we’ll need is a Text Module. Add the name of the first membership type in the content box.

styling a pricing table

Background Color

Once you’ve added the content, go to the background settings and add a white background color.

  • Background Color: #ffffff

styling a pricing table

Background Image

Switch over to the background image tab and upload the ‘divi-beautiful-pricing-table-background-pattern-1.png‘ file which you can find in the download folder that was shared at the beginning of this post.

  • Background Image Size: Cover
  • Background Image Position: Top Center
  • Background Image Repeat: No Repeat

styling a pricing table

Text Settings

Modify the text settings next.

  • Text Font Weight: Ultra Bold
  • Text Color: #ffffff
  • Text Size: 80px
  • Text Letter Spacing: -3px
  • Text Line Height: 1em

styling a pricing table

Spacing

And add some custom margin and padding values.

  • Top Margin: 5vw (Desktop), 0vw (Tablet & Phone)
  • Top Padding: 20px
  • Bottom Padding: 200px

styling a pricing table

Border

Continue by adding ’20px’ to the top left and right corners.

styling a pricing table

Box Shadow

To top it off, give the Text Module a subtle box shadow.

  • Box Shadow Vertical Position: -20px
  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: rgba(0,0,0,0.15)

styling a pricing table

Add Button Module to Column 1

Add Copy

The second module we’ll need in column 1 is a Button Module. Add some copy of choice.

styling a pricing table

Button Alignment

Then, go to the alignment settings and change the alignment to center.

  • Button Alignment: Center

styling a pricing table

Button Settings

We’ll continue by making some changes to the appearance of the button in the button settings.

  • Use Custom Styles for Button: Yes
  • Button Text Color: #ffffff
  • Color 1: #6932ff
  • Color 2: #30acf4
  • Gradient Direction: 100deg

styling a pricing table

  • Button Border Width: 0px
  • Button Letter Spacing: -2px
  • Font Weight: Ultra Bold

styling a pricing table

Spacing

Next, add some padding to the button to make it look nice and apply negative top margin to create an overlap with the previous module in the column.

  • Top Margin: -54px
  • Top Padding: 10px
  • Bottom Padding: 10px
  • Left Padding: 30px
  • Right Padding: 30px

styling a pricing table

Box Shadow

Last but not least, add a subtle box shadow.

  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: -14px
  • Shadow Color: rgba(0,0,0,0.3)

styling a pricing table

Add Text Module #2 to Column 1

Add Content

The next module we’ll need is another Text Module with the price of the membership type.

styling a pricing table

Background Color

Once you’ve added the price, go to the background settings and apply a white background color.

  • Background Color: #ffffff

styling a pricing table

Text Settings

Change the text settings next.

  • Text Font Weight: Ultra Bold
  • Text Color: rgba(0,0,0,0.05)
  • Text Size: 120px
  • Text Line Height: 1em

styling a pricing table

Spacing

And apply some custom padding values in the spacing settings.

  • Top Padding: 100px
  • Bottom Padding: 100px
  • Left Padding: 80px

styling a pricing table

Border

Then, go to the border settings and add ’30px’ to the bottom left and right corners.

 

styling a pricing table

Box Shadow

Last but not least, give the module a box shadow.

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 80px
  • Box Shadow Spread Strength: 0px
  • Shadow Color: rgba(0,0,0,0.21)

styling a pricing table

Add Text Module #3 to Column 1

Add Content

The next and last module we need in column 1 is another Text Module. Add the price of the membership type to the content box.

styling a pricing table

Text Settings

Change the text settings next.

  • Text Font Weight: Ultra Bold
  • Text Color: #000000
  • Text Size: 50px
  • Text Line Height: 1em

styling a pricing table

Spacing

And create an overlap between this module and the previous one by playing around with the custom spacing values.

  • Top Margin: -180px
  • Bottom Margin: 180px (Tablet & Phone)
  • Left Padding: 100px

styling a pricing table

Clone All Modules in Column 1 Twice & Place Duplicates in Remaining Columns

Once you’re finished modifying the modules in column 1, you can go ahead and clone each one of the modules twice and place the duplicates in the two remaining columns.

styling a pricing table

Change Content of Modules in Column

Change the content of the duplicates according to the two other membership types you’re sharing on your website.

styling a pricing table

Change Pricing Table in Column 2

Change Background Image of Text Module #1

We’re also highlighting the middle pricing table. Open the first Text Module in column 2 and change the background image into the ‘divi-beautiful-pricing-table-background-pattern-2.png‘ file you can find in the download folder.

styling a pricing table

Remove Top Margin of Text Module #1

To emphasize this membership type, we’re going to remove the top margin of the first Text Module in the spacing settings.

styling a pricing table

Change Button Gradient Background

We’ll also match the new background image using another gradient background for the Button Module.

  • Color 1: #fb32ff
  • Color 2: #ff304f
  • Gradient Direction: 100deg

styling a pricing table

Preview

Now that we’ve gone through all steps, let’s take a final look at the outcome on different screen sizes.

Desktop

styling a pricing table

Mobile

styling a pricing table

Final Thoughts

In this post, we’ve shown you how to style a beautiful pricing table for your next Divi project. We’ve guided you step by step through the tutorial and achieved a stunning outcome using Divi’s built-in options only! If you have any questions or suggestions, make sure you leave a comment in the comment section below.

The post How to Style a Beautiful Pricing Table in Divi appeared first on Elegant Themes Blog.