Hướng dẫn tạo Mega Menu bằng Flatsome

Nguyễn Thuận 01/08/2023 724 lượt xem

 


Mega Menu là một loại menu kéo xuống lớn, cung cấp nhiều tùy chọn hơn so với menu truyền thống. Mega Menu thường được sử dụng trên các website có nhiều nội dung hoặc sản phẩm, vì chúng giúp người dùng dễ dàng tìm thấy những gì họ đang tìm kiếm.

Hôm nay, SHost sẽ hướng dẫn bạn tạo một Mega Menu cho website bằng Flatsome Studio.

Hướng dẫn tạo Mega Menu cho website bằng Flatsome Studio

Bước 1: Bạn truy cập vào Admin Dashboard (trang quản trị admin)  đưa trỏ chuột đến mục UX Block, sau đó nhấn Add New (Thêm trang mới).

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 2: Ta đi đến trang Add block. Sau đó ta nhập vào phần tiêu đề để thêm tiêu đề cho block. Để ví dụ SHost.vn đang nhập Mega Menu. Sau đó nhấp vào nút Đăng để xuất bản trang. Sau khi xuất bản, nhấp vào UX Builder.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 3: Bạn sẽ đi đến một trang trống mới. Nhấp vào Add elements để thêm một phần tử mới.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 4: Một phần mới sẽ xuất hiện từ bên trái. Click vào Flatsome Studio.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 5: Bạn sẽ tìm thấy một trang mới chứa các mẫu mặc định. Bấm vào phần Mega Menu để tìm các mẫu Mega Menu.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 6: Chọn một mẫu thích hợp và đưa trỏ lên đó. Bạn sẽ tìm thấy một nút có tên Import , hãy nhấp vào nút đó để import.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 7: Một thông báo xác nhận sẽ xuất hiện. Bấm vào Start để xác nhận.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 8: Mega Menu mới của bạn đã được tạo. Bây giờ, bạn có thể tùy chỉnh lại các thông tin của Mega menu cho phù hợp với website. Sau đó nhấn nút Update để cập nhập.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 9: Tiếp theo, bạn cần thêm block Mega Menu vừa tạo vào menu. Bạn quay lại Admin Dashboard (trang quản trị admin) và đưa trỏ chuột đến mục Giao diện, sau đó nhấn vào phần Menu.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 10: Trang menu sẽ hiện ra. Ở đây, bạn nhấn chuột vào nút mũi tên của phần menu nào muốn gán block Mega Menu. Ví dụ, chúng tôi gán block Mega Menu vào phần Mega Menu trên Main menu.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 11: Phần cài đặt sẽ hiện ra. Khi đó, tại phần Menu dropdown ta chọn thông tin Design phù hợp với website (khuyên dùng Container width), UX Block ta chọn block Mega Menu.

Hướng dẫn tạo Mega Menu bằng Flatsome

Bước 12: Sau khi hoàn tất các bước cài đặt Mega Menu, ta nhấn nút Lưu menu để lưu.

Hướng dẫn tạo Mega Menu bằng Flatsome

Kết quả

Hướng dẫn tạo Mega Menu bằng Flatsome

Kết Luận

Qua bài viết mình đã hướng dẫn bạn tạo một Mega Menu cho website bằng Flatsome Studio, mình mong các bạn ủng hộ và đóng góp thêm những ý kiến nhằm giúp SHost phát triển tốt hơn. Cảm ơn các bạn đã theo dõi bài viết. Chúc các bạn thành công.

5/5 - (3 bình chọn)