V4 Elements Timeline Estimated reading: 6 minutes 5 views Tell the story of your business one milestone at a time. Pick a style you like, type your own events, and you are done. No code needed. WIDGET Timeline EACH EVENT HAS Number, date, title and text PLAN Free A QUICK LOOK What You Will Build Here is the same story shown in all five styles. You can switch between them with one click, and your text stays the same. The same four events in five different styles BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Timeline is already on. If you ever need to turn it on again, it takes 20 seconds. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Timeline under General Widgets and switch it on. Click Save Settings. The Timeline card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the Timeline in. Click the + button at the top left to open the Elements panel. Look under AAE General for Timeline. Drag it onto your page. The Timeline in the Elements panel (click to zoom) Tip: Can not see it? Type Timeline in the search box at the top of the panel. Note: A new Timeline starts as a simple list of text. It does not have the line and the dots yet. You will pick a style in the next step. STEP 3 Pick a Style Styles are called presets. One click gives you a finished design. Click your Timeline to select it. In the General tab, open Presets. Click Apply a preset. Click the style you like. You will see it change on your page right away. The Apply a preset button (click to zoom) The five styles to choose from (click to zoom) Tip: Not happy with it? Open Apply a preset again and try another style. It is easy to switch. STEP 4 Write Your Own Events Each event on the timeline is made of four small parts. You change them one at a time. Open the Structure panel. It is the little layers icon at the top right. Open the Timeline, then open an event (for example Item 1). You will see four parts: Marker, Date, Title and Description. Click a part, then type your own words in the box on the left. The four parts of one event (click to zoom) Type your own text here (click to zoom) Marker The little number or dot on the line, like 01. Date The year or date, like 2024. You can write anything here, like Spring 2024. Title The headline of the event. Description A sentence or two about what happened. STEP 5 Add or Remove Events A new Timeline comes with four events. You can have as many as you need. Select the Timeline. In the General tab, open Items. Click the + button to add an event. Drag an event by its dots to change the order. Click the copy icon to duplicate an event. Click the x to delete it. Add (1), one event (2), copy and delete (3) (click to zoom) Tip: The names Item 1, Item 2 in this list are just labels to help you. They do not show on your page. STEP 6 Make It Match Your Brand Want your own colors and fonts? Every part has its own Style tab. Click any part in the Structure panel, for example Title. Open the Style tab. Change the color, font, size or spacing. Click Update to save your page. Tip: Style the first event the way you like, then use the copy icon in Items to make more events with the same look. RESULT The Five Styles Same text, five different looks. Pick the one that fits your page best. Case Study Dark number badges and a bold line. Strong and easy to read. Case Study style Editorial Rail A clean list with small green dots and green years. Quiet and modern. Editorial Rail style Heritage Split A warm, soft card with round orange numbers. Friendly and classic. Heritage Split style Roadmap Track Four columns, one for each year. Great for a plan or a roadmap. Roadmap Track style Social Cards that swing left and right of a center line. Lively and modern. Social style SETTINGS Options Presets Five ready-made styles: Case Study, Editorial Rail, Heritage Split, Roadmap Track and Social. Items Add, copy, delete and reorder the events. Marker, Date, Title, Description The four parts of each event. Edit them in the Structure panel. ID Optional CSS ID for the timeline. GOOD TO KNOW More Details Pick a style first Apply a preset before you write your text. Then check your text if you switch to another style. Without a style Without a preset, the Timeline is a plain list, centered on your page and up to 640px wide. Any kind of story It is not only for years. Use it for steps, a process or a to-do list too. HELP Troubleshooting I do not see the Timeline in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Timeline. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. My Timeline is just plain text That is how a new Timeline starts. Select it, open Presets, click Apply a preset and choose a style. I changed the item name but my page did not change The names in the Items list are only labels. To change what shows on your page, open Structure, click the Title, and edit the text. I want more than four events Open Items and click the + button. Or copy an event you already styled. I want different colors Click a part in Structure, then open its Style tab. You Did It Your page now tells your story. If you face any problem, please contact our support team. We are happy to help.
