Source: https://divicake.com/blog/divi-number-counter-guide/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Add a Number Counter in Divi: A Step-by-Step Guide By Divi Cake·16 April 2025·Updated 19 August 2026·8 min read How to Add a Number Counter in Divi: A Step-by-Step Guide We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Navigation to the Page in Your Divi Website](https://divicake.com#step-1-navigation-to-the-page-in-your-divi-website) - [Step 2: Choosing the Section to Add the Number Counter in Divi](https://divicake.com#step-2-choosing-the-section-to-add-the-number-counter-in-divi) - [Step 3: Adding the Number Counter Module in Divi](https://divicake.com#step-3-adding-the-number-counter-module-in-divi) - [Step 4: Customizing the Number Counter Module Settings in Divi](https://divicake.com#step-4-customizing-the-number-counter-module-settings-in-divi) - [Step 5: Toggle Percentage Sign in Number Counter](https://divicake.com#step-5-toggle-percentage-sign-in-number-counter) - [Step 6: Customizing the Number Counter Design](https://divicake.com#step-6-customizing-the-number-counter-design) - [Customizing the Number Styling in Divi Number Counter](https://divicake.com#customizing-the-number-styling-in-divi-number-counter) - [Step 7: Copy and Paste the Number Counter Module in Divi](https://divicake.com#step-7-copy-and-paste-the-number-counter-module-in-divi) - [Final Result](https://divicake.com#final-result) - [Conclusion](https://divicake.com#conclusion) Want to highlight your achievements or display important numbers on your website in a stylish way? [Divi](https://divicake.com/go/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](https://divicake.com/blog/what-is-divi-wordpress/). 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](https://divicake.com/go/number-counter/), the first thing we need to do is log into the [WordPress dashboard](https://divicake.com/blog/wordpress-tutorial/) of our [Divi website](https://divicake.com/blog/how-to-determine-if-a-website-is-built-with-divi/). 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: - Click on Pages in the WordPress dashboard menu. - Select All Pages to view the list of your existing pages. - Click on the Edit button for the page where the Number Counter will be added. - Click on the Edit With Divi button (as shown in the image below). Access the WordPress dashboard, select the target page, and open it with Divi Builder to add a Number Counter module for showcasing important website statistics and achievements. ## Step 2: Choosing the Section to Add the Number Counter in Divi Once we’ve opened the page with the [Divi Builder](https://divicake.com/blog/divi-theme-builder-overview/), 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: - Click on the Plus (+) Icon to open the Insert Row popup. - Select the Three Column Layout (or pick any other layout depending on how many Number Counters we need). Alt Text: Choose the perfect section and insert a three-column row layout in Divi Builder to place multiple Number Counters side by side and highlight key statistics effectively. ## 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](https://divicake.com/blog/divi-modules/). 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: - Click on any Plus (+) Icon inside the column where you want the Number Counter. - In the popup, either search for “Number Counter” or scroll through the module list to find it. - Once the Number Counter Module appears, click on it to insert it into the column. Add the Number Counter Module in Divi by clicking the Plus icon inside a column, selecting the module from the list, and placing it to display animated statistics on your website. ## 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](https://divicake.com/blog/getting-started-with-divi-content-settings/). Here’s how we can do it: - Click on the Settings Icon (the little gear button) on the Number Counter module. - Go to the Content Tab inside the settings. - Click on the Text Option section. - Update the Title Text with any heading you want. - Adjust the Number Count value, just like shown in the screenshots below. Edit the Number Counter Module in Divi by opening the settings, updating the title text, and adjusting the number count value under the Content Tab for a customized and professional display. ## 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: - Click on Elements inside the Content Tab of the Number Counter settings. - If you don’t want the Percentage Sign, toggle the switch Off. - If you want to remove the Percentage Sign, toggle it Disabled. (By default, this option is set to On.) Easily control the Percentage Sign visibility in Divi Number Counter Module by toggling the switch On or Off under the Elements section in the Content Tab for a cleaner or more informative design. ## 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](https://divicake.com/blog/getting-started-with-divi-design-settings/). 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: - Click on the Design Tab in the Number Counter settings. - Open the Title Text section. - Adjust the Title Heading Level to fit your design as we’ve selected H3. - Choose a different Title Font if you want to match your site’s typography. - Adjust the Title Font Weight for a bolder or lighter look. - Scroll down to fine-tune the Title Font Style (like TT for uppercase, Tt for capitalized, etc.). - Set the Title Text Alignment to left, center, or right depending on your layout needs. - Pick the perfect Text Color to match your website’s style and branding. 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: - Scroll down within the Title Text settings. - Adjust the Title Text Size to match your design needs. - Set the Title Letter Spacing for better text spacing and readability. - Modify the Title Line Height for a clean and balanced look. - Apply a Title Text Shadow if you want to add a stylish depth effect. Adjust the Title Text Size, Letter Spacing, Line Height, and apply Text Shadow in the Divi Number Counter Module to achieve a balanced, clean, and professional design on all devices. ### 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: - Click on the Number Text section under the Design Tab. - Choose a Number Font that matches your website’s style. - Adjust the Number Font Weight if you want it to look bolder or lighter. - Set the Number Text Alignment whether center, left, or right, based on your layout. - Pick a suitable Number Text Color to match your site’s color scheme. - Adjust the Number Text Size to make it fit perfectly on the page. - Customize the Number Letter Spacing to control the space between each digit. - Once all the changes are done, click on the Tick Marks Button to save your settings. Customize the Number Font, Font Weight, Text Alignment, Color, Size, and Letter Spacing in the Divi Number Counter Module to match your website’s design and create a clean, attractive layout. ## 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: - Right-click on the Number Counter Module you’ve already customized. - Select the Copy Module option from the menu. - Right-click on the Plus (+) Icon inside another column where you want to paste it. - Click on the Paste Module option. Quickly duplicate the customized Divi Number Counter Module by using the copy and paste feature, saving time while adding multiple counters to different columns on your website. ## 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. Stylish and professional Divi Number Counter showcasing key stats, perfectly aligned and customized to match the website’s design on the Home Page or Portfolio section. ## Conclusion Using [Divi’s Number Counter Module](https://divicake.com/go/number-counter/) 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](https://divicake.com/blog/5-free-marketing-tools-to-help-you-grow-your-divi-business/) 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](https://divicake.com/go/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](https://divicake.com/blog/divi-number-and-bar-counter/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ How to make money with Divi Blogging10 min read ### How to Make Money with Divi Nine ways to earn an income with Divi — affiliate marketing, services, digital products, courses, memberships, sponsored posts and ads — and what your site needs before any of them work. 15 October 2026](https://divicake.com/blog/make-money-with-divi/) [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/)