Responsive Circle Background for Numbered Steps in Elementor

  • Resolved andrew771

    (@andrew771)


    7 months, 3 weeks ago

    Hello Elementor team,

    What’s the best method to add a circular or bubble-style background behind a number? I have a “How It Works” section on my website where each step is numbered.

    Right now, I’m using a flexbox inside another flexbox and adjusting borders, padding, and margins to form the circle — but it feels like a sloppy setup, and the shape stretches on wider screens.

    I’d like to find a clean, foolproof way to keep the circle perfectly round and responsive across all screen sizes. What’s the recommended approach for this in Elementor?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support vipul78

    (@vipulelementor)

    7 months, 3 weeks ago

    Hi @andrew771

    There isn’t a direct method to make the numbers being covered with background You can use the Icon List widget to add icons for your list but the number isn’t directly possible to do – https://elementor.com/help/icon-list-widget/

    Thread Starter andrew771

    (@andrew771)

    7 months, 2 weeks ago

    Hey! I actually found a solution! If you select a Header widget, go to the Advanced tab, scroll down, and enable “Mask” then choose the Circle shape. You can type inside it, and it creates a nice circular look. It’s not 100% perfect across all screen sizes since you might need to tweak the padding and margin a bit, but it works well enough!

    Plugin Support Rica

    (@ricav)

    7 months, 2 weeks ago

    Hi @andrew771,

    Thank you for the update, and I’m glad to hear you found a creative workaround!

    Using the Heading widget with the Mask feature and a circular shape is a clever solution, and it’s great that it achieves the look you were aiming for. As you mentioned, you may need to adjust the padding and margins across different screen sizes, but it’s definitely a workable approach.

    Let us know if you still need further assistance.

    Kind regards,

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive Circle Background for Numbered Steps in Elementor’ is closed to new replies.