VietNetwork.Vn

Bạn có muốn thêm một menu lớn trên trang web WordPress của mình không?

Mega Menus cho phép bạn sắp xếp hàng chục, thậm chí hàng trăm liên kết thành các cột và hàng thân thiện với người dùng. Sau đó, bạn có thể thêm nội dung phong phú như hình ảnh và video để làm cho các menu lớn của mình trở nên hữu ích hơn nữa.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách bạn có thể thêm một menu lớn vào trang web WordPress của mình, từng bước một.

1. Tại sao lại thêm một Mega Menu trên trang web WordPress của bạn?

WordPress đi kèm với trình tạo kéo và thả mà bạn có thể sử dụng để tạo menu thả xuống, menu tiêu đề, v.v. Thậm chí có những plugin cho phép bạn tạo các menu điều hướng tùy chỉnh trong các chủ đề WordPress.

Nếu trang web của bạn có nhiều nội dung thì bạn có thể cần tạo một menu lớn để thay thế. Các menu lớn này cho phép bạn thêm danh sách thả xuống nhiều cột vào điều hướng WordPress.

Bạn có thể sử dụng các menu lớn để sắp xếp nội dung của mình theo các tiêu đề và tiêu đề phụ khác nhau, để khách truy cập có thể tìm thấy chính xác trang mà họ đang tìm kiếm. Ví dụ: nếu bạn tạo một thị trường trực tuyến thì bạn có thể sắp xếp tất cả danh mục sản phẩm và danh mục phụ của mình trong một menu lớn.


Điều này giúp người mua sắm tìm thấy danh mục sản phẩm chính xác mà họ muốn và mua hàng.

Menu lớn cũng có thể hiển thị nội dung phong phú cho khách truy cập của bạn, chẳng hạn như video, văn bản, tìm kiếm và các bài đăng gần đây.

Nhiều trang web cũng sử dụng hình ảnh vì chúng làm cho các menu lớn dễ quét hơn. Ngay cả khi bạn đang hiển thị hàng chục mục menu, việc chia chúng thành các cột rồi thêm hình ảnh có liên quan có thể giúp khách truy cập tìm thấy chính xác nội dung họ đang tìm kiếm trong vài giây.


Điều đó nói rằng, hãy xem cách bạn có thể dễ dàng thêm một menu lớn vào trang web WordPress của mình.

2. Cách tạo Menu Mega cho trang web WordPress của bạn

Cách dễ nhất để thêm một menu lớn trên trang web WordPress của bạn là sử dụng Max Mega Menu. Plugin này cho phép bạn thêm nội dung phong phú vào các menu lớn của mình, bao gồm hình ảnh, văn bản, phòng trưng bày, v.v.

Bằng cách này, bạn có thể tạo các menu hấp dẫn và hữu ích hơn.


Bạn cũng có thể tạo kiểu cho mọi phần của menu lớn bằng cách thêm các màu khác nhau, thay đổi kích thước phông chữ và sử dụng các biểu tượng khác nhau.

Trước tiên, bạn cần cài đặt và kích hoạt plugin. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

2.1. Kích hoạt Mega Menu trên trang web WordPress của bạn

Sau khi kích hoạt, hãy vào Mega Menu »Menu Locations để xem tất cả các khu vực khác nhau nơi bạn có thể thêm một mega menu.

Bạn có thể thấy các tùy chọn khác nhau tùy thuộc vào chủ đề WordPress của mình.


Để bắt đầu, bạn cần bật các menu lớn ở mọi vị trí mà bạn muốn sử dụng chúng.

Để thực hiện việc này, chỉ cần nhấp để mở rộng vị trí rồi chọn hộp 'Đã bật' của vị trí đó.


Sau đó, bạn có thể thay đổi 'Sự kiện' sẽ mở menu lớn.

Cài đặt mặc định là 'Ý định di chuột', có nghĩa là khách truy cập phải di chuột qua menu lớn trong vài giây. Điều này hoạt động tốt cho hầu hết các trang web WordPress nhưng bạn cũng có thể mở trình đơn thả xuống 'Hiệu ứng' và chọn 'Di chuột' hoặc 'Nhấp chuột' để thay thế.

Nếu bạn chọn 'Nhấp chuột' thì khách truy cập sẽ cần nhấp chuột để khám phá menu lớn. Điều này có thể hữu ích nếu bạn lo lắng khách truy cập có thể vô tình kích hoạt menu, điều này có thể gây khó chịu.

Trong khi đó, 'Hover' sẽ mở menu lớn của bạn ngay khi khách truy cập di chuột qua nó. Điều này có thể khuyến khích khách truy cập khám phá các khu vực khác nhau trên trang web của bạn, vì vậy bạn có thể muốn sử dụng 'Di chuột' trên các trang đích hoặc trang chủ của trang web của mình.


Sau khi đưa ra quyết định này, bạn có thể thay đổi cách mở menu bằng cách sử dụng cài đặt 'Hiệu ứng'.

Max Mega Menu có các hoạt ảnh khác nhau mà bạn có thể thử, bao gồm mờ dần và trượt lên. Bạn cũng có thể thay đổi tốc độ của hình ảnh động. Bằng cách thử các hoạt ảnh khác nhau, bạn có thể tạo một menu lớn thu hút sự chú ý của khách truy cập.


Nếu bạn không muốn sử dụng bất kỳ hoạt ảnh nào, chỉ cần mở danh sách thả xuống đầu tiên và chọn 'Không có'.

Theo mặc định, Mega Menu không sử dụng hình ảnh động trên thiết bị di động để tránh các vấn đề về hiệu suất. Nếu bạn muốn tạo hoạt ảnh độc đáo cho khách truy cập trên thiết bị di động, thì bạn có thể sử dụng cài đặt trong khu vực 'Hiệu ứng (Di động)'.

Nếu bạn muốn kiểm tra các menu lớn của mình trên thiết bị di động, thì hãy xem hướng dẫn của chúng tôi về cách xem phiên bản di động của các trang web WordPress từ máy tính để bàn.

Ngoài ra, nếu bạn đặt menu thả xuống 'Sự kiện' thành 'nhấp chuột' thì hãy đảm bảo bạn chọn tab 'Nâng cao' tiếp theo.

Tại đây, bạn có thể sử dụng 'Hành vi sự kiện nhấp chuột' để xác định điều gì sẽ xảy ra khi khách truy cập nhấp vào menu lớn của bạn. Ví dụ: nhấp chuột thứ hai có thể đóng menu hoặc mở một liên kết mới.


Có nhiều cài đặt hơn mà bạn có thể xem qua, nhưng điều này là đủ cho hầu hết các blog và trang web WordPress.

Khi bạn hài lòng với cách cấu hình plugin, hãy nhấp vào 'Lưu thay đổi'.

Để bật menu lớn cho nhiều vị trí hơn, chỉ cần thực hiện theo quy trình tương tự được mô tả ở trên.


2.2. Tùy chỉnh giao diện của Mega Menus trên trang web của bạn

Bước tiếp theo là định cấu hình giao diện của các menu lớn trên trang web của bạn.

Bạn có thể thực hiện việc này bằng cách chọn tab 'Menu Chủ đề' ở bên trái màn hình.


Trên màn hình này, bạn có thể thay đổi hướng của các biểu tượng mũi tên, sử dụng chiều cao đường khác và thêm bóng đổ.

Khi bạn hài lòng với cài đặt của mình, đừng quên nhấp vào 'Lưu Thay đổi'.


Nếu bạn muốn xóa những thay đổi này bất kỳ lúc nào, thì chỉ cần chọn hộp 'Đặt lại kiểu dáng tiện ích' và sau đó nhấp vào 'Lưu thay đổi'.

Tiếp theo, bạn có thể tùy chỉnh thanh menu, đây là thanh mà khách truy cập nhìn thấy khi menu ở trạng thái thu gọn, mặc định.


Để thực hiện những thay đổi này, hãy nhấp vào tab 'Thanh Menu', sau đó sử dụng cài đặt để thay đổi màu nền, phần đệm, bán kính đường viền, v.v.

Bạn thậm chí có thể tạo dải màu bằng cách chọn hai màu khác nhau trong phần 'Menu Background'.


Nếu bạn cuộn xuống, thì bạn có thể thay đổi giao diện của menu cấp cao nhất.

Đây là hàng đầu tiên của các mục, có thể nhìn thấy khi menu lớn ở trạng thái thu gọn.


Vì chúng rất quan trọng nên bạn có thể muốn làm nổi bật các mục menu cấp cao nhất.

Ví dụ: trong hình ảnh sau đây, chúng tôi đang sử dụng một màu nền khác.


Trong phần 'Trạng thái di chuột', bạn có thể đánh dấu mục menu cấp cao nhất hiện được chọn.

Ví dụ: trong hình ảnh sau đây, chúng tôi đang sử dụng hiệu ứng gạch chân.


Điều này có thể giúp khách truy cập thấy vị trí của họ trong menu, điều này đặc biệt hữu ích cho các trang web cần có menu lớn.

Nếu bạn thêm trạng thái di chuột, hãy cuộn xuống cuối màn hình và chọn hộp 'Đánh dấu mục hiện tại'.


Sau đó, bạn có thể thay đổi giao diện của menu phụ.

Đây là menu xuất hiện bên dưới cha cấp cao nhất, như bạn có thể thấy trong hình ảnh sau đây.


Để tùy chỉnh menu con, hãy nhấp vào tab 'Menu lớn'.

Giờ đây, bạn có thể sử dụng các cài đặt này để thay đổi màu nền của menu con, tăng bán kính để tạo các góc cong, thêm phần đệm, v.v.


Bạn thêm nội dung vào các menu lớn của mình bằng cách sử dụng các tiện ích con. Ví dụ: bạn có thể thêm tiện ích Thư viện và hiển thị các sản phẩm WooCommerce phổ biến nhất của mình hoặc nhúng đám mây thẻ vào trong menu lớn. Các tiện ích này có thể cung cấp thêm thông tin hoặc khuyến khích khách truy cập nhấp vào các mục menu nhất định.

Bạn có thể tùy chỉnh giao diện của các tiện ích này bằng cách cuộn đến phần 'Tiện ích'. Ví dụ: bạn có thể thay đổi màu tiêu đề của tiện ích con, tăng kích thước phông chữ, thêm phần đệm và điều chỉnh căn chỉnh.


Trên màn hình này, bạn cũng có thể tùy chỉnh giao diện của các mục menu cấp hai và mục menu cấp ba trên trang web của mình. Đây là những mục con của các mục menu cấp cao nhất.

Khi xây dựng các menu của bạn, bạn có thể thêm bốn cấp độ hoặc thậm chí nhiều hơn để tạo một menu lớn lồng nhau. Nếu bạn làm điều này, thì WordPress sẽ chỉ sử dụng kiểu dáng cấp ba cho tất cả các cấp độ tiếp theo.

Bạn có thể thấy điều này trong hành động trong hình ảnh sau đây. Cấp độ thứ hai có văn bản màu đỏ và cả cấp độ thứ ba và thứ tư đều sử dụng cùng một văn bản màu vàng.


Khi bạn hài lòng với cách thiết lập menu, đừng quên nhấp vào 'Lưu thay đổi'.

3. Cách thêm Menu Mega trên trang web WordPress của bạn

Khi bạn đã hoàn tất việc tùy chỉnh menu lớn bằng Max Mega Menu, đã đến lúc thêm nó vào trang web của bạn.

Chỉ cần truy cập Giao diện »Menu.


Nếu bạn muốn biến một menu hiện có thành một menu lớn, hãy mở menu thả xuống 'Chọn menu để chỉnh sửa' và chọn nó từ danh sách. Chỉ cần lưu ý rằng menu bạn chọn phải được gán cho một vị trí mà bạn đã bật tính năng menu lớn.

Nếu bạn muốn bắt đầu lại từ đầu, hãy nhấp vào 'Tạo menu mới' rồi nhập tiêu đề cho menu lớn mới của bạn.


Sau đó, bạn có thể chọn vị trí bạn muốn sử dụng và nhấp vào 'Tạo Menu'. Một lần nữa, đây phải là vị trí mà bạn đã bật các menu lớn.

3.1. Thêm nội dung vào menu WordPress của bạn

Sau đó, thêm tất cả các trang, bài đăng và bất kỳ nội dung nào khác mà bạn muốn đưa vào menu. Để biết hướng dẫn từng bước, vui lòng xem hướng dẫn dành cho người mới bắt đầu của chúng tôi về cách thêm menu điều hướng trong WordPress.

Tiếp theo, bạn sẽ cần sắp xếp các mục của mình vào menu cha và menu con. Để tạo menu con, hãy kéo một mục bên dưới mục chính, sau đó kéo nhẹ mục đó sang phải trước khi thả mục đó.


Để tạo nhiều cấp độ, chỉ cần tiếp tục kéo các mục sang bên phải để chúng xuất hiện thụt vào bên dưới nhau. Điều này tương tự như việc tạo menu thả xuống trong WordPress.

Bất kể bạn đang tạo menu mới hay cập nhật menu cũ, tại thời điểm này, bạn sẽ có tất cả các mục bạn muốn đưa vào menu lớn.

3.2. Kích hoạt tính năng Mega Menu

Khi đã xong, hãy nhấp để mở rộng 'Cài đặt Menu Max Mega' và chọn hộp bên cạnh 'Bật'.


Trong hộp này, bạn cũng có thể ghi đè cài đặt menu lớn mặc định. Điều này cho phép bạn tạo các menu lớn độc đáo cho các khu vực khác nhau trên trang web của mình, vì vậy hãy tiếp tục và thực hiện bất kỳ thay đổi nào.

Sau đó, nhấp vào 'Lưu.'

3.3. Tạo Bố cục Menu Mega

Bây giờ, hãy di chuột qua mục cấp cao nhất đầu tiên và bạn sẽ thấy nút 'Menu Mega' mới. Hãy tiếp tục và nhấp vào nút.


Bây giờ bạn sẽ thấy tất cả các cài đặt cho mục cấp cao nhất này.

Theo mặc định, Max Mega Menu sẽ sử dụng kiểu flyout, trong đó các menu con 'flyout' từ bên cạnh. Thay vào đó, để tạo một menu lớn, hãy mở menu thả xuống 'Chế độ hiển thị menu phụ' và chọn 'Bố cục tiêu chuẩn' hoặc 'Bố cục lưới'.

Bố cục tiêu chuẩn hiển thị tất cả các menu con theo cột.


Trong khi đó, bố cục dạng lưới cho phép bạn sắp xếp các mục trong menu con thành các cột và hàng.

Điều này là lý tưởng nếu bạn muốn hiển thị nhiều nội dung hoặc có một bố cục rất cụ thể.


Sau khi chọn bố cục dạng lưới hoặc tiêu chuẩn, bạn sẽ thấy tất cả các menu con được gán cho cấp độ gốc này.

Bây giờ, bạn có thể tiếp tục và thay đổi cách sắp xếp các mục này trong menu lớn.


Nếu đang sử dụng bố cục chuẩn, bạn có thể thay đổi số lượng cột bằng menu thả xuống ở góc trên cùng bên phải.

Nếu bạn đang sử dụng bố cục dạng lưới thì bạn có thể thêm các cột và hàng bằng các nút '+Cột' và '+Hàng'.


Khi hài lòng với bố cục, bạn có thể sắp xếp các mục trong menu con thành các cột và hàng khác nhau bằng cách kéo và thả.

Sau đó, đã đến lúc thay đổi dung lượng mà mỗi mục chiếm trong cột. Max Mega Menu hiển thị kích thước hiện tại dưới dạng một phần nhỏ của tổng chiều rộng có sẵn.

Ví dụ: trong hình ảnh sau đây, cả hai cột chiếm một nửa dung lượng có sẵn.


Để làm cho một mục lớn hơn hoặc nhỏ hơn, chỉ cần nhấp vào các nút mũi tên của nó để tăng hoặc giảm phân số.

3.4. Tạo Mega Menu thân thiện với thiết bị di động (Chỉ bố cục dạng lưới)

Theo mặc định, Max Mega Menu sẽ hiển thị cùng một nội dung trên máy tính để bàn và thiết bị di động. Đây có thể là một vấn đề với bố cục dạng lưới vì điện thoại thông minh và máy tính bảng thường có màn hình nhỏ hơn và việc cuộn theo chiều ngang có thể khó khăn.

Nếu bạn đang sử dụng bố cục dạng lưới thì bạn có thể tạo các menu lớn khác nhau cho thiết bị di động. Ví dụ: bạn có thể sử dụng ít cột hơn để người dùng không phải cuộn theo chiều ngang.

Bạn có thể ẩn toàn bộ cột hoặc hàng bằng biểu tượng 'Ẩn trên thiết bị di động', trông giống như một chiếc điện thoại di động nhỏ.


Chỉ cần bật và tắt biểu tượng để ẩn và hiển thị nội dung khác nhau trên máy tính để bàn và thiết bị di động.

3.5. Thêm nội dung phong phú với Mega Menu Widgets

Khi đã xong, bạn có thể bắt đầu thêm các tiện ích vào menu lớn. Điều này cho phép bạn hiển thị nội dung bổ sung trong menu con, chẳng hạn như thư viện WordPress, văn bản, video, nhận xét gần đây, v.v.

Ví dụ: bạn có thể sử dụng hình ảnh để quảng cáo bán hàng trên cửa hàng trực tuyến của mình hoặc làm nổi bật các sản phẩm mới nhất của mình.


Để thêm một tiện ích, chỉ cần nhấp để mở 'Chọn một tiện ích...' thả xuống.

Bây giờ bạn có thể chọn một widget từ danh sách.


WordPress sẽ tự động thêm tiện ích vào cột hoặc hàng nhưng bạn có thể di chuyển tiện ích đến vị trí mới bằng cách kéo và thả.

Để định cấu hình tiện ích, hãy tiếp tục và nhấp vào biểu tượng cờ lê nhỏ của nó.


Thao tác này sẽ mở một cửa sổ bật lên nơi bạn có thể thêm nội dung vào tiện ích con và thay đổi cài đặt của nó.

Bạn sẽ thấy các tùy chọn khác nhau tùy thuộc vào loại tiện ích mà bạn đang tạo.


Ví dụ: nếu bạn đã thêm tiện ích Hình ảnh, thì bạn có thể nhấp vào 'Thêm Hình ảnh' và chọn ảnh từ thư viện phương tiện hoặc tải tệp lên từ máy tính của mình.

Nếu bạn thêm tiện ích 'Văn bản' thì bạn sẽ thấy một trình chỉnh sửa nhỏ nơi bạn có thể nhập văn bản của mình.


Tất cả các tiện ích đều có trường 'Tiêu đề' nơi bạn có thể thêm văn bản sẽ được hiển thị phía trên tiện ích.

Khi bạn hoàn tất, hãy nhấp vào 'Lưu' để lưu các thay đổi của bạn và sau đó chọn 'Đóng'. Để thêm nhiều tiện ích hơn vào menu lớn, chỉ cần làm theo quy trình tương tự được mô tả ở trên.


3.6. Xem lại Cài đặt Menu Mega Mặc định

Tiếp theo, chỉ cần nhấp vào tab 'Cài đặt'.

Tại đây, bạn có thể sử dụng các hộp kiểm để ẩn hoặc hiển thị nội dung khác nhau trong menu con.


Bạn cũng có thể ẩn hoặc hiển thị menu con trên thiết bị di động và máy tính để bàn, đồng thời thay đổi căn chỉnh để menu con mở sang bên trái hoặc bên phải của menu chính cấp cao nhất.

Nếu bạn thực hiện bất kỳ thay đổi nào đối với cài đặt mặc định, đừng quên nhấp vào 'Lưu Thay đổi'.

3.7. Thêm biểu tượng hình ảnh vào Menu WordPress Mega

Các biểu tượng hình ảnh giúp khách truy cập hiểu nội dung của mục menu mà không cần phải đọc nhãn điều hướng. Điều này đặc biệt hữu ích cho các menu lớn, nơi khách truy cập có thể thích quét nội dung nhanh hơn là đọc từng nhãn điều hướng.


Bạn có thể sử dụng các biểu tượng để làm nổi bật nội dung quan trọng nhất. Ví dụ: bạn có thể khuyến khích khách truy cập hoàn tất việc mua hàng của họ bằng cách thêm biểu tượng giỏ hàng vào menu 'Thanh toán'.

Để thêm các biểu tượng hình ảnh vào menu điều hướng của bạn, hãy nhấp vào tab 'Biểu tượng'.


Giờ đây, bạn có thể chọn bất kỳ biểu tượng gạch ngang nào từ thư viện tích hợp sẵn. Nếu bạn nâng cấp lên Max Mega Menu pro, thì bạn cũng sẽ có quyền truy cập vào các phông chữ biểu tượng khác, Genericons và FontAwesome hoặc bạn có thể chọn một tệp từ thư viện phương tiện WordPress của mình.

3.8. Kết thúc định cấu hình Menu Mega trên trang web WordPress của bạn

Sau khi thực hiện theo cách của bạn thông qua tất cả các cài đặt này, bạn có thể đóng cửa sổ bật lên để quay lại trang Giao diện »Menu chính.

Giờ đây, bạn có thể lặp lại quy trình này cho từng phụ huynh cấp cao nhất.

Khi bạn hài lòng với cách thiết lập menu lớn, hãy nhấp vào nút Lưu Menu để làm cho nó hoạt động.


Bây giờ, chỉ cần truy cập trang web của bạn để xem menu lớn đang hoạt động.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm một menu lớn trên trang web WordPress của mình. Bạn cũng có thể xem qua hướng dẫn của chúng tôi về trình tạo trang WordPress kéo và thả tốt nhất và cách tăng lưu lượng truy cập blog của bạn.