{"id":4278,"date":"2026-10-21T08:09:54","date_gmt":"2026-10-21T08:09:54","guid":{"rendered":"http:\/\/eventful-elementor.local\/?post_type=docs&p=4278"},"modified":"2026-10-21T08:09:54","modified_gmt":"2026-10-21T08:09:54","password":"","slug":"timeline-widget","status":"publish","type":"docs","link":"https:\/\/wpeventful.com\/elementor\/docs\/timeline-widget\/","title":{"rendered":"8. Timeline"},"content":{"rendered":"

The Eventful Timeline widget shows your events in date order along a line.<\/p>\n\n

Timeline is in the free version with vertical Style 01. Vertical Styles 02 to 05 and the horizontal timeline need Eventful Pro.<\/p>\n\n

  1. Add Eventful Timeline<\/strong> to the page and open Content > Timeline Settings<\/strong>.\n
    \"Eventful<\/a>
    Content > Timeline Settings.<\/figcaption><\/figure>\n<\/li>
  2. Set Timeline Style<\/strong> to Vertical<\/strong> or Horizontal<\/strong> (Pro).<\/li>
  3. Pick a design (see the table below).<\/li>
  4. For a vertical timeline, turn on Month\/Year Separator<\/strong> to show a label such as “Oct 2026” between groups of events, and set Space Between Events<\/strong>.<\/li><\/ol>\n\n
    Style<\/th>Vertical<\/th>Horizontal (Pro)<\/th><\/tr><\/thead>
    01<\/td>Alternating: events on both sides of the line<\/td>Alternating: cards above and below the line<\/td><\/tr>
    02<\/td>Staggered Columns (Pro)<\/td>Line on Top<\/td><\/tr>
    03<\/td>Two Columns (Pro)<\/td>Line at Bottom<\/td><\/tr>
    04<\/td>Line on Left (Pro)<\/td><\/td><\/tr>
    05<\/td>Line on Right (Pro)<\/td><\/td><\/tr><\/tbody><\/table><\/figure>\n\n

    On phones, every vertical style shows the line on the left with the events beside it.<\/p>\n\n

    Horizontal timeline<\/h2>\n\n

    A horizontal timeline is a row you can swipe. Set the number of Columns<\/strong> per device and Space Between Events<\/strong>, and choose Navigation<\/strong> (Show, Hide or Hide on Mobile), Touch Swipe<\/strong>, Mouse Draggable<\/strong> and Mouse Wheel<\/strong>.<\/p>\n\n

    Colours<\/h2>\n\n

    Under Timeline Colors<\/strong>, set the Date Badge Color<\/strong> (the month and year label), Timeline Line Thickness<\/strong>, Track Color<\/strong> (the unfilled line; empty keeps the light grey), Fill Color<\/strong>, Event Dot Color<\/strong> and, for a horizontal timeline, the navigation background.<\/p>\n\n

    With Fill on Scroll<\/strong> on (the default), the line fills in Fill Color<\/strong> as visitors scroll down a vertical timeline or move along a horizontal one; the rest shows Track Color<\/strong>. Pick a fill colour that stands out from the track, for example your brand colour. Turn Fill on Scroll off for a solid line in Track Color.<\/p>\n\n

    Related articles<\/h2>\n\n