Synopter - Current Weather for Elementor

The Synopter is easy-to-use weather forecasts WordPress plugin. It is based on OpenWeatherMap API and works with a free API key which involves some limitation, but the service provides for paid plans to get expanded opportunities. The plugin allows you to add the up-to-date meteorological data for a specific city via the Elementor widget. Just select your language, timezone and location to get the weather box on your WordPress site.

The widget comes with a fully customizable layout to get the most informative weather block to suit your needs. It includes current weather for a certain location. You can manage the display of different weather characteristics and choose icons for each of them from the library or upload your own icon in SVG format. It doesn’t matter what kind of site you have, even a small weather block can be a useful element for your visitors. This tool can be especially practical for travel agencies, weather stations, when booking or planning events, or for any companies whose activities may depend on weather conditions.

To better understand the capabilities of the widget, we included 5 templates to the package. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.

The widget has straightforward style settings that allow you to manage the display of each of the elements according to your needs. Change the color, typography, text shadow, background color, border, margins, and paddings for weather characteristics. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.

Synopter for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

Features of the Synopter plugin for Elementor

• Perfect for Elementor 2.5 and higher
• Weather characteristics display control
• Supports different languages
• Icon management
• Flexible style settings
• Responsiveness settings
• Works well with all WordPress themes built on Elementor
• Totally Seo Friendly
• Included pot file for quick translation on any language
• Perfect for RTL direction
• Fast and smooth installing
• Tested and compatible up to WordPress 5+
• Lightweight and Fast
• All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
• Easy to use and customize with modern User Interface
• Installation Guide and detailed Users Manual
• Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

STEP 2

Go to Plugins > Add New

STEP 3

Click Upload Plugin Button

STEP 5

Choose archive with Plugin and press Install Now Button

STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Installation the plugin through FTP or build-in File manager

STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

STEP 2

Upload archive with plugin to /wp-content/plugins

STEP 3

On next step Unzip the archive with the plugin

STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

The Synopter widget comes with a fully customizable layout to get the most informative weather block to suit your needs. It includes current weather for a certain location. You can manage the display of different weather characteristics and choose icons for each of them from the library or upload your own icon in SVG format. It doesn’t matter what kind of site you have, even a small weather block can be a useful element for your visitors. The Synopter widget can be especially practical for travel agencies, weather stations, when booking or planning events, or for any companies whose activities may depend on weather conditions.

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 to start using the Synopter widget. You will find the widget at the end of the general section.

Drag the widget to a page using the Elementor 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
• Style
• Advanced

Content Tab

On the Content tab of the Synopter widget, you can manage different features of Street View and map display settings.

Layout settings

• Country – select the country from the list which for you want to display a weather forecast.
• City – enter the city name which for you want to display the weather forecast. 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.

Current weather

Location Info

• Location – choose how to display the location info for different devices. The available positions: Left, Center, Right, Space Around, Space between
• Reflect Location – the toggle to enable/disable the reflex display of location information.
• City – the toggle to enable/disable the display of city name with the settings:
  • City Caption – a text field to enter the caption
  • City Icon – select the icon from the Icon library or upload own icon in SVG format
• Country – the toggle to enable/disable the display of country name with the settings:
  • Country Caption – a text field to enter the caption
  • Country Icon – select the icon from the Icon library or upload own icon in SVG format
• Population – the toggle to enable/disable the display of Population with the settings:
  • Population Caption – a text field to enter the caption
  • Population Icon – select the icon from the Icon library or upload own icon in SVG format

Degrees

• Degrees – degrees alignment works for “Temperature” and “Feels like” options when the width less than 100%. It can be set for different devices.
• Temperature – the toggle to enable/disable the display of temperature with the settings:
  • Temperature Caption – a text field to enter the caption
  • Temperature Icon – select the icon from the Icon library or upload own icon in SVG format
• Feels like – the toggle to enable/disable the display of Feels like temperature with the settings:
  • Feels like caption – a text field to enter the caption
  • Feels like Icon – select the icon from the Icon library or upload own icon in SVG format

Icon

• Icon – the toggle to enable/disable the display of current weather icon with the setting:
  • Icon style – select one of the available icon styles.
• Description – the toggle to enable/disable the text description of the current weather.

Weather Conditions

• Info – an alignment option for info block of Weather Conditions. The alignment can be set for different devices.
• Reflect Weather Conditions – the toggle to enable/disable the reflect display of the Weather Conditions info block.
• Pressure – the toggle to enable/disable the display of pressure with the settings:
  • Pressure caption – a text field to enter the caption
  • Pressure icon – select the icon from the Icon library or upload own icon in SVG format
• Humidity – the toggle to enable/disable the display of humidity with the settings:
  • Humidity caption – a text field to enter the caption
  • Humidity icon – select the icon from the Icon library or upload own icon in SVG format
• Cloudy – the toggle to enable/disable the display of the percentage of clouds with the settings:
  • Cloudy caption – a text field to enter the caption
  • Cloudy icon – select the icon from the Icon library or upload own icon in SVG format
• Wind speed – the toggle to enable/disable the display of wind speed with the settings:
  • Wind speed caption – a text field to enter the caption
  • Wind speed icon – select the icon from the Icon library or upload own icon in SVG format
• Wind direction – the toggle to enable/disable the display of wind direction with the settings:
  • Wind direction caption – a text field to enter the caption
  • Wind direction icon – select the icon from the Icon library or upload own icon in SVG format

Style tab

On the Synopter widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

Current weather

The current tab contains the Reflect rows setting, which allows you to display the data of the Synopter widget in the opposite location.

City

Display style settings for the weather section

• Width – specify the width of the current block in different units(%, PX) for all devices or separately for desktops, tablets, or mobiles.
• Margin – the setting allows managing the margin of the current block in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.
• Padding – the setting allows managing the padding of the current block in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.
• Color– specify the font color and opacity for the text of the current block using the color picker.
• Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
• Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
• Text Shadow – the setting creates a shadow from the 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.
• 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 STYLES

• Icon Padding – the setting allows managing the padding of the current block in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.
• Icon Margin – the setting allows managing the margin of the icon in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.
• Color– specify the font color and opacity of the icon using the color picker.
• Background Type – the setting changes the background of the icon. You can choose a color, gradient, or background image.
• Icon Border radius – specify the border radius of the icon block in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.

Country

The current tab contains the Display style settings for the Country section on the weather block. The current tab is available when the Country option is enabled in the Content.

Population

The current tab contains the Display style settings for the Population section on the weather block. The current tab is available when the Population option is enabled in the Content.

Temperature

The current tab contains the Display style settings for the Temperature section on the weather block. The current tab is available when the Temperature option is enabled in the Content.

Feels like

The current tab contains the Display style settings for the “Feels like” section on the weather block. The current tab is available when the Feels like option is enabled in the Content.

Weather Icon

• Image/Temperature Width – specify the width of the block, which includes the weather icon and temperature, for all devices or separately for desktops, tablets, or mobiles.
• Reflect weather – the option allows you to display the block, which includes the weather icon and temperature, in the opposite location.
• Width – specify the width of the weather icon in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.
• Height – specify the height of the weather icon in different units(px, em, %) 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 STYLES

• Icon Padding – the setting allows managing the padding of the current block in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.
• Icon Margin – the setting allows managing the margin of the icon in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.
• Color– specify the font color and opacity of the icon using the color picker.
• CSS Filters – the option allows you to add various CSS filters for the icon as Blur, Brightness, Contrast, Saturation, Hue.
• Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
• Background Type – the setting changes the background of the icon. You can choose a color, gradient, or background image.
• Icon Border radius – specify the border radius of the icon block in different units(px, em, %) for all devices or separately for desktops, tablets, or mobiles.

Weather Description

The current tab contains the Display style settings for the “Weather Description” section on the weather block. The current tab is available when the Weather Description option is enabled in the Content.

Pressure

The current tab contains the Display style settings for the Pressure section on the weather block. The current tab is available when the Pressure option is enabled in the Content.

Humidity

The current tab contains the Display style settings for the Humidity section on the weather block. The current tab is available when the Humidity option is enabled in the Content.

Cloudy

The current tab contains the Display style settings for the Humidity section on the weather block. The current tab is available when the Humidity option is enabled in the Content.

Cloudy

The current tab contains the Display style settings for the Cloudy section on the weather block. The current tab is available when the Cloudy option is enabled in the Content.

Wind speed

The current tab contains the Display style settings for the “Wind speed” section on the weather block. The current tab is available when the Wind speed option is enabled in the Content.

Wind direction

The current tab contains the Display style settings for the “Wind direction” section on the weather block. The current tab is available when the Wind direction option is enabled in the Content.

Advanced Tab

The settings in the advanced tab Synopter widget allow 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.

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.