Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Gradient Snakeline Timeline Infographic Free Divi Layout
I’ve often seen this type of layout and also Divi users asking for it so I thought I would have a play around.
As it turns out, it was pretty simple using Divi’s gradient background settings on rows, with some additional pseudo elements added via CSS to create the colour changing line effect.
Plus it’s fully responsive. Go on, adjust your browser width and see 
Be sure to view the ‘Read Me’ file in the download package for full instructions.
If you found this helpful please leave a comment. 
Michelle X
I like this a lot. I’m thinking of a couple ways to use this…. Maybe a way to show a timeline of a web design process or SEO. I love this!
Great tutorial. Thank Michelle so much!
Hi Michelle,
Thanks for this great tutorial and layout. One question I have is why you chose to put the CSS code in a full-width code module rather than in the Page Settings, Advanced section. Is there a programatic reason or is it just a preference of yours?
Thanks!
Yes, when you export a page layout, the CSS from the page setting does not export with it. I never ever use those settings anymore, they were very buggy for a while and I just stopped trying, but the CSS has never exported from there.
Such a great use for gradients! Will utilise this for my sites!
Thank you Michelle, the snakeline is so easy to work with.
I’m not sure how to import json file to the new page. Can anyone tell me what should I do?
If you check the ET website for ‘Portability’ they have docs on it.
Thank you for sharing, just this morning I was looking for such a resource and voila!
I really love the work you’ve done with this timeline and all the other stuff you have in the site. how can I move the css to the section that timeline lives??
Just add a code module in your section and remove all padding and margin from it.
It’s so beautiful but I just don’t know where I can use it yet!
Looks great Michelle,
Replce the year with a price and it would make a simple, clear pricing display.
Congratulations Michelle, thank you for sharing this beautiful work.
Hi Michele
This is a great snake timeline
Thanks
On your net one please if you could do a button click popup model?
Michelle! Thanks a lot! Love the fact that it is responsive all the way through!
So, I am new to this. How do I import the json file into a page? I use DIVI.
Check the ET site for ‘Portability’ and you will find their docs.
Hi Michelle, this is lovely!
I am looking for Timelines for a long time and mostly they are not esthetically pleasing, but this is lovely…
Might I ask for a horizontal timeline design? ;=)
We actually already have one of these: http://divisoup.com/demo-week-105/
But its in our membership: https://divi.academy/membership/
Thank you, Michelle, very useful. I’ve replaced an icon with an image, but its re-sizing itself to a very small icon, smaller than an original icon in your layout. I wonder if it would be possible to control the image size. What is your advise?
Yes you can control the image size with CSS, if you can provide a link we can check for you
Wow, Michelle, it’s fantastic! I’m thinking where to use it right now.
Thanks! I was looking for something to replace the “timeline” I used to use. This looks nice!
Very nice, Michelle. It’s great that you provide these recipes because I know it takes a lot of work. How are the circles made? They seem to be part of the section but I can’t find how they are created. You don’t have to say—just a clue?!
I am not sure what you mean by circles, the icons? These are in the blurb modules. If you mean the actual line, that is the row background gradient settings
Are there any additional steps? I uploaded this to a page and it’s backward. The lines on mine are going the other direction from what shows in the image above and there aren’t any sides… so I have a top border and a bottom border… I added the CSS to the theme options so I am not sure what’s going on… Any ideas?
There are no additional steps other than what you see in the read me file. Can you post a link and we can take a look
I was able to fix it by deleting the first row… Not sure why but now it looks great!! Thanks
I love you! Great and beautiful work
Thank for this Michelle, good job!
Great Idea!!!!
Thank you for sharing
Looks fantastic and I know exactly where I can try it already, thanks Michelle
Very cool layout! Thank you!