A vertical timeline displays your stories from top to bottom, showing events in chronological order. Cool Timeline allows you to display a vertical timeline anywhere on your WordPress website using a simple shortcode.
You can add this shortcode inside your pages or posts using either the Classic Editor or the Gutenberg Block Editor.
Add Vertical Timeline in Classic Editor
If you are using the Classic Editor, follow these steps to add a vertical 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 Layout 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 Light or Dark styles depending on your site design.
- Timeline Width: Choose how much space the timeline should use within the content area.
- Custom Width: Set the maximum width of the timeline when Custom width is selected.
- Connector Style: Choose how the story pointers connect to the timeline line.
- Icons: Choose icon for your timeline story from: Icon, Dot or None.
- Timeline Title: Add a title for the timeline. The title is displayed with the timeline on the page.
From Content Settings:
- Categories: Display all timeline stories or choose to display stories from a specific category.
- Stories Order: Choose how your stories appear on the timeline from ASEC or DESC.
- Timeline Based On: Decide whether your timeline should be Date Based (stories shown by date) or use Custom Labels/Text.
- Stories Date: Choose whether to show or hide the date for each story.
- Select Date Formats: Select how the date should appear on your timeline.
- Title: Choose to show or hide the story title.
- Title Link: Enable or disable the link on the story title.
- Stories Description: Choose between Summary (short description) or Full (complete story content with formatting) for displaying story content.Content Type: Choose how much story content to display: Short, Full, or Hide.
- Display Read More: Show or hide a link to the full story.
- Stories Read More Text: Enter a custom text for the Read More link.
- Open Read More Link In: Choose whether to open the read more link in the Same Tab or a New Tab.
- Content Length: Set how much of each story’s text will appear before the “Read More” link.
- Pagination Settings: Choose how users navigate between multiple pages of stories. You can use the default numbered pagination or enable AJAX “Load More”.
- Pagination Design: Choose a preset design for the pagination controls.
- Display Per Page: Set the number of stories displayed on each page.
From Extra Settings:
- Animation: Add entrance animation effects like fadeInUp, zoomIn, or slideIn to make timeline stories appear smoothly as users scroll.
- 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.
- Position: Choose where the year navigation menu appears.
- Style: Choose the visual style for the year navigation menu.
- Line Filling: Toggle this on if you want to fill the center line connecting all stories.
- Category Filters Settings: Enable or disable filters to let visitors filter stories from specific categories.
- Border Radius: Set the corner roundness of the story content, media, and Read More elements.
- Border Width: Set the thickness of the story border. The timeline connector uses the same border width.
- Story Padding: Set the inner spacing around the story content.
- Story Spacing: Set the space between individual timeline stories.
- Line To Story Gap: Set the horizontal space between the timeline line or icon area and the story cards.
- Show Featured Image: Choose whether to display the featured image with each story.
- Image Size: Choose the WordPress image size to use for the featured images, such as Large.
- Image Width: Set the width of the featured image as a percentage of its available space.
- Image Height: Set the height of the featured image.
- Object Fit: Choose how the featured image fits within its image container.
- 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
If you want to explore more options to customize your Classic Editor timeline further, check out our Cool Timeline Settings Guide.
Add Vertical Timeline in Gutenberg Editor
If you are using the Gutenberg Editor, follow these steps to add a vertical timeline in block editor:
- Open any page or post in the Gutenberg editor.
- Click on the “+” Add Block button.
- Search for “Timeline” and select the Story 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.
Layout Settings
- Layout: Choose a vertical timeline layout from the available options.
- Timeline Width: Choose how much space the timeline should use within the content area.
- Custom Width: Set the maximum width of the timeline when Custom width is selected.
- Design: Select from multiple predefined timeline designs to change the visual appearance of your timeline.
- Color Scheme: Choose the color theme for your timeline. You can use the default, dark, or light skin according to your requirements.
- Connector Style: Choose how the story pointers connect to the timeline line.
- Story Marker: Choose the marker displayed on the timeline line for each story.
- Timeline Title: Add a title for the timeline. The title is displayed with the timeline on the page.
Content Settings:
- Categories: Display all timeline stories or choose to display stories from a specific category.
Story Order & Label
- Order: Choose how your stories appear on the timeline from Oldest or Newest.
- Timeline Based On: Decide whether your timeline should be Date Based (stories shown by date) or use Custom Labels/Text.
Story Date
- Show Date: Choose whether to show or hide the date for each story.
- Date Format: Select how the date should appear on your timeline.
Story Content
- Title: Choose to show or hide the story title.
- Title Link: Enable or disable the link on the story title.
- Content Type: Choose how much story content to display: Short, Full, or Hide.
- Content Length: Set how much of each story’s text will appear before the “Read More” link.
- Read More Link: Show or hide a link to the full story.
- Read More Text: Enter a custom text for the Read More link.
- Open Read More Link In: Choose whether to open the read more link in the Same Tab or a New Tab.
Pagination
- Pagination Type: Choose how users navigate between multiple pages of stories. You can use the default numbered pagination or enable AJAX “Load More”.
- Pagination Design: Choose a preset design for the pagination controls.
- Stories Per Page: Set the number of stories displayed on each page.
Extra Settings
- Animation: Add entrance animation effects like fadeInUp, zoomIn, or slideIn to make timeline stories appear smoothly as users scroll.
Year Navigation
- Year Label Setting: Show or hide the year label display within your timeline.
- Navigation Menu: Show or hide the year navigation bar, allowing users to quickly jump between different years in your timeline.
- Position: Choose where the year navigation menu appears.
- Style: Choose the visual style for the year navigation menu.
Scroll Fill
- Toggle this on if you want to fill the center line connecting all stories.
Category Filters
- Show Filter: Choose whether to show or hide filters to let visitors filter stories from specific categories.
- Filter Categories: Display all timeline stories or choose to display stories from a specific category.
Spacing & Size
- Border Radius: Set the corner roundness of the story content, media, and Read More elements.
- Border Width: Set the thickness of the story border. The timeline connector uses the same border width.
- Story Padding: Set the inner spacing around the story content.
- Story Spacing: Set the space between individual timeline stories.
- Line to Gap Story: Set the horizontal space between the timeline line or icon area and the story cards.
Image Settings
- Show Featured Image: Choose whether to display the featured image with each story.
- Image Size: Choose the WordPress image size to use for the featured images, such as Large.
- Image Width: Set the width of the featured image as a percentage of its available space.
- Image Height: Set the height of the featured image.
- Object Fit: Choose how the featured image fits within its image container.
- After being satisfied, publish your page and preview it
Output
