How to Add Pricing Table in WordPress using GenerateBlocks?

In this tutorial, we will try to add pricing table in WordPress using GenerateBlocks. We are going to use the GenerateBlocks plugin to create a pricing table where you don’t require any other pricing table plugin.

With GeneratBlocks you can create awesome design including hero pages, landing pages, subscription pages, etc, or even a whole website. so, why not use a multipurpose plugin rather one specific plugin.

In this guide, you will also learn to

  • Use Container and Grid.
  • Use Buttons and Headline.
  • Add Pricing Table with Gradient Design.
  • Create a Responsive Pricing Table in WordPress.
  • So on…
How to Add Pricing Table in WordPress using GenerateBlocks

Create Pricing Table in WordPress using GenerateBlocks

Here we are going to create a free pricing table which will be simple. Moreover, you can also design an advanced pricing table using GenerateBlocks.

I am using GenerateBlocks with GeneratePress WordPress Theme, also it is compatible with any other themes, so try it.

1. Install GenerateBlocks Plugin

As I have already written GenerateBlocks Review, and you can simply install the plugin by visiting your Dashboard > Plugins > Add New.

Search GenerateBlocks, Install and Activate the plugin.

Install GenerateBlocks for Free

2. Add a Container for Pricing Table

After installing the Generateblocks plugin, go the page or post where you want to add the pricing table.

Now, you will see an additional blocks like Container, Grid, Headline, Buttons in Block Editor.

Four Blocks in Generateblocks

Here, we are going to use all of them in this pricing table tutorial. So, let’s start with the Container block.

I am using full width to add a pricing table i.e. I have disabled sidebars so that we can enjoy a free full-width pricing table.

Click on Add Block Icon and Add a Container Block.

Add Container Block

Now, you can add Background Color, Image or Background Gradient for the Container

Go to the block sidebar where you can use different settings for Container, Grid, Buttons, Headline, etc. like Colors, Spacing, Typography.

Here, I am going to add background gradient.

Enable Use Gradient Option, Direction: 180, Color One: #333399 with stop position 0%, Color Two: #000000 with stop position 100%. Use full opacity for the color.

Background Gradient for Container

3. Add Grid Layout

You can add either 3, 4 or 5 column grid layout, it’s your choice. I am adding a 3 column grid for the pricing table.

Add a New Single Column Grid Inside the Container, we will duplicate the grid into 3 Column Grid Layout later after styling the single grid

Single Column Grid Layout

Now, we are going to style the single column grid. Go to Container inside the Grid (not the main container).

Container Inside Grid

Now, Let’s add a Background color for the grid. I am going to use White Color.

Background Color White for Single Column Grid

Go to Spacing Section and use Padding and Border-Radius for the block.

Spacing for Pricing Table

Now, use a Headline block (not to get confused with Headings).

Add a Title using Headline. so in Headline, use paragraph Element.

Headline for Pricing Table in WordPress

Add a Price Under Title using Headline. We are going to use the H2 element from Headline Block.

So, Click the + icon and add a new headline block and add Text-Color. I am using a blue color.

Add Price using Headline Block

Now, List the features in your pricing table.

Here, we are going to use paragraph element from Headline block (not from Headings)

Adding Features in Pricing Table

Now, add a CTA button so that you can lead use to the signup page with hyperlink.

We will use Buttons from GenerateBlocks so don’t get confused with Gutenberg block Buttons.

Generateblocks Buttons
Signup Buttons for Pricing Table

We have finished creating a layout for the pricing table. Now, let’s convert it into a 3-column grid layout.

Go to Block Navigation and Click on Container inside the Grid.

Container Inside Grid

Since, we want to convert our single grid layout into 3-column grid and the single column grid is taking 100% width so, to convert into 3-column grid, we will use 33.33% container width for each of 3 grid.

33.33 percent grid layout

After this, we are going to duplicate the first grid into 2 more grid so that we can have a 3-column grid layout.

Duplicate the Pricing Table Grid

Now, Our 3-column Grid block looks like this, here we will edit more and make one final pricing table.

3 Column Grid Layout

Let’s edit the middle pricing table. Change the title and price. Also, we will add a Background Gradient.

Go to the middle table and Enable Use Gradient from Background Gradient Option, Direction: 180, Color One: #8e2de2 with stop position 20%, Color Two: #4a00e0 with stop position 80%. Use full opacity for the color and use text-color as white.

Middle Pricing Table

For the last column pricing table, simple change the title and the price.

4. Result

The 3-Column Grid pricing table in WordPress looks like the screenshot below.

Free Pricing Table in WordPress

At the End

This is a simple way to add free pricing table in WordPress using Generateblocks. You can change the layout using your own style or even you can change this layout from 3-Column Grid Layout to 4-Column Grid Layout.

You can also download the pricing table for WordPress JSON file and import it into reusable block and use it into your website.

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, Blogging. I mostly publish tutorials on GeneratePress and GenerateBlocks.

Leave a Comment