Post Timeline block allows you to choose Custom Post Type and displays them in the timeline. It provides an option to select available post types as posts or pages.
How To Add The Post Timeline Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Post Timeline or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get the below design-
%20(1).png?alt=media&token=e061a23e-ab90-42e9-9c9b-bd5ce450ade9)
How To Configure The Post Timeline Block #
To configure the content of your Post Timeline, switch to the ‘Content’ tab.
Query #
Taxonomy: Select Tags or Categories to filter the posts from. If you select Tags, you will see another option to select the tags of which you want to display the post, and if you select the category, you will see the Category option to select the category of which you want to display the post.
%20(1).png?alt=media&token=6df90cc1-d7f4-4f72-a2ef-6989e8c2b835)
Post Timeline Settings #
Under the Post timeline settings tab, Content Type option allows choosing post types – posts or pages.
Number of items allows you to select the number of posts to be displayed on the timeline.
Order by option allows you to order posts according to date, title, random, or menu order.
Order the posts in ascending or descending order.
Number of items to offset allows you to choose how many items to skip.
Border Radius option is available to set the border radius for posts.
Orientation for the icon and a post timeline can be set to Center, Left, Right from Orientation.
Arrow Alignment can be set vertically top, bottom, or center with respect to timeline card.
Stack on option allows you to choose on what breakpoints the columns will stack. It can be set to Tablet or Mobile.
%20(1).png?alt=media&token=84b8d44f-e4cf-4931-a63b-34a4d93c2701)
Post Timeline Content #
Display Section Title – Hide or Display a title on top of the post timeline. If you choose to display the title, an input box will appear for you to write a title.
Display Featured Image – Hide or Display featured image of post/page if there is one.
Image Size – Set the image size to Full, Thumbnail, Large or Medium.
Display Title – Hide or Display the title of the post.
Display Author – Hide or Display the name of the author of the post.
Display Date – Hide or Display the published date of the post.
Display Excerpt – Hide or Display the excerpt of the post. If you choose to display the excerpt, a slider will appear for you to select the excerpt length of the post.
Display Continue Reading Link – Hide or Display a continue reading link for the post. If you choose to display the link, an input box will appear for you to customize the continue reading text.
Open link in new tab – Toggle on to open the continue reading link in a new tab.
%20(1).png?alt=media&token=761d7e3f-13c9-4c7d-8756-3ce67d511517)
Post Timeline Markup #
Post Timeline Section Tag – You can select the tag that you want to allot to the grid section such as div, header, section, main, aside, footer.
Post Title Heading tag – You can select the tag that you want to allot to the section title from H2 to H6.
%20(1).png?alt=media&token=3035315b-e5b5-4e5d-8cba-be83b12a1523)
Connector Settings #
Choose an icon for the connector from a number of options.
Icon Size – Increase or decrease the size of the icon from here.
Background Size – Increase or decrease the size of the element’s background.
Border Width – Set a border to the connector element from here.
Connector Width – Set the width of the connector line with this option.
Connector Color Settings – This option has two tabs, Normal and Focus. This allows you to customize the connector by setting colors for line, icon, background, and border. Colors applied on focus will be reflected in the connector as you scroll down the timeline.
%20(1).png?alt=media&token=14747fc8-966a-4d6b-bedc-0b19555ff386)
How To Style The Post Timeline Block #
Switch to the ‘Style’ tab to customize every element of the Post Timeline block.
Colors #
Under the Colors tab, color options are available for Blog Post Background, Heading, Author, Content.
CTA Color Setting – This option allows you to set colors for Continue Reading Text, Background, and Border under Normal and Hover conditions.
%20(1).png?alt=media&token=4bb68dda-753c-4a29-8965-05ddc9798d34)
Typography #
Under the Typography tab, options for font family, font size, font-weight, and line height are available for Date, Heading, Author, Content, and Continue Reading Text.
%20(1).png?alt=media&token=c4b6334d-1eef-4fc1-aa3e-b734569f4022)
Padding #
Space can be managed for the content of the timeline card from the Padding tab.
Spacing #
Spacing tab offer options to customize the spacing for Block, heading, author, and Excerpt. Also, vertical and horizontal space can be adjusted.
%20(1).png?alt=media&token=701ea84f-3a58-4a59-b2f8-ef1a81e40802)
Button Box Shadow #
You can give box-shadow to the CTA button with a number of options available for customization such as color, blur, spread, position, etc.
