How to Use the Timer Element in DotcomPal

Adding a Timer

Follow these steps to add and customize a timer element:

1. Inserting a Timer
   • Navigate to the elements section and drag the timer element to the desired location on your page.
   • Browse through the available timer designs and select one that matches your page's style.
     
     
2. Customizing the Timer
   • Click on the timer to open the function bar.
   • Select "Edit" to open the Timer Settings.

Timer Settings

The Timer Settings have two main sections: Settings and Style.

Settings Section

1. Countdown Type
   • Fixed Time: Set the timer to count down to a specific date and time.
     • Click "Fixed Time" and select the desired date and time.
       
       
       
   • Loop: Set the timer to repeat at regular intervals.
     • Choose the loop duration (days, hours, minutes).
       
       
       
2. Display Options
   • Include Colon and Label: Add visual elements like punctuation or descriptive labels.
   • Display Units: Choose which time units (days, hours, minutes, seconds) to display.
     

Style Section

Customize the visual appearance of your timer:

1. Numbers Style
   • Font: Select from options like Space Mono, Spectral, Work Sans, and Robot Sans-serif.
   • Formatting: Apply bold, italic, or underline styles.
   • Colors: Customize the font color, background color, and colon color.
     
     
     
2. Border
   • Enable Border: Toggle the border feature.
   • Customize Border: Adjust width, style (solid, dashed, dotted), and color.
     
     
     
3. Drop Shadow and 3D Effect
   • Drop Shadow: Add a shadow effect with adjustable width, angle, and color.
   • 3D Effect: Create a three-dimensional look with adjustable intensity, angle, and color.
   • Note: You can apply either the drop shadow or the 3D effect, but not both simultaneously.
     
     
     
     
4. Labels Style
   • Customize the font style, color, and background color of your labels.
     

Once all adjustments are made, click "Save" to apply the changes.