Widgets

Feature List

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

The Feature List 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 Feature List Widget:

Exploring the Features of Feature List Widget

Step 1: Drag the widget

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

Step 2: Content tab

Feature List Content:

  • Feature List Style : You can choose a predefined style from here
  • Feature List : Create and manage multiple feature items.
    • Type : Choose the media type (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 the feature list item.
    • Link : Set URL for the feature list item.
  • Columns : Set how many items will show per row when inline layout will be set.
  • Alignment : Set items alignment.
  • 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, Image or Icon— but make sure you have added them first.

General:

  • Horizontal Space : Adjust spacing between items horizontally.
  • Vertical Space : Control spacing between items vertically.
  • 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 : Set unique background colors or gradients for normal and hover states. Explore full background settings here.
    • Border Type : Define border style, width, and color for both states.
    • 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:
    • Background Type : Set unique background colors or gradients.
    • 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 : Adjust spacing outside the element.

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.

Image or Icon:

  • 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.

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.

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

All done and ready to go!

Share: