How to use the Post Carousel block by Zoloblocks

This documentation provides comprehensive insights into the Post Carousel 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 Carousel 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 Carousel block.
3. After on the right side, Click on the Block. Then the Post Carousel 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 carousel.

1. Styles: Select the pre-made styles.
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: Enable it to show the Read More Button.

5. Show Category: Enable it to show the category of the post carousel.
6. Show Author: Enable it to show Author.
7. Show Meta: Enable the switcher to show the Meta.
8. Show Reading Time: Enable the switcher to show the Reading Time.

Content Section

Go to Basic > Content

This section provides control to customize the content,

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: Set the Excerpt words’ number.
4. Expansion Indicator: Set the expansion indicator.
5. Meta Separator: Set the separator indicator for the meta.

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 ).

Carousel Options

Go to Basic > Carouse Options

This section provides controls to customize the Carousel,

1. Select Effect: Select the effect for the carousel ( e.g.: Slide, Coverflow ).
2. Column Number: Set the column number to show the slide per navigation.
3. Column Gap: Set the gap between the columns.
4. Speed: Set the speed for the carousel item.

5. Rotate: Set the degree to rotate it.
6. Stretch: Set Stretch the numner.
7. Depth: Set the depth of the slider.
8. Modifier: Set the modifier.

9. Shadow: Enable the switcher to show the shadow.
10. Infinite Loop: Enable it to loop the slider infinite time.
11. Autoplay: Enable it to play automatically.
12. Autoplay Display: Set the time for the Autoplay Display.

13. Pause on Mouse Enter: Enable it to pause the item on mouse hover.
14. Show Navigation: Enable it to show the navigation for the slider.
15. Show Pagination: Enable it and it will show the Pagination.

Navigation Section

Go to Basic > Navigation

This section provides control to customize the Navigation,

1. Custom Navigation Icons: Enable the switcher to customize the navigation.
2. Select Prev Icon: Select the icon for the Prev Icon.
3. Select Next Icon: Select the icon for the Next Icon.

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 > Item Container

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

1. Border: Set the border for the item.
2. Border Radius: Set the border radius for the item.
3. Padding: Set the padding for the item.
4. Background: Set the background color.
5. Box Shadow: Set the box shadow for the item container.

Content Section

Go to Style > Content

This section provides control for the content,

1. Padding: Set the padding for the content.

Thumbnail Section

Go to Style > Thumbnail

This section provides control to customize the thumbnail,

1. Content Height: Set the height for the content.
2. Thumbnail Size: Set size for the thumbnail.
3. Border: Set the Border for the thumbnail.
4. Border Radius: Set the border radius for the thumbnail.

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

Title Section

Go to Style > Title

This section provides control for the Title,

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

Normal State for Title

3. Title Color: Set the color for the Title.

Hover State for Title

4. Title Hover Color: Set the Title color for hover mode.

Meta Section

Go to Style > Meta

Make customization for the Meta section,

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

Category Section

Go to Style > Category

This section provides controls to customize the category of the post carousel,

1. Typography: Set the typography for the category.
2. Gap: Make gaps between the categories.
3. Border: Set the border for the category.

4. Border Radius: Set the border corner edges rounded by setting the radius.
5. Padding: Make inner space for the category.
6. Margin: Set margin for the category.

Normal State for the Category

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

Hover State for the Category

9. Color: Set the color for the category that appears on mouse hover.
10. Background: Set the background color for the category for hover mode.

Author Section

Go to Style > Author

Make the author stylish by following the author controls,

1. Gap: Set the gap for the Author.
2. Size: Set the size of the authors thumb.
3. Border: Set the Border for the author.
4. Border Radius: Set the border radius for this.

Name

5. Typography: Set the typography for the Author.

Normal State for Author

6. Prefix Color: Set the prefix color for the author.
7. Name Color: Set the name color for the author.

Hover State for Author

8. Name Hover Color: Set the hover color for the Author name.

Navigation Section

Go to Style > Navigation

Make the navigation section more stylish by following the controls,

1. Width: Set the width for the navigation.
2. Height: Set the height of the navigation.
3. Offset Horizontal: Set offset horizontal position by following it.

4. Border: Set the border of the navigation.
5. Border Radius: Make the border corner edges rounded.
6. Icon Size: Set the size of the Icon.

Normal State for Navigation

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

Hover State for Navigation

9. Color: Set the color for the navigation which works on the hover state.
10. Background: Set the background for the navigation, the changes appear by the hover over the mouse.

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!