1. Home
  2. Docs
  3. Marketing Elements
  4. Comparison Table

Comparison Table EA Element

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Comparison Table Element

»Content

 

General

: Set how many tables you want in the comparison table.

 

Feature Box

⇒Enable Tooltip: Enable/disable tooltip on the feature.

: Set the tooltip type either link or icon.

Adding the Feature

: Type the feature name here.

Enter the tooltip text on the feature.

⇒Add Item: Use the ‘+Add Item’ button to add more features to the comparison table.

⇒24 Hours Format?: Enable/disable 24 hours format.

⇒Days Format: Set the days format either short or long.

 

Adding Content to the Table

⇒Title: Add the table 1 title here.

: Enter the currency symbol here.

: Add the price of the product.

Enable/disable the discount offering symbol. If enable, add the original price.

⇒Duration: Add the duration of the subscription.

⇒Ribbon: Show/hide the ribbon on the most popular item. After enabling the ribbon, add the ribbon text and customize the ribbon positioning.

⇒Button Text: Add the button text on the call to action button.

⇒Link: Enter the URL for the button’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

⇒Features: 

→Content: Set the feature content on the table yes √, no× or as text.

→Feature: Add feature contents.

⇒Add Item: Use the ‘+Add Item’ button to add more features to the table.

⇒Override Style: Enable/disable the override style. If enable then customize the override style.

 


»Style

 

General

⇒Odd Row Color: Add a custom color to the odd row of the table.

: Add a custom color to the even row of the table.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the comparison table boxes for different dimensions. You can link the values together or customize them individually.

 

Feature Box

⇒Color: Add a custom color to the feature box.

⇒Background Color: Choose the background color.

⇒Typography: Set the typography options for the feature box texts.

⇒Alignment: Set the alignment of the feature box.

⇒Padding: Set the padding value for the top, right, bottom and left around the feature box for different dimensions. You can link the values together or customize them individually.

⇒Tooltip Icon:

→Size: Customize the tooltip icon size.

→Color: Add a custom color to the tooltip icon.

→Background Color: Add a custom background color to the tooltip icon.

→Hover Color: Add a custom color to the tooltip icon on the hover mode.

→Hover Background Color: Add a custom background color to the tooltip icon on the hover mode.

→Padding: Set the padding around the tooltip icon.

⇒Tooltip Text:

→Color: Add a custom color to the tooltip text.

→Background Color: Add a custom background color to the tooltip text.

→Typography: Set the typography options for the tooltip texts.

→Padding: Set the padding value for the top, right, bottom and left around the tooltip text for different dimensions. You can link the values together or customize them individually.

 

Ribbon

⇒Distance: Customize the ribbon distance.

⇒Color: Add a custom color to the ribbon.

⇒Background Color: Choose the background color.

⇒Typography: Set the typography options for the ribbon text.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the ribbon for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Padding: Set the padding value for the top, right, bottom and left around the ribbon for different dimensions. You can link the values together or customize them individually.

 

Heading

⇒Tab Format: Set the tab format of the comparison table.

⇒Height: Customize the height of the heading for different dimensions.

⇒Active Tab Color: Add a custom color to the active tab.

⇒Color: Add a custom color to the heading text.

⇒Active Tab Text Color: Choose the active tab text color.

⇒Background Color: Choose the background color.

⇒Typography: Set the typography options for the heading text.

⇒Alignment: Set the alignment of the heading.

⇒Padding: Set the padding value for the top, right, bottom and left around the heading for different dimensions. You can link the values together or customize them individually.

 

Price

⇒Original Price:

→Color: Add a custom color to the title text of the original price.

→Text Decoration Color: Add the text-decoration color.

→Typography: Set the typography options for the original price text.

→Vertical Alignment: Set the vertical alignment to the original price.

⇒Price:

→Color: Add a custom color to the title text of the price.

→Typography: Set the typography options for the price text.

⇒Fractional:

→Color: Add a custom color to the fractional value of the price.

→Typography: Set the typography options for the fractional price text.

→Vertical Alignment: Set the vertical alignment to the fractional price.

⇒Duration:

→Color: Add a custom color to the duration.

→Typography: Set the typography options for the duration text.

⇒Background Color: Choose the background color of the price box.

⇒Alignment: Set the alignment of the price box.

⇒Padding: Set the padding value for the top, right, bottom and left around the price box for different dimensions. You can link the values together or customize them individually.

 

Features

⇒Color: Add a custom color to the features text.

⇒Check Icon Color: Customize the check icon color.

⇒Close Icon Color: Customize the close icon color.

⇒Background Color: Choose the background color.

⇒Typography: Set the typography options for the features text.

⇒Alignment: Set the alignment of the features.

⇒Padding: Set the padding value for the top, right, bottom and left around the feature for different dimensions. You can link the values together or customize them individually.

 

Button

⇒Text Color: Add a custom color to the button text.

⇒Background Color: Choose the background color.

⇒Column Background Color: Choose the column background color for the button.

⇒Typography: Set the typography options for the button text.

⇒Text Shadow: Customize the text-shadow.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the button for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

 

After done with all customization, Update changes to the page by clicking the APPLY button at the top!


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Comparison Table Element.


Was this article helpful to you? Yes No

How can we help?