Tag: Countdown Block

With the 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 Countdown block

You can create a Countdown block by clicking the Countdown 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 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.
• Timer Settings
  • 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.
• Event Settings
  • 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 Advanced Button block with its own set of customizations. Select this block on the editor to access its settings.
• Color Settings
  • Title Color
  • Event Date Color
  • Description Color
  • Timer Color
  • Background Color
• Padding
  • Padding top
  • Padding right
  • Padding bottom
  • Padding left
• Border
  • Border radius
  • 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 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 Advanced Button to customize the text.

On the sidebar you can customize the button. Here you have the same settings from a regular Advanced Button block.