Clock Display

Clock Display

Welcome to the “Clock Display” documentation. Looking to integrate a clock into your website? Our widget provides you with the tools to create a functional and visually appealing clock section that will captivate your visitors. In this guide, we'll show you how to use the editor to customize your clock widget.

Step 1 : Open The Editor
Step2 : Add And Customize Clocks
Step 3 : Adjust The Layout
Step 4 : Configure Settings
         Step 5 : Choose Colors
         Step 6 : Preview 

        



Step 1: Open the Editor
1. Go to Clock Display template.
2. Click on "Edit" after choosing your template.




Step 2: Add and customize Clocks
1. In this panel, you can easily add, remove, or rearrange your clocks as needed. 





2. You can customize each clock by selecting your current time zone or choosing a different one.






Step 3: Adjust the Layout

1. In the Layout panel, you can adjust how your layout looks and behaves. You have control over things like size, rounding, width, popup position, adding an overlay, choosing how it's displayed, and even adding animations.



  •  To switch from the section view to the popup view, just activate the popup and the closable toggle. After that, you can select its position on the page.





  •  The overlay only functions within the popup when the horizontal position is set to the middle and the vertical position is set to the center. 






    • Step 4: Configure settings

    Here, you'll handle the settings:
    1. You'll begin by managing the content, where you can decide if you want to display the header, select its position, adjust the gap between clocks and the overlay, and choose the number of items per line.





    2. In this section, you can select the style for your clock: analog, digital, or text. Afterward, you can personalize the chosen style.





    3. If you opt for the analog clock, you can adjust the border and choose whether to display numbers and minute markers.





    4. For the digital clock, you have the option to decide whether to show the popup, customize its roundness, borders, padding, and margin.
    Additionally, you can choose to display the background, dots, seconds, and select the time format.




    5. Lastly, in the "Text Clock," you can choose whether to place the content inline and select the time format and position.






    Step 5: Choose Colors

    1. Within this panel, you can select colors that match your website's design.






    Step 6: Preview

    Lastly, you can click on “Preview” to see how your clock widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



    Related Articles:
    Weather Google Maps