Numbers

The numbers module uses a count-up animation to create an effect where numbers increase gradually from a starting point to an ending point. The count-up animation is often used to showcase important statistics or metrics, such as the number of customers, subscribers, or followers.

Numbers Settings

General Tab

In the General tab of the module, you can add, edit, and remove Numbers. To add a new number, click the Add Number button.

Each Number item has the following fields:

• Number
• Text
• Prefix
• Suffix
• Decimal Places
• Accessible Text

As an example, here's how you would enter in content for $1.2 million dollars raised.

In our example, we would like to highlight how much money was raised in our fundraiser. Let's say we raised 1.2 million dollars.

To start things off, we added "1.2" to the Number field. The Text field is for any additional text you would like to display underneath the number. In this case, we used the word "raised". We also used the Prefix and Suffix fields to add a "$" character before the number and an "m" character (for millions) after the number, respectively. The Decimal Places field helps with the formatting of the number, so we chose 1 decimal place for our number. The Accessible Text is one of the most important parts where we bring everything together and write out the full statement so that a screen reader can read this aloud (instead of each individual part). The accessible text we wrote is "1.2 million dollars raised".

Each item also has the standard set of controls (icons) which perform the following actions:

• Reorder (drag & drop into the desired order)
• Duplicate
• Remove

Style Tab

In the Style tab of the module, there are limited options for "styling" the module.

• Align: Standard align controls (left, center, right) offered by Beaver Builder.
• Font Size: Standard font size field offered by Beaver Builder.

Advanced Tab

In the Advanced tab of the module, there are all the usual settings for margins, visibility, and advanced HTML settings.