How To Use The Comparison List Widget By Atomic Addons

The Comparison List widget by Atomic Addons compares plans, products or versions side by side. Each column has a heading with an optional button, each row is a feature, and every cell shows a check, a cross or a short text. A visitor can click a feature to open its description. This guide covers adding the widget, setting up the columns and rows, and making the table work on phones.

Enable the Comparison List Widget

Comparison List is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Comparison List. You can also open the Content category.

4. 4

   Turn the Comparison List widget on.

5. 5

   Click Save Settings.

Add the Comparison List Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Comparison List. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Comparison Heading

Open the widget and go to Content → Comparison Heading. This section builds the header row:

1. 1

   Feature Title: The text above the feature names in the first column, “Feature list” by default. Leave it empty for a blank corner.

2. 2

   Feature List: One item per column. It starts with two columns, Free and Pro. Add an item for each plan or product you compare.

Each column item has these fields:

• Title — the column name, such as a plan name.
• Additional Text — a line under the title, such as a price.
• Button Text and Link — a button under the title. With a link it opens that page; without one the text shows as a label.
• Active — highlights the whole column, header and cells, to point out the plan you recommend.

Comparison List

Content → Comparison List holds the rows. It starts with three; add one per feature. Each row has:

1. 1

   Title: The feature name in the first column.

2. 2

   Description: Text that opens under the row when a visitor clicks it. Write it in the text editor.

3. 3

   Feature Ability: One value per column, separated by a | pipe, in the same order as the columns. 1 shows a check, 0 shows a cross, and any other text shows as written, so 1|0|Limited gives a check, a cross and “Limited”. The default is 0|0.

Clicking a row opens its description and a second click closes it. Opening another row closes the one that was open. The plus sign at the start of each row turns into a minus while it is open. Visitors can also open a row with the keyboard: Tab to it and press Enter.

Advanced Options

Content → Advanced Options sets the layout:

1. 1

   Hide List Content: Turns the rows into plain rows: the descriptions and plus signs are left out and nothing opens on click.

2. 2

   Column Gap: The space between columns, 0 to 20px. Without a value it is 8px on larger screens and 4px on phones.

3. 3

   First Column Width: The width of the feature-name column as a percentage of the table, 10 to 90%. The other columns share the rest.

4. 4

   Hide First Column on Mobile: On phones (below 768px), hides the feature-name column and the Feature Title so the plan columns get the full width. The feature name then appears above the description when a row is opened.

5. 5

   Wrapper Width (Mobile): A fixed table width for phones, 100 to 1000px. Set it wider than the screen when the table has a lot of content: visitors then scroll the table sideways instead of seeing squeezed columns.

Style the Comparison List

Everything below is on the Style tab. Sections that belong to a part you left empty or turned off are hidden.

• Header Wrap — the header cells, with an Item tab and an Active Column tab for the highlighted column.
• Featured Title — the text above the feature names.
• Header Title and Header Text — the column titles and the additional text, with an Active Color for the highlighted column.
• Header Button — the buttons in Normal, Hover and Active states.
• List item — the rows in Normal and Active (open) states, plus the cells of the Active Column.
• List item Title — the feature names and the plus sign: color, hover color, icon color, size and spacing.
• Feature Ability — the check icon, cross icon and text cells, each in Normal, Hover, Active and Active Column states, with the icon size and border.
• Content — the description that opens under a row.