Pros and Cons Box Using Kadence Blocks

In this Kadence Blocks tutorial, you will learn how to create a Pros and Cons box using Kadence blocks.

To create this pros and cons section, I have used the free version of Kadence blocks on a Kadence pro website.

To understand what are features you get with free version and Kadence blocks pro, have a look at the Kadence blocks review post.

Steps of pros and cons box using Kadence blocks

  1. Insert an outer Kadence Row Layout block with 850 pixels max width
  2. Add an Inner Kadence Row Layout block with two sections; for pros and cons
  3. Customize Pros section
  4. Add first Row Layout block in pros section for background icon
  5. Add second Row Layout block in pros section for thumbs-up icon
  6. Add third Row Layout block in pros section to hold ‘Pros’ title and Pros points
  7. In the third Row Layout add Advanced Text block for ‘Pros’ title
  8. Again, in the third Row Layout add Icon List block for pros points
  9. Use Kadence Copy and Paste styles from Section 1 to Section 2
  10. Copy all 3 Row Layout blocks from Section 1 to Section 2
  11. Modify colors, icon, and icon list accordingly

Why Create a Pros and Cons box using Kadence Blocks?

Kadence blocks does not come with a built-in pros and cons box. Thus, you will need to create one.

Firstly, if you already have Kadence blocks, it is easy to follow the steps and create a pros and cons section.

Secondly, Kadence blocks works on all WordPress themes.

Third, displaying a pros and cons section for a product or service review is beneficial for your readers.

If you are a blogger, affiliate marketer or review publisher, displaying a pros and cons table is very important. Your visitors rely on positive and negative points before making a buying decision.

Just like pros and cons box, displaying affiliate box and pricing tables are equally important for your website.

Steps to Create Pros and Cons Box Using Kadence Blocks

Before we start our step-by-step procedure, I’d like you to have a look at what we are going to create.

made a pros and cons table by kadence blocks
Pros/Cons Section built by Kadence Blocks

Time needed: 10 minutes

In this ‘how to’ guide, we are going to use Kadence blocks Row Layout block, Advanced Text block, Icon block, and Icon List block.

  1. Start by adding a Kadence Row Layout block

    First, you need to add a Kadence Row Layout block. Hit the plus icon, add a single column Row Layout block, give overall padding of 25 pixels and under Structure settings give Custom Content Max width of 850 pixels.

    Note:- To keep the page content width, select Inherit from theme.

    outer kadence row layout block to contain pros and cons box in wordpress

  2. Add a two column Row Layout block for Pros and Cons sections

    Next, from the list view, click on the outer Row Layout block’s section and add a two column Row Layout block.

    A two column Kadence Row Layout block gives you two sections. We will use the first section for the pros box and second section for the cons box.

    Also apply a Column Gutter width of 60 pixels.

    row layout block with 2 sections for pros and cons table

  3. Customize the first section for Pros box

    To customize the first section for Pros box, go to the list view, click on the first section under the 2 column row layout block then change padding, apply border, border color and box shadow to border.

    Follow the customization;

    Top padding – 10 pixels
    Right padding – 15 pixels
    Bottom padding – 10 pixels
    Left padding – 15 pixels

    Border Styles
    Width – 5 pixels overall
    Radius – 10 pixels overall
    Color – 27AE60
    Box shadow – Color:27AE60 alpha 0.55, X:3, Y:10, Blur:14, Spread:1

    pros section box from kadence pros and cons table
    Now, we will need to add two Kadence Row Layout blocks, each having one Kadence Icon block.

  4. Add the first Kadence Row Layout block in the section

    Go to the list view, click on the section and add your first Row Layout block.

    Add a Kadence Icon block in this Row Layout block, and reduce the Row Layout block’s top margin to -85 pixels.

    Change the Icon size to 90 and color to FFFFFF


    inserting kadence icon block in background for pros section

  5. Add the second Kadence Row Layout block in the section

    Again click on the section and insert another Row Layout block.

    Reduce the Row layout’s top margin to -135 pixels.

    In this Row Layout block, add another Kadence Icon. This time you need to find the thumbs-up solid icon.

    By default the icon size will be 50, leave it to that. Just change the icon color to 27AE60

    green color thumbs up icon for pros section

    This way you can give a better appearance to your thumbs-up and thumbs-down icons for pros and cons sections respectively.

  6. Add the third Row Layout block for ‘Pros’ title and pros points

    Go to the list view, click on the pros section, and add the third Row Layout block.

    In this Row layout block, we are going to add Kadence Advanced text block and Kadence Icon List block.

    The Advanced Text block will hold the ‘Pros’ title, and the Icon list block will display all the pros points.

    kadence row layout block to enter pros title and points in pros and cons box

  7. Add Kadence Advanced Text block for ‘Pros’ title

    Under the third Kadence Row Layout block, click on the Section and add a Kadence Advanced Text block.

    Align to center and change the heading tag to H3, because your Pros and Cons section will already have a H2. So make sure that the ‘Pros’ and ‘Cons’ titles in each section are H3.

  8. Add Kadence Icon List block for pros points

    Now that you have completed adding the ‘Pros’ title, add a Kadence Icon List block for inserting the pros points.

    An Icon list block comes with icons on the left side, giving a neat list style look.

    Go to the third Kadence Row Layout’s section and add Icon List block. Add multiple lists to describe the positive points.

    Perform the following customization;

    Font size – 20 pixels

    Under Edit All Icon Styles Together
    Icon size – 20
    Line width – 3
    Icon color – 27AE60

    editing pros icon list in kadence blocks for pros and cons box in wordpress theme

  9. Use Kadence Copy/Paste Styles feature

    Since, we have already made the pros section, you need to copy and paste styles to the next section (cons section).

    For this, you need to go to list view, click on pros section block and from the option above, click on copy styles.

    Then, click on the Row Layout block’s next section and paste those styles.

    copy and paste styles in kadence blocks for pros and cons section in wordpress

  10. Copy the 3 Row Layout blocks of ‘Pros’ section and paste into ‘Cons’ section

    To make our work simpler let us copy the 3 Row layout blocks from the ‘Pros’ section and paste them into the ‘Cons’ section.

    Go to list view, drop down the section that holds all the 3 Row layout blocks, select all of them, and copy the blocks.

    Now, go to the next Section block, insert a paragraph block, and then paste your copied blocks.

    copy and paste kadence row layout blocks from pros section to cons section

  11. Change Border color, Icon, Icon color, and title of section to ‘Cons’

    You need to change the border color, icon color and title to ‘Cons’.

    From the list view, click on the Section, change border color and box shadow color to E74C3C

    Just change box shadow alpha channel settings to 0.55, remaining settings are same as the ‘pros’ section.

    Also, go to 2nd Row Layout block and modify the Icon from ‘thumbs-up’ to thumbs-down’.

    modifying kadence blocks section and icon for cons section

  12. Adjust the margin of the Icon block and modify Kadence Icon List block

    If you carefully see the ‘Cons’ section’s thumbs-down icon, we need to re-adjust the margin to make it vertically aligned with the thumbs-up icon of the ‘Pros’ section.

    From the list view, go to the 2nd Row Layout block of section 2 and reduce the top margin to -120 pixels.

    Plus, go to the 3rd Row Layout block, click on the Kadence Icon List block, under ‘Edit All Icon Styles Together’, change the icon type.

    Finally, update your cons with drawbacks (negative points).

    change kadence icon list block and content in cons section for pros and cons table in wordpress

Summary – Pros and Cons Box Using Kadence Blocks

If you have followed all the steps until here, congratulations. You have successfully created a pros and cons box in WordPress theme using Kadence Blocks.

It is easy and does give a richer text look to your reader, making them focus on the most crucial positive and negative points before buying a product.

For your reference, I’d like to show you an image of the entire list view created for making this pros and cons section at my side.

image of list view with information for creating pros and cons table using kadence blocks
List View and information of all the Kadence Blocks used for creating this pros and cons section in WordPress

Conclusion

I hope you’ve learnt how to create a beautiful looking pros and cons box using Kadence blocks.

With the help of Kadence blocks you can also create things like

  1. WordPress Table of Contents
  2. Affiliate Box
  3. Pricing Table with Toggle

Make sure to check them out and try them on your website.

Share and Enjoy !

Shares

Leave a Reply

Your email address will not be published. Required fields are marked *

Shares