The Comparison List widget is a powerful tool designed to enhance your Elementor website by allowing you to create clear and visually appealing comparison lists. Whether you’re comparing products, features, or services, this widget provides an intuitive way to present detailed information side by side. With customization options and responsive design, it seamlessly integrates into your site’s look and feel, making it an essential feature for businesses and marketers looking to highlight differences or advantages effectively.
Let’s look at each of the options in the Comparison List widget for Elementor below.
Add a Comparison List Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Comparison List”
- Hover over the widget in the search results and click install
- Add the “Comparison List” widget to any Elementor Page
Source Settings
The Comparison List widget now supports multi-source functionality, allowing you to populate dynamic, data-driven content from a variety of sources. These include items, posts, meta fields, JSON or CSV files, galleries, terms, users, menus, and even API integrations for ultimate flexibility.
Items
You can use the item repeater field as item source.
WordPress Posts
Display WordPress posts dynamically in comparison list, including custom post types and fields for maximum flexibility.
Meta Field
Use Meta as an item source for your comparison list to dynamically display and manage content from your Meta data.
JSON or CSV
Load your comparison list with data from JSON or CSV files to easily manage and display structured content.
Gallery
You can use the gallery as the source for your items. Simply select multiple photos to create and customize a stunning gallery.
Terms
Use Terms as a source for your comparison list to dynamically display and manage taxonomy terms from your WordPress site.
Users
You can use WordPress Users as an item source for your comparison list to display and manage dynamic content from your site’s user data.
Menu
Use your WordPress Menu as a source for the comparison list to dynamically display and manage menu items in a visually engaging layout.
API Integrations
Integrate an API into your comparison list to dynamically fetch and display data from external systems or services.
General Settings
Layout Settings
Header Title
Type text for title.
Show Package Price
Show/Hide the package price.
Show Package Button
Show or hide the package button.
Show Package Label
Show or hide the package label.
Package Button Text
Type text to show in package button.
Show Graphic Element
Select the graphic element to show in comparison list.
- No
- Icon
- Image
Packages/Plans Settings
Package Settings
Accordion Settings
Open-Close Duration
Set the open-close duration for accordion.
Close Others on Open
Enable this option to automatically close other accordions when a new one is opened.
First Appearance
Set the first appearance of accordion.
- Close
- First Opened
- All Opened
Scroll To Head
Turn on the scroll to head option for different devices.
- Off
- Desktop
- Mobile
- Desktop + Mobile
Expand All Accordion
To expand all accordions using an external button, enter a unique ID without '#' in this field and assign the same ID to the external button or element you want to use for opening the accordions.
Inactive/Active Icon
Choose icon to display as Inactive and active accordion.
Connected Widgets Settings
Connected Widgets Settings let you create dynamic, interactive layouts with advanced features. Use remote control widgets for creative layouts or sync item-based widgets together for smooth integration.
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Features(Item) Setting
Manage the items of the comparison list features using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Schema Setting
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Comparison List Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Wrapper Styling
Set the wrapper width, background color, padding, border radius, box shadow, and border.
Header Row Styling
Set the header row content alignment, background color, padding, and border.
Feature Rows Styling
You can set the feature rows background color, padding, and border.
Feature/Main Column Styling
Here, you can set the horizontal and vertical alignment, width, background color, and border of feature column.
Package Column Styling
You can set the package column content alignment, width, border, and background color.
Header Title Styling
You can style the header title vertical alignment, typography, text color, and text shadow.
Package Name/Price Styling
Here, you can set the typography, text color, shadow, and gap of package name/price.
Package Button Styling
You can set the package button typography, padding, gap, border radius, text color, background color, box shadow, and border.
Feature Title Styling
Set the feature title typography, text color, and text shadow.
Feature Data Text Styling
Style the typography, text color, text shadow and gap of feature data text.
Feature Data Icon Styling
Here, you can set the icon size, icon color, and icon shadow of feature data icon.
Accordion Content Styling
You can set the accordion content active row background color, typography, text color, padding and border.
Accordion Icon Styling
You can set the accordion icon size, color, shadow and gap.
Comparison List Design Examples For Elementor
Here are some live use cases for the Comparison List Widget.
Car features in comparison list with gradient background.
Comparison list with initially open accordion.
Thank you for exploring the Comparison List widget! We hope this guide has provided you with the clarity and inspiration to make the most of its features. By presenting comparisons in a professional and engaging format, you’ll add value to your website and improve user experience. If you have any questions or need further assistance, don’t hesitate to reach out. We’re here to help you get the most out of your Elementor experience.