Counter Block

The Counter Block is a versatile DigiBlocks component that displays animated numerical counters with customizable styling options. Perfect for showcasing statistics, achievements, milestones, or any numerical data that you want to highlight with smooth animation effects.

Adding a Counter Block

To add a Counter block to your page:

Open the WordPress block editor on any page or post
Click the “+” button to add a new block
Search for “Counter” or browse the “DigiBlocks” category
Click on the Counter block to insert it

Basic Configuration

Essential Settings

Starting Number Set the number where the animation begins. This can be any positive or negative integer. For example, if you want to count from 0 to 1000, set this to 0.

Ending Number Define the final number that the counter will reach. This is the value that will be displayed after the animation completes.

Title Add an optional title that appears below the counter. This helps provide context for what the number represents, such as “Happy Customers” or “Projects Completed”.

Description Include additional descriptive text below the title to provide more context or details about the statistic being displayed.

Layout Options

Layout Style Choose from three layout options:

Stacked: Icon, counter, title, and description are vertically aligned (default)
Inline: Elements are arranged horizontally in a single row
Centered: All elements are center-aligned regardless of the overall block alignment

Spacing Adjust the vertical spacing between elements within the counter block. The default is 15px, but you can set it anywhere from 0 to 100px.

Icon Configuration

Display Icon

Toggle the icon display on or off. When enabled, you can select from thousands of Font Awesome icons to represent your counter visually.

Icon Selection

Use the built-in icon picker to browse and select from a comprehensive library of icons. You can search by keyword or browse by category to find the perfect icon for your counter.

Icon Styling

Icon Size: Set responsive icon sizes for desktop, tablet, and mobile devices
Icon Colors: Configure normal and hover colors for the icon
Icon Background: Add background colors with normal and hover states
Icon Borders: Apply border styles, widths, colors, and radius values
Icon Spacing: Control padding around the icon and margin spacing

Number Formatting

Prefix and Suffix

Add text before or after the counter number:

Counter Prefix: Text that appears before the number (e.g., “$” for currency)
Counter Suffix: Text that appears after the number (e.g., “+” for “100+”)
Spacing: Adjust the space between the prefix/suffix and the number

Number Display Options

Thousand Separator Enable the use of thousand separators to make large numbers more readable. The default separator is a comma, but you can customize it to use periods or other characters based on your locale.

Decimal Places Set how many decimal places to display. Choose from 0 to 10 decimal places. When set to 0, only whole numbers are shown.

Decimal Separator Customize the character used to separate decimal places. The default is a period, but you can change it to a comma or other character as needed.

Typography Controls

Counter Typography

Customize the appearance of the main counter number:

Font Family: Choose from web-safe fonts or Google Fonts
Font Size: Set responsive sizes for desktop, tablet, and mobile
Font Weight: Control the thickness of the font
Font Style: Apply italic styling if desired
Text Transform: Convert text to uppercase, lowercase, or capitalize
Line Height: Adjust spacing between lines
Letter Spacing: Control spacing between characters

Title Typography

Separate typography controls for the counter title with the same options as the counter typography.

Description Typography

Independent typography settings for the description text, allowing you to create a clear visual hierarchy.

Color Customization

The Counter block offers comprehensive color controls with separate settings for normal and hover states:

Normal State Colors

Counter Color: Color of the main counter number
Title Color: Color of the title text
Description Color: Color of the description text
Icon Color: Color of the selected icon
Icon Background Color: Background color behind the icon
Background Color: Overall background color of the block

Hover State Colors

Configure how colors change when users hover over the counter:

Counter Hover Color: Counter number color on hover
Title Hover Color: Title text color on hover
Description Hover Color: Description text color on hover
Icon Hover Color: Icon color on hover
Icon Hover Background: Icon background color on hover
Background Hover Color: Block background color on hover

Animation Settings

Counter Animation

The counter automatically animates from the starting number to the ending number when it comes into view:

Animation Duration Control how long the counting animation takes, from 100ms to 10 seconds. The default is 2000ms (2 seconds).

Animation Delay Add a delay before the animation starts, useful for creating staggered effects when multiple counters are present.

Preview Animation Use the “Preview Counter Animation” button in the editor to see how the animation will look without needing to preview the page.

Entrance Animation

Add entrance animations that trigger when the block comes into view:

Choose from fade, slide, bounce, and other animation effects
Use the “Preview Animation” button to test effects in the editor

Border and Shadow Effects

Border Styling

Apply borders to the entire counter block:

Border Style: Choose from solid, dashed, dotted, double, and other styles
Border Width: Set responsive border widths for each side
Border Color: Select border color
Border Radius: Create rounded corners with responsive controls

Box Shadows

Add depth with customizable box shadows:

Normal Shadow: Configure shadows for the default state
Hover Shadow: Create different shadows for hover interactions
Position: Choose between outer and inset shadows
Blur and Spread: Control shadow softness and size
Color and Opacity: Set shadow color with transparency

Hover Effects

Add interactive hover effects:

Lift: Raises the block slightly on hover
Scale: Slightly enlarges the block on hover
Glow: Adds a brightness filter on hover

Spacing Controls

Padding

Control internal spacing within the counter block using responsive dimension controls. Set different padding values for desktop, tablet, and mobile devices.

Margin

Manage external spacing around the counter block. Like padding, margin settings are responsive and can be configured for each device type.

Advanced Features

Visibility Controls

Hide the counter block on specific devices:

Hide on Desktop: Remove from desktop views
Hide on Tablet: Remove from tablet views
Hide on Mobile: Remove from mobile views

Note: Hidden elements appear with reduced opacity in the editor for easy editing, but are completely hidden on the frontend.

HTML Anchor

Add a unique HTML anchor to create direct links to the counter block. This is useful for navigation menus or buttons that jump to specific sections of your page.

Custom CSS Classes

Add additional CSS classes for custom styling or integration with third-party tools and themes.

Best Practices

Choosing Appropriate Numbers

Use realistic and achievable numbers that reflect actual data
Consider the animation duration – very large numbers may take too long to animate
Round numbers to significant figures for better readability

Icon Selection

Choose icons that clearly represent the statistic being shown
Ensure icons are recognizable across different cultures and contexts
Maintain consistency in icon style across multiple counters

Animation Timing

Keep animation durations reasonable (1-3 seconds) for good user experience
Use delays strategically when displaying multiple counters
Consider reducing animation speed on mobile devices for better performance

Typography Hierarchy

Make counter numbers the most prominent element
Use titles to provide context
Keep descriptions concise and informative

Color Contrast

Ensure sufficient contrast between text and background colors
Test hover effects to maintain readability
Consider colorblind users when choosing color schemes

Common Use Cases

Statistics Pages

Display key business metrics, user counts, or performance indicators with animated counters that grab attention.

About Pages

Showcase company milestones, years of experience, team size, or project completions.

Portfolio Sections

Highlight completed projects, satisfied clients, awards won, or years of experience.

Landing Pages

Create compelling statistics that build trust and credibility with potential customers.

Achievement Sections

Display accomplishments, certifications, or quantifiable results in an engaging format.

Troubleshooting

Animation Not Working

Check that JavaScript is enabled in the browser
Verify that the starting and ending numbers are different
Ensure animation duration is set to a reasonable value
Clear caching plugins that might interfere with scripts

Counter Not Displaying

Confirm the block is not hidden on the current device type
Check that custom CSS classes aren’t conflicting with display
Verify that the block has been saved properly

Styling Issues

Use browser developer tools to identify CSS conflicts
Check that color values are in valid formats
Ensure typography settings are properly configured
Clear cache after making styling changes

Performance Considerations

Use reasonable animation durations to avoid impacting page performance
Limit the number of animated counters on a single page
Consider disabling animations on mobile devices for better performance
Optimize images if using custom icons

The Counter block is a powerful tool for displaying numerical data in an engaging and visually appealing way. With its extensive customization options and smooth animations, it can effectively highlight important statistics and achievements while maintaining excellent performance and accessibility standards.