Have you ever shopped for something and found it? hard to compare various benefits and drawbacks of your choices? You may be trying to compare everything from a pair of shoes to complex software solutions to motor vehicles and real estate. Collation and comparison of large numbers of data can be difficult doing it in one’s head and doing it on one’s own is time consuming. Often times, web designers and online store operators solve this problem by using a table plugin or, where appropriate, a pricing table. But sometimes there is a lot to consider and you need an engaging way to present all the relevant data. That’s where the Qi Plugins and comparison chart widget come into play. And you can install them all in minutes. For intelligence, the video below:
However, you may prefer your tutorials in text format. Never fear, we’ve got you covered. However, we would like to take some time to talk to you about some use cases for Qi Plugins and Elementor, as well as for a comparative chart.
Here’s how we split it up:
A comparison table is a table that allows the reader to compare data.
Well, that’s a redundant sentence, if it exists, isn’t it?
To be a little more specific, a comparative table kind of comparison chart: A data visualization tool that provides its reader with an overview of how different elements of different datasets might relate to each other.
Still not clear?
Let’s consider an example. Let’s say you’re considering a rugged, masculine vacation in the mountains and two or more cottages are within your budget. You want to consider the pros and cons of each before committing. How far is the nearest shop? Does the shed have a kettle, or do you have to make do with cold showers? How is the number of rooms or beds? Simplified, deal breakers or deal makers?
This is where a comparative table showing the characteristics of each cottage would come in very handy. And that’s exactly what we’re going to talk to you about.
Qi Addons for Elementor is a plugin developed by an award-winning team of professional WordPress designers to extend Elementor’s already impressive capabilities. And we are proud to call it ourselves.
All you have to do is to Use Qi Plugins is is Install the latest version of Elementor (the free version will do) and then install and activate the Qi Addons plugin as you would any other plugin. Comparative table widget only available with premium version of Qi Plugins.
We’ll show you how to add a benchmark to a post, but the process works exactly the same for a page. We started with a blank text and a title.
To add a comparative table to a page, simply find it from the left-hand menu and drag it to the place you want on the page.
The item will appear in its default state with two columns and three rows along with some placeholder text.
this Contents tab and its General partition should be opened by default. this Main Column Header field changes the title in the upper left corner of the table. We’ll change the generic title to: Automatic monthly plans.
this Titles and columns sections of the tab contain controls for rows and columns, respectively. Click to add them. +Add Item button below each title. We will add two more lines. by clicking on Element inside Titles It will expand the section and you will be able to enter the line header you want. We will do this with all our rows.
Expanding columns item will reveal more options. this Column Header is the text in the top box of the column, Row Values are comma-separated values of – and + depending on whether a feature is available or not, and Column Link Text is the text at the bottom of the column that (conceptually) leads to the purchase. this Column Connection The field just above is where you need to enter the link.
this Button the tab’s section has only one control: Enable Underline Button Text change. we will change it Yes. you can use Button Icon to add a partition .svg to the icon Buy button. We will not use it in this design.
The default version of the tab is efficient, but plain. Maybe this is exactly what you want, but still, maybe not. this style the widget’s tab is where you can do this.
this style department style tab has a few basic controls. first check, Table Layout toggle that lets you choose between default Auto and Still, equalizes the column width. this Minimum Width The slider lets you control the minimum width for each column to improve readability, but we don’t need it since we only have three columns.
this border style control lets you toggle the outer border on or off: Everything setting means that all the limits are there, Only Inside setting leaves only inner boundaries. this Border Type controls let you choose a different border type, such as: Couple, dashed, Grooved and more. we will go with one Durable line, set Width up to 2 pixels and Colour to light pink (#ffc9c9).
going downhill style you will find in the section. Column Header Cell Padding and Cell Fill controls. They are used to set the spacing between a cell’s text and its borders. We will change ours to make the table look nicer, but you can choose the one that best suits your website style. this First Column Width The slider sets the width of the first column. we will arrange ours 41% percent.
Final checks of this section, Background Style and Background color. You can choose from a variety of options, but we alternatelymeans alternate colors for each row. We will also set our first color to light gray (#f9f9f9), leaving the other color at the default value. This will make it easier to remove the rows.
this Main Title Style section of the column controls the text in the first row – the headers of the columns. You can choose an HTML tag for this, but we’ll use the default. Moreover Main Title Color (we went with light orange (#e85656), as well as the standard typography settings for the top row. We just changed the font size 17but there are many options you can use to style your main title.
this Line Header Style it has exactly the same settings only for the leftmost column. We will use the same settings as Main Title Style.
this Sign Style section lets you use an alternate symbol for the checkmark and X in columns. You can select an icon from the installation library or .svg file. We will choose some icons from our media library. We will also make them the same color as the text and resize them as follows. 14 and 13 pixels respectively.
Finally, we reach the bottom row of buttons.
this Button Style there is a section Normal/Highlighted lets you set different settings for the hover behavior of your button.
Inside Normal version of the button, we will change the font weight 700 Select to highlight more and uppercase letter from the setting convert The menu is for the same reason. We will also change the text to the same light orange color as the rest of the table. this Button Padding controls work the same as other controls. We will set them to 22px.
Finally, we find Button Cell Background Color and Button Cell Highlight Background Color controls. These allow you to change the background in normal and hover modes. In normal mode, we’ll change it to the pink we’re already using for the border. We won’t be choosing any special hover behavior, but of course you are free to do whatever you want.
this Button Icon Style used in the same way as options. Button Style options, but they are not necessary as we are not using an icon for this design.
Finally, Button Underline Style lets you control the behavior of your button’s underline element. Like other button shaping sections, a Normal/Highlighted change.
we will start with hover over select the tab and Highlighted Width Underline with one hundred% so that it covers the entire width of the underline BUY Text. we will also arrange Enable Highlight Underline with Yesto enable animation on hover.
this Offset Underline and Underline Thickness controls apply to both Normal and hover over opinion. Make it up wraps the line from text (this 6 pixels), duration Thickness determines the thickness (we went 2 pixels) Alignment Underline it can be set to anything you want, but it only matters if the underline is wider or narrower than the button text.
As a result
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 – comparison chart on your website in a matter of minutes. And with an almost limitless range of options, you can easily style it however you want.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
