Skip to main content

BlockStrap Documentation

BS > Counter

Block Description

The BS > Counter Block is a dynamic and interactive block in the BlockStrap Page Builder Blocks plugin, which enables you to create eye-catching numerical counters on your web pages.

This block is perfect for showcasing countdowns, various statistics, achievements, or milestones in a visually appealing manner.

Block Features

This block offers a variety of features that allow you to customize the counter and its appearance.

You can set start and end numbers, add prefixes and suffixes, and configure the animation duration.

Additionally, you can customize the typography, alignment, and styles for both the number and title text.

Block Options

Content

  • Text
    • START NUMBER (input field): Set the starting number for the counter.
    • END NUMBER (input field): Set the final number that the counter will reach.
    • PREFIX (input field): Add a prefix to the displayed number (e.g., $, %, etc.).
    • SUFFIX (input field): Add a suffix to the displayed number (e.g., K, M, etc.).
    • ANIMATION DURATION (input field): Specify the duration for the counter animation.
    • Thousand Separator (checkbox): Enable or disable the thousand separator for the displayed number.
    • TITLE (textarea): Add a title or description for the counter.

Styles

bs counter styles
  • Number Typography
    • TEXT COLOR (dropdown select from theme color palette): Choose a text color for the counter number.
    • FONT SIZE (dropdown): Select the font size for the counter number.
    • APPEARANCE (dropdown): Choose the font weight for the counter number.
    • Text justify (checkbox): Enable or disable justified text for the counter number.
    • TEXT ALIGN (dropdown): Select the text alignment for the counter number.
  • Title Typography
    • TEXT COLOR (dropdown select from theme color palette): Choose a text color for the counter title.
    • FONT SIZE (dropdown): Select the font size for the counter title.
    • APPEARANCE (dropdown): Choose the font weight for the counter title.
    • Text justify (checkbox): Enable or disable justified text for the counter title.
    • TEXT ALIGN (dropdown): Select the text alignment for the counter title.

Advanced

bs counter advanced
bs counter advanced 2
  • Wrapper Styles
    • BACKGROUND COLOR (dropdown select from theme color palette): Choose a background color for the block.
    • Margins: Adjust the margins around the block.
    • Padding: Adjust the padding inside the block.
    • BORDER COLOR (dropdown select from theme color palette): Choose a border color for the block.
    • SHADOW (dropdown): Select a shadow style for the block.
    • POSITION (dropdown): Set the position property for the block.
    • DISPLAY (dropdown): Set the display property for the block.
  • Visibility Conditions
    • BLOCK VISIBILITY (modal): Open the modal to configure visibility conditions for the block.
  • Advanced
    • ADDITIONAL CSS CLASS(ES) (input field): Add custom CSS classes to the block. Separate multiple classes with spaces.
Feedback