The Countdown Widget is a simple yet powerful tool designed to build excitement and highlight upcoming events on your website. Whether you’re counting down to early bird registration, ticket sales, event opening, or the main event, this widget creates urgency and engagement for your audience.
Key Features
Custom Countdown Dates
Set any future date and time for your event.
Styling Options
Fully customize the widget’s appearance:
Font style, size, and color for numbers and labels
Optional dividers and word labels (e.g., “days”, “hours”)
Text alignment and layout options
Flexible Placement
Add the countdown to panels or directly within page content areas.
Background Styling
Customize the section or article background behind the widget for enhanced visual appeal.
How to Use
Access the Widget
In the Back Office, navigate to your page content area.
Click the Widget icon → Countdown.
Set Up Your Countdown
Enter your target date and time.
Choose which time units to display (days, hours, minutes, seconds).
Customize Appearance
Adjust fonts, sizes, colors, and text alignment to match your branding.
Optionally, update the background styling for added emphasis.
Save and Preview
Click Save and preview the countdown on your live page.
This widget is ideal for time-sensitive promotions and event awareness campaigns. Once configured, it runs automatically and requires no ongoing maintenance.
Watch the Video Demo:
Video Transcript:
The Countdown widget is a simple tool to add animation and give visitors an idea of how close an event is.
This can be used in multiple instances on your site, such as early birds, registration, opening, and countdowns to the actual event itself.
This can be added both to panels and to page content.
To set this up, please go into your content, click on the icon widget, and then choose your countdown date in the future. You can change your settings, such as the alignment and what items are shown.
You can then go on to change the font styles for the numbers, any wording that appears, and an optional divider.
Don't forget you can also change the settings of the backgrounds of the sections and articles to make this a little more interesting.
How to Fix the Countdown Panel to the Bottom of the Page
The countdown panel can be used to highlight important dates or deadlines within the platform. By fixing the countdown to the bottom of the page, you ensure it remains visible to users at all times, helping draw attention to key information.
Why Fix the Countdown to the Bottom of the Page?
Fixing the countdown panel is useful when you want to:
Emphasise important deadlines or launch dates
Increase visibility of time-sensitive information
Keep users aware of upcoming milestones as they navigate the site
Improve engagement with key event messaging
A fixed countdown remains visible as users scroll, making it harder to miss.
Creating the Countdown Panel
Before fixing the countdown to the bottom of the page, you must first create the panel.
To create the countdown panel:
Navigate to Panels.
Select Add Panel.
Set the Panel Location to Countdown.
Add your countdown content as required.
Save the panel.
Once created, the panel can then be styled and fixed in position.
Steps to Fix the Countdown Panel
Navigate to Settings.
Select Design and Appearances.
Open Sections.
Click on Countdown.
Toggle on Make the countdown fixed to the bottom?.
Save your changes.
Once enabled, the countdown panel will remain fixed to the bottom of the page across the site.
Customising the Countdown Panel
Within the same Countdown settings area, you can also:
Update the panel colour to match your event branding
Ensure sufficient contrast so the text remains readable
Preview changes before publishing, where possible
Best Practice Tips
Use a fixed countdown sparingly to avoid distracting users.
Keep the message clear and concise.
Choose a panel colour that stands out without overpowering the page.
Test the countdown on different screen sizes to ensure it doesn’t block important content.
Troubleshooting
Countdown not fixed? Confirm the toggle is enabled and changes have been saved.
Panel overlapping content? Review layout settings or test on mobile view.
Colour not updating? Clear your browser cache and refresh the page.
Fixing the countdown panel to the bottom of the page is a simple but effective way to highlight key dates and keep users informed throughout their journe
Comments
0 comments
Please sign in to leave a comment.