1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
/*------------------------------------------------------------------------*/ /*------------------- DIVI 2 COLUMN IMAGE & TEXT MODULE-------------------*/ /*------------------------------------------------------------------------*/ /* Divi Vertical Timeline With Annimation Effects */ .vertical-timeline .section-title .et_pb_text_inner { text-align:center; } .vertical-timeline .section-title .et_pb_text_inner h2 { font: 400 40px/1.1em Proxima Nova,sans-serif; margin: 0px; color: #000; } .vertical-timeline .section-title .et_pb_text_inner h3 { font: 100 35px/1.3em Proxima Nova,sans-serif; } .vertical-timeline .et_pb_image img { width: 85%; display: inline; } .vertical-timeline .step { list-style-type: none; position: relative; overflow: hidden !important; padding: 0px 0px 45px 0px; } .vertical-timeline .step::after { content: ""; position: absolute !important; bottom: 5px; left: 45%; margin-left: 40px; z-index: 1; width: 19px; height: 1000px; background: url(https://wordpresssociety.com/demos/divi/wp-content/uploads/2019/08/step-arrow.png) no-repeat 0 bottom; visibility: visible; } .vertical-timeline .step-last::after{ display:none; } .vertical-timeline .step h4.title{ font-size: 24px; } .vertical-timeline .step p{ font-size: 17px; } .vertical-timeline .left-side { width: 45%; float: left; padding: 0 50px; padding-top: 15px; text-align: center; margin: unset !important; position: unset!important; } .vertical-timeline .right-side { width: 55%; float: left; padding-top: 15px; padding-left: 125px; position: unset!important; } .vertical-timeline .right-side .step-number{ width: 97px; height: 97px; display: inline-block; background: url(https://wordpresssociety.com/demos/divi/wp-content/uploads/2019/08/step-background.png) no-repeat 0 0; z-index: 9; position: absolute !important; left: 45%; top:0; } .vertical-timeline .right-side .step-number .et_pb_text_inner p{ font-weight: 500; font-size: 40px; line-height: 96px; text-align: center; color: #e45128; } .vertical-timeline .right-side .step-content{ } /* Divi Vertical Timeline With Annimation Effects Responsive Styles */ @media (max-width: 1200px){ .vertical-timeline .left-side{ padding:15px 25px 0; } } @media (max-width: 992px){ .vertical-timeline .left-side{ padding:15px 15px 0; } } @media (max-width: 767px){ .vertical-timeline .left-side { width: 100%; padding-left: 125px; padding-bottom: 30px; } .vertical-timeline .right-side { width: 100%; } .vertical-timeline .right-side .step-number{ left:0; } .vertical-timeline .step::after { left:0; } .vertical-timeline .et_pb_image img{ width:100%; } } @media (max-width: 374px){ .vertical-timeline .step::after { margin-left:30px; } .vertical-timeline .right-side .step-number { background-size:cover; width:80px; height:80px; line-height:78px; } .vertical-timeline .left-side, .vertical-timeline .right-side{ padding-left: 100px; padding-bottom: 20px } } |
Live Preview
Lorem Ipsum
“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”3>

1
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

2
Where does it come from?
ontrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

3
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.

4
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour
hi there, great tutorial, can you please re upload images or drop them in comments, thanks 🙂
Hello, could you pls upload the images that you used for the arrow and the numbers pls, the link is already down.
Hi Spiro,
I have not been able to download the two files in the last step which are needed for the CSS to work because I am getting a 500 error.
Do you have links to alternate resources, or would it be possible for you to point me towards another download link?
Followed through your entire tutorial, but I am stuck at the last step 🙁