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.

Elementor page builder

Step 2 #

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

Droit Comparison Table widget's title edit menu

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. 

Droit Comparison Table widget's packages plan edit menu

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 columns and rows.

Droit Comparison Table widget's packages plan edit menu

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.

Droit Comparison Table widget's header section style edit menu

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.

Droit Comparison Table widget's body style edit menu

Step 7 #

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

Droit Comparison Table widget's background style edit menu

Step 8 #

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

Droit Comparison Table widget's badge style edit menu

Step 9 #

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

Droit Comparison Table widget's button style edit menu

Step 10 #

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

Droit Comparison Table widget's packages label style edit menu

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.

Droit Comparison Table widget's live demo page
Elementor page builder's column edit menu

That’s it.

Powered by BetterDocs