1. Home
  2. Docs
  3. Content Elements
  4. Bullet List

How to configure & Style bullet list


Bullet list shortcode element is a great way to display the listing content in a webpage. With our powerful element, you can not just add the list but can style with an advanced customizing toolset. If you want to decorate your site content in a stylish manner, then you should definitely use the Bullet List element into your posts/pages. Here in this tutorial, you’re going to explore all about Bullet List and see how to work with this incredibly important element.

⇒See Demo⇐


Creating a New List with the Bullet List Addon

 

Select a style and set shortcode name

The Bullet list element has updated with the latest styles and templates. You can start adding your content under a preset layout of the Bullet List element. Let’s see how it works:

 

Click on the Bullet List icon, and it will then take you to the Bullet List Settings page.

 

Here, you need to select a particular style to create content with the element.  Select a style and give it a name that identifies your shortcode then save it.

 

Now, you’ll find the customization page with lite and advanced settings. There you can add and customize your bullet list data.

 


How to Customize the Bullet List Element

 

»Content

 

General Settings

Adding Bullet List Data

 

⇒Title: Enter the title for the bullet list.

⇒Link: Here, you can add a link to your title to get alive by linking to other pages. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link.

⇒Add New Item: Use the ‘+Add New Item’ button to add more bullet items to the list.

⇒Width Mode: Set the width mode of the bullet list either auto or dynamic. If you select dynamic, then you can manually customize the width of the list bar. Or if you select auto, then the width will be set automatically by default.

⇒Margin: Set the margin value for the top, right, bottom, and left around the bullet list for different dimensions. You can link the values together or customize them individually.

 


»Style

 

List Number

⇒Color: Customize the color of the bullet list number for both Normal and Hover view.

⇒Background Color: Add a custom color to the bullet list number background for both normal and hover views.

 

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom, and left of the bullet list number bar for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover views.

⇒Text Shadow: Customize the text-shadow color, set the horizontal and vertical values of the shadow, and control the blur radius.

⇒Padding: Set the padding value for the top, right, bottom and left around the list number for different dimensions. You can link the values together or customize them individually.

 

List Content

⇒Color: Customize the color of the bullet list content for both Normal and Hover view.

⇒Background Color: Add a custom color to the bullet list content background for both normal and hover views.

 

⇒Typography: Set the typography options for the bullet list content texts. Here you can customize the font-family, font size, decoration, and styles.

⇒Text Shadow: Customize the text-shadow color, set the horizontal and vertical value of the shadow, and control the blur radius.

⇒Padding: Set the padding value for the top, right, bottom, and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom, and left around the content for different dimensions. You can link the values together or customize them individually.

 

 

At the end of everything, hit the Save button and then see your beautiful Bullet List in the preview section. That is all about using the Bullet List element. Now, just Copy the Shortcode and Paste it anywhere in the post or page or plugins where you want to show the Bullet List to feature your items.

 

Note: Remember, forget to save the changes will cause losing all of your data. So, each time after done editing, make sure you save them.


 

Was this article helpful to you? Yes No

How can we help?