Welcome to an easy guide on using the Gutenberg Bullet List Block. WordPress keeps getting better, and the Gutenberg editor is a great tool to improve your website. This guide will show you how to use the Premium Blocks feature to create and style bullet lists, making your content look better and more organized. You’ll learn how to set up the needed plugins and customize your bullet lists. This guide is perfect for both new and experienced WordPress users. Follow the simple steps and tips to make your lists look great. Let’s get started and make your content stand out with Premium Blocks.
Open the Gutenberg editor, select Premium Bullet List Block, choose your list type, and customize its look and placement on your page.
General Display Options
Layout Type: Defines the layout type of Block or Line.
Alignment: Adjusts the text alignment within the list: Left,Center, or Right.
Bullet Alignment: Controls the positioning of the bullet relative to the text: Left-aligned bullet, Center-aligned bullet, or Right-aligned bullet.
Bullet Position: Defines the placement of the bullet relative to the text: Before or After.
Divider: Enables or disables a dividing line between list items.
Gutenberg Bullet List Block – General Controllers
Style Settings
General Style
Border: Choose a border style (solid, dashed, dotted, etc.).
Border Radius: Adjusts the roundness of the border.
Margin: Set spacing around the list (Top, Right, Bottom, Left) in PX, EM, or %.
Padding: Controls the inner spacing inside the list (Top, Right, Bottom, Left) in PX, EM, or %.
Gutenberg Bullet List Block—General Style Controllers
Item Style
Background Color: Set a background color for the list items.
Box Shadow: Apply a shadow effect.
Margin & Padding: Customize spacing for individual items.
Hover State: Define different styles for when the item is hovered.
Gutenberg Bullet List Block—Item Style Controllers
Bullet Style
Size: Adjust bullet size using a slider (PX, EM, REM).
Color & Background: Customize bullet color and background.
Border & Border Radius: Add a border to bullets and control their shape.
Margin & Padding: Adjust spacing around the bullets.
Hover State: Define different bullet styles for hover.
Gutenberg Bullet List Block—Bullet Style Controllers
Title Style
Typography: Adjust text size and style.
Color: Customize title color.
Text Shadow: Apply shadow effects to text.
Margin: Adjust spacing around the title.
Hover State: Set different styles when hovered.
Gutenberg Bullet List Block—Title Style Controllers
Description Style
Typography: Adjust font size and formatting.
Color: Customize description text color.
Margin: Set spacing around the description.
Hover State: Customize hover effects.
Gutenberg Bullet List Block—General Description Style Controllers
Divider Style
Style: Select a divider style (solid, dashed, etc.).
Width & Height: Adjust divider dimensions.
Color: Customize divider color.
Gutenberg Bullet List Block—Divider Style Controllers
Bullet List Item—General Settings
After choosing Premium Bullet List Block, you can modify its settings using the available options.
Border: Choose a border style (solid, dashed, dotted, etc.).
Border Radius: Adjusts the roundness of the border.
Margin: Set spacing around the list (Top, right, Bottom, Left) in PX, EM, or %.
Padding: Controls the inner spacing inside the list (Top, Right, Bottom, Left) in PX, EM, or %.
Gutenberg Bullet List Block—General Settings
If the bullet type is Lottie you will have the below options:
Lottie URL: An input field for entering the URL where the Lottie animation file is hosted.
Loop: Switch it on to make the Lottie animation repeat indefinitely.
Reverse: Enable to play the animation in reverse order.
Gutenberg Video Box Block—Lottie Bullet Type
Conclusion
In this guide, you’ve learned how to use the Gutenberg Bullet List Block to improve your WordPress site. The Premium Blocks plugin helps you create cool and stylish lists. You’ve seen how to change titles, add icons, and even use Lottie animations.
Need Further Help?
Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.
