This documentation provides comprehensive insights into the Post Grid Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Post Grid block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Post Grid block.
3. After on the right side, Click on the Block. Then the Post Grid details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

In this section, You can change the basic layout of the post grid.

1. Styles: Click on the styles selector and the pre-made styles will appear. you can select any of them.
2. Show Title: Enable the switcher to show the Title.
3. Show Excerpt: Enable the switcher to show the Excerpt.
4. Show Read More Button: It will appear The Read More Button when the switcher is enabled.

5. Show Category: The category will show by enabling it.
6. Show Author: Enable the switcher to show the Author.
7. Show Meta: Enable the switcher to show the Meta.

8. Show Reading Time: Enable the switcher Show Reading Time to show the Reading Time.
9. Show Pagination: Enable the Switcher to open Show Pagination.

Content Section

Go to Basic > Content

This section provides controls to change the Title,

1. Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
2. Title Words: Set the word number to display on the Title section of the Post.

Grid Section

Go to Basic > Grid

This section provides control of the Grid,

1. Column: Set the column number you want to display for the post. (e.g.: 1, 2, 3 ).
2. Gap: Set the gap between the columns.

Query Section

Go to Basic > Query

This section provides control to make a query,

1. Source: Select any source from here ( e.g.: Post, Pages ).
2. By Author: Select the author ( e.g.: admin, subscriber )
3. Include Only: Set the post allows users to select specific content elements to be displayed.
4. Exclude: Select a post to exclude the relevant which. This feature enables users to specify certain posts or content elements that they do not want to be included in a display.

5. By Categories: Select a category. You can categories by selecting the category. Only that category will be visible here.
6. By Tags: Select the Tags that you like. You can organize by the tags also.
7. Post Per Page: Select the port number that you want to show per page. ( e.g.: 2,3 )
8. Offset: Select the number of posts that you want to display.

9. Order By: You can organize by the Order of the content (e.g.: Date, Author, Day).
10. Short Order: Also can shorting by the Order ( DESC, ASC ).

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Item Container

Go to Style > Items Container

In this section, make the container stylish by following this,

1. Border: Set the border for the item container.
2. Border Radius: Make the border corner edge round by setting the border-radius.
3. Padding: Set the inner space of the Items.
4. Background: Set the background color of the container.
5. Box Shadow: Make the shadow of the items.

Content Section

Go to Style > Content

This section provides control of the content,

1. Padding: Set the inner space by setting the padding.

Thumbnail Section

Go to Style > Thumbnail

This section provides control of the thumbnail,

1. Content Height: Set the height of the content.
2. Thumbnail Size: Set the thumbnail size.
3. Border Radius: Make the thumbnail corner edge rounded.

4. Margin: Set the margin of the thumbnail.
5. Box Shadow: Make a shadow of the thumbnail by setting the Box Shadow.

Title Section

Go to Style > Title

In this section, you will get title customization controls,

1. Typography: Set the typography of the Title.
2. Margin: Set the margin of the title for outer space.

Normal State of Title

3. Title Color: Set the color of the Title. The style appears in a normal state.

Hover State of Title

4. Title Hover Color: Set the color of the Title that appears on the mouse hover.

Meta Section

Go to Style > Meta

This section provides control to customize the Meta,

1. Typography: Set the typography of the Meta.
2. Color: Set the color of the meta.
3. Space: Make space between the meta tags.
4. Margin: Set the margin of the meta.

Category Section

Go to Style > Category

This section provides control of category,

1. Typography: Set the typography for the Category.
2. Gap: Set the gaps between the Categories.
3. Border: Set the border of the category.
4. Border Radius: Make the border-radius.

5. Padding: Set the padding of the category.
6. Margin: Set the margin of the category.

Normal State of Category

7. Color: Set the color of the category that will appear in the normal mode.
8. Background: Set the background of the category.

Hover State of Category

9. Color: Set the color of the category in hover mode.
10. Background: Set the background color.

Author Section

Go to Style > Author

Avatar

This section provides control of the author section,

1. Gap: Set the gap between the avatar and the meta.
2. Avatar: Set the size of the Avatar.
3. Border: Set a border for the author.
4. Border Radius: Make the border-radius.

Name

5. Typography: Set the typography of the name.

Normal State of Author

6. Prefix Color: Set the prefix color.
7. Name Color: Set the color of the Name.

Hover State of Author

8. Name hover Color: Set the color of the name for the hover state. Changes appear on mouse hover.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial for learning more.

Check the demo page.

Thanks for being with us!