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 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.

Adding and customizing weather block

Step 1 – First of all, make 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 for displaying weather information correctly.

Weather widget for Elementor

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

Weather widget for Elementor

Step 3 – 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.

Step 4 – 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 number of forecast days.

Weather widget content settings

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

Weather widget style settings

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

Step 7 – 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.