Intro
Bullet List Widget creates an easy to manage list of items with lots of customization options and hover effects. Each item 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 free plugin installed and activated on your website.
- Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
- 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
1- 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 Icon: Show or hide the item icon.
- Icon Type: Select the icon type that matches your need, you can choose from four different options: Font Awesome Library, Image, Lottie Animation or Text.
- 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.
2- Display Option
Here we can control the whole list.
- 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.
- Icon Position: Change the icons’ 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.
- Icon Connector: This will add a small line linking between icons.
- 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 on the item, the other items that out of focus will be a blur.
- Grow: Hovering on any item will make it bigger.
- Text Gradient: Hover on any item will change its color to gradient color.
- Color: Set the first color for gradient color.
- Location: Starting position for the first color.
- Second Color: Set the Second color for 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.
Style
- General
- Icon
- Title
- Badge
- Divider
- Connector
1- 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 border type for the list Choose from the following border types:
- None (Default).
- Solid.
- Double.
- Dashed.
- Groove.
- Width: Set border width.
- Color: Choose a color for your border.
- Border Radius: Set Border Radius for Bullet List using pixels (PX), percentage (%), or em (EM). A Higher border-radius means a more circular border.
- Margin: Creates space around the Bullet List, outside of any defined borders. You can set the margin in Pixel (px), Em (em), or Percentage (%).
- Padding: Creates space around the Bullet List, inside of any defined margins and/or borders. You can set Bullet List Padding in Pixel (px), Em (em), or Percentage (%).
2- Icon
Options below will be applied on items with no style options set individually from the repeater.
- Size: Set icon size for all list items.
- Color: Set icon color.
- Hover Color: Set on hover icon color.
- Background: Select a background color for the icon.
- Hover Background: Select on a hover background color for the icon.
- Typography: Customize the font for the text icon.
- Font Family: Select a font family.
- Size: Set font size.
- Weight: Select font-weight.
- Transform: Select the font transform.
- Uppercase
- Lowercase
- Capitalize
- Normal
- Style: Select font style by choosing from:
- Normal
- Italic
- Oblique
- Decoration:
- Underline
- Overline
- Line Through
- None
- Line-Height: Set font line-height.
- Letter-Spacing: Set font letter-spacing.
- Border.
- Margin.
- Padding.
3- Title
- Typography.
- Color: Set the text color.
- Hover Color: Set on hover text color.
- Text Shadow:
- Color.
- Blur.
- Horizontal.
- Vertical.
- Margin.
4- 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.
- Box Shadow: Set box shadow for List items box container. The available options are:
- Color
- Horizontal
- Vertical
- Blur
- Spread
- Position
- Outline
- Inset
- Margin.
- Padding.
5- Divider
- Divider Style: Set a divider style for Bullet List Elementor Widget. Choose from the following divider styles:
- Solid
- Double
- Dotted
- Dashed
- Groove
- Width: Set the width of the divider line.
- Height: Make your divider thicker by increasing the height.
- Color: Set the color of the divider.
6- Connector
- Style: Set a connector style for Bullet List Elementor Widget. Choose from the following connector styles:
- Solid
- Double
- Dotted
- Dashed
- Groove
- Width: Make your connector thicker by increasing the width.
- Height: Set the width of the connector line.
- Color: Set the color of the connector.
