Animation Addons

Animation Addons

Advanced Widgets

Weather Widget Documentation

Estimated reading: 2 minutes 70 views

Deliver accurate, real-time weather updates directly on your website with our intuitive Weather Widget. It offers flexible layouts and rich customization options, allowing you to present weather information exactly as you want.

Requirement

  • Elementor (Page Builder)
  • Animations Addons (Our Plugin)

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start.

How To Activate Weather

  1. Go to your WordPress Dashboard.
  2. Click on Animation Addons.
  3. Head to the Widgets Tab.
  4. Under Advanced, toggle on Weather.
  5. Next, click on Weather Settings and paste your API key into the required field.
  6. Set the location and leave the Unit section as default, or customize it if needed.
Weather - 01
Weather - 02

Step 1: Add & Choose Layout

First, click the ‘+’ icon, type Weather in the search box, and click on it when it appears.

Weather - 03

Layout

Style: It offers two options to choose how you want to set your weather interface. Such as One and Two.

Weather - 04

Selecting ‘One’ will make your interface look like this.

Weather - 05

On the other hand, selecting ‘Two’ will change your interface to look like this. For example, I chose ‘Two’, but you can select either option based on your preference.

Weather - 06

Step 2: Personalize Display Options

You can customize the settings to your preference. If you don’t want a specific option to show, simply toggle it off.

Settings

  • Show location: I’ve set it to Show.
  • Show Feels like: I’ve set it to Show.
  • Show Weather icon:  I’ve set it to Show.
  • Show description: I’ve set it to Show.
  • Show hourly Weather: I’ve set it to Show.
  • Show Days Weather: I’ve set it to Hide, but you can choose Show if you prefer.
Weather - 07

Location Icon

Feel free to upload your own icon. I kept the default.

Feels like Text

In the Feels Like Text setting, you can enter any text you prefer. I’ve set it to Feels Like in my case.

Weather -08

Final Results

Share this Doc

Weather Widget Documentation

Or copy link

CONTENTS