How to Add a Comparative Table to Your WordPress Website
Have you ever shopped around for something and found it hard to compare the various benefits and drawbacks of your choices? You may be trying to compare anything, from pairs of shoes through complex software solutions, all the way to motor vehicles and real estate. Collating and comparing a lot of data can be difficult to do in one’s head, and time-consuming to do it on one’s own. Oftentimes, web designers and online store operators solve this issue using a table plugin or a pricing table, where applicable. But sometimes there is a lot to consider, and you need an engaging way to present all the relevant data. This is where Qi Addons and its comparative table widget come in. And you can have it all set up within minutes. To wit, the video below:
However, you may prefer your tutorials in text form. Never fear, we have you covered. But we would also like to take some time to talk to you about some use cases for a comparative table, as well as Qi Addons and Elementor.
Here’s how we’ve broken it up:
A comparative table is a table which lets the reader compare… data.
Well, that’s a useless sentence if there ever was one, isn’t it?
To be somewhat clearer, a comparative table is a kind of a comparison chart: a data visualization tool which grants its reader an overview of how different elements belonging to different data sets might relate to each other.
Still not clear?
Let’s consider an example. Suppose you are considering a rugged, manly holiday in the mountains, and two or more cottages fit the bill. You want to consider the upsides and downsides of each before committing. How far is the nearest shop? Does the cottage have a water heater, or do you have to make do with cold showers? How about the number of rooms or beds? Simplified, are there dealbreakers or dealmakers?
This is exactly where a comparative table setting out each cottage’s features would come in very handy. And that’s exactly what we will be talking to you about.
Qi Addons for Elementor is a plugin developed by an award-winning team of professional WordPress designers in order to expand Elementor’s already impressive capabilities. And we are proud to call it our own.
All you need to do to use Qi Addons is install the latest version of Elementor (the free version will do) and then install and activate the Qi Addons plugin as you would with any other plugin. The comparative table widget is only available with Qi Addons’ premium version.
We will be showing you how to add a comparative table to a post, but the process works exactly the same for a page. We have started off with a blank post and a title.
To add a comparative table to a page, simply find it in the left hand side menu and drag it to where you want it on the page.
The element will appear in its default state, with two columns and three rows with some placeholder text.
The Content tab and its General section should be opened by default. The Main Column Title field changes the title in the upper left hand side corner of the table. We will replace the generic title with Auto monthly plans.
The Headings and Columns parts of the tab contain the controls for the rows and columns, respectively. You can add them by clicking the +Add Item button under each heading. We will add two more rows. Clicking on an Item in the Headings section will expand it, and you will be able to enter whatever row title you like. We will do so with all our rows.
Expanding a Columns item will reveal more options. The Column Title is the text in the top box of the column, the Rows Values are comma-separated values of – and +, depending on whether a feature is available or not, and the Column Link Text is the text at the bottom of the column, leading (notionally) to the purchase. The Column Link field immediately above is where you should enter the link.
The Button section of the tab has only one control: the Enable Button Text Underline toggle. We will switch it to Yes. You can use the Button Icon section to add an .svg icon to the Purchase button. We will not be using it in this design.
The default version of the tab is effective, but plain. Perhaps that‘s just what you want, but, then again, perhaps it isn‘t. The Style tab of the widget is where you can do that.
The Style section of the Style tab has several basic controls. The first control is the Table Layout toggle, which lets you choose between the default Auto and Fixed, which equalizes the column width. The Minimal Width slider lets you control the minimum width for each column in order to improve legibility, but we only have three columns so we don‘t need it.
The Border Style control lets you switch the outer border on and off: the All setting means that all the borders are there, while the Inside Only setting leaves only the inside borders. The Border Type controls let you select a different type of border, such as Double, Dashed, Grooved and more. We will go with a Solid line, set its Width to 2 pixels, and its Color to a light pink (#ffc9c9).
Moving on down the Style section, you will find the Column Title Cell Padding and Cell Padding controls. They are used to set the space between the text of a cell and its borders. We will tweak ours to make the table look nicer, but you can choose whatever fits your website‘s style the best. The First Column Width slider sets the width for the first column. We will set ours to 41% percent.
The final controls of this section are the Background Style and Background Color. You can select from a variety of options, but we will go with Alternating, meaning alternating colors for each row. We will also set our first color to a light grey (#f9f9f9), leaving the other color at the default value. This will make rows easier to make out.
The Main Title Style section of the column controls the text in the first row – the titles of the columns. You can choose an HTML tag for it, but we will go with the default. You can also set the Main Title Color (we went with a light orange (#e85656), as well as the standard typography settings for the top row. We only changed the font size to 17, but there is a host of options you can use to style your main title.
The Row Title Style has exactly the same settings, only for the leftmost column. We will use the same settings as for the Main Title Style.
The Sign Style section lets you use an alternative icon for the checkmark and the X in the columns. You can select an icon from the upload library, or upload an .svg file. We will select some icons from our media library. We will also make them the same color as the text, and change their size to 14 and 13 pixels, respectively.
Finally, we arrive at the buttons of the bottom row.
The Button Style section has a Normal/Hover toggle, letting you make different settings for the on-hover behavior of your button.
In the Normal version of the button, we will change the font weight to 700 to make it stand out more, and select the Uppercase setting from the Transform menu for the same reason. We will also turn the text the same light orange color as the rest of the table. The Button Padding controls work just the same as the other controls. We will set them to 22 pixels.
Finally, we find the Button Cell Background Color and the Button Cell Hover Background Color controls. These let you change the background on the normal and hover modes. We will change it in normal mode to the pink we already used for the border. We will not be selecting any special on-hover behaviors, but you are, of course, free to do as you please.
The Button Icon Style options are used in the same way as the Button Style options, but since we didn‘t use an icon for this design, they are not necessary.
Finally, the Button Underline Style lets you control the behavior of the underline element of your button. It has, like the other button styling sections, a Normal/Hover toggle.
We will start with the Hover tab, and set the Underline Hover Width to 100% in order for the underline to take up the entire width of the PURCHASE text. We will also set the Enable Hover Underline Draw to Yes, to enable the on-hover animation.
The Underline Offset and Underline Thickness controls apply to both the Normal and the Hover view. Offset offsets the line from the text (we will set it to 6px), while Thickness dictates its thickness (we went with 2px) The Underline Alignment can be set to anything you like, but it only matters if the underline is wider or narrower than the button text.
In Conclusion
As you can see, with the premium version of the Qi Addons plugin, you can have a simple and effective – or complex and eye-catching – comparative table on your website within minutes. And with a virtually unlimited gamut of options, you can style it however you like with ease.
