The Settings page contains all the options available for a single countdown.
The settings are divided into sections:
- General
- Appearance
- Timer
- Shortcode
General
Countdown title
What it does
Sets the internal name of the countdown.
When to use it
Use it to easily identify the timer in the admin area, for example 24-hour offer, June webinar, weekend promo, or checkout timer.
Effect on the frontend
The title is not automatically displayed on the website.
Important notes
It is used only for internal management.
Countdown ID
What it does
Identifies the countdown and distinguishes it from other timers.
When to use it
Use a clear and stable ID, for example offerta_24h, webinar_giugno, promo_checkout, or timer_corso.
Effect on the frontend
The plugin uses this ID to distinguish the timer and, in Evergreen countdowns, to link tracking to the correct countdown.
Important notes
Do not change the ID of an Evergreen timer that has already been published, unless you want the tracking to restart.
Practical warning
If you change the countdown ID, the plugin will no longer recognize the old tracking data linked to the previous ID. For many visitors, the Evergreen timer may therefore restart from the beginning.
Appearance
Countdown template
What it does
Selects the graphic layout of the countdown.
Available options:
- Standard
- Flip Clock
When to use it
Use it to adapt the timer to the style of the page.
Effect on the frontend
Changes how days, hours, minutes, and seconds are displayed.
Important notes
The template changes only the appearance, not the timer logic.
Countdown alignment
What it does
Controls the horizontal alignment of the countdown inside its container.
Available options:
- Left alignment
- Center alignment
- Right alignment
When to use it
Use it to align the timer with the layout of the page or with nearby content.
Effect on the frontend
Adds an alignment class to the .tipcg_countdown element and changes the justify-content property.
Important notes
Center alignment is used by default. This option changes only the countdown position, not the timer logic or the appearance of individual time units.
Separators
What it does
Enables or disables the separators between the time cells.
Options:
- Enabled
- Disabled
When to use it
Use it if you want to show or hide visual separators, such as colons.
Effect on the frontend
When enabled, the countdown displays separators between days, hours, minutes, and seconds.
Important notes
When the days are equal to zero, the days block may be hidden automatically.
Number font size
What it does
Sets the size of the numbers.
When to use it
Use it to make the countdown more prominent or more compact.
Effect on the frontend
Larger numbers increase visual impact; smaller numbers are suitable for side boxes or narrow layouts.
Important notes
The value is applied in pixels.
Label font size
What it does
Sets the size of the labels, such as Days, Hours, Minutes, Seconds.
When to use it
Use it to improve readability and proportion between numbers and labels.
Effect on the frontend
Changes the size of the labels below the numbers.
Important notes
Labels should usually be smaller than the numbers.
Cell background color
What it does
Sets the background color of the countdown cells.
When to use it
Use it to integrate the timer with the page design.
Effect on the frontend
Changes the color of the blocks that contain the numbers.
Important notes
Maintain good contrast with the number color.
Number text color
What it does
Sets the color of the numbers.
When to use it
Use it to improve contrast and readability.
Effect on the frontend
Changes the color of the numeric values.
Important notes
On a dark background, use light numbers; on a light background, use dark numbers.
Label text color
What it does
Sets the color of the labels.
When to use it
Use it to align the timer with the website style.
Effect on the frontend
Changes the color of the text below the numbers.
Important notes
Labels must remain readable even if they are less prominent than the numbers.
Separator text color
What it does
Sets the color of the separators.
When to use it
Use it when the separators are enabled.
Effect on the frontend
Changes the color of the separators between the cells.
Important notes
It only has an effect if Separators is set to Enabled.
Border radius
What it does
Sets the rounding of the cell corners.
When to use it
Use it to make the timer more square or softer.
Effect on the frontend
A low value creates sharp corners; a high value creates rounded corners.
Important notes
The visual effect may vary depending on the selected template.
Margin top
What it does
Adds space above the countdown.
When to use it
Use it if the timer is too close to the previous element.
Effect on the frontend
Increases the vertical distance above the timer.
Important notes
The value is applied in pixels.
Margin bottom
What it does
Adds space below the countdown.
When to use it
Use it if the timer is too close to the next element.
Effect on the frontend
Increases the vertical distance below the timer.
Important notes
The value is applied in pixels.
Timer
Countdown type
What it does
Selects the countdown logic.
Available options:
- Evergreen
- Specific date
When to use it
Use Evergreen for personal timers that start on the first visit. Use Specific date for a deadline that is the same for everyone.
Effect on the frontend
The remaining time is calculated differently based on the selected type.
Important notes
Only the Evergreen timer uses visitor tracking.
Evergreen timer settings
These options are used only if Countdown type is set to Evergreen.
Evergreen duration
What it does
Sets the duration of the personal countdown.
Available fields:
- Days
- Hours
- Minutes
- Seconds
When to use it
Use it for individual offers, for example 15 minutes, 24 hours, 3 days, or 7 days.
Effect on the frontend
Each new visitor sees the countdown start from the set duration.
Important notes
The timer starts from the first recorded access for that visitor, not from a fixed date.
Tracking method
What it does
Defines how the plugin recognizes the visitor.
Available options:
- Cookie
- IP
- Cookie or IP
When to use it
Choose the method based on how stable you want the tracking to be.
Effect on the frontend
Determines whether the visitor continues to see the same countdown or whether the timer may restart.
Important notes
The tracking method applies only to Evergreen timers.
Specific date timer settings
This option is used only if Countdown type is set to Specific date.
End date/time
What it does
Sets the final date and time of the countdown.
When to use it
Use it for deadlines that are the same for everyone, such as the end of a promotion, registration closing, webinar start, or product launch.
Effect on the frontend
All visitors see the same remaining time.
Important notes
The timer uses the website timezone. It does not use cookie, IP, or user tracking.
Shortcode
Generated shortcode
What it does
Shows the shortcode to copy and paste into the website.
Example:
[ tipcg_countdown countdown_id="1" ]
When to use it
Use it after configuring and saving the countdown.
Effect on the frontend
The plugin displays the countdown corresponding to the shortcode.
Important notes
You can insert the same shortcode on multiple pages. If the timer is Evergreen, the state remains linked to the same countdown ID.