Bullet lists are a great way to present information clearly and concisely. They help engage your audience, improve readability, and lift the overall user experience. Adding a bullet list to your page is straightforward: select the element, drag it into your editor, and customise it to suit your design.

General Settings

Element Name

You can rename the default title of the bullet list element to make navigation easier while building your funnel page. This helps 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:

  1. 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.
  2. Font Size: You can modify the font size using the size bars or by typing the size in.
  3. Font Weight: Adjust the thickness of your text to ensure it stands out and matches your design style.
  4. Opacity: The opacity option lets you choose from increasing levels of transparency.

  1. Line Height: Drag the size bar to modify the height of the element box, expanding or condensing it as needed.
  2. List Item Spacing: Use this size bar to adjust the space between items in bullet lists, improving readability and giving you control over how your text looks.
  3. Text Transform: Convert your text to uppercase, lowercase, or capitalise each word.
  4. Letter Spacing: This controls the space between individual letters, giving you flexibility to fine-tune readability and visual appeal.

Colour Options

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

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

Icon

Adding an icon to your page is simple. Browse through the available options or use the search bar to find exactly what you need. There's a wide range of icons to choose from, so you can 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 left, right, up, or down, depending on which toggle bar you click.
  • Margin: You can adjust the margin of your content by toggling its bars.

Border Options

  1. Border: You can choose the type of border you want. Once you select a border type, the border settings will appear.
  2. Border Style: There are three different styles for your border: Solid, Dashed, or Dotted.
  3. Width: Increasing the border width increases the thickness of the border.
  4. Colour: To change the colour of the border, click the colour icon. Choose a colour or add a custom one by typing the code into the field.
  5. Radius: Adjusting the radius curves the edges of the border; the higher the number, the more curved it becomes.
  6. Radius Edge: You can choose which corner of the border to curve: all edges, top only, or bottom edge only.

Align

The text-align option lets you arrange your text to your preferred alignment, tailoring how your content is presented across your page.

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 look of your page. This effect can be added at the box (1) or text (2) level.

Visibility

Control whether your page element appears on desktop, mobile, or both by selecting the relevant options under the Visibility feature. You can hide elements from desktop or mobile view to customise the user experience.

Custom Class

To add a Custom Class to your design, enter your preferred class name into the Custom Class field. This lets you apply custom styles and attributes to personalise your content.

CSS Selector

To copy the CSS Selector for a specific reference number, locate the copy icon on the right side of the relevant reference number and click it. This copies the CSS Selector so you can use it on another website.

Animations Settings

Entrance Animation

Choose an animation effect for when the bullet list first appears on the page.

To customise 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 but effective way to organise and present information. With these customisation options, you can create lists that are both functional and visually appealing.