Creating Lists on Your WordPress Website: Complete 2022 Guide

Creating Lists on Your WordPress Website: Complete 2022 Guide

Want to make your content more readable? Using bullet points and numbered lists for your content will not only make it easier to understand, but beautiful too!

Content is the backbone of every website. It is the primary reason why your website visitors are on your website – to know more about you or your business. So it’s only natural that your website content should be informative and easy to read.

What better way to make your content more understandable than by using lists? Lists are used to group together pieces of information so it’s easy to scan, not just by your website audience but by search engines as well.

Nothing beats a clean, clear list. You’re probably thinking, “but what about tables?” Tables can be great for displaying lots of information in a neat and organized manner, but they’re not always easy for readers to scan through. So what’s the solution? Creating bulleted and numbered lists.

Creating Lists on WordPress

It’s possible to create bulleted lists, edit a list, and change a numbered list in WordPress. Creating lists in WordPress is easy. By adding an asterisk (*) before each item on your list, you can transform any line of text into a bulleted list. 

How to create a numbered or ordered list in Gutenberg:

  1. Open a post in the Gutenberg post editor, and click on the Inserter (the + button on the top bar) to add a new block
Cursor pointing at the Inserter in the WordPress block editor
Cursor pointing at the Inserter in the WordPress block editor
  1. Search for ‘List’ and choose the ‘List Block’. Tip: A shortcut for this is to simply type “/list” on the page and hit Enter.
Adding the list block in the WordPress Block Editor
Adding the list block in the WordPress Block Editor
  1. Type out the first item on the list and hit enter to create a new item in the next line
Entering items in the List block in the Gutenberg Editor
  1. To create sub-lists within the list, just click on the indent button from the formatting toolbar
Adding a sub-list item in the List block in the WordPress Block Editor
  1. Hit enter twice to end the list.

The list is automatically added as a bulleted list, but if you want to change it to a numbered list, you could easily do so. Just click the “Convert to Ordered List” icon on the toolbar and that should do the trick!

Taking it a step further

There are still limitations to the functionality offered by the native Gutenberg list block. Stackable is a WordPress plugin that makes it easy to create any website by extending the WordPress block editor. We offer you additional custom blocks with advanced customizations and extended settings.

Discover a whole new experience of web design

No matter who you are, blogger, entrepreneur, designer, developer, we guarantee you’ll want Stackable.

Among our extensive block library is the Icon List block. This gives you the ability to further customize how lists are displayed on your website. With this block, you will have a variety of icons to choose from in lieu of the typical types of bullet points. You may even upload your own SVG, or if you’re a Font Awesome Pro user, you can add your pro kit code to use Font Awesome Pro icons as your bullets.

Here are some examples of how we designed the Icon List block, to give you some inspiration:

An example of the Icon List block from Stackable
An example of the Icon List block from Stackable
An example of the Icon List block from Stackable
An example of the Icon List block from Stackable
An example of the Icon List block from Stackable
An example of the Icon List block from Stackable

Adding the Icon List block

Here’s how to use Stackable to create better icon lists:

  1. Open a new page or post from your WordPress dashboard. Click the Inserter on the top of the block editor (the blue + button). 
Cursor pointing at the Inserter in the WordPress block editor
Cursor pointing at the Inserter in the WordPress block editor
  1. Search for “Icon List” and select the icon block with the pink and purple gradient. For a shortcut, you may also just type “/icon list” and it should appear in the pop up window.
Adding the Icon List block from Stackable in the WordPress block editor
  1. Input the first item on your list and similar to the native Gutenberg blocks, hit enter to create a new item on the next line.
Inputting line items in the Icon List block in the WordPress block editor

Customizing the Icon List block

  1. By default, the icon used for the bullet point is a check mark. However, you may change the bullet points for the whole list. To do this, open the Inspector (the gear ⚙ icon). Look for the Icons & Numbers panel in the Block tab. Click the Icon selector and browse through the icon library. Or you may type in some keywords to find the icon that you feel is best suited to your list.
Changing the icon of the Icon List block in the WordPress block editor

Or if you don’t want to change the bullet point for the whole list, and assign icons to individual list items, you may also do so. Just click on the bullet point of the list item you want to change the icon for, and the pop up window for the library should appear.

Customizing the icons in the Icon List block

To further personalize the icon, you may adjust the size, opacity, and rotation of the icon. Take a look at how we designed this specific icon list:

Customizing the icons in the Icon List block
  1. The list icon block has extended design options to enhance the appearance of your lists. In the General tab, you will see there are customization options such as columns, column gap, icon gap, and indentation. This means that you can divide your lists into up to three columns, and you have complete control over how to layout the list.
Customizing the icons in the Icon List block

And there you have it – a great and fun way to create lists on your website!

Wrapping things up…

To recap: by identifying the key points of your information and structuring it into lists, the readability of your content will significantly improve. 

Creating lists on WordPress is pretty simple and straightforward and you have the opportunity to upgrade your design with Stackable!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.