Last Updated on
This post is a sequel to the old ‘Add Pros and Cons Boxes‘ tutorial. I thought a lot of things changed to the way we create content in WordPress today and I made this new, updated version on how to add Pros & Cons section (boxes) to your review articles.
When I first saw the Gutenberg editor, I hated it.
I instantly searched for a solution to bring back the old look of my WordPress post backend. A look I was so comfortable with, a comfort built for more than 15 years.
Luckily I was not alone and I was more than happy when I saw that the thoughtful guys at WordPress made a plugin called Classic editor.
I was skeptical about the new blocks editor, with all the popular page builders out there, what was WordPress thinking? How would they compete with Elementor or WPBakery’s powerful functions?
Time passed and I kept ignoring the Gutenberg editor. One day I installed a fresh copy of WordPress on a new site I was starting then, and I thought I’d give it a try.
At first, I hated it, but then I gradually started trying new addons, new blocks, different styles, to realize one day that this is the future of WordPress and page building.
I’m still switching to the block editor here on wpctrl.com, as there are a lot of posts using old shortcodes and I have to manually review each and every one of them, but I’m in the proces.
This particular post is made with the Block editor!
Let’s start with the Pros & Cons Examples (Gutenberg edition)
When you forget the old habits in the ‘Edit Post’ screen, the TinyMCE, Meta Boxes, etc. and get used to the Block editor, you will love it.
First, go and grab some free add-on plugins that you will need for these examples.
Plugins used in the tutorial
Method #1 – Using CoBlocks
This is my first suggestion to create a Pros and Cons section for your reviews.
– Good Price
– Good Support
– Fast & Reliable
– Lack of Support
– Slow and Unreliable
The section above is made with the free plugin CoBlocks.
Here is the exact process:
Choose your desired place to place the boxes in your post and click on the ‘+’ sign to add a new block.
Scroll down and tap on the CoBlocks accordion.
From the drop-down menu choose the ‘Features’ block
You will get a two-column section with demo content by default that should look like this:
From here you only have to change the icons, colors and add the list of pros and cons.
This is the easiest method, but it has its limitations.
- You can’t use custom icons (and the available are only a few)
- You can’t add an actual bulleted list (only plain text)
Method #2 – Using Getwid Blocks
This one is fairly easy to get as well.
Click on the plus sign in your post or page to add a new block. Find the Getwid blocks and select the Icon Box from the Getwid menu.
In the block options at the right side of your screen apply the following settings:
- In the general tab choose the icon for the first column and the content alignment.
- In the style tab, you can set the icon size, colors of both the icon and the icon background, the radius and space around the icon (paddings)
- In the advanced tab, you have the option to set add a link to your icon. Leave this blank, because it won’t make any sense
I’m currently tring new things, as I’m fairly new to the Gutenberg editor. Expect new design ideas and content improvement in the near future.