At the time of writing this article, there is no Timeline block in the Kadence Blocks collection. Since this type of design is challenging and time-consuming, I built a few versions to practice.
Here’s a preview of the end result
How it’s built:
This version of the timeline uses Kadence Blocks Free (2 column Rows) + 2 CSS-styled absolute elements as you can see in the following screenshot:
This is the CSS I used for the absolute-positioned elements. It’s the first time I’ve used position: absolute for a flex element to have it layered with a same-level sibling. This is an unusual case, but it is accepted, as I found on CSS-Tricks.com.
@media (min-width: 769px) {
.vertical-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
@media (max-width: 768) {
.vertical-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%)
}
}
.vertical-line {
content:"";
height: 295px;
width: 3px;
background-color: black;
z-index:1;
position: relative;
}
.blue-dot {
content: "";
width: 30px;
height: 30px;
border-radius: 100%;
background-color: blue;
z-index: 2;
position: absolute;
margin: 0 auto;
}
You can find the end result on my KadenceWP Demo: Responsive Vertical Timeline v1