How to Create Timeline Stories Via Gutenberg Block?

With the Cool Timeline Gutenberg Block, you can easily create and design beautiful horizontal and vertical timelines directly inside the Gutenberg editor, without using any shortcode. Just insert the block into your page or post and configure layout, style, and other options directly from the editor’s settings panel.

Add Timeline Block

Follow these steps to add a timeline using the Gutenberg Block Editor:

• Navigate to the pages section in your WordPress dashboard. Add a new page or “edit” an existing one.
• Now, from the blocks section, search and add “Cool Timeline Block” to your page.

• Once added, you will see a default timeline structure appear on your page.
• You can now start adding timeline stories one by one. Each story will include a title, date, image, and description, which you can easily edit right inside the block.
• To embed images, videos, and slideshows within each timeline story, at the top of each story box, you’ll see a “Choose Media” option. This toolbar lets you pick the type of media you want to display.

Add a New Story

• To add a new story at the end, scroll down and click the + Add Story button. A new story block will be added.

• To change the order of a story, use the up and down arrow buttons on the story toolbar to move the block as needed.
• Additionally, to add a new story between existing blocks, you can click the plus (+) icon between two story blocks to insert a new one instantly.

Customize Single Story Block

If you want to customize a single story block, follow the steps below:

• Click on the story block you want to edit.
• The settings for that story will open in the right sidebar:
  • Date or step label: Enter a date, year, or custom label for the story, such as “Build Strength & Endurance” or “Step 1.”
  • Show year marker: Enable this option to display a year badge above the story.
  • Story Icon: You can add an image, text, icon, or a simple dot for the story icon.
  • Media Type: Choose the type of media to display in the story, an image, a video, or a slideshow.
  • Story Side: Choose whether the story appears on the left or right side of the timeline within the vertical layout.
  • Read More Link: Enable the “Read More” link if you want to provide extra details or direct users to another page.
  • Enter Your Read More Link: After enabling the Read More option, add the URL where users should be taken when they click the link.

That’s it, your single story block will be customized according to your preferences.

Timeline Block Settings

If you want to apply customization to all story blocks and control how your timeline stories are displayed, then follow the steps below:

General Settings

From the General Settings tab, you can customize the layout, design, and alignment of your timeline.

• Layout: Choose the timeline layout from vertical, horizonta, or tabs.
  • Vertical Layout: If you have selected vertical layout then:
    • Design: Choose whether you want a one-sided or both-sided vertical timeline layout.
    • Story side: Toggle this option on and select whether you want to display timeline story on the left-side or the right-side.
  • Horizontal Layout: If you have selected horizontal layout then:
    • Design: Select from default or simple timeline designs to change the visual appearance of your timeline.
    • Slides to Show: Set the number of stories (slides) visible at one time in your horizontal timeline.
    • Equal Height: Enable this to set all horizontal story cards to the same height.
• Content Alignment: Set how the text inside each story block should be aligned: Left, Center, or Right.

Style Settings

From the Style tab, you can customize fonts, colors, spacing, and padding for every part of your timeline.

• Heading: Choose the font style, size, weight, and spacing for story titles, customize the color for your story titles, add space around the story heading block (top, bottom, left, right), or add space inside the story heading box before the text begins.

• Story Description: Customize the font family, size, and color of the main story content. You can also adjust the margin and padding around the description area.

• Read More: Customize the appearance of the Read More link, including its text styling, colors, margin, padding and more using the available settings.

• Date Label: Customize the font settings and text color of the date label displayed on the timeline.

• Year Label: Customize the font settings and text color of the year label displayed on the timeline.

Advanced Settings

Using advanced settings you can adjust the design of your timeline elements like icons, labels, center lines, media, and more.

• Center Line:
  • Line Filling: Toggle this on to fill the center line with a specific color. 
  • Line Width: Customize the line width.
  • Line Color: Pick the color for the center line.
  • Line Filling Color: Choose the color to fill the timeline line as you scroll through the stories.

• Icon Settings:
  • Box Size: Set how large the icon box should appear.
  • Font Size: Adjust the size of the icon inside the box.
  • Box Radius: Control how rounded the icon box corners should be.
  • Icon/Label Position: Shift the icon and label position using the slider.
  • Background Color: Set the background color of the icon box.
  • Font Color: Choose the icon text color.
  • Connector Style: Select the line style that connects stories (Arrow, Line, or None).

• Year/Label Settings:
  • Box Size: Set the size for the year or label box.
  • Box Radius: Round the corners of the label box.
  • Background Color: Set the background color for the year/label.
  • Year Navigation: Toggle to add a year navigation bar.

• Image/Media Settings:
  • Width / Height: Set custom image dimensions.
  • Padding: Adjust space inside the image/media container.
  • Margin: Add space outside the image/media container.
  • Border: Define a border around images/media.
  • Border Color: Pick a color for the image border.

• Story Box Settings:
  • Margin: Add space outside the entire content container.
  • Padding: Add space inside the container for better spacing around content.
  • Border Width: Controls the border width around the timeline container.
  • Border Radius: Adjusts the corners of the timeline container.
  • Background Color: This sets the background color for the timeline container.
  • Border Color: This sets the border color for the timeline container.
  • Box Shadow: Add a shadow effect around the container.

• Timeline Animation: Implement animation effects to your timeline stories, like fade in, slide up, and 15+ more.

• After being satisfied with all the changes, publish the page and preview it.