Comparison Table

The must-have price comparison tool for modern business trends.

Using Comparison Table

Make sure you have the Comparison Table widget enabled from your Dashboard > Droit Addons > Elements.

Step 1:

Let’s start by searching the Comparison Table widget from the left-hand side menu, and dragging the widget to your preferred section.

Step 2:

Click on the widget section and add your title, subtitle and short description.

Step 3:

Now let’s start adding product information for the comparison table. For that you need to click below the title section and a menu will appear on the left hand side of the screen.

From here you can add columns for each product and information. And add content to each one with a button.

You can add as many columns and products as you see fit.

Step 4:

From the item option you can edit and add items and information into the comparison table. And shift content to different column and row.

Step 5:

Now to customize the header further, head over to the style tab. From here you can tweak the header section values with padding, border, shadow, typography, color, symbol, margin and more.

Step 6:

To customize the body section scroll down to the next option, from here you can make your comparison table’s body section as you see fit with color, size, typography, padding, width, and more.

Step 7:

From the background colors section you can add background color, image and gradient to your odd rows, even rows and header.

Step 8:

Stylize your badge from here with typography, colors, popover and badge style.

Step 9:

Customize your table buttons from here with button style, button typography and text color.

Step 10:

From Package Label Mode you can customize the label section of your table.

Live Copy & Paste

You can follow all the steps above and create your Comparison Table section, or if you’re interested in skipping some steps, you can visit Comparison Table widget’s live demo page and simply copy one of two preset styles from the Live Copy button. And paste it in your preferred section.