Timeline
- Blocks
- Section
- Buttons
- Counters
- Blocks
- Comparison Table
- Columns
- Breadcrumbs
- Call To Action
- Landing Page
- Tabs
- YouTube
- FAQ
- Grid
- Hero
- Media Callout
- Voronoi
- Site Preview
- Jump Nav
- Jump Link
- Link-in-Bio
- Logos
- Map
- Media and Text
- Photo Feature
- Posts
- Price List
- Quote Blocks
- Quotes
- Slider
- Structured List
- Socials
- Timeline
- Yearbook
- Vignette
- Video Gallery
Timeline
An attractive way to display chronological events or milestones.
Usage
Timeline is a parent block that holds a single type of child card. Because there is only a single type of block the Timeline parent can hold, clicking on the + inserter will automatically add a new entry to the timeline. The timeline bar takes it color from your site’s primary color, which can be adjusted in the customizer.
You can drag around your entries to reorder them in the timeline. Take note, the timeline is not automatically ordered by date. We wanted to provide enough flexibility for you to use something other than dates as the entry keys, which means that it’s up to your to keep your entries in order.
On desktop, your entries will automatically alternate alignment, even cards on the left and odd cards on the right.
Layout
Layout provides two options for styling your timeline, alternating and uniform. Alternating is your typical timeline styling, with card entries alternating (ha!) from side to side. We also provide a uniform style option which organizes entries all on the same side of your timeline. Edit the layout in the sidebar parent settings. Here’s some examples of the two styles:
Entries
Each entry in the timeline has a Headline rendered as an <h3>, a Date rendered as an <h4>, and its Body as a <p> tag. All of these fields can be edited inline—just click into them and begin typing. Take note, this includes the Date located on the opposite side of the timeline from the body of the entry.
Tip
Look, we know this block is named Timeline, but you can use this to display any sort of key/value content you’d like. The Date field is entirely freeform, and doesn’t have to be a date at all! If you have a favorite use for this block that we haven’t thought of yet, let us know!
Settings
When an entry is selected, you can add a Link or an Image to each. If an entry has a link, an additional Style field will appear to let you choose whether the link should be displayed as a <button> or an <understated> link.
The Link Text defaults to ‘Learn More’. You can click on the link to edit its text.
The image will be displayed as a small circle, so be sure to choose an image that looks good at a small size and that doesn’t get any important features cut off.
Adding Entries
To add an entry to your Timeline block, click on the + icon that appears under the block when it is focused.