As you all know that we are publishing a series of Divi Modules Shortcodes and we have been already published 2 shortcodes guides in previous two weeks and now it’s time to publish a new module’s shortcode. So this time we are extracting shortcodes for Bar Counters Module of divi.

If you are looking for the one about which we haven’t published yet then you can also find the shortcode for any divi module with the help of this post https://elegantenthusiast.com/how-to-find-the-divi-modules-shortcodes/ .

Where,

admin_label=”Bar Counters”  —->  Name of the Module.

background_layout=”dark”  —->  Background Layout (i.e. Light or Dark).

background_color=”#dbdbdb”  —->  Background Color.

bar_bg_color=”#70acaf”  —->  Bar Background Color.

use_percentages=”on”  —->  It determines whether to statics are in percentages or not (i.e. on OR off).

bar_top_padding=”10px”  —->  Padding from the top of the Bar.

bar_bottom_padding=”15px”  —->  Padding from the bottom of the Bar.

use_border_color=”on”  —->  It determines whether to use border or not.

border_color=”rgba(255,17,17,0.68)”  —->  It determines the border color.

border_width=”12px”  —->  It specifies the border width.

border_style=”groove”  —->  It determines the border style (i.e. solid, dotted, dashed, double, grove, ridge, inset and outset).

percent=”56″  —->  Value of the Bar.

background_color=”#000000″  —->  Bar line’s Color.

bar_background_color=”#ffffff”  —->  Bar Background color.

percentage_color=”#81d742″  —->  The text color which specifying the value of percentage for bar.

The shortcode above will produce bar counters like in following picture.

Bar Counters Module

bar counter module in divi

Bar Counters Module in Depth:

Basically bar counters module is used to show bar statics, each bar counter indicates the value of any entity.

In Bar Counters Module, we have to create new bar elements and we can also customize these bar counter elements.

To understand it in deep, please see the picture below.

Bar Counters Module

bar counters advanced design settings

Further we can also customize the overall look of the bar counters module, for this look at the pictures below.

Bar Counters Module

bar counter module general settings

Bar Counters Module

bar counter module general settings

Bar Counters Module

bar counters advanced design settings

And the other settings are like title font size, title text color, letter spacing, line height and some border settings which are very easy to understand and implement.

If you find this article helpful then please subscribe us for more good stuff and if you have any suggestion or any question regarding to the post please comment below or create a new question.

You May Also Like

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!

Share This