How to Create & Style a Bulleted List in GenerateBlocks

If you’re working with bulleted lists in GenerateBlocks, there’s a powerful set of style options available within the Styles panel that gives you control over how your list items look and behave. Here’s how to take full advantage of them.

How to Structure List Items in GenerateBlocks

To begin, you’ll need to insert a new Text Block. Type your content — for example, “This is a bulleted list item.” Then in the settings panel, change the HTML tag to li (which stands for list item). But here’s the important part: every <li> element needs to be nested inside a container that uses the ul tag.

So make sure you create an outer Container Block and set its tag to ul to properly nest your list item.

Creating and Applying a Global Style

With the ul container selected, create a new Global Style. Give it a name like “bullet style” and start with a blank style.

Scroll down to the Lists section (second from the bottom), and you’ll find several options:

• List Style Type: Choose from a variety of built-in styles like:
  • none
  • disc (default solid bullet)
  • circle (outlined bullet)
  • square
  • decimal, decimal-leading-zero
  • lower-roman, upper-roman
  • lower-greek

You can switch between these to find the one that fits your design needs.

Using a Custom List Style Image

Want to swap out the bullet for an icon or image? Use the List Style Image field.

Here’s how:

1. Copy the URL of your image or icon (for example, from icones.js.org).
2. In the input field, type:
   url("PASTE-YOUR-URL-HERE")
   (You must include url("") or the image won’t render.)

This lets you replace the bullet with any image or SVG, like an asterisk or brand icon.

Note: If you’re using a custom image, you won’t be able to change its color using the marker selector in GenerateBlocks. Make sure the image is already the color you want before using it.

Adjusting List Position and Typography

Next up is List Style Position. You can choose between:

• inside: bullet sits inside the content box.
• outside: bullet sits outside the content box (adds more indent).

You can also change font size, weight, and color for the text itself. For example, bump up the font size to 4rem, make it bold, or apply a brand color like dark blue.

Targeting the Marker (Bullet) with a Selector

If you’re not using a custom image, you can go further by adding a ::marker selector within your Global Style to control bullet appearance directly.

Add a new selector named ::marker and modify the color, size, or spacing. Just remember this won’t work if you’ve already applied a custom list style image.

Fine-Tuning Spacing

Want to adjust the indentation or spacing between items? Use the Spacing options:

• Add left or right margin to adjust indent.
• Add bottom margin (e.g., 1rem) to space out items vertically.

Once you’re happy with your list styling, save it and check the frontend. You’ll see your styled list in action.

Matching Font Families with the Customizer

One more thing: list item text (li) might not automatically match your body font. This depends on how you’ve set up typography in GeneratePress.

To make sure all list items use a consistent font:

1. Open the Customizer → Typography.
2. Click Add Typography.
3. Scroll to the bottom and choose Custom Selector.
4. Enter li and assign your preferred font family.

This ensures your list items match the rest of your body copy without needing to set fonts manually on each block.

By combining Global Styles in GenerateBlocks and typography settings in GeneratePress, you have complete control over how bulleted lists appear across your site — from default styles to full customization using icons or brand assets.