Thủ thuật Ngày 07/08/2024 1208 lượt xem

Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega 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…

Lê Anh ĐôngFlatsome trên Google News

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega

Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega 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, Flatsome.xyz sẽ hướng dẫn bạn tạo một Mega Menu cho website bằng Flatsome Studio.

Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Flatsome Studio là gì ?

Flatsome Studio là một công cụ thiết kế trực quan tích hợp trong theme Flatsome của WordPress. Công cụ này cho phép người dùng tạo và tùy chỉnh các trang web một cách dễ dàng mà không cần phải viết mã. Với giao diện kéo và thả, bạn có thể thêm các phần tử như tiêu đề, hình ảnh, sản phẩm, và nhiều nội dung khác vào trang của mình.

Các tính năng chính của Flatsome Studio:

  • Kéo và thả: Thiết kế trang dễ dàng mà không cần kỹ năng lập trình.
  • Mẫu có sẵn: Cung cấp nhiều mẫu để bạn lựa chọn và tùy chỉnh.
  • Tùy chỉnh linh hoạt: Cho phép điều chỉnh từng chi tiết nhỏ về kiểu dáng và nội dung.
  • Tối ưu hóa cho di động: Đảm bảo rằng trang web trông đẹp trên mọi thiết bị.

Flatsome Studio giúp bạn tiết kiệm thời gian và nỗ lực trong việc thiết kế website, đồng thời mang lại sự sáng tạo và linh hoạt cho người dùng.

Dưới đây là hướng dẫn chi tiết hơn về cách tạo menu bằng UX Builder trong Flatsome Studio, bao gồm 12 bước cụ thể:

Bước 1: Truy cập vào Admin Dashboard

Đầu tiên, bạn cần truy cập vào trang quản trị admin của website. Từ đây, hãy di chuyển con trỏ chuột đến mục UX Block trong menu bên trái. Khi bạn thấy tùy chọn này, hãy nhấn vào Add New (Thêm trang mới) để bắt đầu tạo một block mới cho menu của bạn.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 2: Thêm tiêu đề cho Block

Sau khi nhấn vào Add New, bạn sẽ được chuyển đến trang Add block. Tại đây, bạn sẽ thấy một trường nhập liệu dành cho tiêu đề. Nhập vào tiêu đề mà bạn muốn sử dụng cho block này. Ví dụ, bạn có thể nhập Mega Menu để dễ nhận diện. Sau khi hoàn tất, hãy nhấn vào nút Đăng để xuất bản block mới này. Khi block đã được xuất bản, bạn sẽ thấy tùy chọn để nhấp vào UX Builder.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 3: Truy cập UX Builder

Khi đã nhấn vào UX Builder, bạn sẽ được chuyển đến một trang mới, nơi bạn có thể thiết kế giao diện cho block của mình. Trang này sẽ ban đầu trống và bạn sẽ cần thêm các phần tử vào đó. Nhấp vào nút Add elements để bắt đầu thêm phần tử mới cho Mega Menu.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 4: Chọn Flatsome Studio

Một danh sách các phần tử sẽ xuất hiện từ bên trái màn hình. Trong danh sách này, hãy tìm và nhấp vào tùy chọn Flatsome Studio. Đây là nơi bạn sẽ tìm thấy nhiều mẫu thiết kế sẵn có để sử dụng cho Mega Menu của mình.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 5: Tìm mẫu Mega Menu

Sau khi nhấp vào Flatsome Studio, một trang mới sẽ hiện ra chứa các mẫu thiết kế mặc định. Tại đây, hãy tìm kiếm phần Mega Menu để xem các mẫu menu sẵn có. Chọn mẫu mà bạn cảm thấy phù hợp nhất với nhu cầu của website.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 6: Nhập mẫu Mega Menu

Khi đã chọn một mẫu phù hợp, đưa trỏ chuột lên mẫu đó. Bạn sẽ thấy một nút có tên là Import xuất hiện. Nhấn vào nút này để bắt đầu quá trình nhập mẫu Mega Menu vào block của bạn.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 7: Xác nhận nhập mẫu

Sau khi nhấn nút Import, một thông báo xác nhận sẽ xuất hiện trên màn hình. Hãy bấm vào nút Start để xác nhận việc nhập mẫu Mega Menu. Quá trình này có thể mất một chút thời gian tùy thuộc vào kích thước của mẫu.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 8: Tùy chỉnh Mega Menu

Bây giờ, Mega Menu mới của bạn đã được tạo thành công. Bạn có thể bắt đầu tùy chỉnh lại các thông tin và cấu trúc của Mega Menu để phù hợp hơn với giao diện và nội dung của website. Sau khi thực hiện các thay đổi cần thiết, hãy nhấn nút Update để lưu lại các thay đổi này.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 9: Thêm Block Mega Menu vào Menu

Tiếp theo, bạn cần thêm block Mega Menu vừa tạo vào menu chính của website. Quay trở lại trang quản trị admin và di chuyển chuột đến mục Giao diện, sau đó nhấn vào phần Menu.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 10: Gán Block Mega Menu

Một trang menu sẽ hiện ra với các tùy chọn khác nhau. Tại đây, hãy nhấp chuột vào nút mũi tên bên cạnh phần menu mà bạn muốn gán block Mega Menu. Ví dụ, nếu bạn muốn gán block này vào phần Mega Menu trên menu chính (Main menu), hãy chọn phần đó.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 11: Cài đặt tùy chọn Menu

Khi phần cài đặt menu hiện ra, bạn sẽ thấy nhiều tùy chọn cấu hình. Trong phần Menu dropdown, hãy chọn thông tin thiết kế phù hợp với website của bạn (thường được khuyên dùng là Container width). Sau đó, trong mục UX Block, hãy chọn block Mega Menu mà bạn đã tạo ở các bước trước.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bước 12: Lưu Menu

Cuối cùng, sau khi đã hoàn tất tất cả các bước cài đặt cho Mega Menu, hãy nhấn nút Lưu menu để lưu lại tất cả các thay đổi mà bạn đã thực hiện. Điều này sẽ đảm bảo rằng Mega Menu của bạn xuất hiện đúng cách trên website.

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Bây giờ bạn đã hoàn tất việc tạo Mega Menu bằng UX Builder trong Flatsome Studio!

Kết quả

Cách tạo menu bằng Uxbuild trong flatsome - tạo menu mega
Cách tạo menu bằng Uxbuild trong flatsome – tạo menu mega

Kết Luận

Trên đây, mình đã chia sẻ với các bạn cách tạo một Mega Menu cho website sử dụng Flatsome Studio. Hy vọng rằng những thông tin và hướng dẫn trong bài viết sẽ hữu ích cho các bạn trong quá trình thiết kế và phát triển trang web của mình. Mega Menu không chỉ giúp cải thiện trải nghiệm người dùng mà còn làm cho giao diện của website trở nên chuyên nghiệp và dễ dàng điều hướng hơn.

Mình rất mong nhận được sự ủng hộ từ các bạn cũng như những ý kiến đóng góp quý báu để cùng nhau xây dựng và phát triển cộng đồng tại Flatsome.xyz. Nếu bạn có bất kỳ thắc mắc nào hoặc cần thêm thông tin, đừng ngần ngại để lại câu hỏi. Sự tham gia tích cực của các bạn sẽ là động lực lớn để chúng ta tiếp tục cải thiện và mang đến những nội dung giá trị hơn nữa.

Cảm ơn các bạn đã dành thời gian theo dõi bài viết. Chúc các bạn luôn thành công trong các dự án của mình và tiếp tục khám phá những công cụ hữu ích mà Flatsome Studio mang lại!

Điểm 5/5 - ( Có 1 bình chọn)

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Các dịch vụ của FLATSOME.XYZ