Comparison Table

People make comparison tables to easily compare and contrast different products, services, or options. It’s possible without coding, you can pick an effective plugin and make your desired comparison table for a WordPress site.

ElementsKit is such a super efficient plugin that provides you with a Comparison Table Widget. Let’s see how you can use the ElementsKit comparison table widget to create a quick comparison table.

Using the Comparison Table Widget of ElementsKit #

Install the ElementsKit pro plugin and start arranging any comparison table according to your preference.

👉👉👉 Install now!

Begin from the WordPress dashboard you have to open any old page or post to display the comparison table. You can also create a new page or post.

Start editing the desired page/post with Elementor -> Search for Comparison Table widget -> Drag and drop it

Elementskit comparison table

Table Heading #

In the content section, there is a Table Heading setting option.

Set table heading with Elementskit comparison table

If you expand a heading name you will get these adjusting options:

  • Cell Width – Cells’ width adjusting option.
  • Cell Name – Here, you can give a name to the cell, style the text, add an image, etc.
  • Add a URL? – If needs you can attach a URL to the heading
  • Type – This can be an icon, image, or nothing.
  • Position – Position setting option of icon/image. The options are – Before, After, Top, and Bottom.
  • Button – Add a button to the heading if you wish.
  • Alignment – This is the heading text alignment system.
ElementsKit comparison table offers various  customization options

Table Body #

This is the table’s body part.

Set table body with Elementskit comparison table

If you expand each body name you will see the same options as the heading section. However, you will get an additional option here, named New Row. By utilizing this option you can convert the rows to column.

Convert a column to row.

Table Button #

Sometimes adding buttons to a comparison table such as an engaging CTA button makes the table more useful.

Utilize this option to add as many buttons as you need. Expanding a button will give you options called Title and Link.

Set comparison table button

Compare Button #

In this section, you have the option to add a compare button to the table.

  • Button Style – There are two style options, Tab style and Inline style.
  • Difference Button – You can change the button text here.
  • Position – You can change the button position here.

See the customization facilities below –

Choose compare button style, text and position

Style #

  • Wrapper – Using this styling option you can change the cells’ background type, border shadow, border radius, etc.
  • Table Content – For the table content you will find design options like background type, border type, padding, margin, etc.
  • Table Heading – You can customize icon font size, border radius, Table heading wrapper, etc. for the heading.
  • Table Body – You can style the body by adjusting the icon font size, Odd row background, Table body row, and so on in this option.
  • Table Heading Cell Button – This section will provide you with text color, box-shadow, padding, margin, etc. adjusting options.
  • Table Body Cell Button – Design the body cell buttons by changing text color, box-shadow, alignment, and so on.
  • Table Button – If you want to make the button attractive, then customize typography, text color, background color, etc.
  • Compare Button – The styling options are the same as the table button here.
Style your comparison table with EleemntsKit's multiple styling options

Check Your Comparison Table #

After creating a comparison table according to your needs, you have to update the page/post.

You are done!

Your comparison table is ready

Now, you can create your comparison table by presenting information in a clear and organized manner.

What are your feelings
Updated on October 8, 2023