Hướng dẫn tạo Mega Menu cho Astra

Mega Menu giúp bạn tiết kiệm không gian và tăng tính chuyên nghiệp cho website. Phải thừa nhận rằng Mega Menu đem lại trải nghiệm tốt hơn hẳn so với Menu truyền thống bởi vì sự sắp xếp bắt mắt, gọn gàng và làm tăng không gian cho website.

Mega Menu đang là xu hướng hiện nay và thật tốt khi Astra cũng có chức năng này, nhưng chỉ dành riêng cho bản Pro.

Mega Menu Astra
Mega Menu Astra
Mega Menu
Mega Menu với Widget được chèn vào Menu
Mega Menu Page Builder
Mega Menu với sự hỗ trợ của Page Builder Template

Bạn cần dùng Elementor Pro với tính năng Template để tạo Menu như trên.

Hướng dẫn tạo Mega Menu Astra

Tôi không dùng Page Builder để tạo Mega Menu, thay vào đó chỉ dùng Menu mặc định để tạo cho bạn dễ hiểu và sau đó bạn có thể dễ dàng tạo bằng Page Builder.

Mega Menu
Mega Menu với chú thích phân cấp

Bước 1: Tạo cấu trúc Menu

Bạn cần tạo cấu trúc Menu như sau để có thể tạo được Mega Menu như hình trên

Background Image

  • Background Image (Level 0)
    • BUSINESS PAGES (Level 1)
      • Menu Item 1 (Level 2)
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • AGENCY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • UTILITY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • SPECIAL PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4

Bước 2: Cấu hình Menu

Cấu hình Menu
Bật chức năng Mega Menu cho Level 0
Tạo nhãn
Menu level 1 chỉ đóng vai trò nhãn của một cột
Highlight label
Tạo Nhãn Highlight cho Menu level 2