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

Hướng dẫn tạo box chạy dọc website trong Flatsome - ảnh 0

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.

Hướng dẫn tạo box chạy dọc website trong Flatsome - ảnh 4

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.

Hướng dẫn tạo box chạy dọc website trong Flatsome - ảnh 3

Các bạn chú ý các đoạn sau trong code và thay đổi lại theo đúng mục đích:

  1. tel:so-dien-thoai-cua-ban thay thế thành số điện thoại của bạn dạng như tel:09xxxxx
  2. https://zalo.me/so-zalo-cua-ban tương tự như trên, thay thành số zalo của bạn.
  3. 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.
  4. 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.

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:

  1. Copy đoạn Shortcode của Block đã tạo ở bước 1.
  2. Vào Flatsome -> Advanced -> Dán shortcode đó vào khung Footer Scripts.
  3. Lưu lại là xong.
Hướng dẫn tạo box chạy dọc website trong Flatsome - ảnh 2
Copy shortcode
Hướng dẫn tạo box chạy dọc website trong Flatsome - ảnh 1
Dán shortcode vào footer scripts để chạy

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

Đánh giá post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *