Mega Menu là dạng menu dropdown có kích thước lớn, cho phép hiển thị nhiều danh mục, liên kết và thậm chí cả hình ảnh trong một khung thả xuống duy nhất. Khác với menu truyền thống chỉ hiển thị danh sách dọc đơn giản, Mega Menu tổ chức nội dung theo dạng lưới nhiều cột, giúp người dùng bao quát toàn bộ cấu trúc website chỉ trong một lần nhìn.
Loại menu này phù hợp nhất với các website thương mại điện tử, trang tin tức hoặc bất kỳ website nào có nhiều danh mục sản phẩm hoặc chủ đề nội dung. Nếu bạn đang dùng theme Flatsome cho WordPress, bạn hoàn toàn có thể tạo Mega Menu chuyên nghiệp mà không cần plugin bổ sung, nhờ vào công cụ Flatsome Studio tích hợp sẵn. Nếu cần hỗ trợ thiết lập theme, bạn có thể tham khảo thêm tại trang hỗ trợ theme WordPress.
Hướng dẫn tạo Mega Menu từng bước bằng Flatsome Studio
Toàn bộ quá trình tạo Mega Menu trong Flatsome diễn ra trong hai giai đoạn chính: tạo block nội dung bằng UX Builder, sau đó gán block đó vào vị trí menu mong muốn. Dưới đây là hướng dẫn chi tiết từng bước.
Bước 1: Tạo UX Block mới cho Mega Menu
Đăng nhập vào trang quản trị WordPress, di chuột vào mục UX Block trên thanh sidebar và chọn Thêm trang mới. Đây là nơi bạn sẽ xây dựng bố cục nội dung của Mega Menu.
Bước 2: Đặt tiêu đề và xuất bản block
Trong trang thêm block, nhập tiêu đề cho block, ví dụ Mega Menu. Nhấn Đăng để xuất bản block này. Sau khi xuất bản thành công, nhấn vào nút UX Builder để mở trình chỉnh sửa trực quan.
Bước 3: Thêm phần tử vào trang trắng
Khi UX Builder mở ra, bạn sẽ thấy một trang trắng chưa có nội dung. Nhấn vào nút Thêm phần tử để bắt đầu chèn các thành phần vào block.
Bước 4: Mở Flatsome Studio từ thanh công cụ
Một thanh công cụ sẽ trượt ra từ bên trái màn hình. Trong danh sách các nguồn phần tử, chọn Flatsome Studio để truy cập thư viện mẫu thiết kế có sẵn.
Bước 5: Tìm mẫu Mega Menu trong thư viện
Trong thư viện Flatsome Studio, sử dụng bộ lọc hoặc tìm kiếm từ khóa Mega Menu để lọc ra các mẫu thiết kế phù hợp. Thư viện cung cấp nhiều kiểu bố cục khác nhau để bạn lựa chọn.
Bước 6: Import mẫu Mega Menu vào block
Di chuột lên mẫu bạn ưa thích, nút Import sẽ xuất hiện. Nhấn vào đó để bắt đầu nhập mẫu vào block đang soạn thảo.
Bước 7: Xác nhận quá trình import
Một hộp thoại xác nhận xuất hiện. Nhấn Start để xác nhận và bắt đầu quá trình nhập mẫu vào trang. Quá trình này thường hoàn tất trong vài giây.
Bước 8: Tùy chỉnh nội dung Mega Menu
Mẫu Mega Menu đã được nhập thành công vào block. Lúc này, bạn chỉnh sửa tiêu đề danh mục, liên kết, hình ảnh hoặc bất kỳ nội dung nào để phù hợp với website của mình. Sau khi hoàn tất, nhấn Cập nhật để lưu thay đổi.
Bước 9: Truy cập trình quản lý menu WordPress
Quay lại trang quản trị WordPress, chọn Giao diện trên sidebar, sau đó nhấn vào Menu để mở trình quản lý menu của WordPress.
Bước 10: Chọn mục menu cần gán Mega Menu
Trong trang quản lý menu, tìm đến mục menu mà bạn muốn gán Mega Menu (ví dụ: Main menu). Nhấn vào mũi tên mở rộng bên cạnh mục menu đó để xem thêm tùy chọn cài đặt.
Bước 11: Cấu hình UX Block và kiểu hiển thị dropdown
Phần cài đặt chi tiết của mục menu xuất hiện. Tại mục Menu dropdown, chọn Design phù hợp, khuyến nghị chọn Container width để Mega Menu chiếm đúng chiều rộng container. Tại phần UX Block, chọn block Mega Menu bạn vừa tạo ở các bước trước.
Bước 12: Lưu menu và kiểm tra kết quả
Sau khi hoàn tất tất cả cài đặt, nhấn nút Lưu menu để áp dụng các thay đổi. Truy cập website ở chế độ xem trước để kiểm tra Mega Menu hiển thị đúng như kỳ vọng hay chưa. Nếu cần hỗ trợ kỹ thuật thêm, đội ngũ tại trang liên hệ sẵn sàng hỗ trợ bạn.
Kết quả Mega Menu sau khi thiết lập hoàn chỉnh
Sau khi lưu, Mega Menu sẽ xuất hiện trên thanh điều hướng của website với bố cục đa cột chuyên nghiệp, hiển thị đầy đủ các danh mục và liên kết bạn đã cấu hình. Giao diện trực quan hơn, giúp người truy cập dễ dàng tìm thấy nội dung cần thiết.
Nếu bạn đang tìm kiếm một theme WordPress chất lượng có tích hợp sẵn tính năng Mega Menu, hãy khám phá kho theme WordPress với nhiều lựa chọn phong phú. Bên cạnh đó, một hosting ổn định cũng ảnh hưởng lớn đến tốc độ tải Mega Menu, bạn có thể tham khảo các gói hosting WordPress tối ưu hoặc gửi yêu cầu hỗ trợ hosting và tên miền nếu cần tư vấn thêm.
Câu hỏi thường gặp về Mega Menu trong Flatsome
Mega Menu trong Flatsome có cần cài thêm plugin không?
Không. Theme Flatsome tích hợp sẵn tính năng UX Block và Flatsome Studio, cho phép tạo Mega Menu hoàn toàn mà không cần bất kỳ plugin bổ sung nào. Toàn bộ quá trình thực hiện ngay trong giao diện quản trị WordPress.
Tôi có thể thêm hình ảnh vào Mega Menu Flatsome không?
Có. Khi tùy chỉnh nội dung trong UX Builder, bạn có thể thêm phần tử hình ảnh, banner hoặc icon vào bố cục Mega Menu. Flatsome hỗ trợ chèn hình ảnh linh hoạt trong bất kỳ ô nào của lưới menu.
Mega Menu trong Flatsome có hiển thị tốt trên điện thoại không?
Trên thiết bị di động, Mega Menu thường được ẩn và thay thế bằng menu hamburger tiêu chuẩn để đảm bảo trải nghiệm người dùng. Theme Flatsome xử lý điều này tự động, bạn không cần cấu hình thêm.
Sự khác biệt giữa Mega Menu và menu dropdown thông thường là gì?
Menu dropdown thông thường chỉ hiển thị danh sách các liên kết theo chiều dọc, thường giới hạn trong một cột. Mega Menu hiển thị nhiều cột, có thể kết hợp chữ, hình ảnh và các nhóm liên kết có tiêu đề, phù hợp với website có cấu trúc danh mục phức tạp.
Tôi có thể tạo nhiều Mega Menu khác nhau cho từng mục menu không?
Hoàn toàn có. Với mỗi mục menu, bạn có thể tạo một UX Block riêng với bố cục và nội dung khác nhau, sau đó gán từng block vào mục menu tương ứng trong trình quản lý menu của WordPress.
Chọn kiểu Design nào cho Mega Menu trong Flatsome thì tốt nhất?
Tùy thuộc vào bố cục website. Nếu muốn Mega Menu trải rộng toàn bộ chiều ngang trang, chọn Full width. Nếu muốn Mega Menu căn chỉnh theo chiều rộng nội dung chính, chọn Container width. Đây là tùy chọn được khuyến nghị cho phần lớn các website thương mại điện tử.
