RioVizual’s Pros & Cons block makes it easy to create a pros and cons table in an organized and visually appealing manner. It’s a conversion-focused block that comes with tons of customization and styling options.

In addition, this block’s responsive options allow you to modify each table element individually, depending on the device. Take a look at this documentation to learn more about RioVizual’s pros and cons.

Block Control Toolbar #

The block control toolbar typically appears above your selected block, offering a settings option. RioVizual’s Pros & Cons block also utilizes this toolbar, alongside options found in the WordPress native table block. 

By clicking any cell in the Pros & Cons block, you’ll discover a toolbar with 13 options. Among 13 options, 10 of them are available in the WordPress native table block and have comprehensive documentation.

Therefore, we are focusing solely on our newly included three options,

Add:  #

The ‘’add’’ option allows you to easily insert a new row directly below your selected list item. Whether you choose an empty cell or a cell with content, selecting the ‘’add’’ option will only insert an empty cell.

Duplicate:  #

The duplicate option replicates the selected cell and its contents, generating a new cell directly underneath the selected one.

Delete:  #

Clicking on ‘’Delete’’ in the block toolbar after selecting a list item will permanently delete the row and its content. 

Table Management: #

Along with the toolbar, RioVizual streamlines the process of controlling and organizing the Pros and Cons block with a right-click table management system. Right-clicking on any cell will reveal multiple management options, including:

• Duplicate Item: Create a copy of the selected cell, with or without content.
• Move Item Before: Move the selected cell above its current location.
• Move Item After: Shift the selected cell to below its current location.
• Add: Insert an empty cell below the selected one.
• Delete: Permanently remove the selected list item and its content.

Block Settings: #

Once you create or insert a premade pros and cons layout, you’ll discover a block setting panel on the right side. Here, you’ll have access to various options to customize the appearance, behavior, and content of the Pros & Cons block.

Initially, you’ll encounter exclusive settings options named “Normal,” “Hover,” and “Reset All Styles.” Below them, you’ll find the core customization and styling option, which comes with three tabs, including general, style, and advanced.

Normal  #

In the normal option, you’ll see device icons that let you make changes for specific devices. Select your preferred device type from the desktop, tablet, or mobile icons, and then customize and style only for the selected device type.

Hover #

Select the “Hover” option to add a hover effect to any element or part of the pros and cons table. Simply select this option and then make changes using the style tab to apply hover effects.

Reset All Styles #

Using the reset all styles option, you can reset all the styles you have applied to your pros and cons table using the style tab. 

1. General:  #

The General tab contains structural settings options for the Pros & Cons block, allowing you to control its presentation and behavior by modifying text and cell content. Here are the options that let you make structural changes:

1. Header

In general, the header refers to the title or label that identifies the section listing the advantages and disadvantages of a particular topic. Within the header section, you’ll find the following options:

• Pros Title: Rename “Pros” to specific terms related to your content 
• Cons Title: Rename “Cons” to specific terms relevant to your content 
• Hide Icon: Turn on this option to hide all icons with the title. Keeping the toggle off lets you pick from hundreds of icons for pros and cons titles. 

2. Body

Body options facilitate easy management of the pros and cons table. Here, you’ll find various functions such as drag-and-drop, duplicate, remove, add another item, and more. Here is a breakdown of the available functions in the body option:

• Drag & Drop: Simply click and drag any item to rearrange its position.
• Duplicate: Click “Duplicate” to create a copy of an existing item.
• Delete: Click the “Delete” icon to remove an item.
• Add Item: Click “Add Item” to include a new row for pros or cons.
• Hide Icons: Toggle on “Hide Icon” to remove icons from the table.

Important Note: When the icon function is toggled off, click on the pros and cons icons to change them according to your preferences.

3. Layout Settings

The layout settings refer to the options available for making various changes to the entire layout of the pros and cons table. Among the settings provided in the layout options are:

• Show Vertical Box on Mobile: Toggle on this if you want to display a vertical box on mobile devices.
• Enable Schema: By toggling this option, you can enable schema markup for the pros and cons table, enabling you to define a title for it. 

Note: Schema is one of the key aspects of the Pros and Cons block. The proper use of it can help you boost search engine visibility, potentially boosting organic traffic and rankings.

2. Style:  #

While the General tab focuses on structural changes, the Style tab allows you to customize the appearance of the pros and cons table. With this block’s extensive styling functions, you can personalize every aspect like header, body, box, and layout to your liking.

1. Header

Under the header of the style tab, you’ll find plenty of customizable options for both the pros’ and cons’ headers. Here, pros and cons will be listed in a tab, and by clicking on any of them, you can make the following changes:

• Icon Style: With this function, you have the flexibility to customize the appearance of the header icon. You can adjust its size, spacing, and color to match with your design preferences.

• Title Style: The title style function allows you to personalize the appearance of the header title by adjusting both color and typography. You have the freedom to select your preferred colors and customize the font type, weight, size, line height, and more.

• Wrapper Style: The wrapper style feature enables comprehensive customization of the header wrapping appearance through a range of functions:

• Background: Customize the background color or apply a gradient.
• Border: Define the border-radius and select the border style, color, and width.
• Box Shadow: Choose from seven different box shadow options.
• Spacing: Add padding spacing to the header wrapping area.
• Alignment: Select from three horizontal alignment options.

2. Body

Just like the header option, the body part also has a separate style customization option for both pros and cons. They are: 

• Icon Style: You can customize the look of any icon in the pros and cons table’s body part by modifying its gap, size, and color.

• Item Style: Using the gap, color, link color, and typography functions, you can fully customize all items in the pros and cons table’s body area. 

• Wrapper Style: The wrapper style function allows customization of the entire wrapping area of the pros and cons body, providing options such as background, border, box-shadow, spacing, and alignment.

3. Box

Similar to the header and body, the box area also offers individual styling options for both pros and cons. However, in this section, you can only customize the wrapper style of the box using functions such as:

• Header and Body Gap
• Background
• Border
• Box Shadow
• Spacing

Additionally, the box option includes a feature called “Box Gap,” which allows you to create a gap between pros and cons by specifying the matrices in pixels.

4. Layout

The layout option allows you to customize the entire layout of the pros and cons table by adjusting size and spacing.

• Sizing: Change the sizing by adjusting width, max width, and min-width.
• Spacing: Make adjustments to padding for the top, bottom, left, and right of the pros and cons table.

3. Advanced:  #

If you possess coding skills and wish to apply further styling customizations not offered within the Pros & Cons Block’s styling options, leverage the Additional CSS Class (ES) feature. This functionality enables you to attain any desired table style through a custom CSS class.