How to Display the Forecast with Elementor Weather Widget?

How to Display the Forecast with Elementor Weather Widget?


Hi everyone, welcome to this tutorial. In
this video I’ll be showing you how you can display current weather and weather
forecasts on WordPress with the help of Elementor page builder. To do that you
will need an add-on for Elementor called JetElements. You can get this
add-on if you follow the link in the description. So in this video I’ll be
showing you how you can create similar designs with the help of JetElements
plugin. For this tutorial I’m using Monstroid 2 – a multi-purpose Elementor
WordPress theme. You can also learn more about this theme if you follow the link
in the description. So for now let’s head over to Elementor editor and here in
the elements panel we will need to search for a widget called “weather” if
you already have JetElements plug-in installed you’re gonna find this widget
right away. Or you can first choose the type of the layout you want to use. I’ll
go with the three column layout and then I will drop the weather module here in
the middle. So this is what you’re starting with. But you will have a lot
more options to choose from and to add to your module. So the first thing you
can choose is the location and the units you want to use. Metric is the Celsius
and imperial is Fahrenheit. Now in the settings tab you can choose
whether you want to show the country name and whether you want to show current
weather, current weather details, and the weather forecast. Let’s enable all of
those so you can see what options this widget gives you. So the number of
forecast days can be set up to five and I’ll go with the maximum number. So we
have added all the information we wanted but it doesn’t really look that nice.
What I want to do now is to style this module. Let’s start with the background
for this widget, like kind of a wrapper for this weather module. So first of all,
I’ll add a padding, then I’ll go to the background tab and choose the background type as classic and add an image. Press insert media and now I’ve got my
background. Here for this particular column I’ll set the position the
attachment, no-repeat and the size will be cover. Like so and also set the
border radius to five. Okay we’re done with the style of a
wrapper. Now let’s style the content that we have inside this module. So first goes
title. Let’s change the title color to white. You’ve also got the typography
settings, but I’ll go with the default typography settings. Here you can set the
alignment, margin, padding, the border type and the text shadow. Here we have
settings for the current weather like you can increase the margin, the padding,
the border type, the font color, and the typography settings. I’ll set the color
of all the elements to white and increase the padding on the right
and on the left a little bit so the elements seem to be to the closer to
each other. Then let’s proceed to the details of the weather. There I would
increase the margin at the top to 30. What I can also do is to set a divider
between the current weather information and the weather details. I can do that
setting the border type to solid and setting the border width at the top to 1
and choosing the color as white with opacity 1.5. And we can add some space by increasing
the padding at the top to 20 now the items will be white as well and you can
increase the gap between the rows of items and you can also increase the size
of the icons. Like so, it looks a little better now.
Let’s go to the weather forecast. First of all let’s set the color of the
items to white as well. You can also enable a divider which will
kind of split the different days visually. Like so, now I will increase the padding
of each item and add a border at the top so it kind of splits the current weather
details from the weather forecast. Now I’ll also increase the padding at the top and
set the color to white and reduce the opacity to 1.5 and we’re done with the
style settings for the weather module. Here we go, now you can display weather in
a really nice way on your WordPress website and you can add this module with
the help of Elementor page builder and JetElements plug-in. If you liked this
video, leave a thumbs up, subscribe to our Channel and check the links in the
description. Go ahead, check JetElements plugin out and leave your
thoughts in the comments. Thank you for watching

2 thoughts on “How to Display the Forecast with Elementor Weather Widget?”

Leave a Reply

Your email address will not be published. Required fields are marked *