Streaming live at 10am (PST)

Design a timeline


#1

Hello,

Thanks for your help in advance.

I'm trying to recreate the following "timeline" design on the Mission page of my website.

It doesn't need to have any interactions, and should cover the full width of a container. The text font and size doesn't matter as much, as I can edit that on my own.

It seems like I can use the feature lists, but it doesn't provide the diagram of the timeline (vertical rod, divided into segments by circles).

Any ideas would be appreciated! Thank you.

Best,

Rachel


Here is my public share link: https://preview.webflow.com/preview/mighty-rachel?preview=780df9df647d7847006b5216853fe75e


How to build a dynamic timeline?
#2

@rngu

I've made a couple of these timelines and I can show you how you do it. I'm at work at the moment but I'll get back to this thread once i'm at home :slight_smile:


#3

Thanks @StevenP. Appreciate it!


#4

@rngu one approach you can take is using rows of two columns and flip-flopping the order of content in each column for each row. :smiley:

Then stack the rows :slight_smile: this way you can organize the content and make the middle line with an absolute positioned div block that spans the height of the parent container which is holding all of the rows :smiley:


#5

Allright @rngu ! So here's how I made it using the Row widget (like @Waldo pointed out) and some divs. I will spell out all classes i used for this. You can of course use your own class names. :slight_smile:

  1. Drag in a Section (if want your whole timeline inside just one section, drag in a Div instead!). Name it Timeline Wrapper. Set background color.

  2. Drag in a Container and call it Timeline Container. Set text alignment to "center".

  3. Drag in a H1 and give it a class. Style it with bottom border and bottom padding of 10-15px.

  4. Drag in a Div inside Timeline Container and name it Timeline

  5. Inside Timeline Container, drag in a Row Widget. Name it Timeline Row. Set it to position: relative.

  6. Give each column a name of Timeline Left Column and Timeline Right Column. Set it to position: relative. Style the right column width a left border of 5px

  7. In each column, drag in a Div and call them Timeline Left Box respectively Timeline Right Box. Set it to position: relative.

  8. Inside Timeline Left Box and Timeline Right Box, drag in a div in each of them and call it Timeline Left Content and Timeline Right Content. Set each side that faces the timeline bar with a 30px margin. Set full padding to 20px and give them a background color. Set the Timeline Right Content with a top padding of 40% and the Timeline Left Content with a top padding of 20%.

  9. Add a heading and a paragraph text inside the Timeline Right/Left Content.

  10. Inside Timeline Left Box and Timeline Right Box, add a Div. Call it Left Triangle and Right Triangle respectively. They need to be above Timeline Right/Left Content in order. Rotate each div 45°. Set them to position absolute, give them the same background color as the Timeline Right/Left Content and align the so they make the appearance of triangle (they are placed underneath Timeline Left/Right Content and are just sticking out a bit).

  11. Inside Timeline Right/Left Content, add a div in each of them and place it between the Heading and Paragraph. Name them separately; in this case it's Timeline Mini Circle Left and Timeline Mini Circle Right. Give them a full padding of 10px, a 3px border, 50% border radius, display inline block and a background color same as the main Timeline Wrapper . Give it position: absolute. Align them accordingly to the triangles you created in step 10.

  12. Go back to Timeline Wrapper. Add a text element and name it Timeline Year. Type in the year ("2012"). Set it to display inline block, 50% border radius and give it a full padding. You need to adjust the top/bottom padding so it creates a nice, even circle. Add a background color and finally set it to position absolute. Align it so its centered on the Timeline Bar.
    Voilá!. Done!

Now, this is built with two boxes that contains the heading and text, but in your example the second year (2014) contains four boxes. To replicate that you'll just:

  1. Duplicate Timeline Holder (then change the year to "2014 in that circle).
  2. Duplicate the Timeline Left Box and Timeline Right Box inside the Timeline Left Column and Timeline Right Column respetively so that you have two Timeline Left Box and two Timeline Right Box. Then you need to add a sub class (I call them Second Left Content and Second Right Content) to each of these to alter the top padding percentage. Decrease it to maybe 10% from the default 40%/20% you added earlier.

This is just optimized for desktop mode so you need to adjust all position: absolute percentage values on the tablet and phone versions so they align correctly.
I haven't written out all percentage numbers for positioning etc. But you'll find everything here:

Read-only: https://preview.webflow.com/preview/spsandbox?preview=54211902c42273cc0559dbb81dc8610e

Preview: http://spsandbox.webflow.io/

You probably do all of this with Flexbox too if you want to go the more advanced route but that's whole another story...:slight_smile:
Feel free to ask question (or pick on me if I screwed up) :smiley:


Create Vertical Timeline
#6

@StevenP thanks so much! This was immensely helpful and quite a lifesaver.
@waldo, appreciate your help!


#7

Glad I could help! :slight_smile:


#8

Great job, @StevenP! :slight_smile:


#9

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