Hướng dẫn sử dụng khối Menu trong Bio Link

Giới thiệu

Khối Menu là một tính năng mạnh mẽ trong Bio Link, cho phép bạn tạo ra trải nghiệm điều hướng chuyên nghiệp và thuận tiện cho người truy cập. Với khối Menu, bạn có thể tổ chức nhiều liên kết thành một giao diện thân thiện với người dùng, tiết kiệm không gian và tạo ra trải nghiệm trực quan hơn cho trang Bio Link của bạn.

Các kiểu menu

Bio Link cung cấp hai kiểu menu chính với chức năng và giao diện khác nhau:

Menu góc (Corner menu)

Menu ngang (Horizontal menu)

Menu ngang hiển thị các mục menu theo chiều ngang ở phía trên trang, phù hợp khi bạn muốn hiển thị các lựa chọn điều hướng liên tục.

Cài đặt kiểu menu

Để bắt đầu cấu hình menu, hãy làm theo các bước sau:

1. Nhấp vào nút “Kiểu menu” để mở rộng phần cài đặt
2. Chọn một trong hai kiểu hiển thị:
   • Menu góc: Menu hiển thị ở góc màn hình
   • Menu ngang: Menu hiển thị theo chiều ngang ở phía trên trang

Cài đặt cho menu góc

Nếu bạn chọn Menu góc, bạn có thể cấu hình các tùy chọn sau:

Vị trí menu

Chọn vị trí nút menu trên màn hình thiết bị của người dùng. Vị trí phổ biến nhất là “Trái/Trên” hoặc “Phải/Dưới”.

Hiệu ứng menu

Chọn hiệu ứng khi menu xuất hiện. Hiệu ứng “Trượt” thường là lựa chọn tốt nhất vì cảm giác mượt mà và chuyển động tự nhiên.

Cài đặt cho menu ngang

Nếu bạn chọn Menu ngang, hãy cấu hình các tùy chọn sau:

Kiểu bo góc

Xử lý tràn menu

Khi có nhiều mục menu không vừa chiều ngang màn hình, bạn có hai lựa chọn:

• Cuộn ngang: Cho phép người dùng vuốt ngang để xem tất cả các mục
• Xuống hàng: Các mục menu sẽ được sắp xếp xuống hàng tiếp theo

Cài đặt khác cho menu ngang

• Khoảng cách giữa các mục: Điều chỉnh không gian giữa các mục menu
• Hiệu ứng đổ bóng: Thêm đổ bóng cho menu tạo chiều sâu
• Menu cố định khi cuộn: Giữ menu luôn hiển thị khi người dùng cuộn trang
• Màu sắc: Tùy chỉnh màu nền, màu chữ, màu khi kích hoạt

Cài đặt chung

Để thiết lập thông tin cơ bản cho menu, hãy nhấp vào nút “Cài đặt chung”:

Tiêu đề menu

Nhập tiêu đề cho menu của bạn. Tiêu đề này sẽ hiển thị ở phía trên của menu khi nó được mở ra (với menu góc) hoặc có thể được định dạng như một phần của menu ngang.

Biểu tượng menu

Nhập mã biểu tượng Font Awesome để hiển thị trên nút menu (ví dụ: fas fa-bars cho biểu tượng ba gạch ngang). Một số biểu tượng phổ biến:

• fas fa-bars: Biểu tượng menu tiêu chuẩn (☰)
• fas fa-ellipsis-v: Ba chấm dọc (⋮)
• fas fa-th: Biểu tượng lưới
• fas fa-compass: La bàn

Giỏ hàng và đặt hàng

Nếu bạn sử dụng Bio Link cho mục đích thương mại, bạn có thể bật các tính năng sau:

• Hiển thị giỏ hàng: Hiển thị biểu tượng giỏ hàng trong menu
• Kích hoạt tính năng đặt hàng: Kết nối menu với khối Phone Collector để thu thập thông tin đặt hàng
• Block ID của Phone Collector: Nhập ID của khối Phone Collector sẽ sử dụng làm form đặt hàng
• Ghi chú đặt hàng: Thêm thông tin bổ sung hiển thị trong giỏ hàng

Quản lý mục menu

Phần “Mục menu” là nơi bạn tạo và quản lý cấu trúc menu. Hãy nhấp vào nút “Mục menu” để bắt đầu:

Thêm mục menu mới

1. Nhấp vào nút “Thêm mục menu”
2. Nhập tiêu đề mục menu
3. (Tùy chọn) Thêm biểu tượng cho mục menu
4. Nhập URL đích hoặc chọn “ID khối” để liên kết đến khối khác trong Bio Link
5. Chọn “Tab mới” nếu bạn muốn liên kết mở trong tab mới

Tạo menu phân cấp

Bạn có thể tạo menu phân cấp với các mục con:

1. Tạo mục menu chính như bình thường
2. Nhấp vào “Thêm mục con” bên dưới mục menu chính
3. Nhập thông tin cho mục con giống như bạn làm với mục chính
4. Bạn có thể thêm nhiều mục con cho mỗi mục chính

Sắp xếp mục menu

Bạn có thể thay đổi thứ tự các mục menu bằng cách:

1. Nhấp và giữ mục menu
2. Kéo lên/xuống để di chuyển
3. Thả ra ở vị trí mong muốn

Thông tin liên hệ

Menu có thể hiển thị thông tin liên hệ để khách truy cập dễ dàng liên lạc với bạn:

1. Nhấp vào nút “Thông tin liên hệ”
2. Bật “Hiển thị mục liên hệ trong menu” để thêm thông tin liên hệ vào menu
3. Tùy chọn nhập tiêu đề mục liên hệ và biểu tượng
4. Nhập thông tin liên hệ:
   • Số điện thoại
   • Email
   • Địa chỉ
   • Zalo

Tùy chỉnh thiết kế

Phần “Thiết kế” cho phép bạn tùy chỉnh giao diện menu. Các tùy chọn sẽ khác nhau dựa trên kiểu menu bạn chọn:

Thiết kế menu góc

1. Màu sắc nút menu:
   • Màu biểu tượng: Màu của biểu tượng trên nút menu
   • Màu nền nút: Màu nền của nút menu
2. Màu sắc nội dung menu:
   • Màu chữ menu: Màu văn bản trong menu
   • Màu nền menu: Màu nền của menu khi mở ra
   • Màu khi di chuột: Màu khi di chuột qua mục menu
   • Màu biểu tượng menu: Màu của các biểu tượng trong menu
3. Đường viền:
   • Kiểu bo góc: Straight (vuông), Round (tròn), hoặc Rounded (bo cạnh)
   • Độ rộng viền: Điều chỉnh độ dày của viền
   • Màu viền và kiểu viền: Tùy chỉnh màu sắc và kiểu đường viền (solid, dashed, v.v.)
4. Đổ bóng:
   • Độ dịch X/Y: Di chuyển bóng theo chiều ngang/dọc
   • Độ mờ và độ lan rộng: Điều chỉnh kích thước và độ mờ của bóng
   • Màu bóng đổ: Chọn màu cho bóng đổ

Thiết kế menu ngang

Menu ngang có các tùy chọn thiết kế riêng như đã đề cập trong phần cài đặt menu ngang.

Cài đặt hiển thị nâng cao

Nhấp vào nút “Display settings” để mở rộng tùy chọn hiển thị nâng cao:

Lập lịch hiển thị

Nếu bạn muốn menu chỉ hiển thị trong một khoảng thời gian nhất định:

1. Bật công tắc “Schedule”
2. Chọn ngày và giờ bắt đầu hiển thị
3. Chọn ngày và giờ kết thúc hiển thị

Giới hạn đối tượng xem

Bạn có thể kiểm soát ai có thể thấy menu của bạn dựa trên:

1. Quốc gia: Chỉ hiển thị cho người dùng từ các quốc gia được chọn
2. Thiết bị: Chỉ hiển thị trên desktop, tablet hoặc mobile
3. Ngôn ngữ: Chỉ hiển thị cho người dùng sử dụng ngôn ngữ cụ thể
4. Hệ điều hành: Chỉ hiển thị trên các hệ điều hành như iOS, Android, v.v.

Ứng dụng thực tế của khối Menu

Cửa hàng trực tuyến

Đối với các cửa hàng trực tuyến, bạn có thể cấu hình menu với:

• Mục chính: Danh mục sản phẩm
• Mục con: Các sản phẩm cụ thể
• Hiển thị giỏ hàng và kích hoạt tính năng đặt hàng
• Thông tin liên hệ để hỗ trợ khách hàng

Portfolio cá nhân

Cho trang portfolio, bạn có thể sử dụng menu để:

• Phân loại các dự án theo danh mục
• Thêm liên kết đến mạng xã hội
• Cung cấp thông tin liên hệ
• Tạo phần riêng cho mỗi loại nội dung (ảnh, video, v.v.)

Trang landing page

Đối với landing page, menu có thể sử dụng để:

• Tạo điều hướng đến các phần khác nhau của trang
• Cung cấp liên kết nhanh đến các mục quan trọng
• Thêm nút đăng ký hoặc mua hàng

Mẹo và thủ thuật

Tối ưu hóa trải nghiệm người dùng

• Giữ menu đơn giản: Không nên có quá nhiều mục menu chính
• Sử dụng biểu tượng: Biểu tượng giúp menu trực quan hơn
• Đặt tên rõ ràng: Sử dụng tiêu đề dễ hiểu cho các mục menu
• Ưu tiên thứ tự: Đặt các mục quan trọng nhất lên trên cùng

Kết hợp với các khối khác

• Liên kết với Phone Collector: Tạo hệ thống đặt hàng đơn giản
• Liên kết đến ID khối: Tạo điều hướng mượt mà trong cùng một trang
• Tích hợp với tính năng giỏ hàng: Biến Bio Link thành mini store đơn giản

Giải thích thuật ngữ

• Bio Link: Trang web “tất cả trong một” chứa nhiều liên kết và nội dung, thường được sử dụng trong tiểu sử mạng xã hội
• Block ID: Mã nhận dạng duy nhất cho mỗi khối trong Bio Link
• Phone Collector: Khối thu thập thông tin liên lạc từ người truy cập
• Font Awesome: Thư viện biểu tượng phổ biến sử dụng mã như fas fa-bars để hiển thị biểu tượng

Kết luận

Khối Menu là công cụ mạnh mẽ để tổ chức và trình bày các liên kết trong Bio Link của bạn một cách chuyên nghiệp. Với hai kiểu menu chính và nhiều tùy chọn tùy biến, bạn có thể tạo ra trải nghiệm điều hướng tối ưu cho khách truy cập, đồng thời tiết kiệm không gian và cải thiện giao diện người dùng.

Bằng cách kết hợp khối Menu với các khối khác như Phone Collector, bạn có thể mở rộng chức năng của Bio Link từ một trang liên kết đơn giản thành một nền tảng tương tác đầy đủ, phù hợp cho nhiều mục đích sử dụng khác nhau – từ portfolio cá nhân đến cửa hàng trực tuyến mini.