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've 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: This option empowers you to modify the height of the Element box by simply dragging the size bar, allowing you to either expand or condense its dimensions as needed.
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 you with the 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's 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 (3) 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 this 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 of the border; 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 (1) or Text (2) 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 then can 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.