Table of Contents
What is countdown
1. How to add “Countdown Block” Block #
To add the Countdown Block in your Gutenberg editor first click on (+) icon then in the search box type “Countdown” and you will see the “Countdown” block.
After inserting the “Countdown” block you will get the default look like below. Now you need to change the preset and other settings.
2. General Settings #
The General settings tab has the preset option and count down settings date time settings option. The General settings panel properties are as follows.
- Presets: From our pre-defined presets you can select which style you like.
- Countdown Settings: You can set the date and time of the countdown from the calendar.
- Content Settings: You can enable or disable Days, Hours, Minutes and Seconds also can set the label of Days, Hours, Minutes and Seconds.
3. Style Settings #
From the Styles settings tab, you can set all possible styles like typography, color, margin, background and other style settings.
- Boxes Style: Set container width, height, spacing, alignment and padding
- Boxes Style => Background: You can set normal or hover background for the Days, Hours, Minutes and Seconds also can set gradient style background.
- Boxes Style => Border: You can set normal and hover border style and border radius.
- Boxes Style => BoxShadow: You can set the box-shadow for normal and hover styles.
- Digits: You can set the Digits color, Typography like font family, font size, font weight, line height also padding.
- Labels: You can set the Label’s color, Typography like font family, font size, font weight, line height also padding.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set default border or hover border with different border styles also you can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
5. Final Outcome #
Here is the final outcome of a Countdown Block
