Number Counter Module

Want to display some of the statistics that make your company stand out in your industry? Now you can utilize the Number Counter Module to display these statistics in a fun and engaging way!

Add a Number Counter Module to your Landing Page

To add a Number Counter Module to your landing page, click the grey (+) button in the landing page builder. Once the module has been placed in the row of your choosing, you’ll be met with three sets of customization options:

• Content

• Design

• Advanced

Content Tab

The Content portion of your Number Counter module is where you can designate the type of counter you’d like to display, whether or not you’ll be utilizing a percentage, dictating which background you’d like to display behind your counter, and choosing the administration label your team will use to identify your video.

Text and Elements

In these first two sections, you will decide what type of counter you’d like to display. Pick the title of your counter, dictate the numbers you’d like to display, then move on to the Elements tab to choose whether or not you’d like to utilize a percentage sign or not.

Background

As fun as numbers are, they could do with a bit more excitement. That’s where your custom background comes in. Choose from solid or gradient colors, an image, or even a video that you’d like to display behind your number counter.

Admin Label

This will change the label of the module in the builder for easy identification by you and your team.

Design Tab

Designing your Number Counter can go a long way toward making the statistics you’re proud of really stand out. Open up the Design tab to customize the text, formatting, filters, and even animations of your Number Counter module.

The design tab is made up of:

• Text Options: Plain old text options are so Windows 98′. You have full control over the design of your text not only your title, but also the numbers you’re displaying. Come here to customize the color, shading, styling, and shadows of the text within your module.

• Sizing: This is the sizing for your entire Number Counter module. If the size goes below 100% on the slider, options for aligning your module left, center, or right will automatically appear.

• Spacing: Add customized margins or padding here to help locate your Number Counter within your landing page.;

• Border: You’ve customized the entirety of the inside of your Number Counter, now surround it with a border that really draws in your visitors’ attention. Be sure to carefully walk the line between drawing in your visitors’ attention and overshadowing the content within!

• Box Shadows: Add a shadow behind your module using one of our 7 pre-built options.

• Filters: Define your color saturation, the contrast of light and dark areas, add a sepia filter or blur your entire module. We’ve included an abundance of options for filters in this section. Blend Mode allows you to modify how your image blends with any other layers beneath it. Choose normal to return to the default option.

• Animation: Pick an animation style to enable animations for your Number Counter module. Each animation will allow you to customize it further, controlling duration, direction, and intensity. Remember that the stats within your Number Counter need to be the focus of the section it is nested in within your landing page so animations could be the bait necessary for hooking your visitors!

Advanced Tab

Within the advanced tab, you will find options such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the modules many elements. You can also apply custom CSS classes and IDs to the module.

CSS ID & Classes

Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling or to create links to particular sections of your page. Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space.

Custom CSS

Custom CSS can also be applied to the module and any of the modules internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element.

CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Visibility

This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smartphones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.