Custom Pricing Tables Using Images and Font Awesome 5

May 5, 2018 | Free Layout | 8 comments

I recently had to make some custom pricing tables for a project and thought something similar might be useful for others, so I’ve created a pricing tables section for you to download and customize to match your site. I’ve added images and Font Awesome 5 icons but small square images can be used instead of Font Awesome, ideal size would be between 32px and 50px wide.

Some basic CSS knowledge is required, be sure to read through code comments.

Install Font Awesome 5

  • First go here and copy everything in the code box. As of this post date it’s at version 5.0.12 but it may be a later version for you.
  • then go to Divi theme options > integration and paste the code into the <head> area.
Free Divi Pricing Tables | A Girl and Her Mac
Free Divi Pricing Tables | A Girl and Her Mac

Import the layout into your Divi library

  • Download the zip file using the Download button above.
  • Unzip the file you downloaded and import the included .json file into your Divi library. After that it will be available for you to add as a section to any page/post using the Divi builder.
  • If you’re new to Divi here are instructions on how to import a layout into your library.
  • If you have other pricing tables and add this to that page you will have issues with images showing up (because each pricing table is automatically assigned a numerical value so my numbers won’t match yours).

Add the CSS and tweak

  • Below is all the CSS you need to get it looking like the demo. You’ll need to replace the URL paths to your images for each table.
  • The CSS can go in your Divi theme options > custom CSS box (recommended), child stylesheet, or page CSS panel.

{;} css code

/*******************************************/
/********** CUSTOM PRICING TABLES **********/
/*******************************************/
.custom-pricing-tables .et_pb_pricing_heading {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 20px 10px;
}
.custom-pricing-tables .et_pb_pricing_table_wrap {
    display: flex;
    justify-content: space-between;
}
.custom-pricing-tables .et_pb_pricing_table {
    padding-bottom: 50px;
    border: none;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.1);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.custom-pricing-tables .et_pb_featured_table {
    margin-top: 30px; /* remove this line if you want the featured slightly higher than the others like default */
    -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.custom-pricing-tables .et_pb_pricing li span {
    display: inline-flex;
}
.custom-pricing-tables .et_pb_pricing li {
    font-size: 18px;
    padding: 30px 3em 20px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.custom-pricing-tables .et_pb_pricing li:last-child {
    padding-bottom: 20px;
    border-bottom: none;
}
.custom-pricing-tables .et_pb_pricing_content {
    margin-top: 190px;
    padding: 30px 0;
}
.custom-pricing-tables .et_pb_pricing_content_top {
    padding-bottom: 20px;
}
.custom-pricing-tables .et_pb_pricing_content_top:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -220px;
    width: 100%;
    height: 220px;
}
/*** INDIVIDUAL PHOTOS IN PRICING TABLES - position and size are repeated on purpose ***/
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_0 .et_pb_pricing_content_top:after {
    background: url("https://placehold.it/600x400"); /* replace URL path to your image for each */
    background-position: center;
    background-size: cover;
}
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_1 .et_pb_pricing_content_top:after {
    background: url("https://placehold.it/600x400");
    background-position: center;
    background-size: cover;
}
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_2 .et_pb_pricing_content_top:after {
    background: url("https://placehold.it/600x400");
    background-position: center;
    background-size: cover;
}
.custom-pricing-tables .et_pb_pricing_table.et_pb_pricing_table_3 .et_pb_pricing_content_top:after {
    background: url("https://placehold.it/600x400");
    background-position: center;
    background-size: cover;
}
/*** FONT AWESOME ICONS ***/
.custom-pricing-tables .fa, 
.custom-pricing-tables .fab, 
.custom-pricing-tables .fal, 
.custom-pricing-tables .far, 
.custom-pricing-tables .fas {
    color: #559CAD;
    font-size: 22px;
    width: 32px;
    height: 32px;
    text-align: center;
    margin-top: 4px;
    margin-right: 6px;
}
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available, 
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fa, 
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fab, 
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fal, 
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .far, 
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available .fas {
    color: rgba(0,0,0,0.2);
}
/*** IMAGES INSTEAD OF FONT AWESOME ICONS ***/
.custom-pricing-tables .et_pb_pricing li.et_pb_not_available img {
    opacity: 0.2;
}
/*** MEDIA QUERIES ***/
@media only screen and (min-width: 601px) and (max-width: 1920px) {
    .custom-pricing-tables .et_pb_pricing li {
        padding: 30px 1.5em 20px;
   }
}
@media only screen and (max-width: 1330px) {
    .custom-pricing-tables .et_pb_row {
        max-width: 90% !important;
        width: 90% !important;
   }
}
@media only screen and (min-width: 1201px) {
    .custom-pricing-tables .et_pb_pricing_table, 
    .custom-pricing-tables .et_pb_column .et_pb_pricing_table {
        max-width: 24%; /* adjust this if you have less tables */
   }
}
@media only screen and (min-width: 601px) and (max-width: 1200px) {
    .custom-pricing-tables .et_pb_pricing_table, 
    .custom-pricing-tables .et_pb_column .et_pb_pricing_table, 
    .et_pb_column .et_pb_pricing_table {
        max-width: 49% !important;
        min-width: 49% !important;
        width: 49% !important; /* adjust these if you have less tables */
   }
}

Notes:

  • Some basic CSS knowledge is required, be sure to read through code comments.
  • If you have other pricing tables and add this to that page you will have issues with images showing up (because each pricing table is automatically assigned a numerical value so my numbers won’t match yours).
  • I’ve assigned the section a class so the CSS will only affect this pricing table.
  • I’m using a combination of module settings and custom CSS, I suggest looking through the module settings before attempting to edit.
  • The prices and services are totally made up, please don’t take my fake tables as a guide for pricing! "😜”
  • Images in the demo are not included.
  • The background seamless pattern is included and I got it here.
  • Screenfly is just an online emulator to give an idea of what a site/page looks like on multiple browser sizes. You’re still responsible for your own real world testing.