A Vertical Post Timeline displays your website posts (like blogs, news, or updates) in a top-to-bottom timeline layout. Each post appears as a separate timeline story with its title, featured image, date, and short description.
You can create a vertical post timeline easily using either the Classic Editor or the Gutenberg Block Editor.
Add Vertical Post Timeline in Classic Editor
If you are using the Classic Editor, follow these steps to add a Vertical Post Timeline:
- Open your page/post in Classic Editor.
- Click on the Add Timeline button in the toolbar (as shown in the editor screenshot).
- A pop-up panel will appear.
- From the top select box option, choose the Post Timeline.
From General Settings:
- Select Layout: Choose a vertical layout for your timeline story.
- Select Design: Select from multiple predefined timeline designs to change the visual appearance of your timeline.
- Select Skin: Set the color scheme of your timeline. You can choose Default, Light, Dark, or Colorful styles depending on your site design.
- Select Post Type: Define the content type of your timeline (like Posts).
- Taxonomy Name: This option lets you choose which type of content group you want to display in your post timeline.
- Specific Category: Choose specific categories whose posts you want to display in the timeline.
- Specific Tags: Choose specific tags whose posts you want to display in the timeline.
- Story Description: Select whether you want to show a short summary or the full story content inside each timeline item.
- Display Per Page: Set the number of stories to display per page. If you have more stories than this number, pagination will appear automatically.
- Year Label Setting: Enable or disable the year label display within your timeline.
- Year Navigation Setting: Show or hide the year navigation bar, allowing users to quickly jump between different years in your timeline.
- Animation: Add entrance animation effects like fadeInUp, zoomIn, or slideIn to make timeline stories appear smoothly as users scroll.
From Advanced Settings:
- Stories Order: Choose the order in which your timeline stories appear, from ASEC or DESC.
- Stories Date: Set how the timeline date should appear. You can use the default or choose a custom date format.
- Select Date Format: Choose the desired date format for your timeline stories.
- Icons: Highlight events using custom icons or simple dots
- Pagination Settings: Add pagination and “load more” buttons to easily manage timelines with many stories.
- Category Filters Settings: Enable or disable filters to let visitors filter stories from specific categories.
- Line Filling: Toggle this on if you want to fill the center line connecting all stories.
- Display Read More: Choose whether to show the “Read More” link for each story.
- Content Length: Set the number of characters or words to display from each story’s content.
- Display Post Meta: Choose whether you want to show or hide post meta information.
- After being satisfied with all the changes, click on Insert Shortcode.
- Shortcode will be added to your page. Now publish your page and preview it.
Add Vertical Post Timeline in Gutenberg Block Editor
If you are using the Gutenberg Editor, follow these steps to add a Vertical Post Timeline:
- Open any page or post in the Gutenberg editor.
- Click on the “+” Add Block button.
- Search for “Timeline” and select the Post Timeline Shortcode.
- The shortcode will be added to your page.
- After adding the timeline shortcode to your page, you can fully customize the display of timeline using the following settings.
From General Settings:
- Select Layouts: Choose a vertical layout from the available options.
- Select Designs: Select from multiple predefined timeline designs to change the visual appearance of your timeline.
- Select Skin: Choose the color theme for your timeline. You can use the default, dark, or light skin according to your requirements.
- Content Post Type: Define the content type of your timeline (like Posts).
- Taxonomy Name: This option lets you choose which type of content group you want to display in your post timeline.
- Specific Category: Choose specific categories whose posts you want to display in the timeline.
- Specific Tags: Choose specific tags whose posts you want to display in the timeline.
- Story Description: Select whether you want to show a short summary or the full story content inside each timeline item.
- Posts per Page: Set the number of stories to display per page. If you have more stories than this number, pagination will appear automatically.
From Advanced Settings:
- Stories Order: Choose the order in which your timeline stories appear, from ASEC or DESC.
- Stories Date: Set how the timeline date should appear. You can use the default or choose a custom date format.
- Date Formats: Choose the desired date format for your timeline stories.
- Display Icons: Highlight events using custom icons or simple dots
- Pagination Settings: Add pagination and “load more” buttons to easily manage timelines with many stories.
- Category Filters Settings: Choose whether you want to include filters to let visitors filter stories from specific categories.
- Year Label Setting: Show or hide the year label display within your timeline.
- Year Navigation Setting: Show or hide the year navigation bar, allowing users to quickly jump between different years in your timeline.
- Line Filling: Choose whether you want to fill the center line connecting all stories.
- Display Read More: Choose whether to show the “Read More” link for each story.
- Content Length: Set the number of characters or words to display from each story’s content.
- Display Post Meta: Choose whether you want to show or hide post meta information.
- Animation: Add entrance animation effects like fadeInUp, zoomIn, or slideIn to make timeline stories appear smoothly as users scroll.
- After being satisfied with all the changes, publish your page and preview it.
