Widgets

List Group

Step-by-Step Tutorial on Using the List Group Widget of Zyre Addon

The List Group Widget of Zyre Addon combines functionality with style, ensuring your website is both informative and visually captivating. With sleek layouts, unique effects, and complete customization, it transforms simple lists into impactful design elements.

Learn How To Use List Group Widget:

Exploring the Features of List Group Widget

Step 1: Drag the widget

From the left panel, search or choose the List Group of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

List Group Content:

  • List Group Style : You can choose a predefined style from here
  • Group List : Create and manage multiple feature items.
    • Type : Choose the media type (Number, Icon or Image).
    • Icon/Image Selection : Pick an icon or upload a custom image.
    • Title : Set item title.
    • Title HTML Tag : Choose the HTML tag for title.
    • Description : Add description of each list group item.
    • Link : Set URL for each list group item.
  • Items Icon : Set all items icon.
  • Columns : Set how many items will show per row.
  • Alignment : Set items alignment. (Works when List Item > Width is set in the Style tab.)
  • Class : Add a CSS class for custom styling.

Step 3: Style tab

In the Style section, you can customize the General, List item, Item Content, Title, Description, Number icon & image, items icon— but make sure you have added them first.

General:

  • Horizontal Space : Adjust spacing between items horizontally.
  • Vertical Space : Control spacing between items vertically. (when inline layout is selected)


Divider Style:

  • Divider Toggle : Enable/disable the divider.
  • Style : Choose divider style.
  • Weight : Set the size of the divider line.
  • Color : Customize divider color.

List Item:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • For both normal and hover states:
    • Background Type with Color : Set unique background colors or gradients for normal and hover states. Explore full background settings here.
    • Border Type : Define border style, width, and color.
    • Box Shadow : Apply drop shadow, with separate settings for hover interaction.
  • Border Radius : Apply rounded corners to each item.
  • Layout : Set where content will show – right, left, bottom.
  • Padding : Add inner spacing to balance text and visuals.
  • Alignment : Control text and content alignment within each item.
  • Width & Height : Adjust each item dimensions for consistent design.

Item Content:

  • Margin : Control the outer spacing around the item content.
  • Padding : Adjust inner spacing within the item content.
  • Alignment : Set text content alignment.
  • Vertical Alignment : Control vertical positioning for item content.
  • For both Normal & Hover States (When hover over the Item):
    • Background Type with Color : Set unique background colors or gradients. Explore full background settings here.
    • Border Type : Define border style, width, and color.
    • Box Shadow : Apply drop shadow effect for depth and hover interaction.
  • Border Radius : Round the corners of the item content.

Title:

  • Typography : Adjust font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing. Explore full typography settings here.
  • Text Color : Set the Title text color
  • Margin : Control the outer spacing around the title.

Description:

You’ll find the same design options for the Description as in the Title — giving you full freedom to style it just the way you imagine.

Number, Icon & Image:

  • Icon Size : Adjust the size of the icon.
  • Width & Height : Define the dimensions of the image or icon container.
  • For both Normal & Hover States:
    • Background Type with Color : Set unique background colors or gradients.
    • Icon Color : Choose the icon color for normal and hover states.
    • Border Type : Define border style, width, and color.
    • Box Shadow : Add drop shadow effect.
  • Border Radius : Round the corners of the item content container.
  • Horizontal Alignment : Position the icon/image horizontally.
  • Vertical Alignment : Position the icon/image vertically.

Items Icon:

  • Icon Size : Adjust the icon’s size.
  • Width : Set icon container width.
  • Height : Set icon container height.
  • Wrapper Width : Define the width of the wrapper holding the icon.
  • Wrapper Height : Define the height of the wrapper.
  • Margin : Set outer spacing around the icon.
  • Vertical Alignment : Position the icon vertically (top, middle, bottom).
  • Horizontal Alignment : Position the icon horizontally (left, center, right).
  • For both Normal & Hover States:
    • Background Type : Choose solid, gradient for the wrapper.
    • Border Type : Customize border style with width and color.
    • Box Shadow : Apply drop shadow effects.


Icon:

  • Icon Color : Define the color of the icon.
  • Background Type : Set background color or gradient for the icon itself. Explore full background settings here.
  • Border Type : Customize border style, width, and color for the icon.
  • Border Radius : Control corner roundness.
  • Icon Border Radius : Apply separate border roundness for the icon shape.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Layout:

  • Margin : Adjust outer spacing within the full container.
  • Padding : Adjust inner spacing within the full container.

Border:

  • For both Normal & Hover States:
    • Border Type : Customize border style.
    • Border Width : Set border width.
    • Border Color : Set border color for the container background.
    • Border Radius : Set radius of the container.
    • Box Shadow : Apply drop shadow effects.


Finally, hit the Publish button and watch your stunning List Group come to life on your webpage!

You’re all set!

Share: