Countdown layer

You can find the Countdown layer in the Slide Editor.

The Countdown layer lets you create a countdown for a time you set.

Content

Date

Use slide schedule

You can use the Unpublish on date of the Slide as the date of the counter. This way when the counter reaches 0, the slide will be unpublished.

Year, month, day, hour, minute

This is where you can set the date and time you want to count down to.

Style

Show label

Displays the Days  , Hours  , Minutes  , Seconds  labels under the counter numbers.

Gap

Sets the vertical and horizontal distance between the numbers.

Columns

Displays the counter in a 4x1, 2x2 or 1x4 grid.

Tablet Style

You can set custom Gap  and Column  for tablet.

Mobile Style

You can set custom Gap  and Column  for mobile.

General

Action when ends

Choose the action you want to happen after the countdown reached its destination date.

• No action: No action happens after the countdown reaches its destination. The numbers stay on 0.
• Hide layer: Hides the count down layer after the countdown finishes.
• Reload page: Reloads the page after the countdown is finished. Useful to pair with the Use slide schedule.
• Redirect to URL: Redirects to the given URL.

Redirect to URL

Specify the URL you want to redirect your visitors if you choose Redirect to URL  at Action when ends.

Style

Typography

At the Typography you can select whether you want to adjust the font for the Countdown or Label.

Learn about the typography options at the Layer Typography & Design documentation.

Responsive

Learn about the responsive options at the Layer Style documentation.

Effect

Learn more about the effect options at the Layer Style documentation.

Position

Learn about the position options at the Layer Style documentation.

Size

Learn about the size options at the Layer Style documentation.

Advanced

Learn more about the advanced options at the Layer Style documentation.

Animations

Learn about the animations at the Animation documentation.

FAQ

Is it possible to hide the second, minute, hour or day counter of the countdown?

We do not have an option like this. If you would like to do it, you need to use custom CSS codes:

.n2-ss-item-countdown_second{
   display:none;
}

.n2-ss-tabletPortrait .n2-ss-item-countdown_container,
.n2-ss-desktopPortrait .n2-ss-item-countdown_container{
   --columns: 3!important;
}

So you can add display:none; to the element you would like to hide, like .n2-ss-item-countdown_second, .n2-ss-item-countdown_minute, .n2-ss-item-countdown_hour or .n2-ss-item-countdown_day and adjust the number of columns to the amount of countdown parts you are displaying.

You could go to the slider's settings -> Developer tab and insert the code into the CSS field.