Do you want to create a responsive Elementor icon list? Having a responsive Elementor icon list that can automatically adapt to different screen sizes can improve the user experience.
With the Style Lists widget from The Plus Addons for Elementor, you can create a responsive Elementor icon list.
To check the complete feature overview documentation of The Plus Addons for Elementor Style Lists widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
Best Used For:
- Service pages that list multiple benefits using icons in a horizontal row on desktop and a vertical stack on mobile
- Navigation sidebars that need to switch between horizontal and vertical layouts across breakpoints
- Feature comparison sections where icon list alignment changes based on screen size
To do this, add the Style Lists widget to the page and follow the steps:
1. Add the icon list content from the Stylish List tab.
2. Go to the Extra Options tab, then select the appropriate device tab (Desktop, Tablet, or Mobile) and set the icon list layout from the Desktop Layout dropdown. You will find two options:
- Default – To set a vertical layout.
- Horizontal – To set a horizontal layout.
Following this process, you can set different layouts for different devices.
Your Elementor icon list is now responsive and will adapt to different screen sizes.
To add tooltips to individual items in the list, see How to Add Tooltip in an Elementor Icon List Item. For a different approach to displaying icons on a page, see How to Add Social Media Icons in Elementor.
Suggested Read: How to Change Elementor List Item Background on Hover.
