AQI – Detailed Air Quality

The Detailed Air Quality is a visually rich weather block that delivers in-depth insights into current and upcoming air conditions. Use it to display clear AQI readings, pollutant breakdowns, actionable health recommendations, and advanced forecast trends — all presented in a clean and stunning layout.

How to Create a Detailed Air Quality Block:

Open the WordPress page or post you wish to edit.
Click the (+) button to add a new block.
Search for “AQI – Detailed Air Quality” or find it under the Location Weather blocks.
Click the block to add it to your page. You can instantly see the Block Preview to customize as you want.
Once you’ve done the design, click Publish or Update.

Key Features of AQI – Detailed Air Quality:

Detailed Pollutant Analysis: Display detailed AQI level & pollutant details with visual condition indicators.
2 Stunning Weather Templates: 2 pre-designed templates optimized for displaying a large amount of environmental data.
Health Advisory & Recommendations: Actionable health advice tailored to the current AQI level.
Expanded Pollutant Popup: Show detailed pollutant data in a stylish pop-up.
Comprehensive AQI Forecast: Support for Daily, Hourly, or combined air quality AQI forecasts in multiple view styles.

Let us explore the AQI – Detailed Air Quality block:

Weather API Source

API Source: This section allows you to select the Weather API provider for your air quality information. Choose your preferred provider, OpenWeather or Weather API ( Upcoming), to fetch accurate data.

AQI Templates: General

This section provides a variety of pre-designed templates and core search functionality.

Select a Template: Find your preferred templates from 2 Stylish Designs.

Custom Weather Search: Use this toggle to enable a custom search bar, allowing users to search air quality for different locations.

Style AQI Templates:

Override Specific with Global: Toggle this to choose between global font styles and block-specific customizations.
Typography: Dedicated panel to choose a custom Font Family as you need.
Color: Set the Primary/Secondary Text color from here.
Background Type & Color: Choose from Solid Color, Gradient & set the color for the layout.
Border & Radius: Customize the border style and set a border radius to create modern, rounded corners.
Show/Hide Box Shadow: Use the toggle to enable or disable the box shadow from here.
Spacing & Width: Adjust the padding, section gap, and max width to ensure the card fits perfectly in your layout.

Set Location:

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.

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.

Air Quality Summary: General

This section allows you to configure and style the main descriptive elements of the air quality report within the block.

Show/Hide AQI Scale Bar: Enable this to display a detailed health recommendation on the detailed air quality level.
Heading Label: Enter a custom title for the summary section (e.g., “Today’s Air Quality Index”).

Style Air Quality Summary:

To add style to your Air Quality Summary, follow the steps below.

Heading & Text Typography: Customize heading typography, font family, color, size, weight, and set the text color from here.
Border & Radius: Customize the border style and set a border radius to create modern, rounded corners.
Padding & Margin: Adjust the inner & outer spacing around the summary section to ensure it fits well.

Pollutant Details: General

From this panel, you can configure how specific pollutant data is presented to your visitors, ensuring technical accuracy and visual clarity.

Show/Hide Pollutant Details: Use this toggle to enable or disable this to show or hide the breakdown of individual pollutants.
Pollutant Format Name: Set the pollutant name format as Abbreviation, Name, or both.
Show/Hide Condition Indicator: Enable this to show a visual status for each pollutant.
Symbol Display Style: Choose how chemical symbols appear, whether Normal or Subscript.
Pollutant Details Popup: Use this toggle to show the Pollutant details as a pop-up.

Style Pollutant Details:

Pollutant Heading, Label & Value Typography: Customize the font family, color, size, weight, and style as you want.
Pollutant Condition Icon: Choose your desired icon from multiple options.
Configure Pollutant Box: Set the background style, color, width & padding.
Gap Controls: Adjust the Horizontal and Vertical Gap between the pollutant information boxes.
Padding & Margin: Set custom padding & margin to control the spacing between the pollutant section and other block elements.

Pollutant Details Popup: General

From this panel, you can toggle specific information you want to show/hide within the Pollutant details popup.

Pollutant Condition Icon: Toggle this to display a visual icon representing current air quality conditions.
Pollutant Scale Bar: Enable this to show where the current pollutant level sits on a color-coded scale.
Pollutant Description: Use this to show/hide text-based explanation of the specific pollutant.
Pollutant Source: By this, you can display information regarding where the pollutant typically originates.
Pollutant Impacts: Toggle it to show the health or environmental effects of the pollutant.
Safety Advice: Enable this to provide actionable recommendations for users based on current levels.

Style Pollutant Details Popup:

Pollutant Condition Icon: Choose your desired icon from multiple options.
Color: Set the Pop-up text color from here.
Background Type & Color: Choose from Solid Color or Gradient to set the color for the layout.
Border & Radius: Customize the border style and set a border radius to create modern, rounded corners.
Padding: Adjust the padding, section gap, and max width to ensure the card fits perfectly in your layout.

Air Quality Forecast: General

Enable this panel to show users upcoming air quality trends, helping them plan outdoor activities accordingly.

Air Quality Forecast: Enable this toggle to enable or disable the forecast section.
Air Quality Forecast Type: Select whether to display Daily, Hourly, or Both forecast data.
Display Range: Set the specific number of Forecast Days (e.g., 4 Days) or Forecast Hours (e.g., 96 Hours) to show.
Forecast Label: Enter the title of the forecast section (default: “Detailed AQI Forecast”).
AQI Display Style: Enable this toggle to display AQI in the Graph chart.
AQI Description Format: Set the AQI description format as Short or Detailed from here.
First Accordion Open: Enable this toggle to keep the first accordion opened automatically.

Style Air Quality Forecast:

Typography: Customize the font family, color, size, and weight for the Heading, set Vertical Gap, Day & Date, and AQI Condition & Description text.
Accordion Background Type: Choose a background style for the accordion (Transparent, Solid, or Gradient).
Daily/ Hourly Switcher: Customize the Daily/Hourly switcher color, border style, and border radius from here.
Border & Radius: Customize the border style and set a border radius to create modern, rounded corners.
Show/Hide Box Shadow: Use the toggle to enable or disable the box shadow from here.
Item Gap: Adjust the gap between the weather forecast items from here.

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.

Updated on July 23, 2025