{"id":1436,"date":"2024-03-24T05:00:57","date_gmt":"2024-03-24T05:00:57","guid":{"rendered":"https:\/\/docs.wpblockart.com\/blockart-blocks\/?post_type=docs&p=1436"},"modified":"2024-04-10T08:30:14","modified_gmt":"2024-04-10T08:30:14","slug":"countdown","status":"publish","type":"docs","link":"https:\/\/docs.wpblockart.com\/blockart-blocks\/countdown\/","title":{"rendered":"Countdown"},"content":{"rendered":"\n

The Countdown block displays the timer of any upcoming events. This is often used for time-limited promotions, sales, or other time-sensitive activities. It counts down the days, hours, minutes, and seconds until a specific deadline, event, or moment is met. <\/p>\n\n\n\n

\"Add
Add Countdown Block<\/figcaption><\/figure>\n\n\n\n

After you have chosen the Countdown 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

Date & Time<\/h3>\n\n\n\n

It allows you to set up the time and date based on your time zone.<\/p>\n\n\n\n

\"Set
Set Up the Date and Time<\/figcaption><\/figure>\n\n\n\n

Design<\/h3>\n\n\n\n
    \n
  • Preset –<\/strong> It changes the design of the Countdown Block. The Counter can be displayed in Rectangular, Rounded, or Circular Form,<\/strong> depending on your requirements.<\/li>\n<\/ul>\n\n\n\n
    \"Using
    Using Layout 3 Preset Design<\/figcaption><\/figure>\n\n\n\n

    Label<\/h3>\n\n\n\n

    It customizes the label appearing below the counter and comes up with the following options:<\/p>\n\n\n\n

      \n
    • Enable <\/strong>– Switch the Toggle to the right area to enable the label below each above the counter value. Once enabled, you can add the label for Days, Hours, Minutes, and Seconds of your choice.<\/li>\n<\/ul>\n\n\n\n
      \"Enable
      Enable Counter Label<\/figcaption><\/figure>\n\n\n\n

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

      It provides the following styling options for the Countdown 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 Countdown Block. You can set the alignments as Left<\/strong>,\u00a0Center,<\/strong> and Right<\/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 Countdown Block to Center Alignment<\/figcaption><\/figure>\n\n\n\n

        Label<\/h3>\n\n\n\n
          \n
        • Text Color<\/strong>– It changes the color of the label text.<\/li>\n\n\n\n
        • Typography<\/strong> – It allows you to control the\u00a0Typography, such as font family,\u00a0weight,\u00a0font size,\u00a0line height, and other related styling properties for the label. The options are listed below:\n
            \n
          • Font Family<\/strong> \u2013 The option allows you to choose the appropriate Font Family for the label.<\/li>\n\n\n\n
          • Weight<\/strong> \u2013 It refers to the thickness or boldness of the label.<\/li>\n\n\n\n
          • Size<\/strong> \u2013 It controls the font size of the label.<\/li>\n\n\n\n
          • Line Height<\/strong> \u2013 It manages the space above and below the label.<\/li>\n\n\n\n
          • Letter Spacing<\/strong> \u2013  It controls the amount of space between characters in the label.<\/li>\n\n\n\n
          • Style<\/strong> \u2013 Using the property, you can set the label to be Italic or Oblique.<\/li>\n\n\n\n
          • Transformation<\/strong>\u00a0\u2013 It changes the case of the label such as lowercase, uppercase, and capitalize.<\/li>\n\n\n\n
          • Decoration <\/strong>\u2013 The styling is applied to the label to make it more visually appealing. The options include underline, overline, and line through.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
            \"Change
            Change Color and Typography of Label<\/figcaption><\/figure>\n\n\n\n

            Digit<\/h3>\n\n\n\n

            The settings work for the Numeric Digit of the Countdown block and come with the following options:<\/p>\n\n\n\n

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

              Separator<\/h3>\n\n\n\n

              The Separator in the Countdown block refers to a symbol or character used to separate different components of the countdown display. While using the block, you might see digits separated by colons or other symbols to indicate hours, minutes, and seconds. They help distinguish between the hours, minutes, and seconds, making it easier for people to read and understand the remaining time.<\/p>\n\n\n\n

              To customize the Countdown block, it comes with the following options:<\/p>\n\n\n\n

                \n
              • Type<\/strong> \u2013 You can set the Separator type to None, Colon, Slash, and Line.<\/li>\n\n\n\n
              • Color <\/strong>\u2013 It allows you to choose the appropriate color for the separator.<\/li>\n\n\n\n
              • Separator Right<\/strong> \u2013 It determines the space from the right side between the digit and separator. Moreover, you can set the right spacing values for various devices (desktop, tablet, and mobile).<\/li>\n<\/ul>\n\n\n\n
                \"Customize
                Customize Separator<\/figcaption><\/figure>\n\n\n\n

                Box<\/h3>\n\n\n\n

                The settings allow displaying the countdown inside the box and come with the following options:<\/p>\n\n\n\n

                  \n
                • Background<\/strong> \u2013 It sets the background color of the Countdown block. You can change the visual appearance of the background by changing its color or adding an image.<\/li>\n\n\n\n
                • Gap <\/strong>\u2013 It adjusts the gap between each Countdown item. Moreover, you can adjust that value for different devices (Desktop, Tablet, and Mobile).<\/li>\n\n\n\n
                • Padding<\/strong> \u2013 It manages the spacing on all four sides of the Countdown item box.<\/li>\n\n\n\n
                • Border<\/strong> \u2013 It customizes the Border area added around the Countdown items box and comes with the following options:\n
                    \n
                  • Type<\/strong>\u00a0\u2013 You can set the border type as\u00a0Solid,\u00a0Dotted,\u00a0Dashed,\u00a0Double, etc. Moreover, select the border type to be\u00a0None\u00a0if you do not want to add any borders.<\/li>\n<\/ul>\n<\/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 of the border.<\/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
                        \"Customize
                        Customize Countdown Box<\/figcaption><\/figure>\n\n\n\n

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

                        It customizes the Border area added around the Countdown 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 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

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

                              The Advanced section consists of four customization options for the Countdown 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> \u2013 According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. 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\u00a0px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).<\/li>\n<\/ul>\n\n\n\n
                                \"Manage
                                Manage Margin and Padding Space<\/figcaption><\/figure>\n\n\n\n

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

                                It allows you to set the priority of the Countdown 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 Countdown block on the Desktop.<\/li>\n\n\n\n
                                • Hide on Tablet<\/strong> \u2013 It hides the Countdown block on the Tablet.<\/li>\n\n\n\n
                                • Hide on Mobile<\/strong>\u00a0\u2013 It hides the Countdown block on theMobile.<\/li>\n<\/ul>\n\n\n\n
                                  \"Enable\/Disable
                                  Enable\/Disable 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 this particular Countdown 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 this particular block. Once you have set the ID, you can write the CSS Code to style the block 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 this particular block.<\/li>\n<\/ul>\n\n\n\n
                                    \"Add
                                    Add CSS ID and Additional CSS Class<\/figcaption><\/figure>\n\n\n\n

                                    After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                    The Countdown block displays the timer of any upcoming events. This is often used for time-limited promotions, sales, or other time-sensitive activities. It counts down the days, hours, minutes, and seconds until a specific deadline, event, or moment is met. After you have chosen the Countdown block, you’ll get a block editing panel on the[…]<\/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\/1436"}],"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=1436"}],"version-history":[{"count":25,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1436\/revisions"}],"predecessor-version":[{"id":2763,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/docs\/1436\/revisions\/2763"}],"wp:attachment":[{"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/media?parent=1436"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_category?post=1436"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/docs.wpblockart.com\/blockart-blocks\/wp-json\/wp\/v2\/doc_tag?post=1436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}