The Grid Module Block is suitable for displaying the post of your site in the vertical layout with featured image, title, and post meta.
After you have chosen the Grid Module Block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:
General #
It comes with the following options listed below:
- Preset – It refers to the way in which the blog posts are organized or rearranged. Currenlty, the Banner Posts block provides two layout styles with various styles on each layout for displaying the post.
Moreover, you to choose the number of columns to display the posts. You can select either two columns or four columns.
Query #
It consists of the settings related to the posts that are displayed on the front end. It allows you to choose posts depending on Category, Tag, Date, Title, etc.
Also, you can sort the posts in Ascending or Descending order. Likewise, you can choose the number of posts to be displayed.
Moreover, you can also exclude the specific category to be displayed.
Heading #
The Heading area refers to the Title that gets displayed at the top of the posts and comes with the following option to customize it:
- Enable – Switch the Toggle to the right area to enable the heading on your site. Enabling the option will display the Heading on your end.
- Enter Label – You can add the appropriate heading title to get displayed.
Post Title #
The options work for the post title of the Grid Module block and provide the following options:
- Enable – Switch the Toggle to the right area to display post the title. Enabling the option will display the post title on your end.
- HTML Markup – It changes the heading tag for the post title. Under the HTML Markup option, select the required markup for your post title. You can set your post title to be in H1 – H6.
Image #
The option is for customizing the images of the post that appears while using the Grid Module block.
Hover Animation – It adds the animation effect while the featured image is being hovered on your end.
Meta #
Meta refers to the metadata displayed over the post, such as Author, Date, etc. With the banner posts block, you’ll get the Author and Date meta below the post title, which comes with the following customization options:
- Position – It allows changing the position of Meta. You can display the Meta above or below the post title.
- Author – Switch the Toggle to the right area to enable the Author. Enabling the option will display the Author’s name and icon.
- Date – Switch the Toggle to the right area to enable the Date Meta.
Excerpt #
An Excerpt is a summary or brief description of a post that provides readers with a quick overview of the content, allowing them to decide whether they want to read more. The Excerpt displays below the meta with the following options;
- Enable – Switch the Toggle to the right area to enable the Excerpt. Enabling the option will display the Excerpt text on your end.
- Limit – By default, the featured post blocks limit excerpts’ length upto 20 words. You can increase or decrease the excerpt length on your preference.
Read More #
The Banner Posts Block allows displaying the Read More tag on the post. Clicking the read more button will display the full contents of your post. It comes with the following options:
- Enable – Switch the Toggle to the right area to enable the Read More. Enabling the option will display the Read More tag below the excerpt text.
- Text – It allows you to change the Read More Label. By default, the label is read more, which can be changed.
Pagination #
Pagination is a way of splitting the contents of your site into multiple pages. Banner Posts Block allows Pagination on the site with the options listed below:
- Enable – Switch the Toggle to the right area to enable the Pagination on your site. Enabling the option will display the Pagination below the page.
- Alignment – It sets the alignments for the Pagination. You can set the alignments as Left, Center, and Right. Moreover, you can also set the pagination position on different devices (Desktop, Tablet, and Mobile).
Style #
Under the style option, you’ll find the following options available:
General #
- Gap – It refers to the space between the posts displayed on your site. You can enter a number straight into the field or use the slider to change the gap value in pixels. Moreover, you can set the gap value to be different on various devices (Desktop, Tablet, and Mobile).
Heading #
- Heading Color – It allows you to change the color of the heading Text in Normal and Hover modes.
- Border Color – It allows you to change the color of the heading Border in Normal and Hover modes.
Post Title #
The options work for the post title of the Grid Module block and provide the following options:
- Typography – It controls the Post title Font Family, Weight, and Font Size.
- Text Color – It allows you to change the color of the post title on Normal and Hover Mode.
Image #
Under the setting, you can change the height of the image appearing on the Grid Module Block. Depending on the responsive device (Desktop, Tablet, and Mobile), you can set the height.
Meta #
- Icon Color – It allows changing the icon’s color representing the metadata.
- Link Color – It allows changing the color of the link representing the metadata. You can change the link color in Normal and Hover modes.
Excerpt #
- Text Color – It allows you to set the Excerpt Text color.
- Margin – It manages the margin value of the excerpt text.
Read More #
- Text Color – It allows you to change the color of the Read More label on Normal and Hover Mode.
- Background – It allows you to add the background for the Read More Tag. You can add an image or use the color to set the background.
- Spacing – It manages the spaces in between the content appearing above the Read More tag.
- Padding – It sets the padding value for the Read More Tag.
- Border – It customizes the Border area added around the Read More Tag.
Pagination #
- Text Color – It allows you to change the color of the pagination on Normal and Hover Mode.
- Background – It allows you to add the background for the Pagination. You can add an image or use the color to set the background.
- Padding – It sets the padding value for the Pagination.
- Border – It customizes the Border area added around the Pagination.
Advanced #
The Advanced section consists of four options for the Grid Module 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 Grid Module 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 Featured Post block on the Desktop.
- Hide on Tablet – It hides the Featured Post block on Tablet.
- Hide on Mobile – It hides the Featured Post block on Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular Grid Module 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.
- Additional CSS Class(es) – 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 width of the Grid Module block only, you can add a class such as grid-module to the Additional CSS Class field. After that, visit your CSS editor and write a style for the class as below:
.grid-module-width{
width:70%
}