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.

Screenshot of a Timeline built with Kadence Blocks (version 1)
Screenshot of a Timeline built with Kadence Blocks (version 1)

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:

Screenshot of Kadence Blocks, explaining the structure of the timeline
Screenshot of Kadence Blocks, explaining the structure of the timeline

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

Similar Posts