[2.0] Adding and Styling a Countdown Timer
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:
- Would you need to add a time and a logo? Then go for the 2 columns layout
- Would you only need a timer? One column layout is the best choice then
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
Related Articles
[2.0] Setting the Countdown Timer
You can set countdown timers in Pre-Quiz, Post-Quiz, and Webinar page components. The procedure for setting countdown timers is the same for all of these page components. Note: To better understand countdown timers, you may want to look at templates ...[2.0] Countdown Timer: Redirect Once Expired
This article provides step-by-step instructions on how to add a link/URL to redirect the audience once the countdown or deadline has timed out/expired. Let’s get started! Once in your Pre-Quiz or Post-Quiz Page, click to select the countdown or ...[2.0] Video Tutorial - Editing the Countdown Date & Time
This video tutorial demonstrates how to set the exact date and time that the Countdown component will expire. *Please note that at this time, it is not possible to make this countdown evergreen / without a hard expiration date, although there are ...[2.0] Adding a Video
You can add videos to Pre-Quiz, Lead Capture, Post-Quiz, and Webinar page components. The procedure for adding videos is the same for all page components. Step # 1 Click the component to which a video is to be added, then open it for editing by ...[2.0] Wistia: Adding Videos To bucket Pages
You can add videos to Pre-Quiz, Lead Capture, Post-Quiz, and Webinar page components. The procedure for adding videos is the same for all page components. Step 1: Access the Builder section of the page, where the video will be added. Step 2: Locate ...