Animated Counter Plugin
Installation Steps
Step 1: Code injection footer
Place the following code in the Code Injection section.
Pages > Custom Code > Code Injection > Footer
Steps to Add Animated Counters to a Page:
Open the website page where you want the counter animation to appear.
Add a code block on the page.
Work through steps 2 to 5 of the animated counter setup interface.
Copy and paste the generated code into the code block.
Repeat steps 2 to 6 for every animated counter you want to add to the page.
Finally, save the page to apply your changes.
Step 2: Add the Title, Value and Sign
Title/Label – enter the text you want to display above the counter.
Value – enter the number you want the animated counter to reach.
Important: Enter numbers without commas or decimal point. (e.g. 50000 not 50,000.00)
Sign/Emoji – optional, add a symbol, currency sign, or emoji to display alongside the counter.
Counter Title
Counter Value
Do not use "," or "." e.g (e.g. 50000 not 50,000.00)
Counter Sign/Emoji
If you don't want a sign/emoji, simply add a space
Step 3: Customise the Animated Counter Title
Set the style for your counter title by adjusting the following options:
Font colour – choose the colour of the text.
Font size – set how large the title appears.
Line height – control the spacing between lines if your title wraps around.
Letter spacing – adjust the space between letters.
Font weight – make the text bold, light, or normal.
Margin top & bottom – control the spacing above and below the title.
These settings let you match the counter title to your page’s design and make it visually appealing.
Colour
Font Size
Line Height
Letter Spacing
Font Weight
Margin Top (PX)
Margin Bottom (PX)
Step 4: Customise the Animated Counter Value
Set the style for your counter numbers by adjusting the following options:
Font colour – choose the colour of the number.
Font size – set how large the number appears.
Line height – control the spacing between lines if needed.
Letter spacing – adjust the space between digits.
Font weight – make the number bold, light, or normal.
Margin bottom – control the space below the number.
These settings ensure your counter value is readable and visually consistent with your page design.
Colour
Font Size
Line Height
Letter Spacing
Font Weight
Margin Bottom (PX)
Step 5: Customise the Counter Border
Adjust the border around your animated counter using the following options:
Border colour – choose the colour of the border.
Border size – set the thickness of the border.
Padding – control the space between the border and the counter content.
Text align – choose how the counter content (title and value) is aligned within the border (left, center, or right).
Background - choose the background colour of the counter.
These settings let you create a neat, framed look for your counter and improve its visual presentation on the page.
Border Colour
Border Size
Border Radius
Padding
Align Text
Background Colour
Step 6: Copy the Animated Counter Code
Copy the generated HTML code for your animated counter.
Paste the code into the code block on the page where you want the counter to appear.
<div style="color:#000000;font-size:16px;line-height:1em;letter-spacing:0.02em;font-weight:400;margin-top:15px;margin-bottom:15px">Customer Satsifaction</div> <div data-pc-plugin="countup" data-count="5000" data-sign="+" style="text-align:center;color:#000000;font-size:32px;line-height:1em;letter-spacing:0.02em;font-weight:400;margin-bottom:15px">👍</div>
</div>