Friday Freebie – 8 Free Pricing Table Presets for Beaver Builder

Welcome once again to our Friday Freebie series. Today, we have come up with something really new for you. We present in front of you 8 free Pricing Table presets. Nidhi & Ramesh, from our team, built these beautiful pricing tables using Beaver Builder’s Pricing Table module and custom CSS. You can choose amongst them as per your requirement.

Beaver Builder Pricing Table Module Presets

Beaver Builder has simplified the web development process for a lot of users. Although, it provides great functionality there are some limitations with the design options. So, we decided to design some presets and share them with you. Here are 8 beautifully designed Pricing Tables built using Beaver Builder Modules and custom CSS.

Click here to check out a live demo.

beaver-builder-pricing-table

How to use a Pricing Table Preset

Each Pricing Table preset uses a Custom CSS class. We have listed the CSS class below and shared a link to the CSS snippet that you will need to copy.

Under Advanced Tab of the Pricing Table module, add the specific CSS class in CSS Selectors section.

After adding the CSS Class, copy the CSS from the links given and paste it under Tools > Layout CSS / JS > CSS Tab, or simply to your child theme’s style.css file.

pricing-table-setting-beaver-builder

Style 1

This preset will be a perfect fit for your site with minimal design. The subtle blue color is used to highlight your preferred pricing option. You can customize the colors in CSS as per your requirements.

CSS Class: pricing-table-style-1
Click here to get CSS style

pricing-table-beaver-builder-style-1

 

Style 2

A dark background and contrasting blue color will be perfect for your website with bold looks and dark color scheme.

CSS Class: pricing-table-style-2
Click Here to get the CSS style

pricing-table-beaver-builder-style-2

 

Style 3

If you want to go in for a two colored bright pricing table, choose this pricing table.

CSS Class: pricing-table-style-3
Click Here to get the CSS style

pricing-table-beaver-builder-style-3

 

Style 4

Again a beautifully designed Pricing Table with high contrast colors. This style highlights the middle section with a bigger size. The subtle shadow around the middle column makes it stand out. It will be perfect for a creative agency website or an app.

CSS Class: pricing-table-style-4
Click Here to get the CSS style

pricing-table-beaver-builder-style-4

 

Style 5

If you are a fan of iOS Gradient style then this one is the right pick for you.

CSS Class: pricing-table-style-5
Click Here to get the CSS style

pricing-table-beaver-builder-style-5

 

Style 6

Another minimal design with a highlighted price. This will be a better fit for your creative site that uses round corner buttons and elegant typography.

CSS Class: pricing-table-style-6
Click Here to get the CSS style

pricing-table-beaver-builder-style-6

 

Style 7

If you offer services and have a description to add in each section then here’s a beautiful, minimal design. Change the colors to your choice.

CSS Class: pricing-table-style-7
Click Here to get the CSS style

pricing-table-beaver-builder-style-7

 

Style 8

And here’s the last one with shadows, round corners, and left aligned text. This is a beautifully designed Card Style Pricing Table.

CSS Class: pricing-table-style-8
Click Here to get the CSS style

pricing-table-beaver-builder-style-8

Did you know?

You can cut down your design and development time by using PowerPack Beaver Builder Addons. PowerPack offers a set of creative, unique modules and bunch of extensions for Row & Column settings like – Round corners, Shadow, Row Separators etc. Check out all the custom Beaver Builder Modules that PowerPack offers. Not only this, PowerPack also has 150+ Beaver Builder Templates for building various websites.

4 Comments

  1. Athlone on December 30, 2016 at 11:21 pm

    Awesome styles and free too, thanks guys.

    • Puneet on January 6, 2017 at 9:05 pm

      You are welcome! 🙂

  2. Elizabeth on April 14, 2017 at 10:39 am

    What is I want everything except the buttons. How can I use this but remove the buttons?

    • Puneet on April 20, 2017 at 2:02 am

      Hi Elizabeth,

      You can hide the buttons using CSS. Will that work for you?

Leave a Comment





30 Shares
Tweet
Share30
+1