1. Mô tả
- Top bar dùng chung là tiện ích giúp bạn tạo các Top 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 Top bar cho nhiều Landing page khác nhau. Khi Top 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 Top bar đó.
- Mỗi Top 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 Top 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 Top bar: Hiển thị thông báo, ưu đãi hoặc chương trình khuyến mãi nổi bật dưới dạng thanh ngang trên đầu Landing Page.
Vị trí: Nằm ở vị trí cao nhất của Landing Page, phía trên Header.
2. Thao tác
2.1. Tạo mới Top bar2.1.1. Tạo mới
1. Truy cập Landing page cần thiết lập Top bar, sau đó vào:
Section -> Dùng chung -> Top bar -> Thêm mới
2. Nhập tên Top bar -> Chọn 1 bố cục -> ấn Tạo Top bar
* Gợi ý sử dụng bố cục:
| Mẫu | Mô tả |
| Thông báo và CTA (đề xuất) | Hiển thị thông báo ngắn kèm nút hành động |
| Đếm ngược và CTA | Kết hợp bộ đếm thời gian và nút hành động, phù hợp với các chương trình có thời hạn |
| Thông báo đơn thuần | Hiển thị thông báo ngắn gọn, không kèm nút hành động |
| Hotline và giờ mở cửa | Hiển thị thông tin hotline và giờ mở cửa tại đầu trang |
| Trang trắng | Tự thiết kế theo yêu cầu |
2.1.2. Tùy chỉnh giao diện Top bar
Sau khi tạo, Top 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 Topbar.
- Thanh công cụ cố định:
- Di chuyển: di chuyển thanh công cụ tới vị trí bất kỳ
- Tiêu đề: Thêm nội dung tiêu đề
- Đoạn văn: Chèn các đoạn chữ, khuyến mãi, thông báo hoặc nút bấm chữ
- Image: Tải lên và chèn logo, biểu tượng ưu đãi hoặc hình ảnh trang trí
- Nút bấm: Thêm nút kêu gọi hành động. Ví dụ: Mua ngay,....
- Video ngang: Thêm video
- Hình hộp: Tạo 1 khu vực/ hộp chứa để bố trí nhóm nội dung
- Đường kẻ: Thêm đường phân cách giữa các khu vực nội dung
- Shape: Thêm biểu tượng minh họa
- Code Embed: Chèn thêm mã HTML/CSS/JavaScript riêng để tùy biến chuyên sâu
- Cài đặt tùy chỉnh Top 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ử

- Kích thước: Tùy chỉnh chiều cao của phần tử
- Màu và hình nền: Thay đổi màu sắc hoặc hình nền cho thành phần
- Lớp phủ: Thêm lớp màu phủ lên nền để làm nổi bật chữ hoặc các nội dung
- CSS tùy chỉnh: Nhập trực tiếp mã CSS để tùy biến giao diện chuyên sâu
+ 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: Bật tính năng này để tạo chiều sâu và khoảng cách thị giác giữa phần tử với nền
- Hiệu ứng: Chọn hiệu ứng chuyển động, ví dụ Bounce, Flash, Pulse...
- Hiệu ứng rê chuột: Bật/Tắt để thiết lập hiệu ứng khi người dùng di chuyển chuột lên thành phần.
+ Tab Nâng cao:
- Ghim phần tử: Bật/Tắt và điều chỉnh vị trí để cố định 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 Top 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 Topbar.
2.2. Sử dụng Top bar trên Landing page
1. Quay lại tab Builder của Landing Page ban đầu
2. Chọn Top bar muốn sử dụng cho Landing page đang sử dụng -> ấn Sử dụng
3. Top 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 Top bar để chỉnh sửa nội dung và thiết kế
- Thay thế: Thay Top bar hiện tại bằng một Top bar khác trong danh sách
- Nhân bản: Tạo một bản Top bar riêng để sử dụng và chỉnh sửa độc lập trên Landing Page
- Bỏ dùng: Gỡ Top 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 Top bar trên trang.
2.3. Quản lý Top bar
Trong danh sách, mỗi Top bar sẽ hiển thị các thông tin như:
- Tên Top bar
- Số Landing page đang sử dụng cho từng Top bar
- 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ị Top 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 Top 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ỡ Top bar ra khỏi danh sách
Chúc bạn thao tác thành công !