Cách sử dụng Add-on Menu

Chúng ta sử dụng phần add-on Menu để hiển thị những danh sách trang mà bạn đã tạo, và chúng thường xuất hiện ở phần đầu website nằm ở vị trí Header, cụ thể ta gọi chúng là Menu. Khi click chọn 1 item thì sẽ chuyển hướng đến những page đó. Lưu ý: Thường sử dụng trên Header hoặc Footer. Việc tùy chỉnh trên Header và Footer thì chỉ được phép khi bạn vào trang Homepage để chỉnh sửa.

Bước 1: Việc trước tiên ta cần tạo 1 Group để tạo 1 menu đầy đủ cho các item menu muốn thêm:

Bước 2: Nhập thông tin cho Group mà bạn tạo

Kết thúc nhấn Save / Save & Close để hoàn thành

Bước 3: Tạo các mục item cho menu ta chọn All Items nhấn Add để thêm menu

Bước 4: Thông các thông tin cho các field:

Bước 5: Ở phần thiết kế giao diện trong Visual 3, ta tạo 1 Block để chứa add-on, Chọn add-on Menu hoặc gõ tìm kiếm với Menu trên thanh add-on. Sau đó kéo thả vào vùng Block được chọn.

Bước 6: Tìm và Click chọn phần Icon Config (biểu tượng bánh răng cưa) của Add on Menu trên thanh Layer xuất hiện hộp thoại.

Tab DETAIL

Group: Chọn nhóm menu đã được tạo

Burger Menu: Hiển thị menu thu gọn

Screen Show Burger: Cho phép hiển thị tính năng responsive menu trên từng chế độ mà bạn muốn

Desktop Style: chọn kiểu hiển thị menu hiển thị trên máy tính

Main Direction: Thiết lập hướng theo chiều ngang hoặc chiều dọc cho item menu

Sub Direction: Thiết lập hướng theo chiều ngang hoặc chiều dọc cho sub item menu

Sub Bullet Desktop: Tạo dấu đầu đoạn item sub menu trên desktop

Tab MOBILE

Mobile Style: Chọn kiểu mobile được hiển thị

Mobile Bullet: Tạo dấu đầu đoạn cho item trên menu mobile

Hamburger Icon: Chọn kiểu icon menu

Hamburger Color: Chọn màu cho icon menu

Hamburger Effect: Hiệu ứng khi click chọn show thông tin menu trên mobile

Mobile Open Effect: Hiệu ứng khi show thông tin menu trên mobile

Column: chia cột cho từng item menu

Row: tạo dòng cho menu

Cart: Hiển thị nút thêm giỏ hàng trên menu Mobile

Sub Menu Column: Tạo các cột cho sub item menu mong muốn. Có thể thiết lập từng giao diện trên tất cả thiết bị

Bước 7: Khi bạn cấu hình toàn bộ các thẻ trên ta nhấn nút Apply để hoàn thành việc Config cho Menu.