The Timer Countdown Banner widget for Elementor is an essential tool for creating eye-catching, deadline-driven banners with CTA button that encourage user engagement. Ideal for promoting limited-time sales, announcing upcoming events, or adding urgency to your campaigns, this widget seamlessly integrates into your Elementor designs. With fully customizable settings and a modern, professional design, it’s the perfect solution to keep your audience informed and motivated to take action.
Let’s look at each of the options in the Timer Countdown Banner widget for Elementor below.
Add a Timer Countdown Banner Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Timer Countdown Banner”
- Hover over the widget in the search results and click install
- Add the “Timer Countdown Banner” widget to any Elementor Page
General Settings
Banner Position
Set the positioning of banner from below options.
- Inline
- Fixed
Date Time
Specify the date and time for an event or countdown, indicating when the countdown will end or the event will occur.
Background Image
Choose an image to display as background of banner.
Background Image Size
This setting allows you to select the size at which the background image will be displayed. The options ensure the background image fits appropriately for different layouts and design requirements.
- Full
- Large
- Medium Large
- Medium
- Thumbnail
- 1536x1536
- 2048x2048
- WooCommerce Thumbnail
- WooCommerce Single
- WooCommerce Gallery Thumbnail
Hover Transition Duration
Use this setting to define how quickly the hover style appears or disappears, determining the speed of the hover effect.
Countdown Direction
Select the countdown direction:
- LTR (Left to Right): Displays days, hours, minutes, and seconds in a left-to-right sequence.
- RTL (Right to Left): Displays seconds, minutes, hours, and days in a right-to-left sequence.
Layout Settings
Show Days
Show/hide days on timer countdown.
Show Hours
Show/hide hours on timer countdown.
Show Minutes
Show/hide the minutes on timer countdown.
Show Seconds
Show/hide the seconds on timer countdown.
Show Graphic Element
Show graphic elements on timer countdown from below options.
- Icon
- Image
- Text
Show Title
Show the title element on timer countdown.
Title
Type text to show as title.
Show Text
Text
Type text to show in timer countdown.
Show Button
Show or hide button on timer countdown.
Button Text
Type text to show in button.
Button Link
Type or paste URL to link with the button.
Show Close Button
Show or hide the close button on timer countdown.
Labels Settings
On Expiry Settings
On Expiry
Select the action to occur on expiry on countdown.
- Do Nothing
- Hide
- Show Text
- Redirect
Text on Expiry
Type text to show on expiry of countdown.
Hide Title on Expiry
It hides the title on expiry of countdown.
Hide Text on Expiry
Hide the text when countdown expires.
Hide Button on Expiry
It hides the button on expiry of countdown.
Highlight Settings
Highlight Before Expiry
By turning this on, it will highlight the timer by changing the text color when there are a set number of minutes left.
Highlight Last Number of Minutes
Specify the number of minutes before the event/deadline when the highlighting should start.
Text Color
This color picker lets you choose the color for the highlighted text.
Blink Effect
If enabled, the text will blink periodically to draw attention to the remaining time.
Blink Seconds Only
When turned on only the seconds part of the timer will blink, making it easier to focus on the rapidly changing seconds as the event/deadline approaches.
Timer Countdown Banner Widget Styling
You have extensive control over the widget’s design. Select colors that complement your website. Customize text, icons, fonts, and layout to create the exact look you desire.
Banner Styling
Set the banner width, height, radius, and shadow.
Content Styling
Set the content padding, background blur, overlay color and alignment.
Title Styling
You can set the title color, typography, shadow, and spacing.
Text Styling
Here, you can set the text color, typography, shadow, and spacing.
Countdown Wrapper Styling
You can set the countdown spacing, gap, padding, radius, border, box shadow and background color.
Countdown Numbers Styling
Set the typography, text shadow, and color of countdown numbers.
Countdown Label Styling
Here, you can set the countdown label typography, text shadow, color, and gap.
Button Styling
You can style the button typography, spacing, padding, background color, text color, radius, border, and shadow.
Countdown Expiry Text Styling
You can set the countdown expiry text spacing, typography, color and shadow.
Timer Countdown Banner Design Examples For Elementor
Here are some live use cases for the Timer Countdown Banner Widget.
Timer countdown banner with hover effect.
Timer countdown banner with blinking effect.
Thank you for exploring the Timer Countdown Banner Widget for Elementor! We hope this guide helps you create captivating countdown banners to boost your campaigns and enhance user engagement. If you have any questions or need further assistance, don’t hesitate to reach out.