In this guide, I will tell you how to create a vertical css timeline in Genesis Framework.<\/p>\n
Before we start, let me share a screenshot of the timeline that we\u2019re going to create in this guide. For this guide, we want to create a timeline in our about us page to showcase milestones of our company. You can use it to showcase just about anything – the process remains the same.<\/p>\n
![\"Timeline](\"http:\/\/leaguewp.com\/wp-content\/uploads\/2018\/08\/Timeline-in-Genesis-Theme.jpg\")
<\/p>\n
Steps to Create CSS Timeline<\/h2>\n
Step #1 \u2014 Create a Custom Body Class<\/p>\n
Step #2 \u2014 Use HTML Markup in Your Content<\/p>\n
Step #3 \u2014 Add CSS Snippets for Timeline<\/p>\n
Step #4 \u2014 Customize CSS for Media Queries<\/p>\n
Create a Custom Body Class<\/h2>\n
We\u2019re going to create a custom body class so we can use a different background color, page-width and other necessary HTML markups for the timeline page.<\/p>\n
To do this, simply open the page where you want to create the timeline. Under the layout settings, you should see Custom Body Class. Simply enter a unique class name. For example, for this guide, our body class name is \u201ctimeline-body\u201d. You can give any name as per your liking. Note: <\/strong>Make sure it doesn\u2019t clash with any other classes you\u2019re already using in your theme.<\/p>\n That\u2019s right! We\u2019re going to use some HTML markup in our content. If you want to test it out, simply copy the text below. It contains the markup as well as the classes we will use in creating the timeline design. Note:<\/strong> Again, make sure the class names you use don\u2019t clash with any existing classes in your theme.<\/p>\n![\"Custom](\"http:\/\/leaguewp.com\/wp-content\/uploads\/2018\/08\/Custom-Body-Class-in-Genesis-Framework.png\")
<\/p>\nUse HTML Markup in Your Content<\/h2>\n