Display multiple time zones on your WordPress website with Elementor World Clock widget by Premium Addons. It has customizable design options, easy-to-use interface, and is perfect for businesses with global customers. It seamlessly integrates with Elementor’s drag and drop interface, enhancing website functionality.

Click here to check Elementor World Clock Widget demo page.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Make sure that this widget is enabled so you can find it in the Elementor editor.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Elementor World Clock Settings

Start by dragging & drop Elementor World Clock widget into your Elementor editor.

Key Features

• Clock.
• Additional Settings.

Clock

Elementor World Clock widget displays multiple time zones on your WordPress website with easy customization options.

• Timezone: The first option is the timezone. You can choose between.
  • Current Timezone: Select if you want to use your current Timezone.
  • Custom Timezone: Select any timezone you want.
• Layout
  • Digital
    • Style 1, and Style 2 are free layouts.
    • Style 3 is a Pro layout.
  • Analog
    • Style 1, and Style 2 are free layouts.
    • Style 3, and Style 4 are Pro layouts.
• Clock Hand Style: Select the clock’s hand style from style 1 to style 6.
• Time Format: Select between 24 Hours and 12 Hours. (for Digital layout only)
• Show Clock: Enable to show clock.
• Show Clock Faces: Enable to show Clock faces. (for Analog layout only)
• Show Clock Numbers: Enable to show Clock numbers. (for Analog layout only)
  • Clock Number Spacing.
• Show Meridiem: Enable to show Meridiem. (for Analog layout only)
• Show Seconds: Enable to show clock. (for Digital layout only)
• Show GMT Offset: Enable to show GMT offset.
• Clock Size: Enter the clock size.
• Unit Spacing: Select the spacing between units to fit your design.

Additional Settings

Build the World clock you desire by selecting between the setting options.

• Title: Select Elementor World Clock title.
• Show Date: Enable/Disable show the date.
• Date Format: Select between four date formats.
• Units Display: Select between vertical or horizontal units’ display.
• Display: Select the preview of the date and the clock to be inline or as a block.
• Clock Info Order: Display the order of the clock info.
• Clock Alignment: Select the alignment of Elementor World Clock.
• Info Alignment: Select the alignment of the world clock title.
• Spacing: Adjust the spacing between world clock info.
  

Style

• Time Units Style.
• Clock Style.
• Clock Info Style.

Time Units Style

Style Elementor World Clock time units Hours, Minutes & Seconds.

• Color: Pick colors for world clock time units for hours, minutes & seconds.
• Thickness.
• Length.
• Position.
• Rounder.
  • Size.
  • Color.
  • Border Color.

• Faces
  • Clock Face Color.
  • Clock Faces Thickness.
  • Clock Faces Length.

Clock

• Color: Set the color of the clock.
• Box Shadow: Add a shadow around Elementor World Clock.
• Background Type: Pick a background for Elementor World Clock.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for Elementor Elementor World Clock.

Clock Info Style

• Date
  • Typography: Adjust Elementor World Clock date text font settings and style it.
  • Color: Select a text color for Elementor World Clock date.
• Info Container
  • Background Type: Pick the background for Elementor World Clock date.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Box Shadow: Set a shadow for the info container and adjust its settings.
  • Border Type: Customize border settings for Elementor World Clock info container.
  • Border Radius: Add radius for border corner for Elementor World Clock info container.
  • Padding: Set padding inside Elementor World Clock info container.
  • Margin: Creates a space around the info container buttons in Elementor World Clock Widget, outside any defined borders.

Clock Numbers

• Typography: Adjust Elementor World Clock numbers text font settings and style it.
• Text Shadow: Adjust clock numbers shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Color: Select clock numbers color.
• Background Color: Select the clock numbers color.
• Border Type: Set a border type for clock numbers. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Set the border radius for clock numbers.
• Size: Set the clock number size.

Conclusion

A world clock widget is useful for people who work across different time zones or have friends and family in different parts of the world. It’s easy to install on your WordPress website with Elementor and Premium Addons, and you can customize it to display the time zones you need and choose from different designs. With a world clock widget, you can manage your time and stay connected with people around the world.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.