Back to contents

JetElements Weather widget. How to display current weather and forecast

From this tutorial, you will learn how to display weather information on your website with the JetElements Weather widget.

JetElements Weather widget is a fully customizable tool for showcasing weather conditions for any location in real-time. You can provide users with weather details, such as air temperature, precipitation and wind speed in one place using Weather widget.

Create Weather API Key

If you do not know how to generate your weather API Key, do not worry, there are very easy steps to do it.

Go to WeatherBit.io and complete a simple registration. When the registration process is finished you may sign in and fill some more info, focus on the required fields (*), then tap on the Proceed to Dashboard button.

Weather API Info

That’s it, your Weather API is generated, just copy it and insert to the WordPress Integration page.

Copy API Key

Adding and customizing weather block

1 Step — Add Your API Key

When you are sure that you created your own Weather API key and inserted it in the Elementor > JetElements Settings > Integrations > Weatherbit.io API block in the Weatherbit.io API Key field in the WP Dashboard, the weather information will be displaying correctly.

Weather widget for Elementor

2 Step — Add the Weather Widget to the Website

After that, open the Elementor page builder and find the Weather widget in the JetElements section of the panel on the left. Drag and drop the widget in an appropriate section on the page.

Weather widget for Elementor

3 Step — Customize the Widget

Now you can see the settings block of Weather widget on the left. There are Content, Style and Advanced tabs, where it is possible to customize the widget according to your needs.

4 Step — Set Up the Weather Metrics

In the Content tab, you can specify the location, choose a temperature scale (metric or imperial) and time format. In the Settings subsection, you can set whether the title, the current weather, and its details, weather forecast to show and define the number of forecast days.

Weather widget content settings

5 Step — Style Up the Weather Title and Details

In the Style tab, you can determine how a title, current weather details and forecast weather will look.

Weather widget style settings

6 Step — Choose the Widget Responsivness

You can set the responsiveness of the widget on different devices and background in the Advanced tab.

7 Step — Tap Update Button

That’s it. Click Update button and weather data will be shown on your website in an attractive and convenient form.

As you can see it is easy to enrich the content of your website with a weather element using JetElements Weather widget.