Circle counter is an ultimate way for displaying varying types of data in a beautiful manner. It helps us to represent skill levels, promotional levels and many other data sets in a stunning way. In this tutorial, we will see how Circle Counter Module Shortcode works.

Here is the Circle Counter Module Shortcode –

Where,

admin_label= Admin Label for the module

number= Number for the  circle counter(1, 2, 3…..)

percent_sign= To set percent(%) sign or not

background_layout= It determines the background layout, it could be “light” or “dark”.

bar_bg_color= Bar Background Color

circle_color= To set circle color

title_text_color= Text color of title

number_text_color= To set color of number text

title_font= To set font style of title

title_letter_spacing= Space between the letter of title

title_line_height= Line height of title

number_font= Font style of number

number_letter_spacing= Space between the numbers

title_font_size= Font size of title

Above shortcode will create a Circle Counter Module shown in following image-

Circle Counter Module Shortcode

Circle Counter Module Preview

Circle Counter Module in Depth

Circle counter Module is an awesome way to display a single statistic. In this, the number count increases according to the percentage. Let us see the module in depth.

There are three sections to design circle counter with this module.

  1. General Settings
  2. Advanced Design Settings
  3. Custom CSS

In General Settings-

All the basic settings are available in this section like title, number, percentage, text color, bar background color and so on. Look at following image for detailed information.

Circle Counter Module Shortcode

General Settings of Circle Counter

Advanced Design Settings-

In this section we can adjust and customize more things like, circle color, circle opacity, letter spacing, font size, font color etc. for all devices like Phone, Tablet and Desktop.

Circle Counter Module Shortcode

Advanced Settings of Circle Counter

I hope Circle Counter Module Shortcode helps you!  If you have any query related to this tutorial please comment below.

 

Important Notes

  • Shortcode tested on divi version 2.7.5
Share This
Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

You have Successfully Subscribed!