How to Add Counter in WordPress with aBlocks?

Want to show visitors site’s important statistics? Want to display a timer? It can be anything!

By adding a counter block in your site, you can easily do this. And with aBlocks, adding counters to your WordPress site becomes easier.

Today, you will learn how to add Counter in WordPress using aBlocks, making your site look engaging with important responsive settings. Just follow these simple steps and  add a counter to your website in no time.

How to Add Counter in WordPress with aBlocks

Before you start adding counters to your WordPress site using aBlocks, ensure you have installed and activated aBlocks. Then turn on aBlocks counter blocks by navigating aBlocks > Dashboard > Blocks/Extensions section.

Add A Counter To A Page Or Post

To add a counter, start by opening the specific page or post where you want to display the counter for any of your website statistics.

Open the page or post where you want to show your counter and edit it. You can also add a new page or a new post. Click the “+” icon to add a new block from the Gutenberg editor.

After inserting the block, you will see the aBlocks counter blocks like this. Now you can start customizing this block as per your needs with aBlocks super advanced customization settings.

aBlocks Counter Layout Features

There are 3 types of layouts you can set with our aBlocks counter block. Let’s explore all of them one by one:

Number Layout:

The Number Layout in the Counter block displays a large, prominent numerical value in the block. This layout is ideal for displaying key statistics or percentages in a simple and straightforward way.

Circle Layout:

The Circle Layout represents the numerical value in a circular progress bar, which gradually fills up based on the percentage or number entered. This engaging layout is ideal for showcasing progress, completion rates, or any metric that benefits from a dynamic visual representation.

Bar Layout:

The Bar Layout features a horizontal progress bar that fills from left to right, corresponding to the percentage or value set. This layout is well-suited for displaying progress, milestones, or goals in a more linear format.

General Settings for the Counter Block

In the general section, you can modify lots of things for the counter blocks. 

Let’s explore all these available settings:

Counter Settings:

Alignment: Choose how to align the counter within its container. Options include left, center, or right alignment. You can set the alignment separately for desktop, tablet, and mobile devices, allowing for responsive design adjustments.

Show Icon: Toggle this switch to enable or disable an icon next to the counter. When enabled, an icon will appear as part of the counter display.

Starting Number: Set the initial value that the counter will start from. This is the number from which the counter will begin its animation.

Ending Number: Set the final value that the counter will reach. This is the target number for the counter animation.

Animation Duration (ms): Duration of the animation per milliseconds. A lower number makes the animation faster, while a higher number slows it down.

Animation Repeat: Enable this option to continuously repeat the animation in a loop.

Number Settings:

Decimal Places: Pick a number of decimal places to display in your counter value. Use the slider to easily adjust precision.

Number Prefix: Add a prefix to the counter number, such as a currency symbol or unit of measurement.

Number Suffix: Append a suffix to the counter number, like a percentage sign (%) or other relevant notation.

Thousand Separator: Choose a separator (e.g., comma, period) to format large numbers for better readability.

Heading Settings

Color: This allows you to choose the color for the heading. 

Typography: This allows you to choose the typography style for the heading. The current setting is “Default,” meaning no special style has been applied.

Icon Content Settings:

View: Allows you to select the style of the icon.

Position: Sets the placement of the icon in relation to other elements.

Icon: Displays the chosen icon. You can replace or delete the icon using the trash bin icon on the right.

Icon Style Settings:

This section lets you adjust the visual properties of the icon:

• Primary color: Select the main color for the icon.
• Size: Adjust the icon’s dimensions using a slider or input field.
• Rotate: Rotate the icon to a specific angle.

Advanced Settings for the Counter Block

The “Advanced” tab contains advanced settings for visual customizing of the counter, including layout and transform properties, background color/image, border style and thickness, shadow effects, masking, and responsive behavior.

Benefits of Adding a Counter to Your WordPress Site

Adding a counter to your WordPress site implies a few compelling benefits that will greatly improve user experience and engagement. It can increase credibility by showing animated counters that instantly inform important details to visitors in an attractive visualized way.

Apart from functionality, counters may further enhance the looks of your site, making it more engaging. It could be for expressing milestones or tracking some user activity, setting it apart from others.

Customizing Your Counter for Maximum Impact

Displaying the right kind of counter is essential to your success. There are so many different ways to customize aBlocks, so you can fully integrate your counter into your site’s design.

Experiment with various color choices, fonts, and styles until you obtain the perfect one that will not only draw attention to your visitors but also complement your site’s look. Now you can create a functional and nice-looking counter in no time with aBlocks.

Best Practices for Using Counters in WordPress

Place your counters carefully to gain maximum advantage from them. Find out the areas which attract the highest number of visitors and place your counters there. Keeping your counters light in weight helps speed up your site.

Overusing counters can clutter your design. Always remember, less is more! Keep your counters clean, simple, and aligned with your website’s purpose for maximum impact. 

Final Thoughts

Counters are a powerful way to increase engagement and drive action on your WordPress site. With aBlocks, adding and customizing counters is quite easy because of the lowest learning curve.

So, don’t miss out on enhancing your site’s appeal. Try aBlocks today and see the difference it makes.