Kadence Numbered List / Icon List with Circled Number Styling

One of my clients recently needed a way to create a numbered list with custom styling—specifically, numbers inside circular backgrounds where I could control the color, background color, size, and more. Think of something like those clean, circled numbers you might see in a polished help article or guide. I explored a few options and found a couple of effective solutions using tools already available in WordPress with Kadence Blocks, as well as a custom CSS approach for more flexibility.

Here’s how you can solve this problem step-by-step.

Solution 1: Using Kadence Info Box Block

If you’re using Kadence Blocks, the Info Box block offers a simple way to achieve this without diving into code. Here’s how to set it up:

1. Add the Info Box Block
   In your WordPress editor, insert a Kadence Info Box block for each list item you need. Place them one after another to mimic a list.
2. Insert the Number in the Title
   In the “Title” field of the Info Box, type the number (e.g., “1”). This will act as your list number.
3. Style the Number
   Go to the block settings on the right-hand side ➡️Under “Title Styles,” adjust the font size to make the number stand out (e.g., 24px)➡️Set a custom background color for the title by enabling the background option and picking a color (e.g., a light blue or gray)➡️Add padding around the title to create space inside the circle (e.g., 10px on all sides)➡️Apply a border radius of 50% to turn the background into a perfect circle
4. Add the List Content
   In the “Text” field below the title, add the content that corresponds to this numbered item.
5. Repeat for Each Item
   Duplicate the Info Box block for each number in your list, updating the number and content accordingly. Adjust spacing between blocks in the “Advanced” settings if needed.
6. Fine-Tune Appearance
   Play with the colors, size, and spacing until it matches your design vision—like a green circle with white text or whatever suits your site.

This method is quick, doesn’t require coding, and leverages Kadence’s built-in styling options. You can see an example of how it comes together in a screencast like this one: [insert your own demo link if you create one].

Solution 2: Custom Ordered List with CSS

For more control or if you’re not using Kadence Blocks, a custom HTML ordered list with CSS works beautifully. Here’s how to do it:

1. Add an Ordered List in HTML
   In the WordPress editor, switch to the Custom HTML block and add your list:

   <ol class="styled-list">
       <li>First item</li>
       <li>Second item</li>
       <li>Third item</li>
   </ol>

2. Apply Custom CSS
   Head to your theme’s CSS editor (e.g., Appearance > Customize > Additional CSS) and add the following:

   .styled-list {
       list-style: none;
       counter-reset: list;
       margin: 0;
       padding: 0;
   }

   .styled-list li {
       position: relative;
       padding-left: 40px; /* Adjust based on circle size */
       margin-bottom: 15px; /* Space between items */
   }

   .styled-list li::before {
       content: counter(list) ".";
       counter-increment: list;
       position: absolute;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 25px; /* Circle size */
       height: 25px; /* Circle size */
       background: #4CAF50; /* Circle background color */
       color: #fff; /* Number color */
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 16px; /* Number size */
   }

3. Customize the Styles

• Change width and height to adjust the circle size.
• Update background to your preferred circle color (e.g., #FF5733 for orange).
• Set color for the number’s text (e.g., #000 for black).
• Tweak padding-left on the li to ensure the text doesn’t overlap the circle.
• Adjust font-size for larger or smaller numbers.

3. Test and Refine
   Preview your page and tweak the values to fit your design. You can even add a border or box-shadow to the ::before element for extra flair.

This approach gives you full control over the look and feel, and it’s lightweight since it uses native HTML and CSS.

Which Solution Should You Choose?

• Info Box Method: Ideal if you’re already using Kadence Blocks and want a no-code solution with a visual editor. It’s great for quick setups but less flexible for large lists.
• Custom CSS Method: Perfect for precise styling or if you’re comfortable with code. It’s scalable for long lists and reusable across your site with a single CSS class.

Both methods deliver that polished, circled-number look my client was after. Pick the one that fits your workflow, and you’ll have a standout numbered list in no time!