Overview
The Next Comparison List module displays a feature comparison table on your page, letting visitors compare plans, products, or services side by side. It supports up to four comparison columns with customizable titles, subtitles, and prices in a header row, and each feature row is added as a child item showing checkmarks, crosses, partial support, or custom text for each column. Optional accordion grouping lets you organize features into collapsible sections, making it ideal for pricing pages, plan selectors, and product specification sheets.
Content Settings
Comparison List
Titles (Text Field)
The column headings for the comparison table, separated by the "|" pipe character. The first value is the label for the feature column (left side); the remaining values are the plan or product names across the top. Example: Feature list|Free|Pro|Popular
- Default: Feature list|Free|Pro|Popular
Subtitles (Text Field)
Optional subtitles shown below each column title, separated by "|" and matching the order of Titles. Leave a value empty to show no subtitle for that column.
- Default: ||Most popular|
Prices (Text Field)
Optional price text shown below each column header, separated by "|" and matching the order of Titles. Leave the first value empty (for the feature column) then add prices for each plan column.
- Default: |$0/mo|$29/mo|$99/mo
Active Item (Slider)
Which column to highlight as the recommended or featured option. Enter a number using 1-based counting (1 = first plan column, 2 = second, etc.). Enter 0 to highlight no column.
- Range: 0 to 10
- Default: 2
Badge Text (Text Field)
The label shown on the badge displayed above the highlighted (active) column.
- Default: Recommended
Settings
Icon Style (Dropdown)
The visual style of the positive (check) and negative (cross) icons used throughout the comparison rows.
- Available options: Checkmark, Circle, Square, Emoji, Text
- Default: Checkmark
Animation (Dropdown)
The entrance animation style applied to the comparison rows as they load.
- Available options: None, Fade, Slide, Scale, Flip, Bounce
- Default: Fade
Hoverable Rows (Toggle)
Apply a highlight effect to rows when a visitor hovers over them.
- Default: On
Highlight Differences (Toggle)
Visually emphasize rows where the values differ across columns, drawing attention to what distinguishes each plan.
- Default: Off
Accordion
Enable Accordion (Toggle)
Enable collapsible accordion behavior so visitors can expand and collapse feature rows or sections.
- Default: Off
Accordion Type (Dropdown)
Section Accordion groups feature rows under collapsible section headers. Row Accordion makes each individual row expand to reveal a description.
- Available options: Section Accordion, Row Accordion
- Default: Section Accordion
- Only appears when Enable Accordion is on
Allow Multiple Open (Toggle)
Allow more than one section or row to be expanded open at the same time.
- Default: Off
- Only appears when Enable Accordion is on
First Open (Toggle)
Automatically expand the first section or row when the page loads.
- Default: On
- Only appears when Enable Accordion is on
Section Icon (Dropdown)
The toggle icon displayed on collapsible section headers to indicate the open/close state.
- Available options: Chevron, Plus/Minus, Arrow, Caret
- Default: Chevron
- Only appears when Enable Accordion is on and Accordion Type is Section Accordion
Background
Standard Divi background options for the module wrapper, including solid color, gradient, image, and video backgrounds.
Comparison List Item — Child Settings
Each row in the comparison table is added as a Comparison List Item child. Click 'Add New Item' to add feature rows and configure each one individually using the settings below.
Feature
Feature Name (Text Field)
The label for this feature row, shown in the left column of the comparison table.
- Default: Feature Name
Tooltip (Text Field)
Optional text shown in a tooltip when a visitor hovers over the feature name.
- Hidden when this item is marked as a Section Accordion header
Value 1 (Column 1)
Type (Dropdown)
What to display in Column 1 for this feature row.
- Available options: Positive (Check), Negative (Cross), Partial, Custom Text
- Default: Positive (Check)
- Only appears when the table has at least 1 column
Custom Text (Text Field)
Custom text to display in this column instead of an icon.
- Only appears when Type is Custom Text
Value 2 (Column 2)
Type (Dropdown)
What to display in Column 2 for this feature row.
- Available options: Positive (Check), Negative (Cross), Partial, Custom Text
- Default: Negative (Cross)
- Only appears when the table has at least 2 columns
Custom Text (Text Field)
Custom text to display in this column instead of an icon.
- Only appears when Type is Custom Text
Value 3 (Column 3)
Type (Dropdown)
What to display in Column 3 for this feature row.
- Available options: Positive (Check), Negative (Cross), Partial, Custom Text
- Default: Positive (Check)
- Only appears when the table has at least 3 columns
Custom Text (Text Field)
Custom text to display in this column instead of an icon.
- Only appears when Type is Custom Text
Value 4 (Column 4)
Type (Dropdown)
What to display in Column 4 for this feature row.
- Available options: Positive (Check), Negative (Cross), Partial, Custom Text
- Default: Positive (Check)
- Only appears when the table has at least 4 columns
Custom Text (Text Field)
Custom text to display in this column instead of an icon.
- Only appears when Type is Custom Text
Accordion / Description
Section Header (Toggle)
Mark this item as a collapsible section header. All rows below it (until the next header) will be grouped under this section and can be expanded or collapsed together.
- Default: Off
- Only appears when Enable Accordion is on and Accordion Type is Section Accordion
Section Title (Text Field)
The title displayed on this section's accordion header bar.
- Default: Section
- Only appears when this item is marked as a Section Header
Description (Text Field)
Additional detail text that expands below this row when a visitor clicks it. Used when Row Accordion mode is enabled.
- Only appears when Enable Accordion is on and Accordion Type is Row Accordion
Design Settings
Icon Colors
Positive Icon Color (Color Picker)
The color of the check or positive icons across the table.
- Default: #10b981 (green)
Negative Icon Color (Color Picker)
The color of the cross or negative icons across the table.
- Default: #ef4444 (red)
Partial Icon Color (Color Picker)
The color of the partial support icons across the table.
- Default: #f59e0b (amber)
Typography
Individual font settings for each text element in the table: Features Header (the left column heading), Column Title (plan names), Column Subtitle, Column Price, and Badge Text. Each includes font family, size, weight, color, and letter spacing controls.
Badge Style
Background, Border, and Box Shadow styling for the recommended badge displayed above the highlighted column.
Table Style
Background, Border, and Box Shadow styling for the overall comparison table container.
Header Row
Background color and Spacing (padding/margin) for the table header row containing column titles, subtitles, and prices.
Highlighted Column
Background color for the active/highlighted column cells, applied throughout the table body to visually emphasize the recommended plan.
Feature Rows
Background color and Border for feature rows in their default state, plus a separate hover Background color applied when a visitor hovers over a row.
Accordion Header Style
Typography and Background styling for the collapsible section header bars used in Section Accordion mode.
Row Description Style
Typography and Background styling for the expanded description text revealed in Row Accordion mode.
Comparison List Item — Child Design
Each child item has its own design settings: Feature Name typography, Custom Text typography, and Value Cell styling (background, spacing, border for the individual value cells in each row).
Module Styling
Standard Divi design options for the overall module: Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation entrance effects.
Advanced Settings
- CSS ID & Classes — Add a custom CSS ID or class to the module.
- Custom CSS — Write custom CSS targeting specific parts of the table: the table container, header row, feature rows, feature cells, value cells, and accordion headers.
- Conditions — Set conditions for when this module should display (e.g., based on user role or device).
- Visibility — Show or hide this module on desktop, tablet, or phone.
- Transition — Customize hover transition duration and style.
- Position — Control the module's positioning (static, relative, absolute, or fixed).
- Scroll Effects — Add Divi's built-in scroll-triggered motion effects.
Tips & Best Practices
- Use the Active Item setting to highlight your most popular plan — set it to the column number (e.g., 2 for the second plan) and customize the badge text to say something like 'Most Popular' or 'Best Value' to draw the eye naturally.
- Enable Highlight Differences to automatically flag rows where plans differ. This is especially effective on pricing pages where you want visitors to quickly see what they gain by upgrading.
- Use Section Accordion mode to organize a long feature list into collapsible groups (e.g., 'Core Features', 'Integrations', 'Support'). Mark one item per group as the Section Header and all rows below it will fold under it, keeping the table scannable.
- For the Custom Text value type, you can enter short labels like 'Up to 5', 'Unlimited', or 'Add-on' to communicate nuanced feature availability that a simple check or cross cannot express.