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 #
From General, you can make changes to the general aspect of the blocks:
Text Alignment: You can align the text and icon of the block from here. (e.g., left, right, or center).
Icon #
You can change the Date and Weather block icon from here, which is set by default. Hover on the icon and you’ll see the option to change the icon. Click on it, and a new interface appears with a list of icons available. Select it and click on Insert to add the new icon.
Size: You can change the size of the icon from here.
Gap: You can change the gap between the icon and text of the Date and Weather block from here.
Style #
Text #
Text Color: Change the text color from here.
Icon #
Icon Color: Change the icon color from here. Click on the color, and you’ll get color palette to choose your desired color.
Date #
Typography: Click on this option, and you’ll see Default and Global settings on the popup. From here, you can select font family, weight, font size, line height, letter spacing, and all the options related to typography.
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)
