--- title: "How to Style Elementor Countdown Timer in Block or Inline Style?" url: https://theplusaddons.com/docs/style-elementor-countdown-timer-in-block-or-inline-style/ date: 2024-01-17 modified: 2026-08-25 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Style-Elementor-Countdown-Timer-in-Block-or-Inline-Style_-1024x536.jpg word_count: 1080 --- # How to Style Elementor Countdown Timer in Block or Inline Style? ## - The Countdown widget from The Plus Addons for Elementor switches between a stacked block layout and a single horizontal row with the Inline Style toggle. - Inline Style appears only when Countdown Setup is Normal Countdown or Scarcity Countdown (Evergreen) and Countdown Style is Style 1. - The inline layout keeps the same numbers, labels, typography, colours, and spacing options, but it hides the four per unit Border Color controls for days, hours, minutes, and seconds. - The inline timer fits sale bars, product prices, sentences, narrow columns, and sidebars without custom CSS or a separate widget to maintain. 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.](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/)* ***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-countdown-timer/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## 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.](https://theplusaddons.com/docs/show-custom-text-message-after-countdown-timer-ends/) Enabling the Inline Style toggle on the Countdown widget. Now the countdown timer will be in inline style. The same countdown shown in block layout and in inline layout. ## 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.](https://theplusaddons.com/docs/hide-countdown-days-hours-mins-seconds-in-elementor/) ## 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.