2 minutes read

Counter Block

Counter Block options

  • Change text alignment – align your counter to left, center, or right. This option is available at the top block options panel.
  • Day – set end date’s day.
  • Month – set end date’s month.
  • Year – set end date’s year.
  • Hour – set end date’s hour.
  • Minute – set end date’s minute.
  • Timezone – choose a timezone. Use GMT or type in the country according to: https://www.php.net/manual/en/timezones.php.
  • Type – choose your counter’s style type from three available types: With image and title, Exposed number of weeks, Simple.
  • Title – add a title to your counter. This option is available only with “With image and title” style type.
  • Show weeks – choose whether to display week count in your counter.
  • Show days – choose whether to display day count in your counter.
  • Show seconds – choose whether to display second count in your counter.
  • Show seconds bar (Simple style only) – choose whether to display a progress bar under your seconds count. This option is available only in Simple style type.
  • Image – set your image here. Use an image from WordPress Media Library or upload a new image directly from your computer.
  • Image alternative text – set the image alt text.
  • Image width – set image width. Use pixels.
  • Image height – set image height. Use pixels.
  • Translation options – you can translate all counter captions:
    • Weeks
    • Week
    • Days
    • Day
    • Hours
    • Hour
    • Minutes
    • Minute
    • Seconds
    • Second
  • Top margin – set the block top margin. Use any CSS-compatible margin value.
  • Right margin – set the block right margin. Use any CSS-compatible margin value.
  • Bottom margin – set the block bottom margin. Use any CSS-compatible margin value.
  • Left margin – set the block left margin. Use any CSS-compatible margin value.
  • Accent color – set the numbers color.
  • Title color – set the title color.
  • Text color – set the text color.
  • Border color – set the border color.
  • Separator color – set the separator color.
  • Background color – set the background color.
  • Animation – select an animation for your counter. Use animation’s name from: https://daneden.github.io/animate.css/.
  • Animation delay (in milliseconds) – set animation’s delay here. Use miliseconds.
  • Animate anytime this block enters the viewport – you can choose to animate the block anytime it enters the viewport, instead of only once.
  • Class – add a custom CSS class to your counter.
  • ID – add a custom CSS ID to your counter.
  • Style – add an inline CSS style to your counter.