why embed a timeline to your website
Timeline website graphics are especially useful for visual learners and can make complex information more understandable. There are three ways to create timelines on your website- using software, coding your own timeline, or using a premade timeline. No matter which method you choose, start with a rough outline of what you want your timeline to look like. Consider the following factors:
-How long should the timeline be?
-What colors will you use?
-What fonts will you use?
-Should the timeline be interactive?
After you have a general idea of what your timeline will look like, it’s time to start creating it.
how to create a timeline on your website
Creating a timeline on your website is going to depend on a few factors. How tech-saavy are you, do you want the timeline to be animated or responsive and what is the purpose of the timeline? We’ll go over a few different ways to create timelines on your website.
Let’s start with tech-saavy options. If you know how to code some CSS and have a good sense of infographic design, you can try coding your own timeline. This is a great option if you want a lot of control over how your timeline looks and functions. If you’re not quite up to coding your own timeline, there are still plenty of ways to create one.
The amount of tech-knowledge you’re going to need is going to depend on what CMS (Content Management System) you’re using to build your website. If you’re using WordPress, Squarespace or another popular CMS, there are a number of timeline plugins available that will make creating a timeline easy. Some of these plugins may come with a few premade designs to get you up and running fast while others will give you more control to customize the look and feel of your timeline.
If you aren’t that tech-saavy, having a designer create a few infographic stages that you then connect on your website is a great option. This gives you a beautiful, on-brand timeline without having to do any of the work yourself.
website timeline layout
Once you’ve decided on the type of timeline you want to create, it’s time to start thinking about how to make sure it’s effective. Here are a few things to keep in mind:
- Your timeline should be easy to read and understand.
- The colors you use should be easy on the eyes and easy to differentiate.
- Your timeline should be responsive and look good on all devices
Most people skim timelines, whether vertical or horizontal so keeping the amount of text to a minimum is important. Think about using bullet points or short sentences to make the information easy to digest. This is where icon animations (or even just high quality static ones) can go a long way.
Interactive Website Timelines
Depending on how ‘interactive’ you want the timeline to be, you might need to know (or find someone) who knows a good deal of javascript, CSS and HTML. If you want people to be able to click on parts of the timeline and have something happen (a lightbox with more information, an image gallery, etc.), that’s going to take a bit more work than if you just want a straightforward timeline.
If you are a using a pagebuilder, such as Elementor (built for WordPress), you can start piecing together an animated timeline by adding icon animations to specific sections and manually dragging them into place. This might take some trial and error to get right, but it’s a great way to add some interactivity to your timeline without having to code anything.
website timeline examples
Here’s an example, scrolling down that showcases a simple vertical layout. Notice how as you continue scrolling down the page, new elements are added and may start playing automatically? It’s a simple timeline built in WordPress, using Elementor (no custom code knowledge required).
how to get your own website timeline
If you’re looking to DIY or hire someone to get a timeline build on your website, feel free to get in touch and I’d be glad to help you brainstorm. The method of getting your website timeline is going to vary between websites and goals so having some information upfront is always helpful.
