--- title: "How to Add a Timeline Widget in Elementor (History, Roadmap, Process Steps)" url: https://theplusaddons.com/blog/how-to-add-a-timeline-widget-in-elementor-history-roadmap-process-steps/ date: 2026-09-11 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "The first time I needed a timeline on a client site, it was for a logistics company that wanted to show their multi-step shipping process on the homepage: order placed,..." image: https://theplusaddons.com/wp-content/uploads/2026/09/timeline-widget-in-elementor-featured-1024x538.jpg word_count: 2031 --- # How to Add a Timeline Widget in Elementor (History, Roadmap, Process Steps) The first time I needed a timeline on a client site, it was for a logistics company that wanted to show their multi-step shipping process on the homepage: order placed, packed, shipped, out for delivery, delivered. I almost reached for a separate timeline plugin before remembering The Plus Addons for Elementor already ships one. Ten minutes later the section was live, using a widget that was already installed. This guide walks through adding and customizing the Timeline widget in Elementor: what it looks like out of the box, how to add and edit entries, every layout and style option, a full worked example, mobile behavior, common mistakes, and a few real use cases where it fits better than a generic "steps" section. Table Of Contents ## What Is the Timeline Widget in The Plus Addons for Elementor? The [**Timeline widget**](https://theplusaddons.com/elementor-widget/timeline/) is one of the 120+ widgets bundled with The Plus Addons for Elementor, the WordPress plugin used on more than 100,000 sites. It renders a vertical or horizontal sequence of entries, each with its own heading, description text, image, icon, and optional "Read More" button. It's built for showing something that happens in order: a history, a roadmap, or a process. Unlike hand-coding a timeline with custom CSS, every part of it (entry spacing, pin icons, connector line color, layout direction) is a control inside the Elementor editor. No custom CSS or child theme required. It drops into any Elementor section or container the same way any other widget does, so it inherits the column widths and spacing already set up on the page instead of forcing its own wrapper. Because it ships with the base plugin (not a Pro-only add-on), it's available on every site already running The Plus Addons for Elementor free version. There's no separate purchase, no license check, and no extra plugin activation involved in trying it. ![The Plus Addons for Elementor Timeline widget product page showing a vertical timeline layout](https://theplusaddons.com/wp-content/uploads/2026/09/6w2iHqfeOVQM-BVEGk6ZAlFqr6FBdOUtDNe9CassvXucj2y0uRrFrYbNzDtQ-fxFhtxlNOSEGem2nnfG86oNJA-scaled.png)The Timeline widget's product page on theplusaddons.com, showing the default vertical layout. It also plays well with the rest of a page built from other Elementor widgets: the same global colors, fonts, and spacing settings a site already has configured carry over to the Timeline widget automatically, so a roadmap section dropped into an existing page doesn't need its own separate styling pass to match. ## How to Add a Timeline Widget in Elementor - Open the page in Elementor and search the widget panel for "Timeline."- Drag the Timeline widget onto the section where the sequence should appear.- Elementor loads a starter set of three entries. Edit, delete, or duplicate them from the Content tab.- Click any entry to set its title, description, image, and (optionally) a button with its own link and text.- Reorder entries by dragging them in the entries list, or add a new one with the "Add Item" button. Each entry is independent, so a company-history timeline can mix entries with photos and entries with just a headline and a short line of text, useful for years where there simply isn't a matching image. ## Step-by-Step: Building a Company History Timeline The controls above make sense faster with a concrete example. Here's how the "About" page timeline I mentioned earlier actually got built, entry by entry: - **Start with the founding entry.** Set the entry title to the founding year, keep the description to one sentence ("Founded by two developers frustrated with slow page builders"), and skip the image if there isn't a real photo from that period. A blank image slot looks intentional; a stretched, irrelevant stock photo doesn't.- **Add one entry per real milestone, not one per year.** A 10-year-old company doesn't need 10 entries. Three to seven meaningful entries (a launch, a major redesign, a funding round, a big customer win) read as a story. Ten thin entries read as padding.- **Use the button field for entries that link somewhere real.** A "2024: Launched Version 2" entry can carry a "Read the release notes" button pointed at the actual changelog post, turning a static timeline into a small internal-linking hub.- **Set custom start/end labels last.** Once the entries are final, replace the default date on the very first and very last entry with a label like "Founded" and "Today" so the timeline reads as a complete arc rather than an open-ended list.- **Preview on mobile before publishing.** A vertical timeline that looks well-spaced on desktop can feel cramped on a narrow viewport if entry descriptions run long. Trim any description over two sentences. ## Customizing Layout, Icons, and Colors The Style tab controls how the timeline reads visually: - **Layout style**: switch between a single-column vertical timeline and a horizontal, left-to-right layout (better for a short 3-5 step process shown above the fold).- **Pin icons**: replace the default dot marker with any Font Awesome icon, useful for status icons (a checkmark for completed steps, a truck for "shipped," etc.).- **Alignment**: center or left-align the text inside each entry's content box.- **Connector and border**: set the connector line color and give each entry's content box a custom border color and corner radius.- **Custom start/end labels**: give the very first and very last entry their own label (e.g., "Founded" and "Today") instead of a plain date. A detail that's easy to miss: the connector line color and the pin icon color are set separately from the entry text color. On a dark-background section, it's common to leave the connector a light gray while giving each pin icon the site's accent color, so the sequence itself stays readable even if entry text is muted. ## Advanced Options: Masonry Layout and Linked Entries Two options are easy to miss because they're not obvious from the default preview: - **Masonry layout**: turns on a compact, staggered stacking for entries so a long timeline with many short entries doesn't leave excess whitespace between them.- **Entry linking**: any entry can link out to another page on the site (for example, linking a "2024: Launched Version 2" entry straight to that release's changelog post), which also gives the section some genuine [internal linking](https://theplusaddons.com/blog/internal-linking-strategy-wordpress/) value instead of being a dead-end visual. If a site is already using other content widgets from the same plugin, such as a [pricing table](https://theplusaddons.com/blog/pricing-table-in-elementor/), a [team member grid](https://theplusaddons.com/blog/team-member-widget-in-elementor/), or a [stats counter](https://theplusaddons.com/blog/counter-widget-in-elementor/), the Timeline widget shares the same color and typography controls, so a roadmap section will match the rest of the page without extra CSS work. ## Timeline Widget vs. Other Ways to Build a Timeline in WordPress Before settling on a widget, it's worth knowing what the alternatives actually cost in time and maintenance: - **Hand-coded CSS timeline.** A pseudo-element connector line with absolutely positioned entry boxes works, but every new entry means editing markup directly, and any layout change (switching to horizontal, adding an icon) means rewriting CSS rather than toggling a control. It also usually breaks on theme updates that touch global spacing variables.- **A dedicated timeline plugin.** This adds another plugin to keep updated, another settings screen to learn, and another potential conflict point with the theme's CSS. For a site that already runs The Plus Addons for Elementor for its other widgets, installing a second plugin just for a timeline is redundant weight.- **A generic numbered list styled to look sequential.** Quick to build, but it doesn't have a real connector line, doesn't support per-entry images cleanly, and reads as a list rather than a timeline to most visitors.- **The bundled Timeline widget.** No extra install, no CSS to maintain, and every layout change (vertical to horizontal, icon swaps, masonry) is a control toggle instead of a code change. The tradeoff is less pixel-level control than fully custom CSS, which matters for a handful of highly stylized marketing sites but rarely for a standard company-history or roadmap section. For most WordPress sites already running The Plus Addons for Elementor, the bundled widget is the practical default; hand-coded CSS is worth the extra effort only when the design calls for something the widget's controls genuinely can't produce, like an interactive, JavaScript-driven scroll animation tied to each entry. ## Responsive Behavior and Mobile Considerations A vertical timeline generally holds up better on small screens than a horizontal one, since the horizontal layout has to either shrink each entry's content box or let the section scroll sideways. A few practical notes from building these on real client sites: - If a horizontal layout is used for desktop, check whether it needs to switch to vertical below the tablet breakpoint. Elementor's responsive controls apply per-device, so this is a matter of setting the layout style differently for the mobile view, not a limitation of the widget itself.- Long entry descriptions that look fine in a 3-column desktop layout can push a mobile timeline entry to an awkward height. Keep descriptions to 1-2 short sentences if the timeline needs to work on mobile without heavy editing.- Images inside timeline entries follow the same responsive image sizing as any other Elementor image, so a photo added at full resolution won't slow down mobile loading as long as WordPress's built-in responsive image sizes are left enabled. ## Common Mistakes to Avoid Most of these come down to treating the timeline as a place to dump everything rather than a curated summary. A timeline is a highlight reel, not a full record, and it reads best when it's edited down to the entries that actually matter to a visitor scanning the section for the first time. - **Too many entries.** Past 10-12 entries, a vertical timeline starts to feel like an endless scroll rather than a story. Either trim to the entries that matter or turn on masonry layout to tighten the spacing.- **Inconsistent entry length.** One entry with three sentences next to one with three words reads as unfinished. Aim for roughly the same amount of text per entry.- **Using it for a strict chronological archive.** A changelog with 50+ dated entries is better served by a standard post loop with pagination; the Timeline widget is built for a curated, human-readable sequence, not a full historical log.- **Skipping the mobile preview.** A horizontal layout that looks great at desktop width can overflow or crowd on a phone if it isn't checked before publishing. ## Where a Timeline Section Actually Works Well - **Company history / About page**: founding year through today, one entry per milestone, works well with photos where they exist and plain text entries where they don't.- **Product roadmap**: shipped, in progress, and planned features, with the icon/color controls used to flag status (a checkmark icon for shipped, a clock icon for in progress).- **Order or checkout process**: a horizontal 4-5 step timeline (Order, Packed, Shipped, Delivered) works better here than a generic numbered list because each step gets its own icon and short description.- **Onboarding flow**: a SaaS or course site walking a new user through setup steps, often paired with a button on each entry linking to the relevant setup screen or help doc. Where it's the wrong tool: a long-form, date-heavy news/changelog archive is usually better served by a standard blog loop than a visual timeline. The format starts to feel cramped past 10-12 entries unless masonry layout is on. ## FAQ ### Does the Timeline widget require Elementor Pro? No. The Timeline widget ships with the free version of The Plus Addons for Elementor and works with the free version of Elementor. ### Can each timeline entry have a different image size? Yes. Images are set per entry, so a mix of entries with and without images is fine; the widget doesn't force a uniform image for every step. ### Is there a horizontal timeline option? Yes, the Layout Style control switches between the default vertical column layout and a horizontal, left-to-right layout. ### How many entries can a timeline hold? There's no hard limit set by the widget, but readability drops well before any technical ceiling. Most timelines read best between 4 and 10 entries; past that, masonry layout or splitting into two sections keeps it from feeling like an endless scroll. ### Can a timeline entry link to another page? Yes, through the entry's button field or by making the entry itself clickable, which is useful for linking a milestone entry to its full write-up elsewhere on the site. ## Suggested Reading - [How to Add a Pricing Table in Elementor](https://theplusaddons.com/blog/pricing-table-in-elementor/)- [How to Add a Team Member Widget in Elementor](https://theplusaddons.com/blog/team-member-widget-in-elementor/)- [How to Add a Number Counter Widget in Elementor](https://theplusaddons.com/blog/counter-widget-in-elementor/)- [How to Add a Table in Elementor](https://theplusaddons.com/blog/add-table-in-elementor/)- [How to Add Scroll Animations in Elementor](https://theplusaddons.com/blog/scroll-animations-in-elementor/) ## Frequently Asked Questions **Q: Does the Timeline widget require Elementor Pro?** A: The Timeline widget ships with the free version of The Plus Addons for Elementor and works with the free version of Elementor. That matters if you want a timeline without adding another paid plugin or extra activation step. The widget is already part of the base plugin, so it fits into an existing Elementor workflow without changing your setup. **Q: Can I use a timeline widget for a company history or roadmap section?** A: A company history or roadmap is one of the best fits for this widget because it shows events in order, with each entry carrying its own heading, description, image, icon, and optional Read More button. The page also calls out product roadmaps, onboarding flows, and process steps as strong use cases. For a history section, three to seven meaningful milestones usually read better than a long list. **Q: What should I do if my timeline looks too long on mobile?** A: Shorten the entry text and keep the sequence curated. The page warns that long descriptions can make a vertical timeline feel cramped on a narrow viewport, and it recommends trimming anything over two sentences. A horizontal layout can also be switched to vertical below the tablet breakpoint using Elementor’s responsive controls, which helps avoid sideways scrolling on phones. **Q: Is there a horizontal timeline option in Elementor?** A: The Layout Style control switches the widget between a vertical column timeline and a horizontal left-to-right layout. The horizontal version is best for short sequences, especially a 3 to 5 step process shown above the fold. On smaller screens, that same layout often needs to switch back to vertical so the content does not get squeezed or force sideways scrolling. **Q: How many entries should I put in a timeline before it gets hard to read?** A: Most timelines read best between 4 and 10 entries. The page says readability drops well before any technical ceiling, and past 10 to 12 entries a vertical timeline starts to feel like an endless scroll instead of a story. If you have more content than that, masonry layout can tighten spacing, or you can split the content into two sections. **Q: Can a timeline entry link to another page?** A: Entry linking is built in through the button field, and the page also says an entry can be made clickable. That makes the widget useful for internal linking, such as sending a milestone like “2024: Launched Version 2” to its changelog post. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH turns the timeline into more than decoration because each milestone can point somewhere useful.