Count Down
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
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.
By default, you'll get the below design-
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.
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.
Custom Labels
This section has options that allow you to edit Label’s text.
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.
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.
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.
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.
Last updated