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 Inline.
Alignment: Adjusts the text alignment within the list: Left,Center, or Right.
Bullet Position: Defines the placement of the bullet relative to the text: Before or After.
Bullet Alignment: Controls the positioning of the bullet relative to the text: Left-aligned bullet, Center-aligned bullet, or Right-aligned bullet.
Divider: Enables or disables a dividing line between list items.
Gutenberg Bullet List Block – General Controllers
Bullet
In the Bullet settings, you can select the icon type for the entire bullet list. The available options are:
Icon: Allows you to select a standard icon from the icon library.
Image: Allows you to use an image as the bullet.
SVG: Allows you to select an SVG file as the bullet.
Lottie: Enables the use of Lottie animations as bullets.
Bullet Icon Types
To change the bullet type, simply click on the desired option under the Type section. Once selected, you can further configure the bullet’s appearance by choosing the relevant icon or animation in the Select Icon field.
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 for normal or hover states.
Box Shadow: Apply a shadow effect for normal or hover states.
Margin: Control the space outside the list items.
Padding: Set padding values for the top, right, bottom, and left sides of the list items.
Gutenberg Bullet List Block—Item Style Controllers
Bullet Style
Size: Adjust bullet size using a slider (PX, EM, REM).
Color: Customize bullet color for normal or hover states.
Background Type: Choose between a solid color, gradient, or image background for normal or hover states.
Border & Border Radius: Add a border to bullets and control their shape.
Margin: Control the space outside the bullet.
Padding: Set padding values for the top, right, bottom, and left sides of the bullet.
Gutenberg Bullet List Block—Bullet Style Controllers
Title Style
Typography: Adjust text size and style.
Color: Customize title color.
Hover Color: Set title color when hovered.
Text Shadow: Apply shadow effects to text.
Margin: Adjust spacing around the title.
Gutenberg Bullet List Block—Title Style Controllers
Description Style
Typography: Adjust font size and formatting.
Color: Customize description text color.
Hover Color: Customize description hover Color.
Margin: Set spacing around the description.
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 item, you can modify its settings using the available options.
Description: Add description for list item.
Show Bullet: enable to show list type.
Type: Choose the type of list item. Options include a standard icon, an image, SVG, or a Lottie animation.
Select Icon: Pick the specific icon you want to use from a list or library.
Link: Toggle to enable or disable a hyperlink for the list item.
URL: Enter the web address you want the list item to link to.
Open link in New Tab: Toggle this to decide whether the linked page should open in a new tab or the current one.
No Follow : Toggle to enable/disable rel=”nofollow” on the heading link , to control SEO impact. Use for untrusted or low-value destinations.
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
Bullet List Item—Style Settings
Icon Size: Set the size of the icon; you can drag the bar to set the icon size or enter the value.
Icon Color: Set the icon color for normal or hover states.
Title Color: Set the title color for normal or hover states.
Description Color: Set the description color for normal or hover states.
Item Background Color: Set the item background color for normal or hover states.
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? Premium Blocks 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.
