Hướng dẫn tạo Timeline Vertical đơn giản cho Flatsome

 20 Tháng Sáu, 2022

Trong bài viết này, mình sẽ chia sẻ lại với các bạn một tip đơn giản để tạo Timeline Vertical cho Flatsome chỉ thuần với html & CSS, tùy chỉnh lại nội dung một cách dễ dàng với ux-builder

Share

Để tại Timeline Vertical đơn giản cho Flatsome, mình chỉ sử dụng thuần HTML & CSS, và các bạn có thể dễ dàng tùy chỉnh lại nội dung với UX-Builder, các bạn tham khảo phần demo phía dưới.

6h00

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

10h00

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

logo blog my website

Demo với ảnh này! =))

12h00

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

CSS Timeline Vertical

Đầu tiên, các 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.

/*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*/

HTML Timeline Vertical

Để tạo Timeline Vertical cho Flatsome, các bạn chỉ cần coppy đoạn HTML 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.

[section class="mywebsite-timeline-vertical"]
[row style="small" class="my-timeline"]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="time-section"]
[ux_text font_size="1.3" class="my-time"]
<p><strong>6h00</strong></p>
[/ux_text]
<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</p>
[/col]
[/row]
[row style="small" class="my-timeline"]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="time-section"]
[ux_text font_size="1.3" class="my-time"]
<p><strong>10h00</strong></p>
[/ux_text]
<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</p>
[/col]
[/row]
[row style="small" class="my-timeline"]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="time-section"]
[ux_text font_size="1.3" class="my-time"]
<p><strong>12h00</strong></p>
[/ux_text]
<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</p>
[/col]
[/row]
[/section]

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!

3.8/5 - (11 bình chọn)
Theo dõi
Thông báo của
guest

2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Linh
Linh
5 tháng trước

Mình không hiểu cái này chỉnh sửa như thế nào ạ

2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x
0935 355 881 Zalo Chat Mẫu Website