List Group

How to use List Group Widget of Sky Addons for Elementor

The List Group Widget allows you to display stylish and structured item lists with media elements like icons, images, or numbers. Perfect for showcasing features, checklists, processes, or steps — all while staying fully customizable and user-friendly.

Features:

1. Dynamic Repeater – Add unlimited, structured list items with full content control.
2. Multiple Media Types – Use icons, numbers, or images for each item.
3. Individual Item Styling – Style each list item differently for unique branding.
4. Directional Icons – Use icons/arrows to create guided lists.
5. Advanced Style Controls – Customize appearance on both normal and hover states.

Insert List Group Widget

1. Open Elementor Editor. In the Elementor panel, search for “List Group” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Customize Layout

Layout Section

1. Add Repeater – Add new list items and customize their content.
   • Media Type – Choose between Icon, Image, or Number.
   • Title – Set the label or heading for the list item.
   • Direction Icon – Add directional icon to guide user flow.
   • Customize? – Enable to style this item individually.
   • Link – Add clickable link to the item.
2. Show Direction – Toggle visibility of direction icon globally.
3. Show Text – Toggle visibility of text/title in the list items.
4. Content Alignment – Set text and media alignment (Left, Center, Right).
5. Title HTML Tag – Choose heading level (H1–H6) for SEO & structure.

Style Customization

List Section
Control overall list container look and spacing.

1. Space Between – Manage gap between items.
2. Height – Set fixed height for list area.
3. Padding – Adjust inner spacing.
4. Border, Radius – Apply borders and rounded corners.
5. Background – Set background color.
6. Box Shadow – Add shadow for depth.
7. (All in Normal & Hover)

Media Section
Customize icons, images, or numbers.

1. Size – Set media dimensions.
2. Spacing – Space between media and text.
3. Padding – Inner spacing inside media box.
4. Border, Radius – Add borders and rounded edges.
5. Color – Set icon or number color.
6. Background – Set background color.
7. (All in Normal & Hover)

Title Section
Style the text of the list title.

1. Spacing – Margin or padding around the title.
2. Typography – Font family, size, weight, line height.
3. Color – Set font color.
4. Shadow – Add text shadow.

Description Section
Customize extra descriptive text.

1. Color – Regular font color.
2. Hover Color – Font color on hover.
3. Typography – Set Font family, size, weight, line height.

Direction Section
Style directional icons beside each item.

1. Size – Set icon size.
2. Spacing – Space around the icon.
3. Padding – Inner spacing.
4. Typography – Set Font family, size, weight, line height.
5. Color – Icon color.
6. Bg – Background color.
7. Border, Radius – Add border and curves.
8. Text Shadow – Shadow for text/icon.
9. Box Shadow – Adds outer shadow.
10. (All in Normal & Hover)

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. Items not showing? Ensure each repeater item has content.
2. Icons misaligned? Adjust spacing and padding in media settings.
3. Hover effects not working? Check if hover styles are properly set.

Conclusion

The List Group Widget by Sky Addons offers powerful list-building features with full flexibility in design and structure. Use it to craft attractive, responsive, and clickable lists that enhance user engagement.