Bullet lists are a powerful way to present information clearly and concisely. They help engage your audience, improve readability, and elevate the overall user experience. Adding bullet lists to your page is simple and intuitive. Just select the element, drag it into your editor, and customize it to fit your design.

General Settings #

Element Name #

You can rename the default title of the bullet list element to facilitate navigation while building your funnel page. This will help you quickly identify and manage different sections of your page.

Typography #

This section lets you modify the typography settings of your element. It consists of:

• Typography Type: You can either use the headline or content font you have previously chosen for your funnel or website, or select a custom font from the dropdown menu.
• Font Size: You can modify the font size by using the size bars or typing the size in.
• Font Weight: Adjust the thickness of your text to ensure it stands out and matches your design style.
• Opacity: With the opacity option, you have the flexibility to choose from increasing levels of transparency.
• Line Height: Modify the height of the Element box by simply dragging the size bar, allowing you to either expand or condense its dimensions as needed.
• List Item Spacing: Use this size bar to adjust the space between items in bullet lists, helping you improve readability and control your text’s look.
• Text Transform: Effortlessly alter your text by converting it to uppercase, lowercase, or capitalizing each word.
• Letter Spacing: This controls the space between individual letters, providing flexibility to fine-tune your content’s readability and visual appeal.

Color Options #

To change the color of your bullet list, select the content you want to modify and choose your preferred color.

• Background Color: Adjust the color of the element’s box with this option.
• Color: This option lets you modify the color of your text.
• Icon Color: This will change the icon color, regardless of the position in which it is placed.
• Link Text Color: If you have a link added to this element, you can edit its color here.

Icon #

Incorporating an icon into your webpage is easy. Browse through the available options or use the search bar to pinpoint the exact icon you desire. This feature offers a wide range of icons to choose from, allowing you to enhance the visual appeal and functionality of your content. Alternatively, you can select the text to transform the list style.

Advanced Settings #

Spacing Option #

There are spacing options available for adjusting your content. Depending on the Edit option you are working on, the settings will only apply to that option.

• Padding: These toggle bars move the content to either the left, right, top, or bottom, depending on the toggle bar you click on.
• Margin: You can adjust the margin of your content by toggling its bars.

Border Options #

• Border: You can choose the type of border you want. Once you select any of the border types, the settings for the border will pop up.
• Border Style: There are three different styles for your border: Solid, Dashed, or Dotted.
• Width: When you increase the border width, it increases the thickness of the border.
• Color: To change the color of the border, click on the color icon. Choose a color or add a custom color by typing the code into the given field.
• Radius: Adjusting the radius of your border curves the edges; the higher the number you select, the curvier it becomes.
• Radius Edge: You can decide the corner of the border you want to curve, either all edges, Top only, or bottom edge only.

Align #

The text-align option allows you to arrange your text according to your desired alignment. This feature enables you to tailor the presentation of your content to suit your preferences and enhance the overall visual appeal of your website.

Shadow #

Add a shadow effect to your bullet list to make it stand out. Adjust the shadow thickness to create subtle or bold effects, enhancing the overall design and aesthetic of your website. This effect can be added at the box or Text level.

Visibility #

Control the visibility of your page on desktop, mobile, or both by selecting the respective options under the Visibility feature. You can hide elements from the desktop or mobile view to customize the user experience.

Custom Class #

To incorporate a Custom Class into your design, simply enter the preferred class name into the designated Custom Class field. This feature allows you to personalize your content by applying custom styles and attributes.

CSS Selector #

To duplicate the CSS Selector of a specific reference number, simply locate the copy icon situated on the right side of the desired reference number and click on it. This action enables you to copy the corresponding CSS Selector, which can then be used on another website.

Animations Settings #

Entrance Animation #

Choose an animation effect for when the bullet list first appears on the page. To customize the animation details, click Adjust Animation. This lets you modify the scale, duration, delay, and easing motion of your animation.

Bullet lists are a simple yet effective way to organize and present information. With these customization options, you can create lists that are not only functional but also visually appealing.

Frequently Asked Questions #

How do I add a bullet list to my page? #

Select the Bullet List element, drag it into your editor, and customize it to fit your design.

Can I adjust the spacing between list items? #

Yes. Use the List Item Spacing size bar in Typography to control the space between items and improve readability.

How do I change the bullet icon? #

Use the Icon option to browse or search for an icon, or select the text to transform the list style.

Can I align my bullet list? #

Yes. Use the Align option in Advanced Settings to arrange your text to your desired alignment.

How do I add an animation to a bullet list? #

Under Animations Settings, choose an Entrance Animation, then click Adjust Animation to fine-tune scale, duration, delay, and easing.

Can I hide a bullet list on certain devices? #

Yes. Use the Visibility feature to show or hide the bullet list on desktop, mobile, or both.