With the PublishPress Countdown Block, you can create a highly customizable countdown to an event. This block is available in PublishPress Blocks Pro. This image below is a preview of how the block will appear inside the WordPress editing screen.
How to create the PublishPress Countdown block
You can create a PublishPress Countdown block by clicking the “Countdown – PublishPress” button in the PublishPress Blocks category.
The event date and timer are generated automatically based on the Date time from the sidebar.
Settings for the PublishPress Countdown block
Once created, you can adjust the date and time, timer, font size, colors, labels, format and more. This from the sidebar.
Date time: choose the date and time for the event.
Days and time display: choose between “all in the same line” and “split in two lines”.
Font Size for days: available when “Days and time display” is “split in two lines”.
Line Height for days: available when “Days and time display” is “split in two lines”.
Font Size for hours, minutes, seconds
Line Height for hours, minutes, seconds
Separator: separator between hours, minutes and seconds. Choose between colon, slash, hyphen, vertical line, empty space and none.
Time has come: custom message to display when countdown comes to 00:00:00.
Display days label: enabled/disable the label for days.
Days label (plural): custom label to replace “days” word.
Day label (singular): custom label to replace “day” word.
Display hours, minutes, seconds labels: enabled/disable the label for hours, minutes, seconds labels.
Hours label (plural): custom label to replace “hours” word.
Hour label (singular): custom label to replace “hour” word.
Minutes label (plural): custom label to replace “minutes” word.
Minute label (singular): custom label to replace “minute” word.
Seconds label: custom label to replace “seconds” word.
Image: enabled/disable the image.
Image Width (px)
Title: enabled/disable the title.
Title Tag: choose the html tag for the title.
Event Date: enabled/disable the event date.
Event Date Tag: choose the html tag for the event date.
Date Format: choose the format for the date that is displayed.
Description: enabled/disable the description.
Button: enabled/disable the button. This button is an PublishPress Button block with its own set of customizations. Select this block on the editor to access its settings.
Event Date Color
Border style: choose between solid, dotted, dashed, double, groove, ridge, inset and outset.
Border Color: when Border style is different to “none”, this field will allow you to choose a custom color.
Edit content for the PublishPress Countdown block
Click over the clock to choose a custom image.
You can change the “Event's title” like you do with regular headings.
Type a custom description like you do with regular text.
Click on the PublishPress Button to customize the text.