Count Down block allows you to add countdowns to your page with customizable styles in an attractive way.
How To Add The Count Down Block
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Count Down or you can search for it if it doesnโt pop up quickly for you.
- 2.By default, you’ll get the below design-
%20(1).png?alt=media&token=3b9e6217-7482-43ba-b29e-4d31fac77cd9)
How To Configure The Count Down Block
To configure the content of your Count Down block, switch to the โContentโ tab.
Countdown
Due Date – Set the due date and time for your countdown.
%20(1).png?alt=media&token=ae0f0855-4515-4c0c-ab47-fd43a932e217)
Display
Inline – This option allows you to display digits and labels inline.
Labels – Show or hide the Labels.
Days – Show or hide the Days display.
Hours – Show or hide the Hours display.
Minutes – Show or hide the Minutes display.
Seconds – Show or hide the Seconds display.
%20(1).png?alt=media&token=118e9c3e-508d-4557-ba68-a265507197cd)
Custom Labels
This section has options that allow you to edit Labelโs text.
%20(1).png?alt=media&token=b77a644f-4b14-4458-bb7e-4c096ec10302)
How To Style The Count Down Block
Switch to the โStyleโ tab to style all the elements of the Count Down block. You can customize โConnectorโ, ‘Spacing’ & โColor & Typographyโ as per your preference.
Box Style
Box Spacing- Set the spacing between the countdown boxes.
Padding- Set the top, bottom, left, right padding within the countdownโs box.
%20(1).png?alt=media&token=8617a61e-cb14-454f-aa92-4ac6c4fa95de)
Border– Set the border settings for the countdown block
Box Shadow– This option allows you to set box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
Background Color – Set the background color of the box.
You can also set responsive Height, Width, Margin, Padding for the countdown box for Mobile and Tablet view.
%20(1).png?alt=media&token=8ff6bf1d-e019-4879-bb53-724af52fceb8)
Container Spacing
Container refers to the entire section which holds all the countdown boxes. This setting allows you to style and position this section.
Padding – Offers individual options to customize the Top, Right, Bottom, Left padding to the container.
Margin – Offers individual options to customize the Top, Right, Bottom, Left margin around the container.
You can also set responsive Padding and Margin to the container for Mobile and Tablet view.
%20(1).png?alt=media&token=2d4d0a52-cd3b-493d-b990-bfa190309190)
Typography
Under the Typography section, you can set typography options such as Font Family, Responsive Font Size, Font Weight, Line Height, Letter Spacing, Color for Digits and Labels.
