FoxstudioAdd and edit elements
Countdown timer
2 min read

How to add a countdown timer
- In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.
- Select Promotions > Countdown timer or in Quick add, select Countdown element.
- Drag the countdown timer onto your canvas.

How to edit a countdown timer
- Select the relevant countdown timer element in the editor.
- Use the tools bar above the selected countdown timer element to quickly edit it.
General settings
- Countdown type:



- Content alignment: Align the countdown timer to the left, center, or right of its container using the alignment options.
- Hide on end: Toggle this option ON to automatically hide the timer when it reaches the end.
- Labels:
- Toggle the Show labels option to display or hide the time unit labels (Days, Hours, Minutes, Seconds).
- Customize the label text for each time unit as needed, or use the default wordings.

Design settings
Besides settings for Size and Constraints, you can edit specific elements of a countdown timer.
- Element container: Adjust the overall container (Text style, Spacing, Background, Borders).
- Timer blocks: Style the blocks that display the countdown numbers (Text style, Size, Background, Borders).
- Numbers: Change the font style, color, and spacing of the numbers.
- Labels: Change the font style, color, and spacing of the numbers.

Last updated