Elementor Weather Widget by Premium Addons is a versatile tool that enhances the functionality and visual appeal of your website. It displays up-to-date weather information for any location, with customizable options and advanced features. It’s essential for any website to provide real-time weather updates to visitors.

Check Elementor Weather 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 Weather Settings

Start by dragging & drop Elementor Weather widget into your Elementor editor.

Key Features

• General Settings.
• Current Weather.
• Hourly Forecast.
• Daily Forcast.
• Custom Icon.

General Settings

Elementor Weather widget general settings on your WordPress website with easy customization options.

Please note Custom Location requires Premium Addons PRO installed and activated on your website.

• API Key: Add your OpenWeatherMap One Call API 3.0 API.
• Location: Select between Custom Location and Current Location.
  • Custom location -> Get By for the PRO version only.
    • City Name: Add city name
    • City Coordinates: Add the city’s latitude and longitude.
  • Current Location: Use the current location.
• Unit: Select between metric or imperial units.
• Language: Select Elementor Weather Widget city name and weather description language.

Current Weather

Build Elementor Weather you desire by selecting between the current weather.

Please note that Layout 3 requires Premium Addons PRO installed and activated on your website.

• Choose Layout: Select Elementor Weather Styles between Layout 1, Layout 2, or Layout 3.
• Current Weather: Enable/Disable to show Current weather options.
  • Current Weather. ( for Layout 3 only)
  • Weather State.
  • Title: Use the default name or add a title of your choice, and use the {{city_name}} placeholder to add your city name.
• Display Options:
  • Title Alignment.
  • Additional Weather info
    • Weather Data: Select the weather data to disable.
  • Weather Alignment.
  • Icon Size.
  • Icon Spacing.
  • Spacing Between.

Hourly Forecast

Enable this option allows you to add hourly weather conditions.

• Max Number of Hours: Set a maximum number of hours to display.
• Hours to Show: Set the number of hours to show.
• Slides to Scroll: Set the number of slides to show.
• Display Arrows on Hover: Enable to make arrows disappear on hover.

Daily Forecast

Please note Both Daily Forecast and Custom Icons requires Premium Addons PRO installed and activated on your website.

Enable to show the weather daily forecast and set its options to fit your design.

• Number of Days.
• Block Alignment.
• Element Minimum Width
• Activate Tabs: Enable to show the daily forecast in tabs.
  • Date: Use this to display specific dates.
  • Date Format: Set the date format.
  • Max Number of Hours: Se a maximum number of hours to display up to 8 hours/day.
  • Weather Data: Select the weather data to preview.

Custom Icons

Enable Elementor Weather Widget Custom Icons by using either Lottie’s animation icons or uploading your own.

• Icon Type: Select the weather condition icons from the drop-down menu.
  • Lottie Icons.
  • Upload Your Own.
• Type: Select the icons display options.
  • Filled
  • Outlined

Elementor Weather Widget – Style

Title – Style

• Typography: Adjust Elementor Weather title text font settings and style it.
• Color: Pick colors for Elementor Weather title text.
• Text Shadow: Adjust time units item shadow:
  • Color
  • Blur
  • Horizontal Position
  • Vertical Position
• Background Type: Pick a background for Elementor Weather title.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for Elementor Weather title.
• Border Radius: Add radius for border corner for Elementor Weather title.
• Padding: Creates space around the Elementor Weather title, inside of any defined borders.
• Margin: Creates a space around the Elementor Weather title, outside of any defined borders.

Current Weather – Style

Adjust the Current weather style to suit your design

• Temperature
  • Typography: Adjust Elementor Weather Temperature text font settings and style it.
  • Color: Pick colors for Elementor Weather Temperature text.
• Temperature Unit
  • Font Size: Set the font size for the temperature unit.
  • Margin: Creates a space around the Elementor Weather Temperature unit, outside of any defined borders.
• Description
  • Typography: Adjust Elementor Weather description text font settings and style it.
  • Description Color: Pick colors for Elementor Weather description text.
  • Feels Like Typography: Adjust Elementor Weather Feels Like text font settings and style it.
  • Feels Like Color: Pick colors for Elementor Weather Feels Like text.
  • Icon Color: Pick colors for Elementor Weather the icon.
  • Icon Margin: Creates a space around the current weather icon, outside of any defined borders.
  • Margin: Creates a space around the Elementor Weather current weather, outside of any defined borders.
• Container
  • Box Shadow: Add a shadow around the container by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Background Type: Pick a background for the container.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for the container.
  • Border Radius: Add a radius for the border corner for the container.
  • Padding: Creates space around the container, inside of any defined borders.
  • Margin: Creates a space around the container and outside any defined borders.

Adjust the Extra Weather Data style to suit your design

• Typography: Adjust Extra Weather Data text font settings and style it.
• Color: Pick colors for Extra Weather Data.
• Icon Color: Select a color for Extra Weather Data icon used.
• Background Type: Pick a background for Extra Weather Data.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for Extra Weather Data.
• Border Radius: Add a radius for the border corner for Extra Weather Data.
• Padding: Creates space around Extra Weather Data, inside of any defined borders.
• Margin: Creates a space around Extra Weather Data, outside of any defined borders.
• Container
  • Box Shadow: Add a shadow around the container by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
  • Background Type: Pick a background for the container.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for the container.
  • Border Radius: Add a radius for the border corner for the container.
  • Padding: Creates space around the container, inside of any defined borders.
  • Margin: Creates a space around the container, outside of any defined borders.

Hourly Forecast – Style

• Hours
  • Typography: Adjust Weather Forecast Date font settings and style it.
  • Color: Pick colors for Weather Forecast Date.

• Weather Details
  • Typography: Adjust Weather Forecast Max Temperature font settings and style it.
  • Color: Pick colors for Weather Forecast Max Temperature.
  • Bottom Spacing: Set the bottom spacing.
  • Icon Color: Pick colors for forecasting icons.
  • Size: Adjust the icon size in pixels or em.

• Weather Icon
  • Icons Color: Pick colors for the forecast icon.
  • Size: Adjust the icon size in pixels or em.
  • Bottom Spacing: Set the bottom spacing.

• Item Container
  • Box Shadow: Add a shadow around the item container. Select the color and the following settings:
    • Horizontal Position.
    • Vertical Position.
    • Blur.
    • Spread.
    • Position: Outline or Inset.
  • Background Type: Pick the background for the item container.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Image: Select the image to be the item container background.
  • Border Type: Customize border settings for item containers.
  • Border Radius: Add radius for border corner for item container.
  • Padding: Creates space around the item container, inside of any defined borders.
  • Margin: Creates a space around the item container, outside of any defined borders.

• Outer Container
  • Box Shadow: Add a shadow around the outer container. Select the color and the following settings:
    • Horizontal Position.
    • Vertical Position.
    • Blur.
    • Spread.
    • Position: Outline or Inset.
  • Background Type: Pick the background for the outer container.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Image: Select the image to be the outer container background.
  • Border Type: Customize border settings for the outer container.
  • Border Radius: Add radius for border corner for outer container.
  • Padding: Creates space around the outer container, inside of any defined borders.
  • Margin: Creates a space around the outer container, outside of any defined borders.

Forecast Tabs – Style

Set the style options for forecasting tabs.

• Tabs
  • Typography: Adjust forecast tabs’ text font settings and style them.
  • Color: Pick colors for forecasting tabs.
  • Icon Color: Select a color for the forecast tabs icon used.
  • Background Type: Pick a background for forecast tabs.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for forecast tabs.
  • Border Radius: Add a radius for the border corner for forecast tabs.
  • Padding: Creates space around forecast tabs, inside of any defined borders.
  • Margin: Creates a space around forecast tabs, outside of any defined borders.
• Icon Row
  • Color: Pick colors for the forecast tabs icon.
  • Icon Size: Adjust the icon size in pixels or em.
  • Bottom Spacing: Set the bottom spacing.
  • Background Type: Pick a background for the forecast tabs icon.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for the forecast tabs icon.
  • Padding: Creates space around the forecast tabs icon, inside of any defined borders.
  • Margin: Creates a space around the forecast tabs icon, outside of any defined borders.
• Hours
  • Typography: Adjust forecast tabs’ hour text font settings and style them.
  • Color: Pick colors for forecasting tabs hour.

• Weather Details
  • Typography: Adjust forecast tabs’ weather details text font settings and style them.
  • Color: Pick colors for forecasting tabs’ weather details.
  • Background Type: Pick a background for forecast tabs’ weather details.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Border Type: Customize border settings for forecast tabs’ weather details.
  • Border Radius: Add a radius for the border corner for forecast tabs’ weather details.
  • Padding: Creates space around forecast tabs’ weather details, inside of any defined borders.
  • Margin: Creates a space around forecast tabs’ weather details, outside of any defined borders.
• Weather Icon
  • Color: Pick colors for the forecast tabs’ weather icon.
  • Size: Adjust the icon size in pixels or em.

• Notice
  • Color: Pick colors for the forecast tabs’ notice.
• Container
  • Box Shadow: Add a shadow around the forecast tabs’ container. Select the color and the following settings:
    • Horizontal Position.
    • Vertical Position.
    • Blur.
    • Spread.
    • Position: Outline or Inset.
  • Background Type: Pick the background for the forecast tabs’ container.
    • Classic Background: Color or Image background.
    • Gradient Background: Set the background using gradient colors.
  • Image: Select the image to be the forecast tabs’ container background.
  • Border Type: Customize border settings for the forecast tabs’ container.
  • Border Radius: Add radius for border corner for forecast tabs’ container.
  • Padding: Creates space around the forecast tabs’ container, inside of any defined borders.
  • Margin: Creates a space around the forecast tabs’ container, outside of any defined borders.

Carousel Arrows

• Icon Size: set the size of arrow icons for different devices. So, you can set a specific size for each screen view (Desktop, Tablet, and Mobile).

Set the Carousel arrows Style on normal and hover state

• Hourly Forecast Arrows
  • Normal/Hover: you can add a different style to both modes such as changing the color, background color, etc.
    • Color: set the color of navigation arrow icons.
    • Background Color: set the background color for the navigation arrow icons.
    • Border Type: set the border type for the navigation arrows’ background. For example, you can set the border type for the navigation arrows to None (default), Solid, Double, Dashed, and Groove.
    • Border Radius: Add radius for border corner for outer container.
• Daily Forecast Arrows
  • Normal/Hover: you can add a different style to both modes such as changing the color, background color, etc.
    • Color: set the color of navigation arrow icons.
    • Background Color: set the background color for the navigation arrow icons.
    • Border Type: set the border type for the navigation arrows’ background. For example, you can set the border type for the navigation arrows to None (default), Solid, Double, Dashed, and Groove.
    • Border Radius: Add radius for border corner for outer container.
• Hourly Arrows Padding: Creates space around the hourly forecast arrows’ container, inside of any defined borders.
• Daily Arrows Padding: Creates space around the daily forecast arrows’ container, inside of any defined borders.

Container

• Box Shadow: Add a shadow around the container. Select the color and the following settings:
  • Horizontal Position.
  • Vertical Position.
  • Blur.
  • Spread.
  • Position: Outline or Inset.
• Background Type: Pick the background for the container.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for the container.
• Border Radius: Add radius for border corner for outer container.
• Padding: Creates space around the container, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Conclusion

Elementor Weather Widget created by Premium Addons is a user-friendly and easy-to-use tool that can enhance the functionality and visual appeal of your website. It requires no technical expertise to set up and can be customized to meet your specific needs. With this widget, you can display real-time weather information in a visually engaging way, making it an excellent addition to any website looking to provide up-to-date weather updates to its visitors.

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.