This documentation provides comprehensive insights into the Post Tab 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 Tab 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 Tab block.
3. After on the right side, Click on the Block. Then the Post Tab details appear.
4. Here shows 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

Make the post tabs by following,

1. Show Section Title: Enable the switcher to show the title.
2. Show Section Tab: Enable the switcher to show the section tab.
3. Show Title: Enable the switcher to show the title.

4. Show Category: Enable the switcher to show the category.
5. Show Author: Enable the switcher to show the author.
6. Show Date: Enable the switcher to show the date.
7. Show Reading Time: Enable the switcher to show the reading time.

Content Section

Go to Basic > Content

Make the content section stylish by following,

1. Section Title Text: Set the content for the title.
2. Section 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).
3. Section Title Words: Set limit for the section title words.
4. 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).
5. Title Words: Set limit for the title words.

Query Section

Go to Basic > Query

Set query for the post tab,

1. Item Limit: Set the item limit for post tabs. It display the limited item only.
2. Include Only: Select included post to show only.
3. Exclude: Exclude the post to prevent from displaying.

4. Offset: Set offset for the post tabs.
5. Order By: Set query order by (e.g.: Date,Author, Title..).
6. Sort Order: Set sort order by ( 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.

Tab Section

Go to Style > Tab

Make the tab section stylish by following,

1. Border: Set the border for the tab.
2. Border Radius: Set the border radius.
3. Background: Set the background for the border.

4. Padding: Set padding for the tab.
5. Margin: Set margin for the tab.

Title

6. Typography: Set the typography for the title.
7. Color: Set color for it.
8. Border: Set the border.

9. Border Radius: Set the radius for the border.
10. Background: Set the background.
11. Padding: Set the padding for the title.

Filter

12. Typography: Set the typography for the filter section.
13. Border: Set the border for the it.
14. Border Radius: Make the border radius.

15. Padding: Set the padding for the filter.
16. Gap: Set the gap between the filters.

Normal State for Filter

The changes will appear on the normal state,

17. Color: Set the color for the filter tab.
18. Background: Set the background.

Hover State for Filter

The changes will appear on mouse hover.

19. Color: Set the color for the filter
20. Border Color: Set the border.
21. Background: Set the background.

Active state for Filter

The changes will appear on the active state of the filter.

22. Color: Set the color for the filter
23. Border Color: Set the border color.
24. Background: Set the background.

Item Wrapper Section

Go to Style > Item Wrapper

Make the item wrapper stylish by following,

1. Gap: Set the gap between the items.

Normal Item Wrapper

The changes will appear for the normal items,

2. Border: Set the border for the item wrapper.
3. Border Radius: Make the border radius.
4. Padding: Set the padding for the items.

5. Background: Set the background for the items.
6. Box Shadow: Make the box shadow for it.

Featured Item Wrapper

The changes will appear for the featured item,

7. Border: Set the border for the featured item.
8. Border Radius: Set the radius for the border.
9. Padding: Set the padding for the features.

10. Background: Set the background for the featured.
11. Box Shadow: Make shadow for the box.

Content Section

Go to Style > Content

Normal

1. Padding: Set the padding for the items.

Featured

2. Padding: Set the padding for the Featured.

Image Section

Go to Style > Image

Make the images interactive by following,

1. Resolution: Set the resolution for the image.

Normal Image

The changes will appear for the normal images,

2. Width: Set the width for the image.
3. Border: Set border for the image.
4. Border Radius: Make the border radius.

5. Padding: Set the padding for the image.
6. Margin: Set margin for the image.

Featured Image

7. Border: Set the border for the featured image.
8. Border Radius: Set the border radius.
9. Padding: Set the padding for the featured item.

10. Margin: Set the margin for the featured image.
11. Overlay: Set the overlay.

Title Section

Go to Style > Title

Normal

1. Typography: Set the typography for the title.
2. Margin: Set the margin for the title.

Normal Normal

3. Color: Set the color for the normal title.

Normal Hover

4. Color: Set the color for the title hover.

Featured

5. Typography: Set the typography for the featured title.
6. Margin: Set margin for it.

Featured Normal

7. Color: Set the color for the featured item.

Featured Hover

8. Color: Set the featured hover color.

Meta Section

Go to Style > Meta

Normal

Make stylish for the meta section,

1. Typography: Set the typography for the meta.
2. Color: Set the color for the meta.
3. Hover Author Color: Set the hover author color.

SEPARATOR

5. Size: Set the size for the separator.
6. Color: Set the color for the separator.

Featured

Set stylish for the featured,

7. Typography: Set the typography for the meta.
8. Color: Set the color.
9. Hover Author Color: Set the hover color.
10. Space: Make the space.

Category Section

Go to Style > Category

Normal

1. Typography: Set the typography for the category.
2. Gap: Set the gap.
3. Border: Set the border type.

4. Border Radius: Set the border radius for the category.
5. Padding: Set the padding.
6. Margin: Set the margin.

Normal Normal

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

Normal Hover

9. Color: Set the color for the featured.
10. Background: Set the background color.

Featured

Make the featured category stylish by following,

1. Typography: Set the typography for the category.
2. Gap: Set the gap.
3. Border: Set the border type.

4. Border Radius: Set the border radius.
5. Padding: Set the padding.
6. Margin: Set the margin for the category.

Featured Normal

7. Color: Set the color for the featured.
8. Background: Set the background color.

Featured Hover

9. Color: Set the featured color.
10. Background: Set the background color.

Video Assist

The video tutorial is coming soon.
Learn about the Post Tab Block, Please visit the demo page for examples.

Thanks for staying with us.