Trong trang demo của Flatsome có phần box nằm cố định bên phải rất đẹp mắt. Và hôm nay mình sẽ hướng dẫn bạn tạo một sticky box chạy dọc website tương tự như vậy khi sử dụng theme Flatsome.
Tạo sticky box trong Flatsome
Với dạng sticky box chạy dọc website này thì bạn có thể dùng làm các dạng như demo của Flatsome hoặc đơn giản là tạo các nút liên hệ đẹp mắt.
Bước 1: Tạo block với đoạn code sau
Truy cập vào phần quản trị -> UX Blocks -> Add new -> dán đoạn code dưới đây vào phần soạn thảo nội dung.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
[ux_stack direction="col" gap="0.15" class="demo-wrapper" visibility="hide-for-small"] [ux_html] <a href="tel:so-dien-thoai-cua-ban" 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/so-zalo-cua-ban" 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] |
Các bạn chú ý các đoạn sau trong code và thay đổi lại theo đúng mục đích:
- tel:so-dien-thoai-cua-ban thay thế thành số điện thoại của bạn dạng như tel:09xxxxx
- https://zalo.me/so-zalo-cua-ban tương tự như trên, thay thành số zalo của bạn.
- https://mywebsite.com.vn/wp-content/uploads/2023/02/demo-meno-button-stick-flatsome_1.webp thay thế bằng icon của bạn.
- Thay từ Support thành từ bạn muốn.
Bước 2: Thêm Css
Sau khi đã có block như ý muốn, bạn thêm một chút css sau đây để hiển thị ra đẹp mắt hơn.
Vào phần Theme File Editor -> Child theme -> Style.css để thêm hoặc vào Flatsome -> Advancede -> Custom Css để thêm. Chọn 1 trong 2 thôi. Như vậy sẽ an toàn cho cấu trúc website của bạn hơn, có lỗi thì xóa code đi là được.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/*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 3: Chọn vị trí hiển thị
Để nó có thể hiển thị cố định ở thanh bên phải màn hình thì bạn làm như sau:
- Copy đoạn Shortcode của Block đã tạo ở bước 1.
- Vào Flatsome -> Advanced -> Dán shortcode đó vào khung Footer Scripts.
- Lưu lại là xong.
Bây giờ chỉ cần refrest lại website và trải nghiệm. Nếu có sử dụng plugin cache thì clear cache đi nhé.
Chúc bạn thành công! Leekhoa.com
