Create a Pricing Table Using GenerateBlocks

Time needed: 15 minutes

I have used the free version of GenerateBlocks to create the following pricing table chart on GeneratePress premium theme.

1. Install GenerateBlocks WordPress Plugin

   To install the GenerateBlocks plugin, go to your WordPress dashboard, hover your mouse on Plugins, and then click on Add New. Once the page opens, type GenerateBlocks, click on Install, and Activate.
   
   

2. Insert GenerateBlocks Container Block

   Wherever you want to create your pricing table, directly insert a GenerateBlocks container block. This is your main container block.
   The overall pricing table design lies within this block.
   
   Change Inner container width to 800 pixels.
   
   

3. Apply Background Color & Border to main Container Block

   Now we need to to apply some background color to the container block that differentiates the pricing table section from the rest of the page. Plus, we will also apply border to our main container block and give it some border radius.
   
   I have applied border size as 2 pixels, border radius as 3 pixels, container background color as DFF4FF, and border color as 2D68C4.
   
   

4. Apply a GenerateBlocks Headline Block

   Click on the main container block and insert a GenerateBlocks Headline Block. Align the headline block in the center and write ‘Pricing Plans’.
   Note:- If your page already has an H1 title, turn the headline block into H2.
   
   Give top and bottom margin of 25 pixels. Apply text color. I have applied color 2D68C4 to the text.
   

5. Insert a GenerateBlocks Grid Block

   Click on the main container block and insert a GenerateBlocks grid block of 1 column.
   GenerateBlocks grid block automatically creates container block(s) within the grid block.
   Following that, change Container Layout Width to 33.33%. We are going to create 1 grid container block and duplicate it to generate two more blocks.
   
   

6. Give Background Color to the Inner Container

   Click on the grid’s container block. Change background color, apply padding and border radius.
   
   I have given;
   Background color – FFFFFF
   Padding Right – 12 pixels
   Padding Bottom – 35 pixels
   Padding Left – 12 pixels
   Border Radius overall – 10 pixels
   
   

7. Create Headline Block for Product Title

   Now, add a GenerateBlocks Headline Block.
   Since, the main headline block with the text ‘Pricing Plan’ is already an H2. Therefore, change this headline block’s tag to H3.
   
   Apply top and bottom margin, and change text color relevant to the color scheme you follow.
   
   I have given the text to this headline block as ‘Product 1’.
   
   Top Margin – 20 pixels
   Bottom Margin – 20 pixels
   Text Color – 2D68C4
   
   

8. Add Grid Block for Pricing Information

   After adding product title, it is now time to add the price. We need to also mention the price monthly and/or yearly.
   
   For that, you need to add a 2 column grid block.
   
   The first container of the grid block will contain the price in numerical value. Whereas, the second container from the grid block will include text like ‘per month’ or ‘per year’.
   
   

9. Add Pricing Information

   In the first column (container block) of the grid block, add a GenerateBlocks headline block and make it a Paragraph tag. Add numerical price value as text and justify text on right hand side.
   
   In the second column (container block) of the grid block, add another GenerateBlocks headline block and make it a paragraph tag. Add text like ‘per month’ or ‘per year’. Select text, drop down the font size and apply top padding. So, that the text vertically aligns with the price value.
   
   

10. Add Features to the pricing Container Block

    After inserting the headline block, it is now time to add features of your product.
    Click on the grid’s container block and add a Gutenberg Paragraph block.
    Later, duplicate that block couple of times, just change the text.
    
    

11. Add Buy Now GenerateBlocks Button Block

    After adding features to your product, it is time to add a GenerateBlocks Button block.
    Click on the grid’s container block and insert a button block.
    Give an appropriate text like ‘Buy Now’, align to center, and adjust the padding accordingly.
    
    I have changed the following;
    
    Font Style – Bold
    Font Size – 18 pixels
    Top Padding – 9 pixels
    Right Padding – 14 pixels
    Bottom Padding – 9 pixels
    Left Padding – 14 pixels
    Border Radius overall – 10 pixels
    
    

12. Duplicate the Grid container block

    After completing the first grid container block, just duplicate it twice for two more product price containers.
    
    

13. Edit content in other two Container Blocks

    Add more features and/or services to the other two pricing containers. Plus, also edit the price as well.
    
    This is how it should look like.
    
    
    
    The only problem I see here is that, pricing information and buy now button should be vertically at an equal height.
    It’s easy to do that as well, we will see in the next step.

14. Fill vertical space in GenerateBlocks Grid Block

    Now we just need to align the buttons in a straight horizontal line.
    
    I have made a CSS class called align-buttons, and applied it to the main grid block’s additional CSS classes field.