Clock Display

Clock Display

Welcome to the “Clock Display” documentation. Looking to integrate a clock into your website? Our block 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 block.

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.

class="" alt="">



Step 2: Add and customize Clocks

1. In this panel, you can easily add, remove, or rearrange your clocks as needed. 


class="flex justify-center items-start h-auto w-auto" alt="">



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


class="flex justify-center items-start h-auto w-auto" alt="">




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.

class="flex justify-center items-start h-auto w-auto" alt="">


  •  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.


    • class="flex justify-center items-start h-auto w-auto" alt="">



  •  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. 


    • class="flex justify-center items-start h-auto w-80 h-auto " alt="">




    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.


    class="flex justify-center items-start h-auto w-auto" alt="">



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


    class="flex justify-center items-start h-auto w-auto" alt="">



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


    class="flex justify-center items-start h-auto w-80" alt="">



    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.


    class="flex justify-center items-start h-auto w-auto" alt="">


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


    class="flex justify-center items-start h-auto w-80" alt="">




    Step 5: Choose Colors


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


    class="flex justify-center items-start h-auto w-auto" alt="">




    Step 6: Preview


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

    class="flex justify-center items-start h-auto w-auto" alt="">