How to create a timeline with line down center and arrows for desktop and mobile

Hi. I would like to create a timeline that looks like this:

Specifically we are looking for the line down the middle with little arrows and the years.

I’ve checked out this forum:

When I use this image, the timeline looks bad on mobile:

right

Is there a way to achieve this look without a plug in?

Thank you.

Hello Ashley,

Thanks for posting in!

You can recreate the timeline layout by utilizing the Section, Row, Columns, Div, Headline, Text elements and more. You can check out this demo:

This is the element structure:

The Div element is used to display the little triangle that points to the left or right. The line in between the columns is coming from the background color of the Row element which is made visible because of the gap width in the row settings. You can check out the demo by installing this template here:

Hope this helps.

Yay, that worked. Thank you so much.

I’m having a hard time changing the color of the arrow to blue.

Screen Shot 2021-10-01 at 7.21.38 AM

I found this section when I click on the line. I clicked secondary and typed in the color code.

Screen Shot 2021-10-01 at 7.24.04 AM

Then it appeared like this, but the arrow did not change color, and it reverts back to the color code:
Screen Shot 2021-10-01 at 7.24.10 AM

Hey Ashley,

The arrow is actually a border to the empty Div element. You should be changing the base and the interaction color of the border color of the Div element.

Hope this helps.

That worked, thank you very much!

You are most welcome Ashley

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.