Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Countdown Module with the Website Page Designer

Countdown Module with the Website Page Designer

To build anticipation for an event, new product or release, a great option is to add a Countdown module to your website. The page designer lets you include a timer that counts down to a specific date.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the countdown module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

Determine what goes into your countdown module here.

Text

Here you can define the title of the countdown timer and select the date and time your counter counts down to.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Text

Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title.

Numbers Text

You can also adjust the font settings for the numbers text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

You are going to display a countdown with a “Coming soon…” title.

These are our design choices:

Title Text Size: 80px

Title Text Color: #af1677

Numbers Text Size: 70px

Numbers Text Color: #7cc8cc

Label Text Size: 14

Label Text Color: #76afb3

Lable Line Height: 25px

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?