Countdown is a sequence of backward counting to indicate the time remaining before an event is scheduled to occur. The countdown element of Quix allows you to add countdown to your site without a 3rd party Extension. You can add countdown in your section by following these steps.
- Select Add New Element from column to open elements list modal
- From there select Countdown element
Here you’ll find three tabs - General, Styles ,& Advanced
The general tab holds the basic settings of countdown element. You can do the following changes here:
- Date & Time - You can set a date from calendar of the upcoming event. And to set the time click on ‘select time’ and set hour, minute and second.
- View - From view option you can choose the way of countdown display. In can be in inline or in block.
- Control Time - You can control the display of your date and time. If you want you can disable day, hour, minute or second. Just turn the red ‘Yes’ button into light grey showing ‘No’.
- Options - This tab will help you to control the labels. You can show the label or you can disable them. Moreover, you can display the separator or disable it too.
- Separator Sign - The separator sign is set to colon sign(:) by default. But you can change it if you want. Just insert your desired symbol into ‘separator sign’ field.
- Custom Label - By enabling the custom label you will be able to edit the labels. You can change the text to whatever you want.
Styles tab will help you to style up the countdown. Here you’ll find three editing fields - Boxes, Content, and Separator. The editing options are are described in details below.
- Background - The background option in the style tab will help you to set a background in each time box. You can give a solid color or an image or keep it neutral.
- Color - A few color picker is provided for different operations. You’ll find color setting options for background, digit, label and separator.
- Box Padding - Box padding will help you to set a few space inside the box. You can add some space between the digits and separators for a great look.
- Box Margin - There is a box margin available for you if you want to insert some space between the countdown element in accordance with the page.
- Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them. You can change the font of label and text field.
- Size - You can control the size of text and digits of both label and input field. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
- Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
- Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
- Text Shadow - Text shadow effect will help you to add a shadow under the text to give a 3D look. Or you can blur the effect to show your text clearly.
The advanced tab has the advanced level of settings. You can edit them if you find it necessary or just leave it just the way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.
- Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
- Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
- Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
- Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
- Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
- Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.