Want to highlight your achievements or display important numbers on your website in a stylish way? Divi makes it super easy! Whether it’s the number of happy clients, completed projects, or milestones your business has achieved — the Number Counter Module is the perfect tool to grab attention and build trust. The best part? You don’t need any coding skills. With just a few clicks, you can display animated numbers that match your website’s design and create a modern, professional look.

In this step-by-step guide, I’ll show you exactly how to add and customize a Number Counter in Divi theme. From choosing the right section to inserting the module and styling it to fit your website perfectly — every step is covered in a simple and clear way. By the end of this tutorial, you’ll be able to create eye-catching number counters that help highlight your success and make your site stand out! Let’s jump right in and bring your numbers to life.

Step 1: Navigation to the Page in Your Divi Website

Before getting started with adding a Number Counter module, the first thing we need to do is log into the WordPress dashboard of our Divi website. Once we’re inside, it’s time to choose the page where we want the Number Counter to appear — whether it’s the Home Page, Portfolio Page, or any other section. In this guide, we are adding the Number Counter to the Home Page.

Just follow these simple steps:

1. Click on Pages in the WordPress dashboard menu.
2. Select All Pages to view the list of your existing pages.
3. Click on the Edit button for the page where the Number Counter will be added.
4. Click on the Edit With Divi button (as shown in the image below).

Step 2: Choosing the Section to Add the Number Counter in Divi

Once we’ve opened the page with the Divi Builder, the next step is to select the exact section where we want to place the Number Counter. After we confirm the perfect spot, it’s time to insert a Row.

For example, if we want to display three Number Counters side by side in a single row, we’ll need to select a Row Layout with three columns — just like shown in the screenshot below.

Here’s how we can do it:

1. Click on the Plus (+) Icon to open the Insert Row popup.
2. Select the Three Column Layout (or pick any other layout depending on how many Number Counters we need).

Step 3: Adding the Number Counter Module in Divi

Now, as shown in the screenshot below, we’ll see Plus (+) icons buttons inside each column. Each icon represents a spot where we can add a Divi module.

Let’s start by adding our Number Counter Module. We only need to insert it once, and later we can easily copy and paste it into the other columns if needed.

Here’s what to do:

1. Click on any Plus (+) Icon inside the column where you want the Number Counter.
2. In the popup, either search for “Number Counter” or scroll through the module list to find it.
3. Once the Number Counter Module appears, click on it to insert it into the column.

Step 4: Customizing the Number Counter Module Settings in Divi

Whenever we insert a Divi Module for the first time, its settings popup usually opens automatically. But don’t worry — if it doesn’t pop up, we can easily open it by following these simple steps.

In this step, we’ll also update the Number Counter title and the count number through the Content Tab.

Here’s how we can do it:

1. Click on the Settings Icon (the little gear button) on the Number Counter module.
2. Go to the Content Tab inside the settings.
3. Click on the Text Option section.
4. Update the Title Text with any heading you want.
5. Adjust the Number Count value, just like shown in the screenshots below.

Step 5: Toggle Percentage Sign in Number Counter

In this step, we’ll show how to enable or disable the Percentage Sign in the Number Counter Module. If you want to remove it or turn it back on, this option is super easy to find inside the Content Tab.

Just follow these simple steps:

1. Click on Elements inside the Content Tab of the Number Counter settings.
2. If you don’t want the Percentage Sign, toggle the switch Off.
3. If you want to remove the Percentage Sign, toggle it Disabled. (By default, this option is set to On.)

Step 6: Customizing the Number Counter Design

Now it’s time to give our Number Counter Module a more polished and professional look using the Design Tab. Divi offers a lot of design options here, so we can easily style the module to match the look and feel of our website.

Just follow these easy steps:

1. Click on the Design Tab in the Number Counter settings.
2. Open the Title Text section.
3. Adjust the Title Heading Level to fit your design — as we’ve selected H3.
4. Choose a different Title Font if you want to match your site’s typography.
5. Adjust the Title Font Weight for a bolder or lighter look.
6. Scroll down to fine-tune the Title Font Style (like TT for uppercase, Tt for capitalized, etc.).
7. Set the Title Text Alignment to left, center, or right — depending on your layout needs.
8. Pick the perfect Text Color to match your website’s style and branding.

Title: Customize Divi Number Counter Design for a Professional Look

Alt Text: Style your Divi Number Counter Module using the Design Tab by adjusting title font, heading level, alignment, and text color to perfectly match your website’s branding and layout.

Let’s continue perfecting the design of our Number Counter Module by adjusting a few more settings in the same Title Text section. These small tweaks help the text look clean, balanced, and professional on any device.

Here’s what to do:

1. Scroll down within the Title Text settings.
2. Adjust the Title Text Size to match your design needs.
3. Set the Title Letter Spacing for better text spacing and readability.
4. Modify the Title Line Height for a clean and balanced look.
5. Apply a Title Text Shadow if you want to add a stylish depth effect.

Customizing the Number Styling in Divi Number Counter

Now it’s time to style the actual Number displayed in the Number Counter Module. This option is also available in the same Design Tab — the steps are quite similar to the title customization, but this time we’ll be working inside the Number Text section.

Just follow these steps:

1. Click on the Number Text section under the Design Tab.
2. Choose a Number Font that matches your website’s style.
3. Adjust the Number Font Weight if you want it to look bolder or lighter.
4. Set the Number Text Alignment — whether center, left, or right, based on your layout.
5. Pick a suitable Number Text Color to match your site’s color scheme.
6. Adjust the Number Text Size to make it fit perfectly on the page.
7. Customize the Number Letter Spacing to control the space between each digit.
8. Once all the changes are done, click on the Tick Marks Button to save your settings.

Step 7: Copy and Paste the Number Counter Module in Divi

If we want to add the same Number Counter Module to other columns, there’s no need to repeat the entire setup. We can simply copy and paste the module, and then just update the Title and Number — this saves a lot of time and effort!

Here’s how to do it:

1. Right-click on the Number Counter Module you’ve already customized.
2. Select the Copy Module option from the menu.
3. Right-click on the Plus (+) Icon inside another column where you want to paste it.
4. Click on the Paste Module option.

Final Result

Here’s the final result! The screenshot below shows how the Number Counter Module looks once we’ve added and customized it using Divi’s built-in module.

With just a few simple steps, we’ve created a clean and professional-looking Number Counter that’s perfect for highlighting key stats on any page — whether it’s a Home Page, Portfolio Page, or any other section of your website.

Conclusion

Using Divi’s Number Counter Module is one of the simplest yet most powerful ways to highlight your website’s key facts and figures. Whether you want to display your total projects, client count, successful milestones, or business growth percentages, the Number Counter helps you do it in a clean and visually appealing way — all without needing to write a single line of code!

This step-by-step guide has walked you through everything from inserting the module, adjusting its content, customizing the design, enabling or disabling the percentage sign, and finally copying and reusing it across your layout. Once you follow this process, you’ll notice how easy it becomes to maintain both style and consistency throughout your pages.

Divi’s visual builder allows endless room for creativity, and when used right, even a simple number can boost user engagement and give your site a polished, professional feel. So take your time, experiment with the design settings, and create something that fits perfectly with your brand’s identity.

If you enjoyed this tutorial and want more easy-to-follow Divi tips, tricks, and design guides  subscribe to stay updated! Your next web design breakthrough is just one tutorial away!

Read More: Top 9 Divi Number and Bar Counter Modules and Tutorials