Everyone and their grandmothers are now aware of the attention economy. You know your website has little time to attract attention and how to use every ounce of it as effectively as possible. Often this means communicating information very efficiently using the textual and visual elements in your communicator bag.
But how about adding a few tricks to that bag? Why not show how many customers your business has, how many successful projects you have completed, or how many different national markets you have established? These numbers will not only look impressive while taking up very little space on your website, but will also efficiently convey valuable information.
Because we believe counters can be incredibly valuable elements on websites, we made sure to include them in our Qi Addons for Elementor plugin. It is the largest collection of free Elementor plugins you can find in a single plugin – there are sixty plugins out there. Our counters widget is in great company with widgets that help with everything from adding message boxes to creating a text frame.
But for now, let’s stick to the counters. We’ll show you how to create four counters for your website and if that gives you any ideas for creating your own counters – even better! If you prefer watching videos instead of reading, you can find all this information in a video tutorial.
So let’s get started! Here are the things we will cover:
The first thing you need to know about adding counters to WordPress using our Elementor widget, you will also need: Elementor Website Builder for it to work. If you are not there yet, go to your website control panel, Plugins > Add NewSearch and install Elementor and activate it.
You can use the Free or Pro version – it’s entirely up to you as our plugin works with both. And speaking of our plugin, Qi Plugins for Elementoryou have to search for it and install and enable it as well.
Your next step would be to create a page or post where you want to add counters or open existing posts or pages that you think one or more counters would look good on. For this demonstration, we worked on a new canvas in the form of a new post, and as we plan to add four counters, we chose to create a four-column section for beginners.
With the columns in place, the next thing to do is find the widget – the search function in the left-hand items menu will serve this perfectly. Since it will open another widget, typing “counter” instead of “counter” and dragging the widget to the nearest empty column will get the correct result.
You shouldn’t worry about filling out the remaining columns. Sometimes it’s a good idea to do most of the styling in one of the counters and then copy it to the other columns and change their content. This can save you some time on more demanding projects and works perfectly as long as you plan to keep the look of your countertops somewhat the same. As you’ll see later, we first made the edits and stylings in a counter, and then we copied and made some content changes to the remaining columns.
The content you’ll see when you first add the widget is for demonstration purposes only, so you’ll probably want to change it first. The General options you’ll see in the Content tab are where you can do all sorts of useful content-related things, from choosing the starting and ending digit of your counter, to adjusting the steps between the digits, to activating icons and separators. and finally editing the title and text of the counter.
We made several content selections to build our counters. First, we decided not to start counting from zero – we chose 45. We chose 52 for the ending digit. We’ve also changed the title and text to give it a purpose.
Before proceeding to stylize this counter, you should take note of the icon, separator, and related options below the general options. These allow you to add a symbol to your number and a separator between the number and the text. If you want to use them you need to enable both in the general options – At least for now, we’ve been against them.
By switching to the Style options on the Style tab, you will find numerous options that determine how the contents of your counters will appear. You can change its alignment, play around with typography and colors or numbers, titles and text, and you can even set a background for the number and choose its color and radius.
The first thing we did here was make our figure look exactly the way we wanted it to. For starters, we went into Number Typography and changed the font to DM Sans. Next, we add some weight to it – we multiply by 500.
Next, we changed the number color to #1e1e1e. We decided to add a background or add a number stroke effect that would make our figure an outline, and took action to correct the styling of the title tag and content. We changed the font for the title to DM Sans. We changed the Convert option in Header Typography to Normal because we don’t want to use capital letters. We’ve changed the size of the header to 20px, its weight to 500, and the line height to 26px. Color set to #1e1e1e.
For text, We changed the color to #1e1e1e, the font to DM Sans, the size to 17px and the link height to 26. We didn’t change the weight as the default value is around 400, that’s what we wanted.
The Spacing Style options are useful when you want to set margins and text padding for your counters. The only change we made here was to set the top margin to 10px.makes it slightly smaller than the default.
There’s nothing for us to do in the Separator Style options, as we haven’t added a separator or separator icon. If you choose to add a separator, these options allow you to change the color, border style, margins, and width and thickness of the separator. You’ll also have some options for the divider icon, including color, font size, and margins.
After shaping the first bench, it’s time to make three more copies. We did this simply by right-clicking on the counter and selecting Duplicate and repeating until we had enough counters for our columns.
We haven’t changed any of the styling options on the new workbenches. The biggest addition was the asterisk we added to the third counter. We went to the Icon options from the Content Tab, selected the star icon and set its size to 15px.
The rest of the changes were more streamlined. We just changed the content – the second counter took 260 starting digits and 269 ending digits. The third went from 72 to 89 in step 5 and the last counter was start digit 93 and end digit 102. All new counters have new copies. The result looked like this.
Let’s wrap it up!
When you have a website, common sense says you should welcome any element that can help you get your message across more easily and more effectively. If you think adding counters can be a useful way to showcase your business’s achievements, resources or capabilities, our Counters widget will be there and waiting to assist you with amazing numbers that will dazzle your visitors.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
