Weather Tabs – Location Weather Docs

The Weather Tabs block allows you to display weather information organized into multiple tabs. This block offers 2 pre-designed templates that you can choose from to present current weather and forecasts in a structured, tabbed interface.

Weather Tabs Block – Key Features

Tab-Based Interface: The block organizes different weather data into a clean, tabbed layout.
Space-Saving Design: It presents multiple weather views (e.g., current weather, forecast) in a single compact space, which is ideal for reducing clutter on a page.
Interactive Forecasts: Users can interact with the tabs to switch between different weather views, such as daily or hourly forecasts.
Customization: The block allows for customization of the tabs and the data displayed within, enabling a tailored user experience.

Using the Weather Tabs Block

Go to any WordPress page or post you’re editing.
Click the ‘+’ button to add a new block.
Search for “Weather Tabs” or find it under “LOCATION WEATHER.”
Click it to add it to your page and pick a starting tab design (e.g., Template One, Template Two, etc.).

You can instantly see the live Preview of your customization. Once you’re happy with the design, click Publish or Update.

Let us explore the Weather Tabs Block

Tabs Templates – General Settings

This section allows you to select from various pre-designed templates for the Weather Tabs block. This provides a quick and easy way to change the overall layout and design of your weather tabs to fit your website’s design.

Select a Template: A gallery of templates is shown, from which you can choose one to apply to your weather tabs.
Custom Weather Search: A toggle to enable a search bar on the front end, allowing users to search for a location and view its weather forecast in a tabbed format.

Tabs Templates – Style Settings

This section gives you comprehensive control over the visual appearance of the Weather Tabs block, including its typography, colors, and layout. These settings allow you to style the block to perfectly match your website’s design.

Override Specific with Global: A toggle that enables overriding the block’s individual style settings with global styles, providing consistency across your site without manual adjustments.
Font Family: A dropdown selector for choosing the typeface used throughout the tabs, with “Default” inheriting from the theme for easy alignment.
Primary Text Color: A color picker to define the main text color (e.g., tab labels or temperatures), with an eyedropper tool for precise matching.
Secondary Text Color: A color picker for accent text (e.g., descriptions or timestamps), allowing subtle differentiation in the interface.
Background Type: A segmented control to select the background style—solid, gradient, or image—for the overall tabs container.
Background Color: A color picker (or gradient editor) that activates based on Background Type, setting the fill for solid or gradient backgrounds.
Border: Controls for border width, style (solid, dashed), and color, enabling outlined edges for a defined look.
Border Radius: Four individual sliders (top-left, top-right, bottom-right, bottom-left) to round corners independently, with a global link option for uniform values.
Enable Box Shadow: A toggle to add a subtle drop shadow to the tabs container, enhancing depth and visual separation from the page.
Content Padding: Four sliders for top, right, bottom, and left padding inside the tabs, controlling internal spacing for content like weather icons or forecasts.
Max Width: A numeric input (with pixel lock) to constrain the block’s maximum width, useful for responsive designs on wider screens.

Set Location Settings

This section lets you define which location’s weather data will be displayed in your weather view. You can choose a fixed location or let the system automatically detect the visitor’s location for real-time accuracy. For more details, visit this link.

Measurement Units Settings

This section allows you to customize the units used to display weather data in the Location Weather block. You can choose the standard units that best suit your target audience and location. For more details, visit this link.

Regional Preferences

This section allows you to set the display format for the weather location name, time, and date, as well as the time zone and language. For more details, visit this link.

Current Weather

This section allows you to customize the specific weather information you want to display, such as the temperature, weather conditions, and wind speed. You can toggle these elements on or off to create a simple or detailed weather display. For more details, visit this link.

Additional Data

This section gives you complete control over the supplemental weather information you want to display in your block. You can choose from various data points and customize their layout to provide a detailed weather overview for your visitors. For more details, visit this link.

Forecast Data

This section allows you to enable and configure the display of weather forecast information. You can choose what forecast data to show, how it is displayed, and for what time period. For more details, visit this link.

Weather Map Preferences

This block section is designed for configuring how weather information is displayed on a map. It allows you to customize the data source, visual style, and interactive behavior of the weather map. When you enable the Weather Map, a new tab will be added as “Weather Map”. For more details, visit this link.

Control Layers

This block section is designed for controlling which weather data layers are available to be displayed on the map. It allows you to enable or disable specific weather data types and set a default layer. For more details, visit this link.

Popup Weather Data

This block section allows you to control which pieces of weather data are displayed in the popup when a user interacts with the map. You can customize the information shown for a specific location by enabling or disabling various data options. For more details, visit this link.

Tabs Preferences – General Settings

This section allows you to customize the content and behavior of the weather tabs. You can control which tabs are displayed, set a default open tab, and define their alignment.

Default Open Tab: A dropdown to select which tab is active when the page first loads.
Tabs Alignment: Options to align the weather tabs to the left, center, or right.

Tabs Preferences – Style Settings

This section gives you precise control over the visual appearance of the tab titles in the Weather Tabs block. You can customize their colors and borders to ensure the tabbed interface integrates perfectly with your site’s design.

Tabs Title: This provides a dedicated set of style options for the text and background of the weather tabs.
Color: A color picker to set the font color of the tab titles.
Background Color: A color picker to set the background color of the individual tabs.
Top Line Color: A color picker to define the color of the horizontal line that appears at the top of the tabs.
Active Tab Top Line Border: A setting that allows you to control the thickness of the top border on the currently active tab.

Table Preferences

This section allows you to customize the styling of the weather table, giving you full control over the header, body, and borders.

Table Header: This feature provides a dedicated settings panel for styling the table’s header. You can set the Color and Background Color for the header section.
Table Body: This section allows you to style the main body of the table. It includes options to set different colors for Even Row Color and Odd Row Color to create a striped table effect for better readability.
Border: This feature controls the border of the weather table. You can choose a Border Type such as Solid, Dashed, Dotted, or Double, and also adjust the Width and Color of the border.

Footer

This section allows you to control the display of information in the block’s footer, such as the data update time and weather attribution. For more details, visit this link.

Advanced Settings

This section allows you to control the visibility of the block across different device types. You can choose to show or hide the block on desktops, tablets, or mobile devices to optimize the user experience for each screen size. For more details, visit this link.