The Frontis Countdown block lets you add a timer that counts down to a date or event. It’s a great way to build excitement for an upcoming event, product launch, or limited-time offer.

Adding Frontis Countdown Block 

To insert the countdown block, navigate to the post or page where you wish to include it. Next, tap the (+) plus icon located at the upper left corner of the display

The Frontis menu bar interface will appear for you. Search for the countdown block in the search box or select it from the menu bar.

After inserting the countdown  blocks, follow the steps below;

• Click on the Document Overview button, and you will be able to see the blocks list view on the right side.
• Click on the block; all the control tabs will show here (Basic, Style, Extra).

Basic section

• Presets Style: The presets style refers to a pre-created countdown section in this context. You can modify or personalize the countdown section with a simple click. We offer three presets. You can choose any one of them.
• Time and Date: The time and date feature in the countdown section lets you set exactly when the timer should end. Just pick a date and time, and the countdown will run until then.
• Toggle/switcher: In the General section, you’ll see switchers like Show Days, Show Hours, Show Minutes, and Show Seconds. Simply enable any switch to display that element in the countdown.

Layout

• Layout type: This feature lets you choose two types of layout, flex and grid. You can choose any one according to your needs.
• Settings. You can align the countdown to the left, right, or center. It also lets you customize the item gap here.
• Grid: After selecting the grid option, you’ll see the item gap settings. You can also customize the item gap here.
• Labels: The labels feature in the countdown block lets you display text like Days, Hours, Minutes, and Seconds below each countdown number. 
• Flex: The Flex in the countdown controls how the countdown items (days, hours) line up.  You can turn them on or off as needed.
• Separator: The separator toggle lets you show or hide the separator between the countdown items. After enabling the toggle, the separator section will appear. Here you can change the type (colon, line, slash, or custom) of separators.

Style section

Item: This section allows you to customize the item size according to your work needs. You can add a border around the countdown area and customize border color, border style (solid, dashed, dotted, double, groove, outset, and ridge), and border radius. To remove the border, simply choose the ‘None’ option. 

Style > Digit

• Height and weight: Here, you can adjust the width and height of the countdown’s digits.
• Alignment: This feature lets you customize both vertical and horizontal alignment, with options like left, center, and right.
• Typography: In this section, you can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Background Color: The border feature lets you change the color of your Background.  
• Single color: The single color feature allows you to customize the color of each countdown digit, days, hours, minutes, and seconds. Just turn on the Single Color toggle and set the colors as needed.
• Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.
• Border: The border feature allows you to add a border around the countdown and customize its style, color, thickness (stroke), and corner roundness (radius) to match your design

Style >Label

• Height and Width: You can adjust the size of the countdown digits by setting their height and width.
• Alignment: This feature lets you set both vertical and horizontal alignment, with options like left, center, and right.
• Typography: You can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Background Color: This feature lets you change the background color of the countdown.
• Margin: Margin controls the space around the countdown. You can add margin to all sides or adjust each side separately. Click the link icon to lock or unlock sides for individual control.
• Border: You can add a border and customize its style, color, stroke (thickness), and radius (corner roundness).

Style > Separator

• Separator color:  This feature allows you to change the separator color.  
• Typography: Here, you can change the font family, font size, font weight, font style, text transform, text decoration, letter spacing, and line height.
• Hz Spacing: This setting changes the horizontal gap between Days, Hours, Minutes, and Seconds.
• Vr Spacing: This setting controls the top-to-bottom gap in your countdown layout.

Extra Section

Z-Index: Consider the z-index as layers of sheets on a table. The greater the z-index, the more “above” the element appears. Therefore, if two elements intersect, the one with the greater z-index will be displayed in front.

However, it functions only when the element is positioned (relative, absolute, fixed, or sticky). Without it, z-index has no effect. 

Overflow section: The Overflow feature in the Advanced section of Frontis Blocks controls how extra content behaves when it goes beyond the block’s size. The overflow property determines the action to take in this scenario.

Values of overflow:

• Visible: The visible overflow value shows all content, even if it goes outside the box. It won’t be hidden or cut off, and no scrollbars will appear. 
• Hidden: The hidden overflow value hides any content that goes outside the box. It gets cut off, and no scrollbars appear, so users can’t see the extra content.
• Scroll: The scroll overflow value always shows scrollbars. If the content is too big, you can scroll to see it. Even if there’s no extra content, scrollbars still appear.
• Auto: The auto overflow value adds scrollbars only when needed. If the content fits inside the box, no scrollbars show. If it overflows, scrollbars appear automatically.
• Clip: The clip overflow value hides any content that overflows the box without showing scrollbars. The extra content is simply cut off and cannot be seen or scrolled.

Padding: Padding allows you to add spaces around an object to increase the inner area. You can also add space on a single side with this feature. Click on the Link icon and add or reduce the padding on any side you want.

Margin: Margin enables the adjustment of an object’s placement on the canvas. With this feature, you can add a margin around an object or a single side. Click on the Link icon and add or reduce the Margin on any side you want.

Border and Shadow: You can place a border around the entire area, and you can adjust the border color and border radius using this option. This option allows you to apply a box shadow to the countdown block.

Responsive Control: In this section, you will get 3 switches (Hide on Desktop, Hide on Tablet, Hide on Mobile). These switches allow you to show or hide the section on various devices.

Custom CSS: If you are an expert or have coding knowledge, you can add custom CSS in this section to make it responsive.