Daily Forecast – a widget for the weather forecast for the next 5 days. It is based on OpenWeatherMap API and works with a free API key. It allows you to add meteorological data for the specified city.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content
On the Content tab of the Daily forecast widget, you can manage the basic forecast settings like location, language, units, etc.
Layout
- Auto location – the toggle to enable/disable auto location detection based on the IP address.
- Country – select the country from the list or which you want to display a weather forecast.
- City – enter the city name for which you want to display the weather forecast. The city must belong to the country specified in the Сountry field. Please note if the name is entered incorrectly, the data will not be displayed.
- Language – select the language for the weather block.
- Timezone – select a timezone in order to display the weather for a specific location.
- Units – select units for temperature. The available units are Kelvin, Celsius, Fahrenheit.
- Round – the toggle to enable/disable rounding values of all weather characteristics.
- Floating panel – the toggle to enable/disable a panel with weather characteristic icons for each column.
Daily forecast
Scrolling items
Specify the number of columns to scroll through when navigating on different devices.
Time format
Select the time format you need to display in the forecast: AM/PM, 24 Hour, WordPress format. By default, the WordPress format is installed which can be configured via Dashboard>Settings>Time Format.
Style info
Select the display style of the weather block: List hourly, Tabs hourly.
City
The toggle to enable/disable the display of city name with the settings:
- Location – manage the text alignment (left, center, right, space around, space between) on different devices.
- City Caption – a text field to enter the caption
- City Icon – select the icon from the Icon library or upload your own icon in SVG format.
Country
The toggle to enable/disable the display of country name with the settings:
- Location – manage the text alignment (left, center, right, space around, space between) on different devices.
- City Caption – a text field to enter the caption
- City Icon – select the icon from the Icon library or upload your own icon in SVG format.
Population
The toggle to enable/disable the display of Population with the settings:
- Location – manage the text alignment (left, center, right, space around, space between) on different devices.
- City Caption – a text field to enter the caption
- City Icon – select the icon from the Icon library or upload your own icon in SVG format.
Weather data
An option that allows you to add the necessary weather characteristics for display in the forecast block.
To add a new element, click “Add Item” and fill in all the necessary fields.
- Weather info – select weather a characteristic from the list to be displayed in the block: Date, Temperature, Feels like, Icon, Description, Pressure, Humidity, Cloudy, Wind speed, Wind direction
- Description icon – the toggle to enable/disable the icon display. When the option is enabled, the icon display position can also be selected.
- Width – specify the width of the current field in pixels or percentages for different devices.
- Description caption – enter the caption text for the current field.
- Caption position – select the position to display the caption text: Left, Top, Right, Bottom.
- Show in floating panel –
Previous button icon
Select the icon for previous button navigation from the Icon library or upload your own icon in SVG format.
Next button icon
Select the icon for the next button navigation from the Icon library or upload your own icon in SVG format.
Style tab
On the Daily forecast widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.
Daily forecast
- Column Width – specify the width of the current block in different units(%, PX) for all devices or separately for desktops, tablets, or mobiles.
- Row height – specify the height of the current block in different units(%, PX) for all devices or separately for desktops, tablets, or mobiles.
Country/Population/City
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon size – specify the icon size using the slider for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The item style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Icon color – specify the icon color and opacity using the color picker.
- Text Shadow – the setting creates a shadow from the current text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Day and Time/Description/Temp/Feels like/Pressure/Humidity/Cloudy/Wind speed/Wind direction/
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon size – specify the icon size using the slider for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text align – manage the text alignment (left, center, right).
NORMAL/HOVER
The item style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Icon color – specify the icon color and opacity using the color picker.
- Text Shadow – the setting creates a shadow from the current text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Icon
- Icon Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Icon Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Image size – specify the image size using the slider for desktops, tablets, or phones.
- Icon size – specify the icon size using the slider for desktops, tablets, or phones.
- Image Alignment – manage the text alignment (left, center, right).
NORMAL/HOVER
The item style settings for different states.
- Color – specify the icon color and opacity using the color picker.
- CSS Filter – the option allows you to add various CSS filters for the image box as Blur, Brightness, Contrast, Saturation, Hue.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Icon Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Caption/Tab navigation item/
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The item style settings for different states.
- Color – specify the text color and opacity using the color picker.
- Icon color – specify the icon color and opacity using the color picker.
- Text Shadow – the setting creates a shadow from the current text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Floating Panel Box/Daily Buttons
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The item style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Floating Panel Item
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Size icon– specify the icon size using the slider for desktops, tablets, or phones.
- Space between items – the setting allows managing the spacing between items for different devices.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
NORMAL/HOVER
The item style settings for different states.
- Color icon – specify the icon color and opacity using the color picker.
- Text Shadow – the setting creates a shadow from the current text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Tab navigation
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Tab space between – the setting allows managing the spacing between tabs for different devices.
- Icon size – specify the icon size using the slider for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
- Text align – manage the text alignment (left, center, right).
NORMAL/HOVER
The item style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
