How to Use the Timeline Block in UniLink (Show Your Story or Journey on Your Page)
How to Use the Timeline Block in UniLink (Show Your Story or Journey on Your Page)
A step-by-step guide to adding the Timeline block to your UniLink page so visitors can follow your journey, company history, or program curriculum in a clean vertical sequence that is memorable and easy to scan.
- The Timeline block displays a vertical sequence of dated entries — each with a date label, title, description, and optional image — connected by a line with configurable dot markers, ideal for creator journeys, company history, or course curriculum progression.
- Limit entries to five to seven milestones — more than that and the timeline becomes exhausting to scroll through rather than satisfying to read; fewer than three gives it no narrative momentum.
- Keep descriptions to one to two sentences per entry — the timeline format signals "event log," not "editorial," and long descriptions break the visual rhythm that makes timelines engaging.
- Add images to at least two or three entries; entries without images are visually lighter and easy to skip; entries with images anchor the visitor's eye and make each milestone memorable.
A biography paragraph that says "I started creating content in 2019, hit 100K subscribers in 2021, and landed a brand deal with Nike in 2022" is forgettable. The same information displayed as a vertical timeline — with the year prominent, a headline for each moment, a two-sentence description, and a photo from each milestone — is not forgettable. The timeline format does something prose cannot: it makes sequence visible. Visitors do not just read the milestones; they feel the progression, the gaps, the momentum. For any creator, business, or educator whose credibility and story are better understood as a sequence of events than a paragraph of copy, the Timeline block is the most powerful tool on the page.
What the Timeline block does
The Timeline block renders a vertical stack of chronological entries connected by a visible line with markers at each entry point. Each entry contains four elements: a date label (which can be a year, a month-and-year, a full date, or any custom text you choose), a title, a description, and an optional image. The entries stack from top to bottom in the order you arrange them in the editor, with the connecting line running through each dot or icon marker. The visual structure immediately communicates sequence — this happened, then this, then this — without the visitor needing to read a single word first.
Layout and style settings give you meaningful control over the block's appearance. The line color and dot style (circle, square, or icon marker) let you match the timeline's visual language to your page palette. Entry layout can be set to alternating left-right — where odd entries appear on the left of the connecting line and even entries appear on the right — or all-left, where every entry is anchored to one side. Alternating layout creates a zigzag rhythm that is visually engaging for longer timelines; all-left is cleaner and more readable for shorter timelines or mobile-first pages. An optional scroll animation setting fades entries in as the visitor scrolls down, which adds a sense of reveal and forward momentum — particularly effective for creator and personal brand pages where the journey is the product.
The date label format deserves specific attention because it affects how the timeline reads. Year-only ("2019", "2021", "2022") works for long-term journeys spanning multiple years — the year label instantly communicates scale and duration. Month-and-year ("April 2021", "October 2022") works for more recent or tightly packed histories where the specific month matters. Full dates ("March 15, 2023") work for product launches, specific events, or technical milestones where precision is meaningful. Custom text — where you replace the date entirely with a label like "Phase 1," "Pre-launch," or "Founding" — works for program curricula or process flows where sequence matters but calendar dates do not.
Before you start
- Identify your five to seven most significant milestones: Before opening the block editor, write a list of every milestone you might include. Then cut to the five to seven that carry the most narrative weight — the moments that mark genuine transitions, achievements, or turning points rather than incremental steps. A timeline of five strong milestones tells a better story than a timeline of twelve where half are minor events that dilute the peaks. The events you cut do not disappear from your story; they are simply not needed in the timeline to make that story land.
- Write a one-to-two sentence description for each entry: Before opening the editor, draft the descriptions. The timeline format trains visitors to read each entry as a brief, punchy capsule — "Started freelancing full-time after leaving my agency job; first month revenue was $600, first year revenue was $60,000" is a perfect timeline description. A description that runs to five sentences breaks the format. Write short, then edit shorter.
- Gather images for at least two or three entries: Images make timeline entries visually distinct and more memorable. You do not need an image for every entry, but a timeline with no images reads as a plain text list. Find a relevant photo, screenshot, or asset for the milestones that are most significant — the founding moment, the breakthrough milestone, the most recent entry. Square or near-square images work best in timeline entries to avoid overweighting the visual mass of any single entry.
- Decide on date label format and chronological order: Choose whether entries run oldest-at-top to newest-at-bottom (standard for a journey or history) or newest-at-top to oldest-at-bottom (standard for a portfolio or activity log). Pick your date label format (year, month-year, custom) and stay consistent across all entries — mixing "2019" with "March 2021" with "Q3 2022" creates an incoherent label system that forces visitors to re-parse each date rather than scanning them smoothly.
How to add the Timeline block to your page
- Open your page in the Dashboard: Log in to UniLink, go to My Pages, and click Edit on the page where you want the timeline to appear.
- Add a new block: Click + Add Block. In the block picker, find Timeline — it is typically listed under Content or Story — and select it.
- Set the entry layout: In the block settings panel, choose between alternating left-right and all-left (or all-right) entry layout. For five or more entries, alternating layout creates a more visually engaging rhythm. For three or fewer entries, or for pages where clean vertical reading is more important than visual variety, all-left is simpler and more readable.
- Set line color and dot style: Choose a line color that complements your page palette — a neutral gray reads as subtle infrastructure, a brand accent color makes the timeline spine a design feature. For dot style, circle is the most universal; square creates a sharper, more technical feel; icon markers let you assign a specific icon to each entry for an additional visual cue.
- Enable scroll animation (optional): Toggle scroll animation on if you want entries to fade in as the visitor scrolls. This works especially well on personal brand pages where the reveal of each milestone creates a sense of progression. Turn it off if you prefer a static, fully-visible timeline — some visitors find animations distracting, and static timelines are also safer for accessibility.
- Add your first entry: Click Add Entry. Enter the date label, title, and description. Upload an image if you have one for this milestone. Click save to confirm the entry.
- Add remaining entries: Repeat for each milestone. Entries appear in the order you add them — reorder by dragging if necessary. Check the live preview as you build to confirm the visual rhythm looks right before finalizing all entries.
- Preview on mobile and save: Use the Dashboard mobile preview to check that the alternating layout (if chosen) renders cleanly on a narrow screen — some alternating layouts collapse to single-column on mobile, which changes the visual structure. Confirm entry images load correctly, then save and publish.
Key settings explained
| Setting | What it controls | Best practice |
|---|---|---|
| Entry layout | Whether entries alternate left-right or all sit on one side of the connecting line | Alternating for five or more entries on personal brand and journey timelines — the zigzag creates visual variety and prevents the block from reading as a plain list; all-left for three to four entries, course curricula, or any timeline where visual simplicity matters more than variety |
| Line color | The color of the vertical connecting line that runs through all entry markers | Use a neutral mid-gray for timelines where the content should dominate and the line is structural only; use a brand accent color when the timeline spine is part of the visual design identity; avoid very light colors on white or light backgrounds — the line needs to be visible |
| Dot style | The shape of the marker at each entry point — circle, square, or icon | Circle is the universal default and works for any timeline; square signals a more structured or technical context (product roadmaps, technical milestones); icons let you add semantic meaning to each marker point — use them when each entry has a distinct category (launch, award, media, partnership) and you have a clear icon match for each |
| Date label format | Year only, month + year, full date, or custom text for the date label on each entry | Year-only for long-span journeys (5+ years); month + year for recent or dense histories (2–4 years, multiple entries per year); custom text for curricula, process flows, or phase-based timelines where calendar dates are not meaningful |
| Scroll animation | Whether entries fade in as the visitor scrolls down the timeline | Enable for personal brand and creator journey pages where the reveal of each milestone creates emotional momentum; disable for information-dense timelines (company history, technical roadmaps) where visitors want to see all entries immediately without waiting for animation |
| Entry image | An optional image displayed with each individual timeline entry | Add images to at least two or three of the most significant entries — entries with images are visually heavier and draw more attention, so place images at the milestones you most want visitors to pause on; square aspect ratio images keep the visual weight balanced across entries |
How to use the Timeline block to convert visitors, not just impress them
A Timeline block that reads as "look how far I have come" is interesting. A Timeline block that reads as "this is what is possible" is persuasive. The difference lies in how each entry is written. An entry that says "2021 — Hit 100K subscribers" tells visitors a fact about you. An entry that says "2021 — 100K subscribers: what the algorithm shift taught me about consistency" tells visitors a fact about you and opens a door to a lesson they can take. On a creator or coach page where the timeline is meant to establish credibility and invite people into a program or community, that small shift from milestone-as-achievement to milestone-as-lesson changes the conversion intent entirely.
Entry order and placement on the page matter as much as the entries themselves. Most timelines read oldest-at-top to newest-at-bottom, which creates a natural "start here, arrive here" narrative that works well for journeys with clear arc — struggle at the beginning, growth in the middle, success at the end. But if your most compelling milestone is in the middle — a dramatic low point, a pivot, a specific achievement — consider whether the entry should be at the top of the page with a text block above it that frames the story first. The timeline does not have to start at the beginning if the most persuasive version of your story starts somewhere else.
The scroll animation setting is a subtle but effective attention mechanism on personal brand pages. When entries fade in as the visitor scrolls, each milestone arrives individually rather than all at once. This slows the reading speed in a positive way — the visitor is made to pause at each entry point rather than scanning the entire timeline in one glance. For a coach or creator who wants visitors to feel the weight of each milestone, the animation extends engagement time on the timeline section specifically. For information-dense contexts where visitors need to compare entries across the whole timeline at once — a technical roadmap, a product changelog — animation gets in the way and should be turned off.
Troubleshooting
| Problem | Likely cause | Fix |
|---|---|---|
| Timeline feels too long and visitors are not scrolling through it | Too many entries — typically ten or more — creating scroll fatigue rather than narrative momentum | Audit entries and cut to the five to seven most significant milestones; entries that were cut can be referenced in the description of a remaining entry ("over the next two years, three more brand deals followed") so the narrative remains intact without requiring a separate entry for each |
| Entries look out of order on the published page | Entries were added in a non-chronological sequence during editing and were not reordered before publishing | In the block editor, reorder entries by dragging them to the correct chronological position; the block renders entries in the order they appear in the editor list — there is no auto-sort by date |
| Alternating layout is not visible on mobile — all entries appear on one side | Expected behavior — alternating layout collapses to single-column on narrow screens because two-column alternating layout is not readable on a 390px-wide phone | This is working correctly; on mobile, the timeline renders all entries on one side of the line regardless of the desktop layout setting; check the mobile preview to ensure the single-column layout reads cleanly, and shorten any descriptions that became too long when column width expanded to full mobile width |
| Entry images look stretched or inconsistently sized | Images were uploaded at different aspect ratios, causing the block to render them at inconsistent heights | Crop all timeline images to the same aspect ratio before uploading — square (1:1) is the most consistent and balanced choice; if you need to use existing images at different aspect ratios, use an image editor to crop them to match before upload |
| Scroll animation entries are not triggering on the published page | The animation requires JavaScript to be executed and may not trigger if the browser has JavaScript disabled, or if the block is near the very top of the page and loads before the animation listener initializes | Test in a standard browser with JavaScript enabled; if the timeline is at the very top of the page (above the fold on page load), move it lower on the page so the scroll event can trigger properly; the animation is a progressive enhancement and does not affect content visibility when not triggered |
| Timeline block saved but not appearing on the live page | Page was saved without publishing after the edit | Return to the Dashboard editor and click Publish Page — saving stores the draft state; publishing makes the change live on your public UniLink URL |
Best fit for
- Creator and personal brand pages where the story of growth — from early struggle through breakthrough milestones to current success — is central to the visitor's decision to follow, hire, or join a program
- Company or brand history pages where founding, funding, product launches, and key partnerships are better understood as a sequence than as a paragraph of backstory
- Course and coaching program curricula where week-by-week or phase-by-phase progression shows potential students exactly what the journey through the program looks like
- Portfolio chronology for freelancers and agencies that want to show career progression, client growth, or skills developed over time in a format that communicates trajectory rather than just credentials
Not the right tool if
- Your milestones are not genuinely sequential — if entries could appear in any order without losing meaning, a Features block or a grid layout communicates them better than a timeline that implies a causal or chronological relationship between items
- You have only one or two milestones to show — a single-entry or two-entry timeline looks thin and unfinished; those items belong in a text block or bio section rather than a dedicated timeline structure
- You need visitors to compare two different timelines side by side — the Timeline block renders one sequence; comparison between two timelines is a job for a custom table or two-column text layout
Frequently asked questions
How many entries should a Timeline block have?
Five to seven is the range that balances narrative completeness with readability. Below four entries, the timeline lacks momentum — there is not enough sequence to feel like a journey. Above eight entries, scroll fatigue sets in and the weakest milestones dilute the impact of the strongest ones. Ten or more entries is almost always too many for a personal brand or creator page; it may be appropriate for a detailed company history or a long-form curriculum, but even in those cases, consider whether a paginated or expandable format would serve the visitor better than a single scrolling stack of ten-plus items.
Can I use the Timeline block for a course curriculum instead of a historical journey?
Yes, and it is one of the best use cases. Replace the date label with week numbers or phase labels ("Week 1," "Phase 2," "Final Module"), use the title for the curriculum topic, and use the description to explain what the student will be able to do by the end of that module. Images of lesson previews, instructor screenshots, or concept diagrams make each module entry more concrete. The timeline format communicates "this is a sequence you will move through" — exactly the frame a prospective student needs to commit to a course purchase.
Should timelines run oldest-at-top or newest-at-top?
Oldest-at-top is the convention for narrative journeys and histories, because it mirrors how we experience time — beginning to present. Newest-at-top is the convention for activity logs and portfolios, because it puts the most recent and most relevant work first. For creator and personal brand pages, oldest-at-top almost always works better because the story arc — early beginnings, growth, current achievement — builds emotionally as the visitor scrolls. For a portfolio or project log where recency signals relevance, newest-at-top puts the most impressive recent work where visitors first land their attention.
Do I need an image for every Timeline entry?
No — images are optional per entry, and a mix of entries with and without images is completely valid. The practical guidance is to add images to the two or three most significant milestones and leave the others as text-only entries. Images draw the eye and create visual anchors, so placing them at the entries you most want visitors to notice and remember is more strategic than distributing them evenly. A timeline where every entry has an image can feel visually heavy and slow to scan; a timeline where no entry has an image misses the opportunity to make milestones memorable.
Can I change the order of entries after I publish?
Yes — go back to the Dashboard, open the page editor, find the Timeline block, and drag entries to the correct order in the block's entry list. Save and republish to make the change live. Entry order is fully editable at any time — there is no fixed sequence once entries are created. If you are adding a new milestone to an existing timeline, add it in the editor and drag it to the correct chronological position rather than adding it at the bottom and leaving it out of sequence.
- The Timeline block renders a vertical sequence of dated entries with connecting line and dot markers — each entry takes a date label, title, description, and optional image; limit to five to seven entries for the strongest narrative impact.
- Keep descriptions to one to two sentences per entry — the timeline format signals a sequence of events, not an editorial, and long descriptions break the visual rhythm that makes timelines engaging and memorable.
- Use the custom text date label for non-calendar timelines: course curricula, phase-based programs, or process flows where "Week 1" or "Phase 2" communicates more than a calendar date.
- Add images to at least two or three of the most significant entries — images anchor the visitor's attention at specific milestones and make those moments memorable in a way that text alone cannot match.
- Enable scroll animation for personal brand and creator journey pages where the reveal of each milestone adds emotional momentum; disable it for information-dense timelines where visitors need to compare entries across the full sequence at once.
Ready to show visitors where you started and how far you have come? Create your free UniLink page and add a Timeline block — your story has a sequence, and the Timeline block is the format that makes that sequence impossible to ignore.
Create Your Free Link-in-Bio Page
Join thousands of creators using UniLink. 40+ blocks, analytics, e-commerce, and AI tools — all free.
Get Started Free