Bullet List Widget Tutorial

Intro

Bullet List Widget creates an easy to manage list of items with lots of customization options and hover effects. Each item is highlighted by its own icon and badge. You can choose from a lot of icon types: Font Awesome icon library, Images, Lottie Animations, and Text.

Click here to check Premium Bullet List Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• List Item
• Display Options
• Random Badge

List Item

Here, we can manage the list items add, delete and customize their styling options.

To add a new item list, click on the Add item button.

• Title: Add title to the item.
• Show Button: Show or hide the item button.
• Button Type: Select the icon type that matches your need, you can choose from four different options: Icon, Image, Lottie Animation, Text, or SVG Code.
• Link: You can optionally link the item to an external URL or an existing page on your website.
• Badge: ِِAn effective way to highlight an item in a list.
  • Badge Text: Add badge text.
  • Text Color: Select a text color for the badge.
  • Background: Select a background color for the badge.
• Override Global Style: Activate this group option to make this item unique from others.
  • Icon/Text Color: Set icon/text color value.
  • Title Color: Set title color value.
  • Background: Set background-color value.
• Size: Set the Button size.
• Normal/Hover state: Set the styling
  • Icon/Text Color
  • Stroke Color
  • Title Color
  • Background

• Draw SVGs In Sequence: Enable to draw the SVG element in a sequence.
• Loop: Enable to loop of the SVG drawing.
• Speed: Set the Speed of the SVG drawing.
• Yooy Effect: Enable to have a yoyo effect for the SVG drawing.

Display Option

• List Overflow: Show or hide list overflow content.
• Layout Type: Here you can switch between vertical and horizontal list items.
• Alignment: Align the item to the left, center, or right.
• Bullet Position: Change the bullets’ positions before, top, or after the text.
  • For the top position, you can align the icon left, center, or left.
• Badge Alignment: Change the badge position on the right or the left of the items.
• Divider: This will add a divider between every item.
• Animations: Pick your favorite entrance animation and set the animation duration and delay between every item.
• Hover Effect: You can choose between 3 different types of hover animations.
  • Blur: When hovering over the item, the other items that are out of focus will be a blur.
  • Grow: Hovering on any item will make it bigger.
  • Text Gradient: Hovering on any item will change its color to a gradient color.
    • Color: Set the first color for gradient color.
    • Location: Starting position for the first color.
    • Second Color: Set the Second color for a gradient color.
    • Location: Starting position for the second color.
    • Type: Select the type of gradient linear or radial.
    • Angle: Set the value for gradient effect direction.
    • Position: You can select from many positions.

Random Badges

• Add Item
• Badge Text
• Text Color
• Background
• CSS Selector: Use this feature to input the CSS selector for the parent element, which will be utilized to locate bullet items within it. This will facilitate the process of applying random badges to other items in the bullet list across the page.
• Minimum Randomness: The minimum number of times that this badge should be applied.
• Maximum Randomness: The maximum number of times that this badge should be applied.

Style

• General
• Bullet
• Title
• Badge
• Divider
• Connector

General

• Background Color: Select a background color for the list box.
• Hover Background Color: Select on hover background color for the list box.
• Box Shadow: You can add a shadow around the widget with this option.
• Hover Box Shadow: You can add on hover style to shadow around the widget with this option.
• Border Type: Set the border type, width, and color.
• Width: Set border width.
• Color: Choose a color for your border.
• Border Radius: Set Border Radius for Bullet List. A Higher border-radius means a more circular border.
• Margin: Creates space around the Bullet List, outside of any defined borders.
• Padding: Creates space around the Bullet List, inside of any defined margins and/or borders.

Button

Options below will be applied on items with no style options set individually from the repeater.

• Size: Set button size for all list items.
• Color: Set button color.
• Stroke Color: Select the stroke color for the bullet.
• Hover Color: Set on hover button color.
• Hover Stroke Color: Select the hover stroke color for the bullet.
• Background: Select a background color for the button.
• Hover Background: Select on a hover background color for the button.
• Typography: Customize the font for the text icon.
• Border Type: Set the border type, width, and color.
• Border Radius: Set Border Radius for Bullet List. A Higher border-radius means a more circular border.
• Margin: Creates space around the Bullet List, outside of any defined borders.
• Padding: Creates space around the Bullet List, inside of any defined margins and/or borders.

Title

• Typography: Customize text styles, fonts, sizes, and colors, for Bullet list title.
• Color: Set the text color.
• Hover Color: Set on hover text color.
• Text Shadow:
  • Color.
  • Blur.
  • Horizontal.
  • Vertical.
• Margin: Creates space around the Bullet List title, outside of any defined borders.

Badge

• Typography: Customize the font for the badge text.
• Color: Set the badge text color.
• Background: Select a background color for the badge text.
• Badge Radius: Set Border Radius for Badge Box using pixels (PX), percentage (%), or em (EM). A higher border-radius means a more circular border.
• Text Shadow: Add a shadow to the text itself.
• Box Shadow: Set box shadow for List items box container.
• Margin: Creates space around the Bullet List, outside of any defined borders.
• Padding: Creates space around the Bullet List, inside of any defined margins and/or borders.

Divider

• Divider Style: Set a divider style for Bullet List Elementor Widget.
• Width: Set the width of the divider line.
• Height: Make your divider thicker by increasing the height.
• Color: Set the color of the divider.

Conclusion

In summary, Bullet List Widget simplifies the creation of customizable lists with various icons and badges, providing a range of design options and hover effects for a visually engaging user experience. Its key features include list item management, display options, and the ability to add random badges.