< All Topics

Promotion Bar

The Promotion Bar block helps you display special announcements, deals, or limited-time offers on your site. It comes with a countdown timer and customizable content options like title, description, image, and button. This block is free to use and ideal for creating urgency and boosting engagement.

Adding the block

To add the block:

  1. Click the “+” button to add a new block.
  2. Search for “Promotion Bar” and select it.
  3. For detailed instructions on how to add blocks in Gutenberg, please refer to the official WordPress Block Editor documentation.

General settings

Date & Time

  • Time – Set the end time for your promotion (choose hours, minutes, and AM/PM).
  • Date – Select the end date from the calendar.
  • This countdown will run until the specified date and time.

Content

  • Title – Add a headline for your promotion.
  • Description – Provide more details about your offer or event.
  • Show Image – Display an image alongside your promotion content.
  • Show Button – Enable a call-to-action button.
    • Button Text – Set the button label (e.g. Get the Deal).
    • Button URL – Add a link for the button.
    • Button Link Target – Choose to open the link in the same or new tab.

Display

  • Layout – Choose between Layout 1,2 or 3 for the bar design.
  • Hide Days – Hide or show the days box in the timer.
  • Display Labels – Choose how timer labels (Days, Hours, etc.) are displayed:
    • None
    • Full Label (e.g. Days, Hours)
    • Short Label (e.g. D, H)
    • Single Character
  • Display Labels in Stack – Show labels on a new line (stacked format).

Design settings

The Design tab lets you style and customize the appearance of all elements inside the Promotion Bar from the title and description to the timer digits, labels, and button.

Content box

  • Content Box Alignment – Align the overall content box to the left, center, or right within the bar.

Title text

  • Title Color (Normal / Hover) – Choose different colors for the title when it’s idle and when hovered.
  • Typography – Adjust the font size, weight, letter spacing, text decoration, and heading level (H1–H6) for the title.

Description text

  • Description Color (Normal / Hover) – Set the color of the description text for both normal and hover states.
  • Typography – Control the description font size, letter spacing, and text appearance.

Timer / clock box

  • Timer Box Alignment – Align the entire timer block (left, center, or right).
  • Timer Box Background – Choose a solid color or gradient background for the timer area.
  • Timer Box Dimensions – Set custom padding and spacing for the timer box (optional).

Timer digits, labels & separator

  • Timer/Clock Digits – Style the number values (size, color, typography).
  • Timer/Clock Labels – Style the labels under each digit (e.g. Days, Hours).
  • Timer Separator – Customize the separator symbol (like “:”) color and size.

Sale button

  • Style the promotional button, including its colors, typography, hover styles, and alignment.