The Weather widget for Elementor provide ability to stay prepared with real-time weather updates directly on your website! This widget provides accurate, location-specific forecasts so you can plan your day with confidence. From daily insights to detailed forecasts, keep visitors informed and ready for any weather.
Let’s look at each of the options in the Weather widget for Elementor below.
To use this widget, you first need to add your OpenWeather API key.
Go to Unlimited Elements in the WordPress Dashboard
Go to settings then choose integrations
Then enter the OpenWeather API Key
To get the weather API, click here.
Add Weather Widget To Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Weather”
- Hover over the widget in the search results and click install
- Add your “Weather” widget to any Elementor Page
General Settings
Country Code
Type your two digit country code.
To know your country code, Click here.
City Name
Enter the city name for which you want to display the weather.
Units
Select the unit type.
- Metric
- Imperial
Cache Time
You can set the cache time of results in minutes.
Layout Settings
Show Current Weather
Show or hide the current weather.
Show Daily Weather
Show/Hide the daily weather.
Show Hourly Weather
Show or hide the hourly weather.
Weather Icon Skin
Choose the weather icon skin.
- Outline Icons
- Glyph Icons
- Animated
Override Background
It overrides the background according to current weather.
Current Weather Settings
Show Current Weather Title
Show/Hide the current weather title.
Current Weather Title
Type text for current weather title.
Show City Name
Show or hide the city name.
Show Icon Before City Name
It will add another layer of circle on cursor.
Icon Before City Name
Choose icon to show before city name.
Show Current Weather Date
Show/Hide the current weather date.
Current Weather Date Format
Set the current weather date format.
Show Current Weather Day of the Week Full
Show the full weather of the week.
Show Current Weather Day of the Week Short
Show the short weather of the week.
Show Current Weather Icon
Show/Hide the current weather icon.
Show Current Weather Temperature
Show/Hide the current weather temperature.
Show Current Weather Feels Like Temperature
Show/Hide the current weather feels like temperature.
Show Current Weather Suffix
Show/Hide the current weather suffix.
Show Current Weather Description
Show/Hide the current weather suffix.
Daily weather Settings
Show Daily Weather Title
Show/Hide the daily weather title.
Daily Weather Title
Type text for daily weather title.
Show Daily Weather Date
Show or hide the daily weather date.
Daily Weather Date Format
Set the daily weather date format.
Show Daily Weather Day of the Week Full
Show the daily full weather of the week.
Show Daily Weather Day of the Week Short
Show the daily short weather of the week.
Show Daily Weather Icon
Show/Hide the daily weather icon.
Show Daily Weather Temperature Day
Show/Hide the daily weather temperature for day.
Show Daily Weather Temperature Evening
Show/Hide the daily weather temperature for evening.
Show Daily Weather Suffix
Show/Hide the daily weather suffix.
Show Daily Weather Description
Show/Hide the daily weather suffix.
Show Daily Weather Cloudiness
Show/Hide the daily weather cloudiness.
Show Daily Weather Wind Speed
Show/Hide the daily weather wind speed.
Show Daily Weather Humidity
Show/Hide the daily weather humidity.
Show Daily Weather Pressure
Show/Hide the daily weather pressure.
Show Daily Weather Rain
Show/Hide the daily weather rain.
Show Daily Weather Snow
Show/Hide the daily weather snow.
Show Daily Weather UV Index
Show/Hide the daily weather UV index.
Exclude Current Day
It will exclude the current day from daily weather.
Rename Days of Week
You can rename each day of the week.
Weather Widget Styling
All elements of the widget’s design can be managed using various styling choices. You have the freedom to select colors that harmonize with your website’s aesthetic. Customize the text, icons, fonts, and layout to tailor the widget’s appearance and functionality to your specific preferences.
Main Container Styling
You can set the main container padding, background color, and border radius.
Current Weather Container Styling
You can set the current weather layout, alignment, gap, typography, text color and icon color.
Daily Weather Container Styling
You can set the daily weather container spacing, layout, gap, alignment, typography, text color, and padding.
Current Weather Title Styling
You can set the current weather title typography, color, background color, padding, border, and border radius.
Daily Weather Title Styling
You can set the daily weather title typography, title color, background color, padding, border, border radius and spacing.
Weather Widget Design Examples For Elementor
Here are some live use cases for the Weather widget.
Daily weather forecast for different cities.
Hourly weather forecast for different cities.
Thank you for choosing Unlimited Elements to enhance your website’s design with the Weather Widget for Elementor. This tool offers a simple, customizable way to integrate live weather data, ensuring a more engaging experience for your users.
For further assistance with setup or customization, feel free to explore our documentation or contact our support team to ensure you get the most out of this widget.
