Hướng dẫn tạo menu button chạy dọc website trong Flatsome

 14 Tháng Mười Một, 2021

Lượn vòng quanh các Group về Flatsome, mình thấy khá nhiều bạn thắc mắc cách tạo menu button chạy dọc website giống trang demo của Flatsome. Cá nhân mình cũng thích style này của Flatsome, đon giản mà lại tinh tế, nên mình đã clone lại và chia sẻ hướng dẫn chi tiết cách để các bạn tạo button tương tự như vậy ở bài viết này.

Share

Tạo Menu Button Sticky Flatsome

Để các bạn dễ hình dung, mình đã demo trực tiếp menu button chạy dọc website ngay tại bài viết này để các bạn tham khảo, trải nghiệm.

Hướng dẫn tạo menu button chạy dọc website
Tạo menu button chạy dọc website – Flatsome

Và ngay sau đây, sẽ là bài hướng dẫn chi tiết để các bạn ai cũng đều có thể thực hiện được.

Bước 1 - Tạo Đoạn HTML Với Block

Các bạn chọn UX Blocks -> Thêm mới -> Đặt tiêu đề bất kỳ -> Chọn trình soạn thảo văn bản -> dán toàn bộ đoạn html bên dưới vào

[ux_stack direction="col" gap="0.15" class="demo-wrapper" visibility="hide-for-small"]

[ux_html]
<a href="tel:0935355881" class="demo-button"><img src="https://mywebsite.com.vn/wp-content/uploads/2021/12/icon-phone.png">
<p>Hotline</p></a>
[/ux_html]

[ux_html]
<a href="https://zalo.me/0935355881" class="demo-button"><img src="https://mywebsite.com.vn/wp-content/uploads/2023/01/zalo.svg">
<p>Zalo</p></a>
[/ux_html]

[ux_html]
<a href="#" class="demo-button"><img src="https://mywebsite.com.vn/wp-content/uploads/2023/02/demo-meno-button-stick-flatsome_1.webp">
<p>Support</p></a>
[/ux_html]

[/ux_stack]
Huong Dan Tao Menu Button Chay Doc Website Flatsome_1

Bước 2 - Chỉnh sửa lại thông tin button

Các bạn chú ý trong đoạn html trên, mỗi đoạn thẻ <a> (ví dụ dòng 4-5, 9-10, 14-15), bạn sẽ thay đổi tương ứng thành thông tin của bạn, mình lấy ví dụ:

<a href=”#” class=”demo-button”><img src=”https://mywebsite.com.vn/wp-content/uploads/2023/02/demo-meno-button-stick-flatsome_1.webp“>
<p>Support</p></a>

  • Thay #link liên kết của bạn.
  • Thay https://mywebsite.com.vn/wp-content/uploads/2023/02/demo-meno-button-stick-flatsome_1.webp link ảnh của bạn.
  • Thay Support → văn bản hiển thị mà bạn muốn.

Bước 3 - Thêm CSS

Các bạn coppy toàn bộ đoạn CSS ở dưới, dán vào mục “CSS tùy chỉnh” trong “Tùy biến” hoặc mục “Custom CSS” trong “Advance” của theme Flatsome.

/*Button menu sticky Flatsome by Huy Real Property*/
.demo-wrapper{width: 70px;
    overflow: hidden;
    color: #FFF;
    text-align: center;
    padding: 0;
    margin: 0;
    position: fixed;
    right: 5px;
    top: 45%;
    z-index: 25;
}
.demo-button {
    display: block;
    transition: all .3s;
    -webkit-transition: all .3s;
    background-color: rgba(0,0,0,.4);
    text-align: center;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 3px;
}
.demo-button p {
    margin-bottom: 0;
    color: #FFF;
    font-weight: bolder;
    font-size: 11px;
    line-height: 1.3;
    text-transform: uppercase;
}
.demo-button img {
    width: 32px;
    margin-bottom: 3px;
}
.demo-button:hover {
    background-color: #0073aa!important; /*Mã màu nền khi rê chuột*/
    transform: translateX(0);
}
/*Ẩn trên mobile - Bạn có thể xóa đoạn dưới nếu ko cần*/
@media screen and ( max-width: 549px ) {.demo-wrapper{display:none!important}}

Bước Cuối - Chọn Khu Vực Hiển Thị

Tùy thuộc vào việc bạn muốn menu button này xuất hiện ở một bài viết cụ thể, hoặc tất cả bài viết, hoặc toàn bộ trang web mà thực hiện như sau:

  • Xuất hiện ở toàn bộ trang web: Các bạn copy lại đoạn Shortcode của Block đã tạo ở bước 1 -> Trong Flatsome, Chọn “advance” -> Dán đoạn Shortcode vào khung “FOOTER SCRIPTS” & lưu lại.

  • Menu button xuất hiện ở toàn bộ bài viết: Các bạn cũng copy đoạn Shortcode của Block lại, Chọn “Tùy biến” -> “Blog” -> “Blog Single Post” -> Kéo xuống dưới cùng & dán Shortcode vào mục “HTML after blog posts“.
  • Xuất hiện ở bài viết cụ thể: Tại bài viết đó, các bạn chọn “Add elements” -> Chọn “Block” -> Tại danh mục blocks có sẵn, các bạn chọn block đã tạo ở bước 1, và update.

Xong cuôi các bạn refresh lại trang để xem thành quả.

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

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

$59

Donate

Zalo

Support

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

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
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