How to use the Post List block by Zoloblocks

This documentation provides comprehensive insights into the Post List 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 List 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 List 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 list.

1. Presets: Click on the presets selector and the pre-made styles will appear. you can select any.
2. Show Title: Enable the switcher to show the Title.
3. Show Excerpt: Enable the switcher to show the Excerpt.
4. Show Category: To show the category of the post list just enable it.

5. Show Meta: Enable the switcher to show the Meta.
6. Show Reading Time: It shows the reading time of the relevant post. Just enable the switcher.
7. Show Pagination: Enable it to show the Pagination of the post.
8. Button Alignment: Set the alignment of the button ( e.g.: Left, Center, Right, Justify).

Content Section

Go to Basic > Content

This section provides control to change the content features,

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 show the Title.
3. Excerpt Words: Show the excerpt by setting the word numbers.

4. Expansion Indicator: Set the indicator of the expansion.
5. Meta Separator: Set the separator symbol to separate the meta tags.
6. Items Gap: Set the gap between the items.

Query Section

Go to Basic > Query

This section provides control to make the query of the posts.

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.

• Order By: You can organize by the Order of the content (e.g.: Date, Author, Day).
• 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

Go to Style > Item

This section provides controls to change the appearance of the items. You can customize it for the Normal and Featured tabs

Normal Tab

Customize the item,

1. Border: Set the border of the item.
2. Border Radius: Make the border corner edges rounded by setting the radius.
3. Padding: Set the padding of the item.
4. Background: Set the Background color for the item.
5. Box Shadow: Set the shadow of the item.

Featured Tab

1. Border: Set the border for the Featured image.
2. Border Radius: Make the border radius of it.
3. Content Padding: Make the inner space of the content by setting Padding.
4. Padding: Set the padding of the featured image.

5. Background: Make the background color for the featured item.
6. Box Shadow: Make the shadow of the item.
7. Overlay: Set the overlay color of the featured item.

Thumbnail Section

Go to Style > Thumbnail

This section provides controls to change the appearance of the Thumbnail. You can customize it for the Normal and Featured tabs.

Normal Tab

1. Thumbnail Height: Set the height of the Thumbnail.
2. Thumbnail Size: Set the Size of the Thumbnail
3. Border: Set the border for the thumbnail.
4. Border Radius: Set the border-radius.

5. Margin: Set the margin for the thumbnail.
6. Background: Set the background color for the thumbnail.
7. Box Shadow: Make the shadow of the thumbnail.

Featured Tab

8. Thumbnail Height: Set the thumbnail height of the Featured item.

Title Section

Go to Style > Title

This section provides controls to change the appearance of the Title. You can customize it for the Normal and Featured tabs.

Normal Tab

1. Typography: Set the typography for the Title.
2. Margin: Set the margin of the title.
3. Title Color: Set the color for the Title for the normal state.

Hover State of Title

4. Title Hover Color: Set the hover color of the Title

Featured Tab

1. Typography: Set the typography for the

Normal State of Featured Title

2. Color: Set the Title color for Featured in the normal state.

Hover State of Featured Title

3. Hover Color: Set the Title color for the featured in the hover state.

Meta Section

Go to Style > Meta

This section provides controls to change the appearance of the Meta. You can customize it for the Normal and Featured tabs.

Normal Tab

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

Featured Tab

5. Typography: Set the typography of the featured meta.
6. Color: Set the color for the featured meta.

Author Section

Go to Style > Author

This section provides controls to change the appearance of the Author. You can customize it for the Normal and Hover State.

Normal State of Author

1. Prefix Color: Set the prefix color of the author.
2. Name Color: Set the Name Color of the author.
3. Featured Prefix: Set the featured prefix color.
4. Featured Name: Set the name color of the featured.

Hover State of Author

5. Name Color: Set the name Color of the author for the hover state.
6. Featured Name: Set the featured name color for the hover sate.

Category Section

Go to Style > Category

This section provides controls to change the appearance of the Category. You can customize it for the Normal and Featured tabs.

Normal Tab

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

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

Normal State of the Category

7. Background: Set the background for the category.
8. Color: Set the color of the category.

Hover State of Category

9. Background: Set the background of the Category in the hover state.
10. Color: Set the color of it for hover state.

Featured Tab

11. Typography: Set the typography for the featured author.
12. Color: Set the color of the featured category.
13. Background: Set the background for the category.

Hover State of Featured

14. Hover Color: Set the hover color of the featured category.
15. Hover Background: Set the hover background color for the featured category.

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 Coming Soon! Check the demo page.

Thanks for being with us!