Nội dung
Hướng Dẫn Tạo Timeline Vertical Cực Đẹp Cho Flatsome
Timeline Vertical là hiệu ứng mô tả nội dung theo dòng thời gian cực kỳ tiện ích cho những website mô tả tiến độ dự án hoặc lịch trình di chuyển,…
Hôm nay, MKTShare sẽ hướng dẫn các bạn cách tạo timeline vertical chỉ bằng UX Builder kết hợp 01 chút CSS
Bước 1: Tạo HTML Timeline Vertical
Copy đoạn HTML dưới đây và dán vào khung soạn thảo bằng HTML ngay sau khi tạo bài viết mới, sau đó chọn Edit with UX-Builder để tùy chỉnh lại phần nội dung một cách dễ dàng theo ý các bạn.
DownloadBước 2: Custom CSS Timeline Vertical
Copy và paste đoạn CSS sau vào file Style.css hoặc Giao diện> Tuỳ biến > Custom CSS
.flatsomeaz-timeline-vertical .my-timeline{
padding-bottom: 2rem;
border-left: 2px solid var(--primary-color);
position: relative;
}
.flatsomeaz-timeline-vertical .my-timeline:last-child{
border: 0px;
padding-bottom: 0;
}
.flatsomeaz-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;
}
.flatsomeaz-timeline-vertical .my-timeline:hover:before{
color: white;
background: var(--primary-color);
box-shadow: 3px 3px 0px #bab5f8;
}
.my-time p{margin-bottom:0}Vậy là xong. Chúc các bạn thành công!