1. Mô tả
- Buttons bar dùng chung là tiện ích giúp bạn tạo các Buttons bar riêng biệt và sử dụng trên nhiều Landing page mà không cần phải thiết kế riêng trên từng trang.
- Bạn có thể áp dụng một Buttons bar cho nhiều Landing page khác nhau. Khi Buttons bar được chỉnh sửa, nội dung mới sẽ tự động cập nhật cho tất cả các trang đang sử dụng Buttons bar đó.
- Mỗi Buttons bar được quản lý riêng biệt, giúp bạn dễ dàng theo dõi số lượng Landing page đang áp dụng. Bạn cũng có thể tạo nhiều Buttons bar để sử dụng cho từng nhóm Landing page hoặc với mục đích khác nhau.
Chức năng của Buttons bar: Cung cấp các nút liên hệ nhanh, giúp khách hàng dễ dàng thực hiện các thao tác như gọi điện hoặc nhắn tin.
Vị trí: Hiển thị dưới dạng khối nổi trên giao diện. Trên mobile, Buttons bar hiển thị theo dạng thanh ngang; trên tablet/desktop, hiển thị dưới dạng cụm nút nổi.
2. Thao tác
2.1. Tạo mới Buttons bar 2.1.1. Tạo mới
1. Truy cập Landing page cần thiết lập Buttons bar, sau đó vào:
Section -> Dùng chung -> Buttons bar -> Thêm mới
2. Nhập tên Buttons bar -> Chọn 1 bố cục -> ấn Tạo Buttons bar
* Gợi ý sử dụng bố cục:
| Mẫu | Mô tả |
| Hai nút hành động (đề xuất) | Tập trung vào hai hành động chính trên Landing Page. |
| Hotline và Zalo | Hỗ trợ liên hệ nhanh qua Hotline và Zalo. |
| Ba kênh liên hệ | Tích hợp Hotline, Zalo và Messenger trên cùng một thanh. |
| Đăng ký và gọi | Kết hợp đăng ký và gọi điện trực tiếp. |
| Trang trắng | Tự thiết kế theo yêu cầu |
2.1.2. Tùy chỉnh giao diện Buttons bar
Sau khi tạo, Buttons bar được mở trong 1 tab Builder riêng. Tại đây, bạn sử dụng các thành phần đang hiển thị để điều chỉnh giao diện Buttons bar.
- Cài đặt tùy chỉnh Buttons bar
+ Tab Thiết kế: Cấu hình kiểu dáng, kích thước, màu sắc và giao diện hiển thị của phần tử
- Nút hành động: Hiển thị các kênh liên hệ hiện có (như Hotline, Chat Zalo, Email...)
Ấn vào từng nút (ví dụ:
Email) để mở bảng cấu hình:
(1) Thiết lập thông tin có sẵn: + Kênh: Chọn loại hình liên hệ (Email, Zalo, Viber, WhatsApp, Messenger, Gọi ĐT, Gửi SMS, Liên kết khác)
+ Nhãn: Tên hiển thị của nút (ví dụ: Hotline)
+ Giá trị: Nhập đường dẫn/thông tin nhận dữ liệu (ví dụ: số điện thoại, link Zalo)
+ Màu nền & Icon: Tùy chọn màu sắc thương hiệu của nút, icon đại diện, màu icon và cỡ icon
(2) Thêm mới: Nhấn + Thêm nút để tạo kênh liên hệ mới hoặc bấm biểu tượng Thùng rác bên cạnh từng nút để xóa
+ Kích thước (W / H): Mặc định để mặc định để hệ thống tự động tối ưu độ rộng và chiều cao theo số lượng nút
+ Sắp xếp Icon & Nhãn (Icon vị trí): Đặt biểu tượng nằm phía trên/ bên trái nhãn chữ
- Hiện nhãn trên mobile: Bật/Tắt để ẩn/ hiện đoạn chữ bên cạnh icon khi xem trên giao diện điện thoại (tắt đi giúp thanh nút gọn gàng hơn trên màn hình nhỏ).
- Các nút rộng bằng nhau: Bật tính năng này để tùy chỉnh khoảng cách/kích thước của tất cả các nút
- Nền thanh: Tùy chỉnh phông nền bao quanh toàn bộ cụm thanh nút bấm
- Thiết lập chữ: Định dạng phông chữ, kích thước, độ đậm và màu sắc hiển thị cho nhãn chữ của các nút bấm
+ Tab Hiệu ứng: Thiết lập hiệu ứng chuyển động (Animation) khi phần tử xuất hiện trên trang
- Đổ bóng: Tạo chiều sâu và khoảng cách thị giác giữa phần tử với nền của các buttons
- Hiệu ứng: Chọn hiệu ứng chuyển động, ví dụ Bounce, Flash, Pulse...
+ Tab Nâng cao:
- Ghim phần tử: Bật/Tắt để cố định vị trí của phần tử trên màn hình khi người dùng cuộn trang
=>
Sau khi hoàn tất thiết kế, nhấn Xuất bản để lưu và đưa Buttons bar vào trạng thái có thể sử dụng trên Landing Page.* Lưu ý:
- Lưu: Lưu lại các thao tác thiết kế vừa thực hiện, đồng thời nếu Landing page đang sử dung bạn chỉ cần F5 lại trang để cập nhật nội dung lần gần nhất
- Xem trước: Mở giao diện xem thử thực tế trước khi xuất bản
- Xuất bản: Cập nhật ngay lập tức các thay đổi lên tất cả các Landing Page đang liên kết với Buttons bar
2.2. Sử dụng Buttons bar trên Landing page
1. Quay lại tab Builder của Landing Page ban đầu
2. Chọn Buttons bar muốn sử dụng cho Landing page đang sử dụng -> ấn Sử dụng
3. Buttons bar được thêm vào Landing Page, bạn có thể tùy chỉnh lại với 1 số thao tác sau:
- Chỉnh sửa: Mở Builder riêng của Buttons bar để chỉnh sửa nội dung và thiết kế
- Thay thế: Thay Buttons bar hiện tại bằng một Buttons bar khác trong danh sách
- Nhân bản: Tạo một bản Buttons bar riêng để sử dụng và chỉnh sửa độc lập trên Landing Page
- Bỏ dùng: Gỡ Buttons bar khỏi Landing Page hiện tại
=> Sau khi hoàn tất thiết lập, nhấn Xuất bản Landing Page để áp dụng Buttons bar trên trang.
2.3. Quản lý Buttons bar
Trong danh sách, mỗi Buttons bar hiển thị các thông tin như:
- Tên Buttons bar
- Số Landing page đang sử dụng cho từng Buttons bar
- Người cập nhật cuối
- Trạng thái: Nháp, Xuất bản, Lưu, Đang dùng
Một số thao tác khác:
- Nút Đang sử dụng/Thay thế: Hiển thị Buttons bar đang được sử dụng/ thay thế trên Landing Page hiện tại
- Nút Chỉnh sửa: Mở lại builder riêng của Buttons bar để chỉnh sửa
- Nút Nhân bản: Tạo 1 bản sao chép từ bản gốc
- Nút Xóa: Gỡ Buttons bar ra khỏi danh sách
Chúc bạn thao tác thành công !