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 –
[et_pb_circle_counter admin_label="Circle Counter" title="Circle Counter" number="64" percent_sign="on" background_layout="light" bar_bg_color="#e02b20" circle_color="#e09900" circle_color_alpha="0.1" title_font="Arial" title_text_color="#8300e9" title_letter_spacing="1px" title_line_height="1.1em" number_font="Verdana" number_text_color="#7cda24" number_letter_spacing="1px"]
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 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.
- General Settings
- Advanced Design Settings
- 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.
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.
I hope Circle Counter Module Shortcode helps you! If you have any query related to this tutorial please comment below.
More from my site
- Shortcode tested on divi version 2.7.5