Most of our templates come with a countdown timer already, but whether you started from scratch and are thinking about adding one, or perhaps you’ve deleted it by accident and want to add it back, this article can help with some basic instructions to add and customize your countdown timer.
Before we begin
It is essential to prepare the space that will contain this element. This is done by dragging and dropping a Layout component.
To pick the most appropriate layout for your timer you can ask yourself one of these questions:
Step #1: Add all the elements of your timer
Timers are typically added along with CTA buttons (Call To Action buttons), and text that indicates urgency, such as “expires in…” to accomplish this:
From the left-hand side menu, drag and drop the desired Layout, then drag and drop the countdown element making sure it falls inside the column, the green bar will always indicate the position.
Drag and Drop a button component, try to position it at the bottom of the timer, and later we can change its position.
Do the same with a Text component, preferably above the countdown timer.
Step #2: Adjust its properties
Adjust timer: if the timer is too big, you can change its size by managing the font properties, click to select each one of the numbers, and choose the desired font size
Adjust button: Use the Size menu to adjust the button, specifically the Width and the Height. We also suggest using the “px” measure (pixels), for example, Width: 200px and Height: 60px. Please note that you might need to change those values for tablet and mobile view since they have a smaller resolution.
Adjust text: any text can be adjusted by using the font properties located on the left-hand side.
Once completed, click to select the container for all three elements (button, timer, and text), set it to Flex under Alignment > Display
Scroll down to the flex menu and set the flex direction to “row” or any of the three available options until the elements of your countdown are in the desired position
Center the elements by setting these menus to “center”: justify Content, Align items, and Align content
Still have questions? Feel free to reach out via support@bucket.io