Countdown Timer Element for Bricks Builder – Overview

Max Addons Countdown Timer element allows you to create beautiful and functional countdowns directly within Bricks Builder. No need to write any code or deal with complicated setups. Just drag, drop, and customize.

This element offers three types of countdown timers:

• Fixed Countdown Timer
• Evergreen Countdown Timer
• Recurring Countdown Timer

---

Getting Started#

Before you begin using the Countdown Timer element, make sure the following tools are installed and activated on your WordPress site:

• Bricks Builder
• Max Addons for Bricks Builder

How to Add the Countdown Timer to a Page#

1. Open an existing page or create a new one using the Bricks Builder editor.
2. In the elements panel, search for "Countdown Timer."
3. Add the element to your page layout.
4. Look for the "Max" label in the top-right corner of the element to confirm it's from Max Addons.
5. Once added, you'll find all customization options under the Content and Style tabs.

Content Tab Options#

The Content tab is divided into five sub-tabs to help you customize the Countdown Timer in detail:

1. COUNTDOWN
2. FIELDS
3. FIELD
4. CIRCLE or DIGIT
5. SEPARATOR

Let's explore each of these:

COUNTDOWN#

• Countdown Type: Choose from three types!

  • Fixed Countdown Timer: Counts down to a specific date and time.
  • Evergreen Countdown Timer: Unique to each visitor, this timer starts from a fixed duration.
  • Recurring Countdown Timer: Automatically resets based on a defined schedule.

Each timer type comes with its own settings:

Fixed Countdown Timer Options#

• Date Source: Choose how the date is set:

  • Datepicker: Manually select a target date and time.
  • Dynamic: Pull the date from dynamic data sources.
  • Woo - Sale Start Date: Automatically use the WooCommerce sale start date.
  • Woo - Sale End Date: Automatically use the WooCommerce sale end date.

• Time Zone: Set the appropriate time zone for countdown tracking.

Evergreen Countdown Timer Options#

• Days: Set the number of days to count down.
• Hours: Set hours duration.
• Minutes: Set minutes duration.

Recurring Countdown Timer Options#

• Start Date: Select the starting date.
• Repeat Until Date: Set the date until the countdown should repeat.
• Days / Hours / Minutes: Define the countdown duration.
• Repeat Timer After (Days): Set how frequently the timer should reset.
• Time Zone: Specify the time zone.

• Date reached: Choose the action to take once the countdown reaches zero. For example, you might hide the timer or show a message.
• Style: Choose the countdown animation or appearance:

  • Default
  • Circle
  • Rotate

FIELDS#

This section defines what time units to display in the countdown. By default, the timer includes:

• %D – Days
• %H – Hours
• %M – Minutes
• %S – Seconds

You can customize the format by adding or removing any of these fields.

Layout Settings:#

• Direction: Display fields vertically (column), horizontally (row), or in reverse order
• Align Main Axis (Justify Content): Start, Center, End, Space Between, Space Around, Space Evenly
• Align Cross Axis (Align Items): Start, Center, End, Stretch, Auto

FIELD#

This section controls the layout and spacing between individual fields (such as days, hours, etc.).

• Direction: Choose how field content is arranged (column, row, or reverse)
• Gap: Set spacing between items within each field

CIRCLE#

This sub-tab appears only if you select "Circle" as your timer style. You'll get customization options to control the appearance of the circular countdown:

• Stroke Width: Thickness of the progress circle
• Stroke Color: Color of the outer stroke
• Stroke Progress Color: Color for the animated progress
• Background Color: Color inside the circle

DIGIT#

This tab is available only if you choose "Rotate" as the timer style. Here, you can style the rotating digits with:

• Background Color
• Border
• Box Shadow

SEPARATOR#

Use this sub-tab to add a visual separator between countdown units (like colons or custom symbols).

• Show Separator: Enable or disable separators
• Separator Character: Enter the symbol (e.g.,:, /, -)
• Typography Settings: Customize the separator's font size, color, and weight

---

So, this was a detailed overview of the Countdown Timer element. I hope the doc helps you understand the features and functionalities of the element.