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.7/5 - (15 bình chọn)
Theo dõi
Thông báo của
guest

14 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
1 năm trước

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

Hank
Hank
1 năm trước

Cám ơn Huy Real đã hướng dẫn code Tine line Vertical như trên
Mình có 2 phần sau muốn hỏi:
1/ Huy đang dùng css var(–primary-color) nghĩa là theo màu chủ đạo của Site, tuy nhiên do đặc thù site mình có nhiều bài viết mỗi bài viết có màu sắc chủ đạo khác nhau. Vậy mình có thể dùng code gì để tùy biến màu sắc theo mỗi chủ đề post riêng biệt?
2/ Giả sử ý 1 khó thực hiện thì nhờ Huy hướng dẫn cách chèn CSS + HTML trên vào trong một Post, thay vì hiện tại để trong custom CSS để thông qua Class trong Element.
Cám ơn Huy ^^

Hank
Hank
Trả lời  Huy
1 năm trước

Cám ơn Huy đã phản hồi
Mình đã làm theo cách trên với Element HTML trong UX Bullder nhưng kết quả ko ra được Timeline như để trong Custom CSS ^^
Cụ thể
[ux_html label="Post 1"]

Dán CSS của Huy vào
/*Timeline vertical by MyWebsite*/

/*End timeline vertical*/

Dán HTML của Huy vào
[section class="mywebsite-timeline-vertical"]

[/section]
[/ux_html]

Mình không biết dán vậy có đúng không nhưng khi ra Frontend xem thì Nó không works….>.<

Hank
Hank
Trả lời  Huy Real Property
1 năm trước

Tuyệt vời! Code trên hữu ích đến 99% ^^
Cám ơn Huy rất nhiều vì đã giúp mình giải quyết được vấn đề tùy biến màu trên Time Line.

Có 1 phần nhỏ chỗ đoạn code ngay chỗ hover thì viền cái “đồng hồ TimeLine” bị trùng màu background. (code nguyên bản của Huy ban đầu không bị tình trạng này). Cụ thể đoạn này.

.mywebsite-timeline-vertical .my-timeline:hover:before{
background: #mãmàu!important;
}
Mình thêm code: color: white; vào như bên dưới

.mywebsite-timeline-vertical .my-timeline:hover:before{
color: white;
background: #mãmàu!important;
}

nhưng vẫn không tạo ra được viền màu trắng đối lập bg cho “đồng hồ timeline” ?!

Không biết mình bỏ lỡ điều >.<

Thanks Huy anyway.
Ps: mình có chụp ảnh màn hình nhưng ko biết gửi lên đây ntn ^^

Hank
Hank
Trả lời  Huy Real Property
1 năm trước

Mình thử thêm “color:white!important;” vẫn không được nhưng mình vẫn cảm thấy hài lòng và biết ơn Huy.
Mình thấy ok với kết quả này.
Cám ơn Huy và trân trọng nhé.

Duy
Duy
1 năm trước

Hay quá b ơi, nhưng mình muốn cho nó đối xứng 2 bên cho nó đẹp thì chỉnh được không nhỉ. Chứ để căn trái nó hơi lệch

chuong
chuong
10 tháng trước

Cám ơn bạn đã chia sẽ, code này mình muốn thay đổi trái phải đối xứng nhau mình làm cách nào vậy bạn.

14
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