Days are gone when you need to know coding to create pros and cons tables in WordPress.
Now you can do it with a plugin like RioVizual that has a dedicated “Pros & Cons” block. It lets you create a pros and cons table from scratch or use premade templates.
In this article, we will show you how to create pros & cons table in WordPress in both methods.
Our Created Pros & Cons Table Preview
Here is a preview of the pros and cons table we created using RioVizual’s Pros & Cons block:
Required Setup
- Latest version of WordPress is installed.
- RioVizual is installed and activated.
Method 1: Creating Pros & Cons Table from Scratch
It’s incredibly easy to create a pros and cons table in WordPress using RioVizual’s Pros & Cons block.
Here is the step by step guide:
Step 1: Insert “Pros and Cons” Block
To insert the Pros and Cons block, follow these simple steps:
- Go to the page or post where you want to add the table.
- Click on the + button to open the block inserter.
- Search for “Pros and Cons” block and insert it.
- After that, select “ Build From Scratch.”
Step 2: Add Content in the Table
After inserting the block, it’s time to add content. Here is how to do it:
- Add Titles: In the General tab’s header section, enter your desired titles for the pros and cons columns in the “Pros Title” and “Cons Title” boxes.
- Choose Icons: Click on “Pros Icon” and “Cons Icon” to select suitable icons that represent the pros and cons.
- Add Pros Items: Click on “Body” in the “General” tab and duplicate the any item to create two more items
- Add Cons Items: Follow the same approach to create two more cons items.
Now, rename all the pros and cons items to your desiard text one by one by simply clicking on each of them.
Below the Pros and Cons items, click on “Pros Icon” and “Cons Icon” to change the icons associated with each item.
Step 3: Customize and Styling the Table
After adding necessary content, it’s time to style the pros and cons table using styling settings available in the “Style” tab.
3.1: Style Hader (Pros and Cons)
- To style “Pros” hader, follow these steps:
- Icon Style: Color (FFFFFF)
- Title Style: Color (FFFFFF), Typography (Weight: 700, Font Size: 20, and Transform: Uppercase)
- Wrapper Style: Background (Background color: 01BC7D), Alignment (Center)
- To style “Cons” hader, click on “Cons” tab and make these changes:
- Icon Style: Color (FFFFFF)
- Title Style: Color (FFFFFF), Typography (Weight: 700, Font Size: 20, and Transform: Uppercase)
- Wrapper Style: Background (Background color: F44336), Alignment (Center)
3.2: Style Body Content (Pros and Cons Items)
- To style “Pros” Items, follow these steps:
- Icon Style: Color (01BC7D)
- Items Style: Color (374957)
- Wrapper Style: Background (Background color: FFFFFF)
- To style “Cons” items, click on “Cons” tab and make these changes:
- Icon Style: Color (F44336)
- Items Style: Color (374957)
- Wrapper Style: Background (Background color: FFFFFF)
3.3: Style Pros and Cons Boxes
In the “Style” tab, click on “Box” and set the “Box Gap” to 20px. Next, make individual adjustments for both the Pros and Cons boxes:
- To style “Pros” box, follow these steps:
- Border: Border Width (2px), Border Color: (01BC7D)
- To style “Cons” box, follow these steps:
- Border: Border Width (2px), Border Color: (F44336)
Step 4: Publishing the Post/Page
Once you are done with styling, simply click on the “Publish” or “Update” button to make your changes live.
Here is the preview of the pros and cons table we create with RioVizual’s Pros and Cons block:
Method 2: Creating Pros & Cons Table Using Premade Demo
While you can create a pros and cons table from scratch, using a premade demo can save you time and effort. RioVizual has 6 premade demos that are fully free to use.
Here is how to use a demo to create a pros and cons table in WordPress editor:
Step 1: Choose and Insert a Template
- Open the page/post where you want to add a pricing table.
- Next, insert the “Pros & Cons” block and browse the available templates.
- Select your preferred template and click the “Import” to add it to your page.
Step 2: Customize the Table Content
Click on each cell to add your own information to the placeholders. For additional customization and styling, utilize ‘’General’’ and ‘’Style’’ tabs within the block settings.
Step 3: Publish or Update the Post/Page
Once you are happy with the changes, hit “Publish” or “Update” to make your creation live for visitors.
Note: Discover all the customization and design possibilities of the RioVizual Pros & Cons block in our detailed documentation.
Conclusion
As you have seen, creating pros and cons table in WordPress is super easy with RioVizual’s Pros & Cons block. Its advanced settings and customization options let you create a table that matches your content and style needs.
The best part is Pros & Cons block has 6 premade demos that are free to use. In short, RioVizual’s Pros & Cons will serve as a powerful tool to enhance your content presentation.
Leave a comment