The Date & Weather Block is suitable for forecasting weather information according to the current date on your website. This would help the readers know the weather from your website instead of visiting other sites.
After you have chosen the Date & Weather Block, you’ll get a block editing panel on the right-hand side. It has three options: General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:
General #
Style #
Advanced #
The Advanced section consists of four options for the Date & Weather block.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile),
- Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set the value of the different margins for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of the Date & Weather block according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the Date & Weather block on the Desktop.
- Hide on Tablet – It hides the Date & Weather block on the Tablet.
- Hide on Mobile – It hides the Date & Weather block on Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular Date & Weather block. The available options are listed below:
- Block HTML – It sets the HTML elements to your site requirements. By default, the HTML element is div; however, you can use another element such as Address, Article, Aside, etc.
- CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- CSS – It allows you to add a CSS class to your block, letting you write custom CSS to style this particular block.
For example, if you want to change the font size of the date only, you can add a class such as date-font-size to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:
Upon adding the code, it will make the changes only to this particular block and not others.
Note: For Date & Weather Block we would need to add an API key and Postal Code to fetch the data of that location. In order to do so, please follow the steps below:
- Navigate to WordPress Dashboard > Magazine Blocks
- Click on Settings > Date and Weather Block
- Add the API Key and Postal Code to display the data of that location
(We currently use Weather API that supports the Date and Weather Block)
