How To Use Counter Widget Of EnterAddons

Counter widget shows animated numbered counter for your web page in different design.You can easily build counter widget with EnterAddons.

Using Counter Widget:

You can see the below video to get an insight into how you can use the Counter Widget, Or you can follow the documentation whichever you find convenient.

Firstly, select the Counter Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.

Step1:

Secondly, from ‘Content’ Section you will get Layout, Title, Number and Icon section.

After that, from ‘Layout’ section, you can add or edit Icon-Position, Number-Position and Content-Alignment. And that mention below.

Then, from ‘Title’ section, you can add or edit title and set HTML Tag respectively.

After that, from ‘Number’ section, you can add or edit number and number unit respectively. And that mentioned below.

Lastly, from ‘Icon’ section, you can add Icon Type ( Icon or image ). And given below

Step2

From ‘Style’ section you can stylize the widget. You will get the options Item Wrapper Settings, Title, Number and Icon.

From ‘Item Wrapper Settings’ section you can add or edit margin, padding, border-type ( width and color ), border-radius, box-shadow, background-type ( color and image ) respectively.

Moreover, In this section you will also find HOVER view that looks as given below.

From ‘Title’ section you can add or edit color, typography, margin and padding respectively, in NORMAL view.

Moreover, In this section you will also find HOVER view like below.

From ‘Number’ section you can add or edit color, unit-color, typography, margin and padding respectively.

Moreover, In this section you will also find HOVER view that looks as given below.

After that, From ‘Icon’ section you can add or edit icon color, icon wrapper width, icon wrapper height, margin, padding, border-type( width and color ) and border-radius respectively, in NORMAL view.

Moreover, In this section you will also find HOVER view like below.

Step3

Finally, after finishing all the editing, click update and then click on ‘Preview > Preview in new tab’ to see your work live.

That’s it.