{"id":1399,"date":"2024-03-22T12:40:11","date_gmt":"2024-03-22T12:40:11","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1399"},"modified":"2024-04-10T08:21:19","modified_gmt":"2024-04-10T08:21:19","slug":"counter","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/counter\/","title":{"rendered":"Counter"},"content":{"rendered":"\n

By the name Counter, it determines the numeric value of anything. The Counter is generally added on the site to provide users with real-time updates, statistics, progress indicators, or other information in a visually engaging format. BlockArt plugin allows you to create a counter on your site using the Counter Block.<\/p>\n\n\n\n

\"Adding
Adding Counter Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Counter block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General<\/strong>, Style<\/strong>, and Advanced<\/strong>. These options customize the design and other elements of the block. Let\u2019s explore one by one below:<\/p>\n\n\n\n

General<\/h2>\n\n\n\n

Layout<\/h3>\n\n\n\n
    \n
  • Start Number <\/strong>– The Start Number refers to the initial numerical value from which counting begins.<\/li>\n\n\n\n
  • End Number<\/strong> – The End number refers to the final numeric value of the counter progresses.<\/li>\n<\/ul>\n\n\n\n
    \"Add
    Add Start and End Number<\/figcaption><\/figure>\n\n\n\n
      \n
    • Decimal Places<\/strong> – It refers to the number of digits to the right of the decimal point in a number. Basically, it is used to determine the precision and accuracy of the numerical value.<\/li>\n<\/ul>\n\n\n\n
      \"Add
      Add Decimal Places<\/figcaption><\/figure>\n\n\n\n
        \n
      • Number Prefix<\/strong> – It adds a constant number before the actual counter value. <\/li>\n<\/ul>\n\n\n\n
        \"Add
        Add Number Prefix<\/figcaption><\/figure>\n\n\n\n
          \n
        • Number Suffix<\/strong> – It adds a constant number after(end) the actual counter value.<\/li>\n<\/ul>\n\n\n\n
          \"Add
          Add Number Suffix<\/figcaption><\/figure>\n\n\n\n
            \n
          • Animation Duration <\/strong>– It determines the total time for the counter to display the final value and is measured in sec.<\/li>\n<\/ul>\n\n\n\n
            \"Set
            Set Animation Duration<\/figcaption><\/figure>\n\n\n\n
              \n
            • Thousand Separator<\/strong> – The thousand separator separates a large digit number into a group of three. To distinguish the group a symbol is used such as Comma, Dot, White Space, etc. Using the option you can change the symbol that distinguishes the group of three (thousand).<\/li>\n<\/ul>\n\n\n\n
              \"Set
              Set Thousand Separator<\/figcaption><\/figure>\n\n\n\n

              Icon<\/h3>\n\n\n\n
                \n
              • Enable <\/strong>– Switch the Toggle to the right area to enable the Icon above the counter value. After you have enabled the icon, you can choose the icon that you want to display.<\/li>\n<\/ul>\n\n\n\n
                \"Enable
                Enable and Choose Icon<\/figcaption><\/figure>\n\n\n\n

                Number<\/h3>\n\n\n\n
                  \n
                • HTML Markup<\/strong> – Under the Markup option, select the required markup for your counter number value. You can set the value to be in Heading, Paragraph, or Div.<\/li>\n<\/ul>\n\n\n\n
                  \"Set
                  Set HTML Markup for Number<\/figcaption><\/figure>\n\n\n\n

                  Text<\/h3>\n\n\n\n
                    \n
                  • Text Markup<\/strong> – Under the Markup option, select the required markup for your Title Text within the counter block. You can set the value to be in Heading, Paragraph, or Div.<\/li>\n<\/ul>\n\n\n\n
                    \"Set
                    Set HTML Markup for Text<\/figcaption><\/figure>\n\n\n\n

                    Style<\/h2>\n\n\n\n

                    It provides the following styling options for the Counter Block. These are listed below:<\/p>\n\n\n\n

                    Properties<\/h3>\n\n\n\n
                      \n
                    • Text Alignment<\/strong> – It sets the alignments for the Counter Block. You can set the alignments as Left<\/strong>,\u00a0Center, Right, <\/strong>and Justify<\/strong>. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                      \"Set
                      Set Text Alignment<\/figcaption><\/figure>\n\n\n\n

                      Icon<\/h3>\n\n\n\n

                      The setting applies to the Icons and comes with the following options:<\/p>\n\n\n\n

                        \n
                      • Icon Color<\/strong> – It changes the color of the Icon.<\/li>\n\n\n\n
                      • Size<\/strong> – It determines the size of the Icon.<\/li>\n<\/ul>\n\n\n\n
                        \"Change
                        Change Icon Color and Size<\/figcaption><\/figure>\n\n\n\n

                        Number<\/h3>\n\n\n\n

                        The setting applies to the Numeric Value of the Counter Block and comes with the following options:<\/p>\n\n\n\n

                          \n
                        • Color<\/strong> – It changes the color of the Numeric Value.<\/li>\n\n\n\n
                        • Typography <\/strong>– It allows you to control the\u00a0 Typography, such as Font Family,\u00a0Weight,\u00a0Font size,\u00a0Line height, and other related styling properties for the text. The options are listed below:\n
                            \n
                          • Font Family<\/strong> \u2013 The option allows you to choose the appropriate font family for the number.<\/li>\n\n\n\n
                          • Weight<\/strong> \u2013 It refers to the thickness or boldness of the number.<\/li>\n\n\n\n
                          • Size<\/strong> \u2013 It controls the font size of the number.<\/li>\n\n\n\n
                          • Line Height<\/strong> \u2013 It manages the space above and below the number.<\/li>\n\n\n\n
                          • Letter Spacing<\/strong> \u2013  It controls the amount of space between characters in the number.<\/li>\n\n\n\n
                          • Style<\/strong> \u2013 Using the property, you can set the number to be Italic or Oblique.<\/li>\n\n\n\n
                          • Transformation<\/strong> \u2013 It changes the case of the numbers such as lowercase, uppercase, and capitalize.<\/li>\n\n\n\n
                          • Decoration <\/strong>\u2013 The styling is applied to the number to make it more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                          • Margin <\/strong>\u2013 It sets the space around the counter number. Moreover, you can set the space value to be different on various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                            \"Change
                            Change the Number Color and Typography<\/figcaption><\/figure>\n\n\n\n

                            Text<\/h3>\n\n\n\n

                            The settings work for the Text added on the block and come with the following options:<\/p>\n\n\n\n

                              \n
                            • Text Color<\/strong> – It changes the color of the Text.<\/li>\n\n\n\n
                            • Typography <\/strong>– <\/strong>It controls the Text typography options, such as font family, font size, line spacing, and text Decoration.<\/li>\n<\/ul>\n\n\n\n
                              \"Change
                              Change Text Color and Typography<\/figcaption><\/figure>\n\n\n\n

                              Background<\/h3>\n\n\n\n
                                \n
                              • Type<\/strong> – It sets the background color of the Counter Block. You can change the background’s visual appearance by changing its color or adding an image.<\/li>\n<\/ul>\n\n\n\n
                                \"Change
                                Change Background Color<\/figcaption><\/figure>\n\n\n\n

                                Border<\/h3>\n\n\n\n

                                It customizes the Border area added around the Counter block and comes with the following options:<\/p>\n\n\n\n

                                  \n
                                • Type<\/strong> – You can set the border type as Solid, Dotted, Dashed, Double, etc. Moreover, select None\u00a0if you do not want to add any borders.<\/li>\n<\/ul>\n\n\n\n

                                  When you select none, you will be given the following option:<\/p>\n\n\n\n

                                    \n
                                  • Radius<\/strong> \u2013 It allows you to fix the radius value to make the round corners for the Counter Block.<\/li>\n<\/ul>\n\n\n\n

                                    However, if you select the border type to be other than none, two more options will be added. The option is listed below:<\/p>\n\n\n\n

                                      \n
                                    • Border Color<\/strong> \u2013 It allows you to choose the appropriate border color.<\/li>\n\n\n\n
                                    • Size<\/strong> \u2013 It provides the option to select the border size.<\/li>\n<\/ul>\n\n\n\n
                                      \"Add
                                      Add and Customize Border<\/figcaption><\/figure>\n\n\n\n

                                      Note \u2013 You can apply the border settings option differently for Normal and Hover Modes.<\/em><\/p>\n\n\n\n

                                      Advanced<\/h2>\n\n\n\n

                                      The Advanced section consists of four customization options for the Counter Block.<\/p>\n\n\n\n

                                      Spacing<\/h3>\n\n\n\n

                                      Under the spacing section, you can find the following options available:<\/p>\n\n\n\n

                                        \n
                                      • Block Margin<\/strong>\u00a0\u2013 According to the site requirement, you can assign a specific margin value to the block along with units like\u00a0px,\u00a0em,\u00a0%<\/strong>, and\u00a0rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                                      • Block Padding \u2013\u00a0<\/strong>According to the site requirement, you can assign a specific padding value to the block along with units like\u00a0<\/strong>px, em, %,\u00a0and\u00a0rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                        \"Adding
                                        Adding Margin and Padding Spacing<\/figcaption><\/figure>\n\n\n\n

                                        Z-Index<\/h3>\n\n\n\n

                                        It allows you to set the priority of the counter block according to the site requirement.<\/p>\n\n\n\n

                                        Responsive Condition<\/h3>\n\n\n\n

                                        Using the option, you can enable\/disable displaying the block on various screen sizes:<\/p>\n\n\n\n

                                          \n
                                        • Hide on Desktop<\/strong> \u2013 It hides the Counter block on the Desktop.<\/li>\n\n\n\n
                                        • Hide on Tablet<\/strong> \u2013 It hides the Counter block on the Tablet.<\/li>\n\n\n\n
                                        • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Counter block on the Mobile.<\/li>\n<\/ul>\n\n\n\n
                                          \"Enable\/Disable
                                          Enable\/Disable Counter Block Responsive Condition<\/figcaption><\/figure>\n\n\n\n

                                          Advanced<\/h3>\n\n\n\n

                                          Under the option, you can set the CSS ID and Classes for the Counter Block. The available options are listed below:<\/p>\n\n\n\n

                                            \n
                                          • CSS ID<\/strong> \u2013 It allows you to set specific IDs to style to the title. Once you have set the ID, you can write the CSS Code to style the title using that particular ID.<\/li>\n\n\n\n
                                          • Additional CSS Class(es)<\/strong> \u2013 It allows you to add a CSS class to your block and write custom CSS to style the title.<\/li>\n<\/ul>\n\n\n\n
                                            \"Add
                                            Add CSS ID and Additional CSS Classes<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

                                            By the name Counter, it determines the numeric value of anything. The Counter is generally added on the site to provide users with real-time updates, statistics, progress indicators, or other information in a visually engaging format. BlockArt plugin allows you to create a counter on your site using the Counter Block. After you have chosen[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":[],"doc_category":[7],"doc_tag":[],"_links":{"self":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1399"}],"collection":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/comments?post=1399"}],"version-history":[{"count":39,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1399\/revisions"}],"predecessor-version":[{"id":2756,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1399\/revisions\/2756"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1399"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1399"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}