Search

How to Create a Circle Counter in Elementor (without Add-on)

Elementor is a powerful WordPress page builder that allows you to create stunning and responsive websites with ease. One of the features of Elementor is the Counter widget, which lets you display a progress bar with a number and a title. This widget can showcase your achievements, skills, statistics, or any other numeric data.

On the other hand, we came across a minor issue: it is not easy to change the counter’s shape. The Elementor Counter widget comes with a horizontal bar as its default shape, and there is no option to make it a circle counter directly.

This article will show you how to create a circular counter appearance by creatively combining a few of Elementor’s native features or simply adding custom CSS.

How to Create a Circle Counter in Elementor (without Add-on)

1. Set up the Containers

First, go to your Elementor editor by creating a new post type (page or post) or selecting an existing one.

Once you enter the Elementor editor, add a new container with two columns.

Adding a new container with two-column structure

Afterward, navigate to the main container settings, and we will apply some changes here:

Selecting a container to turn it into an editing mode.
  • Set the width of the widget to 900px and add 10px for both gaps (column and row)
Setting the container width in Elementor settings panel.

For this example, we will create four counter widgets, so duplicate the inner container two times.

Duplicating inner containers in the Elementor editor.

2. Add the Counter Widget

Next, add the Counter widget by selecting it from the widget panel and then dragging and dropping it into one of the inner containers.

Adding Counter widget to Elementor editor.

Alright, now it’s time to set the widget. Here are the following changes we applied to the widget:

Content Tab

Replace the number and the title with your preference.

Style Tab

Number: We set the size of the number to 20 pixels.

Title: We set the size of the title to 12 pixels, and for the weight, we set it to 600 (Semi Bold).

Setting the style of the Counter widget

Advanced Tab

As we mentioned at the beginning of this article, you can create a circular counter by combining a few of Elementor’s native features or simply adding custom CSS. Here, we will show you how to achieve a circular counter appearance with those methods.

  • Method 1: Add the Custom CSS

Please copy the CSS snippet below and paste it into the Custom CSS input field (Advanced tab > Custom CSS).

selector {
    border: 5px solid #000000;
    border-radius: 50%;
    margin-right: 40px;
    margin-left: 40px;
    padding-top: 30px;
    padding-bottom: 30px;
    }
Make the Counter widget circular via custom CSS
  • Method 2: Customize the Advanced Settings

In this method, we will combine some of the native Counter widget features that are available in Advanced Settings, such as borders, margins, and paddings.

  • Border
    • Set the border type to Solid.
    • Add 5 pixels of border width for all sides (top, right, bottom, left).
    • Converts the units of the border-radius from px to %, then adds 50% for all sides (top, right, bottom, left).
Make the Counter widget circular via built-in setting options.
  • Layout
    • Margin: Add 40 pixels of right and left margin.
    • Padding: Add 30 pixels of top and bottom padding.

Note: The values you added on the CSS or Layout section (Margin and Padding) to achieve a perfect circular shape depend on the “scenario” you choose, such as how many inner containers you use, the size and length of the text, etc. Let’s say, that if you use three inner containers (columns), the margin and padding will be around 50px. Feel free to experiment with the values to get the best circle counter.

The Bottom Line

This article shows how easily you can create a circle counter in Elementor without the help of any add-ons. We take you through two different approaches: using custom CSS and creatively combining several of Elementor’s built-in features.

Ultimately, the best method depends on your comfort level with the code and your desired level of control over the counter’s appearance. Both methods successfully bypass the need for additional Elementor add-ons, proving you can still create visually appealing circle counters within Elementor’s native capabilities.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?