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 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.
- Category: Select a specific story category to display only the stories that belong to that category. This helps when creating multiple timelines.
- Timeline Based On: Decide whether your timeline should be Date Based (stories shown by date) or use Custom Labels/Text.
- Stories Description: Choose between Summary (short description) or Full (complete story content with formatting) for displaying story content.
- 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.
- Timeline Title: Add a custom title above your timeline. Leave it blank if you prefer not to display any title.
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.
- 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 Timeline in Gutenberg Editor
If you are using the Gutenberg Editor, follow these steps to add a vertical timeline:
- 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.
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.
- Select Filter Category: Display all timeline stories or choose to display stories from a specific category.
- Timeline Based On: Decide whether your timeline should be Date Based (stories shown by date) or use Custom Labels/Text.
- Stories Description: Select whether you want to show a short summary or the full story content inside each timeline item.
- Stories Per Page: Set how many stories should appear on one page. Pagination will be added automatically after the given number of stories.
From Advanced Settings:
- Stories Order: Choose how your stories appear on the timeline from DESC or ASC.
- Stories Date: Show or hide the date for each story.
- Date Formats: Select how the date will appear on your timeline.
- Display Icons: Show icons next to your stories. By default, a small dot is shown, but you can choose to display custom icons.
- Pagination Settings: Choose how users navigate between multiple pages of stories. You can use the default numbered pagination or enable AJAX “Load More”.
- Show Category Filters: Allow users to filter stories by category.
- Year Label Setting: Show or hide the year labels that appear between stories on your timeline.
- Year Navigation Setting: Display or hide year navigation buttons, allowing users to jump to stories from a specific year.
- Line Filling Settings: Toggle this on if you want to fill the center line connecting all stories.
- Display Read More: Show or hide the “Read More” button below each story.
- Content Length: Set how much of each story’s text will appear before the “Read More” link.
- Animation: Choose an animation effect for how stories appear on the timeline (e.g., fade-in, slide-in, or bounce).
- Timeline Title: Add a title to your timeline. This title appears at the top of your timeline section and helps visitors understand its purpose.
- After satisfied with all the changes, publish the page and preview it.
Output
