Trong bài viết này, tôi sẽ chia sẻ một mẹo đơn giản để tạo một Timeline dọc cho Flatsome chỉ bằng sử dụng HTML & CSS. Bạn có thể dễ dàng tùy chỉnh nội dung một cách tiện lợi với trình tạo giao diện UX-Builder.

Trong việc tạo Timeline Vertical đơn giản cho Flatsome, tôi chỉ sử dụng thuần HTML & CSS. Điều tuyệt vời là bạn có thể dễ dàng tùy chỉnh nội dung bằng cách sử dụng UX-Builder. Bạn có thể tham khảo phần demo bên dưới để hiểu rõ hơn.

Đầu tiên bạn thêm HTML Timeline Vertical

Để tạo một Timeline Vertical cho Flatsome, chỉ cần sao chép đoạn mã HTML và dán nó vào khung soạn thảo HTML sau khi tạo bài viết mới. Tiếp theo, hãy chọn “Edit with UX-Builder” để dễ dàng tùy chỉnh nội dung theo ý muốn của bạn.

<wp-p><strong>6h00</strong></wp-p>

<wp-p>Sáng sớm thức dậy – Thể dục thể thao – Sức khỏe dồi dào – Đi vào ngủ tiếp</wp-p>

<wp-p><strong>10h00</strong></wp-p>

<wp-p>Trời buồn trời đổ cơn mưa – Ta buồn ta ngủ từ trưa đến chiều – Ngủ xong dậy ăn cơm chiều – Ăn xong lại ngủ từ chiều đến mai</wp-p>

<wp-p><strong>12h00</strong></wp-p>

<wp-p>Bồ xấu thì sợ bạn chê – Bồ đẹp thì sợ bạn mê, bạn giành – Thế nên anh mới phải đành – Làm thân trai ế giành bồ bạn anh</wp-p>

Sau đó bạn thêm CSS Timeline Vertical

Bạn coppy toàn bộ phần CSS phía dưới, và dán vào khung CSS tùy chỉnh của Flatsome.

[sourcecode]/*Timeline vertical by MyWebsite*/
.mywebsite-timeline-vertical .my-timeline{
padding-bottom: 2rem;
border-left: 2px solid var(–primary-color);
position: relative;
}
.mywebsite-timeline-vertical .my-timeline:last-child{
border: 0px;
padding-bottom: 0;
}
.mywebsite-timeline-vertical .my-timeline:before{
content:"\e01a";
font-family: fl-icons;
color: var(–primary-color);
font-size: 17pt;
width: 40px;
height: 40px;
background: white;
box-shadow: 3px 3px 0px #bab5f8;
position: absolute;
left: -22px;
top: -1px;
padding: 0 7px;
border: 2px solid var(–primary-color);
border-radius: 99px;
}
.my-timeline .my-time{
line-height: 32px;
border-radius: 4px;
margin-bottom: 10px;
padding: 4px 10px;
background: var(–primary-color);
color: #ffffff;
}
.time-section{
border: 2px solid var(–primary-color);
border-radius: 6px;
margin-left: 33px;
margin-top: -13px;
box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
}
.time-section:before{
top: 21px;
left: -10px;
border-top: 8px solid transparent;
border-right: 8px solid var(–primary-color);
border-bottom: 8px solid transparent;
position:
absolute;
content: ”;
z-index: 1000;
}
.my-timeline-vertical{
padding: 16px 5px 0 25px!important;
}
.mywebsite-timeline-vertical .my-timeline:hover:before{
color: white;
background: var(–primary-color);
box-shadow: 3px 3px 0px #bab5f8;
}
.my-time p{margin-bottom:0}
/*End timeline vertical*/</div>
[/sourcecode]

Trong quá trình thực hiện, nếu có thắc mắc nào, các bạn có thể để lại bình luận cho mình phía dưới bài viết.

Chúc các bạn thành công!