How to Use Counter Effect in Bricks Builder Using BricksFly

BricksFly Counter Element displays animated numerical values for statistics, achievements, and key metrics. This guide explains how to add the Element, configure its content and animation, and adjust its layout and spacing.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Counter In BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under General, toggle On Counter.

Step 1: Insert Count Elements & Configure Basics

Click the + icon, enter Counter in the search field, and select it from the results. Next, drag the Counter element from the left panel and drop it directly onto the canvas where you want it to appear.

Note: To display multiple Counter elements, add a separate Counter element for each stat from the element panel. In this example, four Counter elements are added.

After selecting the Counter element, you will find four primary sections under the Content tab: Content, Animation, and Layout. Let’s begin by exploring the Content section.

Step 2: Configure the Counter Content

Set the counter values, prefix, suffix, title, HTML tag, and number format based on your content needs.

Starting Number

Sets the number from which the counting animation begins. For example, setting it to 0 makes the counter start at zero. In this example, the field is left empty.

Ending Number

Sets the final number displayed when the counting animation finishes. For example, setting it to 500 animates the counter from the starting value to 500. Set the number based on your content needs.

Number Prefix

Adds text or a symbol before the number. You can use it for currency signs or other labels, such as $500 or +500.

Number Suffix

Adds text or a symbol after the number. It is useful for values such as 500+, 75%, or 20K. In this example, the + symbol is selected.

Title

Adds a heading or label that describes the counter value, such as Completed Projects, Happy Clients, or Years of Experience.

Title HTML Tag

Sets the HTML tag used for the counter title, such as H2, H3, H4, div, or p. Choose a tag that matches the content structure and heading hierarchy of your page.

Thousand Separator

Controls how large numbers are separated to make them easier to read.

• None displays the number without a separator, such as 1000.
• Comma separates thousands with a comma, such as 1,000.
• Dot separates thousands with a dot, such as 1.000.
• Space separates thousands with a space, such as 1 000.

In this example, Comma (1,000) is selected. You can choose any available option based on your preference.

Additionally, go to the Style tab to customize the title text and number font sizes based on your design needs.

Step 3: Configure the Counter Animation

Configure the counter animation by setting the duration and choosing when the counting animation should start.

Duration

Controls how long the counting animation takes to move from the starting number to the ending number. A lower value creates a faster animation, while a higher value makes it slower.

In this example, the Duration value is set to 2000.

Trigger

Determines when the counter animation begins.

• On Scroll (In View) starts the animation when the Counter Element enters the visitor’s visible screen area.
• On Page Load starts the animation as soon as the page loads, even when the Counter Element is farther down the page.

In this example, On Scroll is selected. You can choose any available option based on your design needs.

Step 4: Adjust the Counter Layout

Use these layout settings to arrange the counter number and title, align the content, and adjust the spacing between each counter element.

Direction

Controls how the number and title are arranged. Depending on the selected direction, they can appear horizontally beside each other or vertically one above the other. Available options include:

• Vertical (Number Top)
• Vertical (Title Top)
• Horizontal (Number Left)
• Horizontal (Title Left)

In this example, Vertical (Number Top) is selected.

Alignment

Controls the position of the counter content within the Element, such as left, center, or right. In this example, center is selected.

Gap

Controls the space between the number section and the counter title. Increase the value to create more separation or decrease it to bring them closer together. In this example, the field is left empty. You can enter a custom value based on your preference.

Number Row Gap

Controls the space between the number prefix, animated number, and number suffix within the number row. For example, it adjusts the spacing between $, 500, and +. No value is specified in this example.

Final Result