One of the most effective ways to catch the attention of website visitors and create a sense of urgency is by incorporating a countdown timer. With the Countdown widget from The Plus Addons for Elementor, you can add a countdown timer on an Elementor website and, based on your requirement, show it as a stacked block or on a single inline row.
To check the complete feature overview documentation of The Plus Addons for Elementor Countdown widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
What It Does
The Inline Style toggle switches the Countdown widget between two layouts. Left off, each time unit is a stacked block with the number above its label. Turned on, all the units sit beside each other on a single horizontal row.
Why It Matters
The default block layout is tall, which is fine for a hero section but awkward anywhere vertical space is tight. A sale bar across the top of the page, a line of text beside a price, or a compact spot in a product row all need the timer to read as one line rather than a row of boxes. Inline Style covers that without any custom CSS.
What You Get
- A single Inline Style switcher on the Countdown widget, off by default
- A one line layout that keeps the same numbers, labels and styling options
- Compatibility with both Normal Countdown and Scarcity Countdown (Evergreen)
- No custom CSS and no separate widget to maintain
Benefits
- Fits a countdown into a header bar, a sentence, or a narrow column where the block layout would not
- Switching layouts is one toggle, so you can test both without rebuilding the section
- Typography, colours and spacing you already set carry across to the inline layout
Capabilities
Block Layout (Default)
Each unit renders as its own box, with the number on top and the label beneath it separated by a top border. This is the layout you get with the toggle off, and it is the one that supports the per unit Border Color options.
Inline Layout
Every unit is placed on one row, vertically centred, with tighter padding. The divider above each label is removed so the whole timer reads as a single line of text rather than a set of separate cards.
How It Works
The toggle adds a count-inline-style class to the countdown list that the widget outputs. The plugin stylesheet then changes each time unit from a stacked block to inline-flex, centres it, reduces its padding, and removes the top border and top padding from the label underneath the number.
Because that divider is what the per unit Border Color settings target, those four controls are hidden while Inline Style is on. They are not lost, and turning the toggle back off brings them and their saved values back.
The toggle itself only appears when two conditions are both true, which is why the steps below start by setting the countdown type and style.
- Countdown Setup is set to Normal Countdown or Scarcity Countdown (Evergreen)
- Countdown Style is set to Style 1
How to Use It
To do this, add the Countdown widget to the page and follow the steps –
1. Select Normal Countdown or Scarcity Countdown (Evergreen) from the Countdown Setup dropdown.
2. Then select Style 1 from the Countdown Style dropdown. The Inline Style toggle is only offered on Style 1, so it will not appear if you leave another style selected.
3. By default, the counter will be in block style, to make it inline enable the Inline Style toggle.
Also read, how to show custom text message after the countdown Timer ends.
Now the countdown timer will be in inline style.
Use Cases
- Sale bar at the top of the page – an inline timer sits on one line beside the offer text instead of pushing the bar taller.
- Beside a product price – a compact timer fits next to the price without breaking the row.
- Inside a sentence – pair the inline timer with a short line of copy so the deadline reads as part of the message.
- Narrow columns and sidebars – the single row keeps its height predictable where a stacked layout would crowd the space.
Limitations
- Inline Style is available on Style 1 only. Selecting any other countdown style removes the toggle from the panel.
- It works with Normal Countdown and Scarcity Countdown (Evergreen) only. The Fake Numbers Counter type does not offer it.
- The four per unit Border Color settings, for days, hours, minutes and seconds, are hidden while Inline Style is enabled, because the divider they colour is removed in this layout.
- All four units sit on one row, so on narrow screens a four unit timer can wrap or crowd. Hide the units you do not need, or reduce the font size for mobile.
Also read, how to hide countdown days/hours/mins/seconds in Elementor countdown timer.
Troubleshooting
I cannot find the Inline Style toggle
The toggle is conditional. Check both settings: Countdown Setup has to be Normal Countdown or Scarcity Countdown (Evergreen), and Countdown Style has to be Style 1. If either is set to something else the toggle is not rendered at all, so it will look missing rather than disabled.
The Border Color options disappeared
That is expected once Inline Style is on. The inline layout removes the divider above each label, so the days, hours, minutes and seconds Border Color controls are hidden. Turn Inline Style off and they come back with the values you had set.
The timer wraps onto two lines on mobile
Four units on one row need more width than a phone usually has. Either drop the units you do not need, most sale timers do not need seconds, or lower the number and label font sizes on the mobile device view.
The timer still looks stacked after enabling the toggle
The layout comes from a class the widget adds to its own markup, so it is applied as soon as the setting saves. If the page still shows the block layout, clear any page cache and, if you have one, purge the CDN, then reload. Custom CSS that targets the countdown list can also override the inline spacing.
This is how you can style an Elementor countdown timer in block or inline style.
