In this documentation, we will discuss the customization of the Post Timeline block, brought to you by Zoloblocks.

Activate Post Timeline Block

On WordPress Dashboard Navigate to ZoloBlocks from the sidebar menu.

1. Select the Dashboard option under ZoloBlocks.
2. Go to the Blocks tab.
3. Use the search bar to search for “Post Timeline”
4. Click Enable to activate the Post Timeline block.

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 Timeline 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 the Selected block, the parent block, and its child block will appear.
3. After on the right side, Click on the Block. Then the Post Timeline box 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

Set controls for the general section,

1. Direction: Set the direction for showing the posts( e.g.: Left, Right, Center ).
2. Start/End: Enable the switcher to show Start and End.
3. Thumbnail: Thumbnail will appear on enabling the Switcher.

4. Date: Enable the switcher to show the Date.
5. Title: Enable the switcher to show the Title.
6. Excerpt: Enable the switcher to show the Excerpt.

7. Meta: Enable the switcher to show the Meta.
8. Category: Enable the switcher to show the Category.
9. Comments: Enable it to show the Comments.
10. Reading Time: Enable the switcher to show the reading time.

11. Pagination: Enable it to show the pagination for timeline post.

Pagination Section

Go to Basic > Pagination

Make the pagination by following,

1. Pagination Type: Set the type for the pagination (e.g.: Default Pagination, Load More, Ajax Pagination).
2. Previous Text: Set the text for previous.
3. Next Text: Set the text for next.

Content Section

Go to Basic > Content

Set the content controls by following,

1. Words: Set the words for the title.
2. 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. Words: Set the words number for the Excerpt.
4. Indicator: Set the read more indicator.

Query Section

Go to Basic > Query

Make query for the section by following,

1. Source: Select source for posts.
2. Include By: Select include by.
3. Item Limit: Set the limit for the items to appear.
4. Offset: Set the offset for appearing the post.
5. Order By: Set the order by.
6. Sort Order: Set the order in sorting.

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 > Timeline

Line

Set line styling,

1. Color: Set the color for the Line.
2. Width: Set width for the line.
3. Style: Set style for line (e.g.:Dashed,Dotted,

Number

Set the number stylish,

1. Color: Set the color for the number.
2. Typography: Set Typography for it.
3. Background: Set the background color.

4. Border Radius: Make the border radius.
5. Size: Set the size for the number.

Start/End

Set the Start and End Number,

1. Typography: Set the typography for the start/end.
2. Color: Set the colo for the text.
3. Background: Set the Background for it.

4. Border Radius: Make the border radius.
5. Size: Set the size for it.

Items Section

Go to Style > Items

Make the items section,

1. Background: Set the background for the items.
2. Padding: Make the padding of it.
3. Border: Set the border.
4. Box Shadow: Make the box shadow for the items.

5. Border Radius: Make the border radius.
6. Offset: Set the offset for the items.

Thumbnail Section

Go to Style > Thumbnail

Make the thumbnail stylish by following,

1. Size: Set the size for the thumbs.
2. Resolution: Set the resolution.
3. Border: Set the border.

4. Border Radius: Make the border radius.
5. Padding: Set the padding.

Normal State for Thumbnail

6. CSS Filters: Se the css filters by following,
7. BLUR: Make the blur.
8. BRIGHTNESS: Set the brightness for the image.
9. CONTRASTS: Set the contrasts.
10. SATURATE: Set the saturate.
11. HUE ROTATE: Set the hue rotate.

Hover State for Thumbnail

12. CSS Filters: Se the css filters by following,
13. BLUR: Make the blur.
14. BRIGHTNESS: Set the brightness for the image.
15. CONTRASTS: Set the contrasts.
16. SATURATE: Set the saturate.
17. HUE ROTATE: Set the hue rotate.

Date Section

Go to Style > Date

Make the date section styligh,

1. Color: Set the color for the date.
2. Typography: Set the typography.
3. Spacing: Set the spacing.

Title Section

Go to Style > Title

Normal State for Title

1. Color: Set the color for the title.
2. Typography: Set the typography.
3. Text Shadow: Set the text shadow.
4. Spacing: Set the spacing.

Hover State for Title

5. Animations: Set the animation for the title( e.g.: Middle Underline, Underline, Overline).
6. Color: Set the color for it.

Excerpt Section

Go to Style > Excerpt

1. Color: Set the color.
2. Typography: Set the typography.
3. Margin: Set the margin.

Meta Section

Go to Style > Meta

1. Color: Set the color.
2. Typography: Set the typography.
3. Space Between: Set the space between the meta.
4. Separator: Set the separator.

5. Hover Color: Set the hover color for the category.

Pagination Section

Go to Style > Pagination

1. Alignment: Set the alignment for pagination.
2. Typography: Set the typography.
3. Border: Set the border.
4. Border Radius: Make the border radius.

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

Normal State for Pagination

6. Color: Set the color.
7. Background: Set the background.
8. Separator: Set the separator color.

Active State for Pagination

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

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!