Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Weather Widget for Elementor Live weather on your page, from your own OpenWeather key

The Weather Widget is an Elementor OpenWeather widget that shows live weather on any page: the current weather, an Elementor hourly weather row and a four-day Elementor weather forecast. Pick a rotating one-line style or a blue card, show the temperature, feels like, icon and location, and style every part. It is free. You need your own OpenWeather API key.

Try it free See the live demos
  • Free widget, OpenWeather key needed
  • Two styles
  • Hourly and 4-day forecast
  • Cached for 3 hours

Classic widget · Elementor 3 and 4Updated

Live demos

Live weather, four ways, in a page

Four places a weather block belongs on a real site: a travel guide, a ferry notice, a surf school and a resort header. The cities and numbers are samples, so nothing here calls the OpenWeather API.

Halden TravelTripsWeatherGuides
Destination guide

Valmora in October

Wednesday
October 14, 2026
29°C
clear sky
Valmora

Warm days and calm water. Most beach clubs stay open until the end of the month. Pack a light jacket for the evenings.

See the Valmora trips
Travel guides

Elementor current weather on a destination page

A destination guide for a seaside town. Under the heading, one block shows the weekday and date, then slides them out and brings in the sun icon, 29 degrees, the description and the city. The loop repeats every ten seconds.

Watch the block change

In the panel, set Style to One, Animation Direction to Left to Right, Animation Duration to 10 and Show Location to Show.

Kestrel Bay FerriesRoutesTimetableNotices
Service notice

Evening crossings may be wet

Rain is expected after six. The 6:00 and 9:00 sailings run as planned. Passengers on the open deck should bring a coat.

View the timetable
Kestrel Bay
29°C
light rain
06:00 PM
29 °C
09:00 PM
28 °C
Service notices

Hourly weather on a ferry notice

A service notice from a ferry company. A blue card sits beside the text with the city, 29 degrees, light rain and the weather for the evening sailings.

Read the evening hours

In the panel, set Style to Two, Show Hourly Weather to Show, Show Feels Like to Hide and Show Weather Icon to Show.

Port Linden Surf SchoolLessonsForecastShop
Lessons this week

Mornings are warm and clear

Beginner lessons run at 8:00 and 10:30. The weekend turns cooler, with rain on Friday, so book early.

Book a lesson
Port Linden
29°C
Feels Like 33 °C
few clouds
Today
31 °C23 °C
Thursday
30 °C22 °C
Friday
26 °C21 °C
Saturday
27 °C20 °C
Outdoor and tourism sites

Elementor weather forecast for the week

The lessons page of a surf school. The card shows today and a four-day outlook, each row with the day, an icon, a high and a low, plus a feels like line.

Compare the highs and lows

In the panel, set Style to Two, Show Days Weather to Show, Feels Like Text to Feels Like and Show Description to Show.

Oakhaven ResortRoomsSpaWeather
Wednesday
October 14, 2026
22°C
scattered clouds
Oakhaven
Mountain weekends

Ten minutes from the lift

Check the weather, pack for the trail or the spa, then book a room for the weekend.

Book a room
Hotels and resorts

A weather bar under the menu

A slim green bar under the menu of a mountain resort. The date drops in from the top, then the weather replaces it, on an eight second loop.

Watch the date drop in

In the panel, set Style to One, Animation Direction to Top to Bottom, Animation Duration to 8 and Alignment to Left.

Features

Key features of Weather Widget

Every option below is a setting in the Elementor panel or the dashboard.

Live OpenWeather data

The widget reads the current weather and the forecast from the OpenWeather API with your own key. It shows the temperature, a weather icon and a description, so you get Elementor live weather without code.

Set up once

Add the Elementor weather API key, the city and the unit in the Animation Addons dashboard under Weather Settings. Every Weather widget on the site uses them.

Two styles

Choose Style One, a rotating block, or Two, a blue card. Style Two has a rounded card with padding you can restyle.

Rotating motion

In Style One the date and the weather slide in turn. Set the Animation Direction and the Animation Duration in seconds.

Show or hide parts

Switch Show Location, Show Feels Like, Show Weather Icon and Show Description on or off. Change the Location Icon and the Feels Like Text.

Hourly forecast

In Style Two, turn on Show Hourly Weather for an Elementor hourly weather row of up to four time slots of the current day, each with an icon and a temperature.

Four-day outlook

Turn on Show Days Weather for an Elementor weather forecast of four rows with the day, an icon, a high and a low.

Cached for 3 hours

The weather data is stored for three hours, so visitors do not trigger a new API request on every page view.

Step by step

How to add weather to Elementor

Six steps. The bold names are the labels in the Elementor panel.

  1. Create a free OpenWeather account and copy your API key.

  2. Install the Animation Addons Elementor weather plugin from WordPress.org. Open Animation Addons, then the Widgets tab, turn on Weather and open Weather Settings.

  3. Paste the API key, set the location and choose the unit, then save.

  4. In Elementor, drag the Weather widget onto the page.

  5. Choose the Style, then switch Show Location, Show Feels Like, Show Hourly Weather and Show Days Weather as you need.

  6. Style the colors, spacing and symbols in the Style tab, and check the page in the editor.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about Weather Widget

How to add weather to Elementor?

Add your OpenWeather API key in the Animation Addons dashboard, then drag the Weather widget onto the page and choose a Style.

Is there a free Elementor weather widget?

Yes. The Weather Widget ships in the free Animation Addons for Elementor plugin on WordPress.org and works with Elementor Free. The data comes from OpenWeather, which needs its own API key.

Do I need an Elementor weather API key?

Yes. The widget is free, but it gets its data from OpenWeather, so you need your own API key. Without one the widget shows nothing on the live site.

Why is my Elementor weather widget not showing?

Check that the OpenWeather API key and the city are saved in Weather Settings. Without a key the widget shows nothing. A new key can also take a short while to work on OpenWeather.

Where do I set the Elementor weather location?

In the Animation Addons dashboard, under Weather Settings. The city and unit apply to every Weather widget on the site.

Can I show different cities on one page?

No. The widget uses the one location saved in Weather Settings, so each Weather widget on the site shows the same city.

Can I add an Elementor hourly weather forecast?

Yes, in Style Two. Show Hourly Weather lists up to four slots for today. Show Days Weather adds a four-day Elementor weather forecast with a high and a low.

How often does the live weather update?

The data is cached for three hours. A visitor sees the latest saved reading, and a new request is made after the cache expires.

Which plugin adds Elementor current weather?

Animation Addons for Elementor. Its free Weather widget shows the current weather from OpenWeather as an Elementor weather plugin that needs no code.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets and it works on the same page as atomic elements.

Animation Addons Pro · Elementor 4

Weather, in your design

The Weather Widget: live OpenWeather data in two styles, styled in Elementor.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license