How to Use the Timeline Block

What is the Timeline Tree Block?

The Timeline Tree block lets you create visual timelines directly in the WordPress editor. You can display a sequence of events, milestones, or any content in a structured, easy-to-read layout — no custom code required.

The plugin provides two blocks that work together:

• Timeline Tree — the outer container that holds everything and controls the overall layout and style.
• Timeline Item — each individual entry inside the timeline, with its own title, content, and positioning options.

---

How to Add a Timeline

Step 1 — Insert the block

In the WordPress block editor, click the + button to open the block inserter. Search for Timeline and you will see two variations to choose from:

• Timeline (Alternating) — items alternate left and right of a centered vertical line. Best for visual storytelling and when items benefit from interleaving.
• Timeline (Rows) — items stack vertically with the date label to the left of the line and content to the right. Best for clean chronological lists.

Click the variation you want to insert it on the page.

Tip: You can switch between Alternating and Rows at any time from the sidebar — your content is never lost when switching.

---

Step 2 — Configure the timeline style

With the Timeline Tree block selected, open the Settings panel in the right sidebar. You will find:

Layout panel

• Template — switch between Alternating and Rows layouts.
• Node shape — choose between Circle or Square markers on the vertical line.

Colors panel

• Line — color of the vertical timeline line.
• Node — color of the marker dot or square on the line.
• Connector — color of the short connector between the item and the line (Alternating layout only).

Tip: Leave the colors empty to inherit the current theme’s text color automatically. Set them only when you need a specific brand color that differs from your theme.

---

Step 3 — Add Timeline Items

The block starts with one Timeline Item already inserted. Click inside it to start editing, or click the + button at the bottom of the timeline to add more items.

Each Timeline Item has two areas:

• Title field — the label at the top of the item (date, name, or any short text). Click directly on it to type.
• Content area — free-form block content below the title. Add paragraphs, headings, images, or any standard WordPress block here.

---

Configuring a Timeline Item

Select any Timeline Item to reveal its settings in the sidebar.

---

Position (Alternating layout only)

Side

Controls which side of the line the item appears on.

• Auto — items alternate automatically based on their order. The first item is on the left, the second on the right, and so on. This is the recommended default.
• Left — forces this item to always appear on the left, regardless of its position.
• Right — forces this item to always appear on the right.

Vertical offset

Moves the item up or down relative to its natural position in the flow. Accepts values from −300 to 300 pixels in steps of 20.

A negative value pulls the item upward, which creates an overlapping or interlocking effect between adjacent items. A positive value pushes it down, adding extra spacing.

Tip: A vertical offset of −60 to −120 px on even-numbered items typically creates an elegant interlocking look without content overlapping.

---

Title

Show title

Toggles the title field on or off. When turned off, the title is hidden on the frontend but its content is preserved — you can turn it back on at any time without losing what you typed.

Tag

Controls the HTML tag used to render the title. Options are H1 through H6 and P (paragraph).

• Use H3 or H4 for most timelines — they fit naturally within a page that already has an H1 and H2.
• Use P when the label is purely decorative (a date or category tag) with no heading semantics.

⚠️ H1 and H2 are not recommended for timeline titles. These tags carry strong document hierarchy weight and should be reserved for the page title and main section headings. Using them inside a timeline may confuse screen readers and hurt SEO.

Title color

Sets a custom color for the title text. Click a swatch to apply it, or click Clear to remove the override and inherit the color from your theme.

---

Responsive Behavior

On screens 768 px wide and below, both layout templates automatically collapse to a single-column view:

• The vertical line moves to the left edge.
• All items stack in a single column to the right of the line.
• Per-item vertical offsets are neutralized so items never overlap on small screens.

No configuration is needed — this happens automatically.

---

Customizing the Appearance

The Timeline Tree block ships with minimal structural CSS. It handles layout geometry (line position, alternating placement, node and connector placement, responsive collapse) but intentionally leaves visual decoration to your theme.

---

Tips & Best Practices

• Keep titles short. The title field works best as a concise label — a date, a year, a name. Put longer context in the content area below.
• Use Auto side in most cases. Manual Left/Right overrides are useful for correcting a specific item but can make the sequence harder to follow if overused.
• Test your vertical offsets on mobile. Offsets are neutralized on small screens, so always preview at mobile width after applying negative margins.
• Leave colors to the theme when possible. Setting colors in the block overrides theme changes, which means a theme update won’t automatically update your timeline colors.
• Use H3 or H4 for titles. This keeps the document outline clean and accessible across all pages where the timeline appears.
• Rows layout works well for dense timelines. When you have many items or long labels, the Rows template is easier to scan than Alternating.