{"id":24443,"date":"2021-05-20T15:00:47","date_gmt":"2021-05-20T13:00:47","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=24443"},"modified":"2021-06-07T16:12:34","modified_gmt":"2021-06-07T14:12:34","slug":"how-to-add-counters-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-counters-in-wordpress\/","title":{"rendered":"How to Add Counters in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Everyone and their grandmother are aware by now of the attention economy. You know that your website has little time to grab attention, and how every ounce of it should be used as effectively as possible. Usually, this means delivering information in a very efficient way, using textual and visual elements from your bag of communication tools.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But how about you add some numbers to that bag? Why not show how many clients your business has had, or how many successful projects you\u2019ve completed, or in how many different national markets you\u2019ve established a presence? These numbers won\u2019t only look impressive while taking up little real estate on your website, but they\u2019ll also convey valuable information efficiently.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Because we believe that counters can be incredibly valuable elements in websites, we\u2019ve made sure to include them in our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor plugin<\/a>. <strong>It\u2019s the biggest free collection of Elementor addons you\u2019ll find in a single plugin \u2013 there are sixty addons in there.<\/strong> Our <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/counters\/\">counters widget<\/a> is in great company with widgets that help with anything from adding message boxes to creating a text marquee.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For now, however, let\u2019s stick with the counters. <strong>We\u2019ll demonstrate to you how to create four counters for your website, and if it gives you any ideas for creating counters of your own \u2013 even better<\/strong>! If you prefer watching a video to reading, you can find all this information in a video tutorial.[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/JzyY-mtl7Tk\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So let\u2019s get started! Here\u2019s what we\u2019ll cover:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-the-counters-in-wordpress\">Adding the Counters in WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-content\">Editing the Content<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#styling-the-counter\">Styling the Counter<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#final-touches\">Final Touches<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-the-counters-in-wordpress\"><\/a>Adding the Counters in WordPress<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1311\" height=\"594\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counter-Gif.gif\" class=\"attachment-full size-full\" alt=\"Counter Gif\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first thing you should know about adding the counters in WordPress using our Elementor widget is that you\u2019ll also need <a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor Website Builder<\/a> for it to work. If you\u2019re not there already, head on over to your website dashboard, navigate to <em><strong>Plugins &gt; Add New<\/strong><\/em>, search for Elementor and install and activate it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can use either the free or the Pro version \u2013 it\u2019s completely up to you, as our plugin works with both. And speaking of our plugin, <a href=\"https:\/\/wordpress.org\/plugins\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a>, you should search for it and install and activate it, too.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qi-Addons-for-Elementor.jpg\" class=\"attachment-full size-full\" alt=\"Qi Addons for Elementor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qi-Addons-for-Elementor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qi-Addons-for-Elementor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qi-Addons-for-Elementor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Qi-Addons-for-Elementor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your next step would be to create a page or post where you want to add the counters or open any existing posts or pages where you think a counter or a few would look good. <strong>For this demonstration, we\u2019ve worked on a fresh canvas in the form of a new post, and we\u2019ve chosen to create a four-column section for starters, as we were planning to add four counters.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"384\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-2.jpg\" class=\"attachment-full size-full\" alt=\"Elementor Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-2-300x119.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-2-768x304.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Elementor-Columns-2-620x246.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With the columns in place, the next thing to do is to find the widget \u2013 the search function in the left-hand side elements menu will serve perfectly well for this. <strong>Typing in \u201ccounters\u201d \u2013 not \u201ccounter,\u201d as that will bring up another widget \u2013 and dragging the widget to the closest free column will get the right result.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Countes-One-Column.jpg\" class=\"attachment-full size-full\" alt=\"Counters One Column\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Countes-One-Column.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Countes-One-Column-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Countes-One-Column-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Countes-One-Column-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You shouldn\u2019t worry about filling out the remaining columns. It\u2019s sometimes a good idea to do most of the styling on one of the counters and then just copy it to other columns and change its contents. This might save you quite some time on more demanding projects, and it works perfectly as long as you plan to have the look of your counters somewhat uniform.<strong> As you\u2019ll see later, we\u2019ve done the edits and stylings on one counter first, and then we copied and made some content changes to the remaining columns.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-content\"><\/a>Editing the Content<\/h2>\n<p>[\/vc_column_text][vc_column_text]The content you\u2019ll see when you first add the widget is there just for show, so you\u2019ll probably want to change it first. The General options you\u2019ll see in the Content tab are the place where you can do all sorts of useful content-related things, from choosing the starting and ending digit of your counter, to setting the steps between the digits, enabling icons and separators, and finally editing the title and text of the counter.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"611\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-General.jpg\" class=\"attachment-full size-full\" alt=\"Counters General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-General-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-General-768x484.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-General-620x391.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>To create our counters, we made a couple of content choices. For one, we\u2019ve decided not to start the count at zero \u2013 we chose 45. For the end digit, we chose 52. We also changed the title and the text, to give it some purpose.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digits.jpg\" class=\"attachment-full size-full\" alt=\"Counters Digits\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digits.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digits-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digits-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digits-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before moving on to stylizing this counter, you should take note of the icon, separator, and related options below the general options. These allow you to add an icon to your number and a separator between the number and the text. You\u2019ll need to enable both in the general options if you want to use them \u2013 <strong>we opted against them, at least for the time being.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"styling-the-counter\"><\/a>Styling the Counter<\/h2>\n<p>[\/vc_column_text][vc_column_text]Moving on to Style options in the Style tab, you\u2019ll find a myriad of options that dictate how the contents of your counters look. You might change its alignment, play around with the typography and colors or the digit, the title, and the text, and even set a background for the digit and choose its color and radius.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Style.jpg\" class=\"attachment-full size-full\" alt=\"Counters Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Style-300x117.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Style-768x300.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Style-620x242.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first thing we\u2019ve done here was making sure our digit looks exactly the way we wanted it to.<strong> For starters, we went into Digit Typography and changed the font to DM Sans. Next, we add some weight to it \u2013 bumping it to 500.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digit-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Counters Digit Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digit-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digit-Typography-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digit-Typography-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Digit-Typography-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Next, we changed the digit color to #1e1e1e.<\/strong> We decided against adding a background, or adding the digit stroke effect \u2013 which would make our digit an outline \u2013 and we moved to fix styling the title tag and content.<strong> For the title, we\u2019ve changed the font to DM Sans. We switched the Transform option in Title Typography to Normal, as we didn\u2019t want to use uppercase. We changed the size of the title to 20 pixels, its weight to 500, and the line-height to 26 pixels. The color was set at #1e1e1e.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"497\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Title-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Counters Title Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Title-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Title-Typography-300x154.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Title-Typography-768x394.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Title-Typography-620x318.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the text, <strong>we\u2019ve changed the color to #1e1e1e, the font to DM Sans, the size to 17 pixels, and the link height to 26.<\/strong> We didn\u2019t change the weight as the default is around 400, which is what we wanted.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"502\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Text-Typography.jpg\" class=\"attachment-full size-full\" alt=\"Counters Text Typography\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Text-Typography.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Text-Typography-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Text-Typography-768x398.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Text-Typography-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Spacing Style options come in handy when you want to set the margins and text padding for your counters.<strong> The only change we\u2019ve made here was to set the title margin-top to 10 pixels<\/strong>, making it a bit smaller than the default.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"472\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Spacing.jpg\" class=\"attachment-full size-full\" alt=\"Counters Spacing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Spacing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Spacing-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Spacing-768x374.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Spacing-620x302.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Since we didn\u2019t add a separator or a separator icon, there\u2019s nothing for us to do in the Separator Style options. If you choose to add a separator, these options will allow you to change the color, border style, margins, and width and thickness of the separator. You\u2019ll have some options for the separator icon, too, covering color, font size, and margins.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"final-touches\"><\/a>Final Touches<\/h2>\n<p>[\/vc_column_text][vc_column_text]After styling the first counter, it\u2019s time to make three more copies of it. <strong>We\u2019ve done it simply by right-clicking on the counter and choosing Duplicate, and we\u2019ve repeated it until we had enough counters for our columns.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1173\" height=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Duplicate-Counters.jpg\" class=\"attachment-full size-full\" alt=\"Duplicate Counters\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Duplicate-Counters.jpg 1173w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Duplicate-Counters-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Duplicate-Counters-1024x513.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Duplicate-Counters-768x385.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Duplicate-Counters-970x486.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Duplicate-Counters-620x311.jpg 620w\" sizes=\"auto, (max-width: 1173px) 100vw, 1173px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We didn\u2019t change any of the styling options in the new counters. The biggest addition was the asterisk we added to the third counter. <strong>From the Content Tab, we went to Icon options, chose the asterisk icon, and set its size to 15 pixels.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1225\" height=\"667\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Counters Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Icon.jpg 1225w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Icon-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Icon-1024x558.jpg 1024w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Icon-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Icon-970x528.jpg 970w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Icon-620x338.jpg 620w\" sizes=\"auto, (max-width: 1225px) 100vw, 1225px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The rest of the changes were more regular. We only switched the content \u2013<strong> the second counter got a start digit of 260 and an end digit of 269. The third one went from 72 to 89 in steps 5, and the final counter got a start digit of 93 and an end digit of 102<\/strong>. All the new counters got new copy. This is what the result looked like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"464\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Four-Columns.jpg\" class=\"attachment-full size-full\" alt=\"Counters Four Columns\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Four-Columns.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Four-Columns-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Four-Columns-768x368.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/05\/Counters-Four-Columns-620x297.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]When you have a website, common sense says that any element that can help you get your message across easier and more effectively is an element you should welcome. If you think that adding counters can be a useful way to showcase your business\u2019 achievements, resources, or capacities, our Counters widget will be there, waiting to help you dazzle your visitors with some awesome numbers.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking for a way to implement counters in your WordPress website? We&#8217;ll show you how &#8211; all you need is Elementor and our Qi Addons for Elementor plugin!<\/p>\n","protected":false},"author":9295,"featured_media":25326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,108,4,13],"class_list":["post-24443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-qi-addons","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=24443"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/24443\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/25326"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=24443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=24443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=24443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}