Happy Elementor Addons Pro

⌘K
  2. Home
  4. Docs
  6. Happy Elementor Addons P...
  8. Premium Widgets
  10. Advanced Comparison Table

Advanced Comparison Table

It’s our new premium widget.

How to use HappyAddons Advanced Comparison Table

Welcome to the HappyAddons Advanced Comparison Table(ACT) documentation! This guide will help you understand how to use the Advanced Comparison Table widget to create highly customizable and attractive comparison tables.

Requirements

To create an advanced comparison table, you will need:

  • Elementor Free
  • HappyAddons Free
  • HappyAddons Pro

Introduction

The Advanced Comparison Table widget allows you to build detailed and visually appealing comparison tables. Below is a demonstration of the types of tables you can create with this widget. This documentation will cover basic features and advanced customization options.

image

Setup

Step 1: Add the Widget

  1. In the Elementor editor, search for the Advanced Comparison Table widget.
  2. Drag and drop the widget onto your canvas. By default, you’ll see a basic 3-column pricing table.
image 1

Step 2: General Settings

  1. In the content tab’s General settings, you can add columns (up to 10) for a comprehensive comparison table. For tables requiring more than 10 columns, consider using the Advanced Data Table widget.
  2. You can control the icon position for headers and change the collapse icon for rows. By default, child items are always open, but you can toggle this setting off.

Step 3: Responsive Nav Badge

  1. Enable the responsive nav badge to display badges on mobile devices (after the first column).
  2. Customize the badge design in the style tab.
image 2

Adding Data to the Table

Column and Row Setup

  1. Set the width for each column in the first column settings, with the rest of the columns adjusting automatically.
  2. Define each cell in a column. The first cell should be the header of the column, set as a parent cell, with subsequent cells as child cells if they need to collapse under the parent.
image

Content Types for Cells

Each cell can contain various content types:

  • Blank: An empty cell.
  • Heading: Text with optional icons and description or tooltip. Icons can be selected from the Elementor and HappyAddons Icon library.
  • Text: Simple text content.
  • Icon: An icon from the library with adjustable size.
  • Image: An image from your media library with customizable resolution.
  • Button: A button with all Elementor button styling options.
  • Pricing: Pricing content with options for discounted prices.
image 3

Data Entry Tips

  • Use a structured data set for reference to ensure consistency.
  • Parent cells should be consistent across the same row for proper data visibility.
  • Data must be added column by column as live editing mode does not support direct row entry.

Managing Cells

  • Duplicate cells as needed.
  • Hide columns by toggling the button off (not available for the first column).
  • Add new cells by clicking the add item button.
  • Adjust alignment, add badge text, and customize badge styles.
image 4

Styling the Table

General Styling

  1. Column: Change the color of even, odd, and child backgrounds in the column section.
image 5
  1. Heading & Text: Customize text and heading colors.
image 6

3. Descriptions and Tooltips: Set global colors for descriptions and tooltips:

      image

      You can adjust the width of the tooltip on the style tab:

      styling

      You can adjust the width of the tooltip on the style tab:

      4. Cell Background: You can add a background color to each cell of the row/column. 

        image 1

        5. Border: You can now add and style a cell border for more visibility of your selected cell.

          image 2

          Specific Customizations

          1. Collapsable icons: Collapsable icon have their own styling options.
          image 8
          1. Image & Icon: Customize image and icon styles are available individually.
          image 9
          1. Pricing: Adjust styling for pricing content.
          image 10
          1. Button: Set global button styles as follows: 
          image 11
          1. Badge: Style badges and responsive nav buttons.
          image 12

          Advanced Features

          You will find the Sticky Header option under the Content > General settings. You can enable the sticky header by toggling the button. 

          image 3

          Header with Image and Text

          For adding images and text in the header:

          1. Choose the Title content type and add a description. (Title field can not be blank)
          2. Set content in the title section to ensure visibility.
          3. Add images and text in the description section.
          image 13

          Adding Shortcodes or Templates

          If using Elementor Pro, you can insert dynamic tags within the description section. Along with that, you can find your saved templates shortcode to your Templates section. 

          image 14
          1. Select the shortcode and insert a premade Elementor template shortcode.
          image 15
          1. Adjust the CSS for a perfect fit:

          Code:

          /* This is for fixing content width */

.ha-adct-text-wrap{

        box-sizing: content-box!important;

}
          image 16

          Here is the frontend view of the skillbar

          image 17

          Conclusion

          With these tools and options, you can create stunning comparison tables using the HappyAddons Advanced Comparison Table widget. Use your imagination and the widget’s features to build unique tables that meet your needs. For any further assistance, feel free to reach out to our support team. Happy designing!

          Advanced Comparison Table Video Tutorial

          How can we help?