Pros and Cons Box Using 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.
   
   

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.
   
   

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
   
   
   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
   
   
   

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
   
   
   
   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.
   
   

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
   
   

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.
   
   

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.
    
    

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’.
    
    

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).