How To Use Counter Module For Beaver Builder?

Looking for a way to get rid of displaying your stats, social media followers, satisfied customers, and number of products sold in plain text or static images? Look no further! Here we will introduce a counter module for Beaver Builder, your secret weapon for captivating content.

With this dynamic module, you can effortlessly showcase your achievements, milestones, and key metrics on your website. Whether you’re a business owner, marketer, or creative professional, counter module empowers you to demonstrate your achievements to the viewers and get more loyal customers. With this, you can transform your website into a visually stunning masterpiece that leaves visitors in awe.

If you’re a newbie or Beaver Builder pro looking forward to adding a counter module without writing the line of code, this step-by-step guide is all you need!

Moreover, counter module by Xpro beaver builder addons provides you the ability to apply pre-defined stylish layouts, add icons from the icon library, and apply colors, gradients, and border style. You can set the position, size, width, alignment, border, radius, shadow, padding & more to give your website a unique and customized look. You can also apply animation on your counter module to make your website alive and achieve your vision.

So, Let’s start on an exciting journey to unleash the power of the counter module for Beaver Builder!

Requirements

Firstly, you need to install and activate the Xpro beaver builder addons- Lite. For installing this, Click on the “plugins” on the side menu and select “Add new.” Once done, type “Xpro Addons” in the search bar located in the top-left corner. After this, you’ll be displayed with multiple search results, as shown in the image below:

Locate “Xpro Addons for Beaver Builder- Lite” and click on “Install.”

After that, you need to purchase the Xpro Beaver Builder Premium Pack and activate the license to use the counter module. Because it is a pro module of Xpro Beaver Builder Addons. 

If you already have the plugin installed, just make sure the counter module is ‘Enabled’. This way, you can find it in the Beaver Builder page editor.

Here is how you can enable the modules for beaver builder.

How to Enable Counter Module For Beaver Builder?

To enable the counter module for beaver builder, follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Module tab and find the counter module. Toggle the button “ON”  to enable it.

Steps to Use Counter Module For Beaver Builder:

To use the Counter module for Beaver Builder, follow these steps:

Step 1: Add New Page:

After enable it, come back to your wordpress home page. Click on “pages” select the desired page where you would want to add a counter module, and then launch Beaver Builder.

Step 2: Drag and Drop the Counter Module

• Edit the Beaver builder and select Xpro addons from the side menu.
• Drag and Drop the counter module on your selected area. It will be shown in the beaver builder editor.
• This is the default look of our Xpro Beaver builder counter module.

Beaver Builder Counter Module has been added! Now, it’s time to customize!

Step 3: General Settings

General Layout

In general setting, you have a choice to select the style of your counter with circles, bars, or only numbers.

After that, you will enter the counter value, text above, and text below inside the counter. You also have full control to show the text after the number.

Icon

In this section, you have the option to show an icon or not. If you want to show then toggle the button on to yes, and then choose an icon from the icon library according to your preference.

Step 4: Style Settings

Style tab has an unnamed top section with style options for the circle or bar, depending on what you selected for Layout. In this, you have seen three different sections for styling:

General Section

In this section, you will set the alignment of your counter, set padding and add a background color.

Counter Section

In this section, you can change the colors of numbers, above title, below title. Set the border, color, and style. Similarly, you can also apply radius, or shadow to the counter and set margin from the top or bottom of the counter. As you can see the screenshot below.

Icon Section

Simply head toward the icon Section under the Style Tab. Here you can adjust the icon size, space, color, background style, and icon hover color

Now, we will move on typography setting:

Step 5: Typography Settings:

Here you have seen three sections,

Number Section

First, Head toward the number section under the Typography Tab. Here, you can set the size, alignment, line height, and spacing between numbers. You can decorate your numbers with underline, overline, and line through and can also apply different styles, variants, and shadows on numbers. As you can see in the screenshot below:

Above Title Sections

Now head toward the above title section, here you can set the size, alignment, line height, and spacing of above title. You can decorate your title, and apply different styles, variants, and shadows on your title. As you have already applied on numbers.

Below Title Sections

Similarly, you have applied typography on your below title as you have applied on your number or above title.

Here’s A Look at What We’ve Done!

The result will look like this for every new visitor to your website.

You can also apply different animations on your counter module by using our Xpro advanced features.

Best Counter Module For Beaver Builder:

That’s it! Hopefully, this guide will help for better understanding of how you can add and configure the Xpro counter module for Beaver Builder in WordPress. 

As a result of this module, you will be able to showcase numerical values and statistics on your website. With its visually captivating design options and user-friendly interface, you can create a memorable browsing experience. Whether you want to display the number of customers, products sold, or any other numeric data, the counter module empowers you to present it in a dynamic and eye-popping way.

By leveraging the power of counter module, you can elevate your website’s aesthetics, boost user engagement, and effectively communicate your achievements.

So, what’s holding you back? Get the Xpro beaver builder addons premium bundle at an affordable price and get ahold of pro beaver builder modules, and templates. 

Apart from that, Try using our FREE modules for Beaver Builder like heading module, info list module, drop cap module, and info box module.

If you need assistance or want to share your opinions with us, leave us a comment below. We’d greatly appreciate that!