Hướng Dẫn Tạo Timeline Vertical Cực Đẹp Cho Flatsome

Hướng Dẫn Tạo Timeline Vertical Cực Đẹp Cho Flatsome

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, flatsomea-z 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

Hướng Dẫn Tạo Timeline Vertical Cực Đẹp Cho Flatsome
Hướng Dẫn Tạo Timeline Vertical Cực Đẹp Cho Flatsome

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.

Download Code UX Builder

Bướ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!

Trả lời

Email của bạn sẽ không được hiển thị công khai.