The Countdown Block displays a live countdown to a specified date and time, showing the remaining days, hours, minutes, and seconds. Customize the target date, unit labels, number and label typography, colors, separators, item backgrounds, borders, shadows, spacing, and responsive alignment to match your website design.<\/p>\n\n\n\n
How to Add a Countdown Block<\/h2>\n\n\n\n
Step 1: Add the Countdown Block<\/h3>\n\n\n\n\n
Open the page or post where you want to display the countdown.<\/li>\n\n\n\n
Click the + (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n
Search for Countdown<\/strong>.<\/li>\n\n\n\n
Select the Countdown Block<\/strong> to insert it into your page.<\/li>\n\n\n\n
Select the block to open its settings in the sidebar.<\/li>\n\n\n\n
Set the target date and time, customize the countdown labels, and adjust the layout and styling.<\/li>\n<\/ol>\n\n\n\n<\/figure>\n\n\n\n
Step 2: Configure the Countdown Block<\/h3>\n\n\n\n
The available tabs are:<\/p>\n\n\n\n
\n
Settings:<\/strong> Set the target date and time and customize the labels for days, hours, minutes, and seconds.<\/li>\n\n\n\n
Layout:<\/strong> Choose whether labels appear below the numbers and configure content alignment and spacing.<\/li>\n\n\n\n
Style:<\/strong> Customize the countdown items, separators, number typography, number colors, and label typography and colors.<\/li>\n\n\n\n
Advanced:<\/strong> Configure spacing and background settings for the entire Countdown Block.<\/li>\n<\/ul>\n\n\n\n
Settings Tab<\/h2>\n\n\n\n
1. Content<\/h3>\n\n\n\n
\n
Target Date:<\/strong> Select the date and time when the countdown should end. If you leave this field empty, the countdown defaults to 24 hours from the current time.<\/li>\n\n\n\n
Days Label:<\/strong> Customize the label displayed for days. For example, enter Days<\/code>.<\/li>\n\n\n\n
Hours Label:<\/strong> Customize the label displayed for hours. For example, enter Hours<\/code>.<\/li>\n\n\n\n
Minutes Label:<\/strong> Customize the label displayed for minutes. For example, enter Minutes<\/code>.<\/li>\n\n\n\n
Seconds Label:<\/strong> Customize the label displayed for seconds. For example, enter Seconds<\/code>.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
Layout Tab<\/h2>\n\n\n\n
1. Layout<\/h3>\n\n\n\n
\n
Display Label Under Number:<\/strong> Enable this option to display each unit label below its countdown number. Disable it to display the labels inline with the numbers.<\/li>\n\n\n\n
Content Alignment:<\/strong> Choose how the countdown content is aligned when labels are displayed below the numbers.\n
\n
Left:<\/strong> Align the content to the left.<\/li>\n\n\n\n
Center:<\/strong> Align the content to the center.<\/li>\n\n\n\n
Right:<\/strong> Align the content to the right.<\/li>\n\n\n\n
Alignment can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
Mid Gap (px):<\/strong> Set the spacing between the countdown units in pixels. The gap can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
Style Tab<\/h2>\n\n\n\n
1. Item<\/h3>\n\n\n\n
\n
Item Background:<\/strong> Set a solid background color or gradient for each countdown item.<\/li>\n\n\n\n
Item Border:<\/strong> Customize the border around each countdown item, including its width, style, and color.<\/li>\n\n\n\n
Item Box Shadow:<\/strong> Add and customize a shadow around each countdown item.<\/li>\n\n\n\n
Item Border Radius:<\/strong> Adjust the roundness of each countdown item’s corners.<\/li>\n\n\n\n
Item Padding:<\/strong> Adjust the inner spacing around the content of each countdown item. Padding can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n
2. Separator<\/h3>\n\n\n\n
\n
Separator:<\/strong> Choose how the countdown units are separated.\n
\n
Space:<\/strong> Separate the units with space.<\/li>\n\n\n\n
Separator Color:<\/strong> Set a solid color or gradient for the separator. This option is available when Bullets<\/strong> or Dash<\/strong> is selected.<\/li>\n\n\n\n
Separator Position X (px):<\/strong> Adjust the horizontal position of the separator in pixels. This option is available when Bullets<\/strong> or Dash<\/strong> is selected.<\/li>\n<\/ul>\n\n\n\n
3. Days<\/h3>\n\n\n\n
\n
Number Typography:<\/strong> Customize the typography of the days number. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
Number Color:<\/strong> Set the color of the days number.<\/li>\n\n\n\n
Label Color:<\/strong> Set the color of the days label.<\/li>\n\n\n\n
Label Typography:<\/strong> Customize the typography of the days label. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n
4. Hours<\/h3>\n\n\n\n
\n
Number Typography:<\/strong> Customize the typography of the hours number. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
Number Color:<\/strong> Set the color of the hours number.<\/li>\n\n\n\n
Label Color:<\/strong> Set the color of the hours label.<\/li>\n\n\n\n
Label Typography:<\/strong> Customize the typography of the hours label. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n
5. Minutes<\/h3>\n\n\n\n
\n
Number Typography:<\/strong> Customize the typography of the minutes number. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
Number Color:<\/strong> Set the color of the minutes number.<\/li>\n\n\n\n
Label Color:<\/strong> Set the color of the minutes label.<\/li>\n\n\n\n
Label Typography:<\/strong> Customize the typography of the minutes label. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n
6. Seconds<\/h3>\n\n\n\n
\n
Number Typography:<\/strong> Customize the typography of the seconds number. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
Number Color:<\/strong> Set the color of the seconds number.<\/li>\n\n\n\n
Label Color:<\/strong> Set the color of the seconds label.<\/li>\n\n\n\n
Label Typography:<\/strong> Customize the typography of the seconds label. The settings can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
Advanced Tab<\/h2>\n\n\n\n
The Advanced tab controls spacing and background settings for the entire Countdown Block, not the individual countdown items.<\/p>\n\n\n\n
1. Spacing<\/h3>\n\n\n\n
\n
Padding:<\/strong> Set the outer padding around the Countdown Block. Values can be configured separately for desktop, tablet, and mobile devices.<\/li>\n\n\n\n
Margin:<\/strong> Set the outer margin around the Countdown Block. Values can be configured separately for desktop, tablet, and mobile devices.<\/li>\n<\/ul>\n\n\n\n
2. Background<\/h3>\n\n\n\n
\n
Background:<\/strong> Set a solid background color or gradient for the entire Countdown Block.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
The Countdown Block displays a live countdown to a specified date and time, showing the remaining days, hours, minutes, and seconds. Customize the target date, unit labels, number and label typography, colors, separators, item backgrounds, borders, shadows, spacing, and responsive alignment to match your website design. How to Add a Countdown Block Step 1: Add […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[19],"doc_tag":[],"class_list":["post-2082","docs","type-docs","status-publish","hentry","doc_category-showcase-block"],"year_month":"2026-10","word_count":826,"total_views":"6","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Showcase Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/showcase-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2082"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2082\/revisions"}],"predecessor-version":[{"id":2439,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2082\/revisions\/2439"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2082"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2082"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-94.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-95.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-96-1024x297.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-97.png\")
<\/figure>\n\n\n\n