Menu điều hướng Elementor – Xây dựng một menu tuyệt vời cho trang web WordPress của bạn

Bạn đang tìm cách tạo một menu tuyệt vời để giúp cải thiện UI/UX cho trang web của mình? Nếu vậy thì bạn đang ở đúng nơi. Ở đây chúng tôi đã tổng hợp một hướng dẫn chi tiết để giúp bạn.

Đầu tiên, chúng tôi sẽ hướng dẫn bạn từng bước cách tạo menu cho trang web WordPress của bạn. Và khi bạn hiểu rõ điều đó, chúng tôi sẽ hướng dẫn bạn cách sử dụng tiện ích Menu điều hướng Elementor để tùy chỉnh và tăng cường menu WordPress của bạn.

Mục lục:

• Tại sao bạn cần một Menu điều hướng tùy chỉnh?
• Tạo Menu WordPress cơ bản bằng Elementor
• 1. Tạo một menu đơn giản cho trang web WordPress của bạn
• 2. Chọn và tùy chỉnh các mục menu điều hướng
• 3. Tạo menu con – Mục menu dành cho phụ huynh và trẻ em (Tùy chọn)
• 4. Quản lý vị trí menu của bạn và xuất bản
• Cách tạo menu điều hướng bằng tiện ích Elementor pro nav'
• Tiện ích Elementor Nav-Menu Các tính năng chính
• Tạo menu với tiện ích nav-menu pro
• Menu đáp ứng di động
• Kết thúc

Tại sao bạn cần một Menu điều hướng tùy chỉnh?

Điều quan trọng cần biết là các menu điều hướng không chỉ quan trọng trong việc mang lại lưu lượng truy cập đến trang web của bạn mà còn giúp xếp hạng SEO tốt hơn.

Thật vậy, các menu điều hướng được thiết kế chủ yếu để tương tác với người dùng, nhưng đây không phải là mục đích duy nhất.

Yếu tố quan trọng thứ hai là xem xét vai trò của “WebCrawler” hoặc Bot được thiết kế để thu thập dữ liệu các trang web và lập chỉ mục nội dung ở cấp độ phù hợp và báo cáo lại cho công cụ tìm kiếm để xếp hạng nội dung ở đúng vị trí.

Do đó, nếu bạn tạo các menu quá phức tạp thì các bot sẽ khó xếp hạng nội dung của bạn và bạn cũng sẽ mất khách truy cập.

Nói tóm lại, “dễ điều hướng” là yếu tố góp phần then chốt trong việc nâng cao trải nghiệm người dùng tốt hơn cũng như đóng vai trò bắt buộc trong việc nâng cao thứ hạng trang web của chúng tôi và tăng lưu lượng truy cập.

Đó là lý do tuyệt vời để nhiều trang web kinh doanh giữ lại một biểu tượng điều hướng thay vì một thanh menu phức tạp, thanh này sẽ tải lên menu toàn màn hình khi được nhấp vào.

Nhờ tiện ích Elementor pro với menu điều hướng đáp ứng 100%, bạn có thể tạo thanh menu hoàn hảo về pixel và cực kỳ linh hoạt mà không cần sử dụng bất kỳ mã nào.

Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách sử dụng tiện ích menu điều hướng Elementor để có menu WordPress nâng cao, tùy chỉnh.

Trước khi bắt đầu với tiện ích Điều hướng Elementor, hãy khám phá cách chúng ta có thể tạo một menu WordPress đơn giản bằng phiên bản miễn phí của Elementor.

Tạo Menu WordPress cơ bản bằng Elementor

Bây giờ, để tạo menu WordPress, bạn không cần cài đặt bất kỳ plugin đặc biệt nào. Theo mặc định, WordPress đi kèm với trình tạo Menu dễ sử dụng, nó sẽ giúp bạn tạo các menu điều hướng đơn giản cho trang web của mình.

Điều đó đang được nói, bạn sẽ không có quyền truy cập vào bất kỳ tùy chọn tùy chỉnh nào cho menu. Nó sẽ đảm nhận thiết kế của chủ đề WordPress hiện đang hoạt động. Nhưng nếu đó là tất cả những gì bạn muốn thì đây là một cách tuyệt vời để thiết lập menu điều hướng cho trang web WordPress của bạn.

1. Tạo một menu đơn giản cho trang web WordPress của bạn

Trước tiên, bạn sẽ cần đăng nhập vào bảng điều khiển phụ trợ WordPress của mình.

Bây giờ, từ thanh bên trái hãy đi tới Appearance > Menus . Tại đây, bạn sẽ tìm thấy bố cục hai cột với “Thêm các mục menu” ở bên trái và “Cấu trúc menu” ở bên phải.

Trong Cấu trúc Menu, bạn sẽ tìm thấy trường dành cho “Tên Menu”. Đây sẽ là tên cho menu mà chúng ta sẽ tạo ngay bây giờ. Hãy gọi nó là Menu 1.

Lưu ý : Đừng lo lắng. Người đọc của bạn sẽ không thể nhìn thấy tên Menu. Đây là một tính năng giúp bạn sắp xếp tất cả các menu khác nhau của mình.

Sau khi đặt tên cho Menu của bạn, hãy nhấp vào nút “Tạo Menu” để cung cấp nó. Bây giờ, bạn cần thêm các mục menu khác nhau.

2. Chọn và tùy chỉnh các mục menu điều hướng

Bây giờ đến phần bạn điền vào menu mới của mình các mục menu. Trong phần “Thêm các mục menu” ở phía bên trái, bạn sẽ tìm thấy danh sách được sắp xếp gồm những thứ mà bạn có thể thêm vào menu của mình.

Theo mặc định, phần này chứa bất kỳ trang, bài đăng, trang đích, liên kết tùy chỉnh và danh mục nào của bạn.

chỉ cần chọn các mục menu bạn muốn thêm bằng hộp kiểm, sau đó nhấp vào nút “Thêm vào Menu”. Điều này sẽ điền vào menu của bạn với tất cả các mục menu đã chọn của bạn.

Lưu ý : Lưu ý rằng mỗi phần trong “Thêm mục menu” có tùy chọn để chuyển đổi giữa – Gần đây nhất , Xem tất cả và Tìm kiếm . Hãy nhớ sử dụng các tùy chọn này nếu có nhiều mặt hàng.

Khi bạn đã hoàn tất việc thêm tất cả các mục menu, hãy nhấn nút “Save Menu” và chuyển sang bước tiếp theo.

3. Tạo menu con – Mục menu dành cho phụ huynh và trẻ em (Tùy chọn)

Bạn có biết rằng theo mặc định WordPress cũng cho phép bạn tạo các menu con không? Khi tạo cấu trúc menu con, bạn có một mục menu cha và một mục menu con.

Khi người dùng di chuột qua mục menu chính, nó sẽ hiển thị tất cả các mục menu con ẩn bên dưới nó.

Tuyệt phải không?

Bây giờ để tạo cấu trúc menu con, tất cả những gì bạn phải làm là chọn một mục menu mà bạn muốn có trên menu chính. Tiếp theo, kéo và thả tất cả các mục menu bạn muốn làm mục menu con bên dưới nó. Bây giờ chỉ cần kéo nó sang phải là xong!

4. Quản lý vị trí menu của bạn và xuất bản

Bây giờ bạn đã tạo menu mới và thêm các menu con, đã đến lúc quản lý vị trí của nó.

Ở đầu trình chỉnh sửa menu, bạn sẽ thấy một tùy chọn có tên “Quản lý vị trí”. Nhấp vào nó và một cái gì đó tương tự như màn hình sau sẽ hiển thị:

Bây giờ, các vị trí menu có sẵn sẽ tùy thuộc vào chủ đề bạn đã cài đặt. Trong amp dụ này, chúng tôi có một chủ đề hỗ trợ 3 menu.

Sau khi chỉ định menu cho từng vị trí menu có sẵn, hãy nhấp vào “Lưu thay đổi” và thế là xong.

Bây giờ bạn đã biết tất cả các tính năng menu cơ bản mà WordPress cung cấp theo mặc định. Tuy nhiên, nếu bạn muốn có nhiều tùy chỉnh và chức năng hơn, hãy đọc tiếp để tìm hiểu về Tiện ích menu điều hướng Elementor Pro.

Cách tạo menu điều hướng bằng tiện ích Elementor pro nav'

Nếu bạn muốn thêm menu điều hướng tùy chỉnh vào trang WordPress của mình, bạn sẽ cần phiên bản Elementor Pro. Phiên bản Elementor Pro đi kèm với tiện ích điều hướng Elementor cùng với nhiều tính năng đặc biệt khác như hơn 300 mẫu, trình tạo chủ đề, tiện ích bật lên, tiện ích WooC Commerce và nhiều tính năng thú vị khác.

Các tính năng chính cụ thể của tiện ích Menu Điều hướng là gì? Dưới đây là một giới thiệu ngắn gọn.

Tiện ích Elementor Nav-Menu Các tính năng chính

• Tiện ích menu Điều hướng cho phép bạn tự do đặt menu của mình ở bất kỳ đâu bạn muốn. Trên tiêu đề của bạn hoặc trên cùng hoặc bất cứ nơi nào trên trang của bạn.
• Bạn có thể thêm nhiều menu trên trang web của mình và cả trên các trang của bạn một cách riêng biệt hoặc trên toàn cầu.
• Mang lại vẻ rực rỡ cho menu của bạn bằng cách sử dụng hoạt ảnh, hiệu ứng di chuột hoặc trạng thái hoạt động
• Tạo menu đáp ứng trên thiết bị di động cho trang web của bạn và kiểm soát giao diện trang web của bạn trên màn hình thiết bị di động
• Tùy chỉnh màu sắc, kiểu chữ và phần đệm hoặc các điều chỉnh khác trên thanh menu của bạn
• Tạo một menu hoàn hảo đến từng pixel với độ chính xác phù hợp về căn chỉnh, giãn cách và đệm.

Tạo menu với tiện ích nav-menu pro

Bạn sẽ cần tạo một menu WordPress cơ bản như chúng tôi đã đề cập ở trên và sau đó bạn sẽ tùy chỉnh menu WordPress mặc định bằng cách sử dụng tiện ích menu pro-nav. Khi bạn đã tạo danh sách chính, bước tiếp theo là thêm nó vào vị trí bạn mong muốn, tức là phần Tiêu đề.

Bây giờ khi bạn đã hoàn tất các cài đặt cơ bản, hãy tùy chỉnh menu bằng tiện ích menu điều hướng.

Ở góc trên cùng của phần cài đặt, có ba tùy chọn; Nội dung, Phong cách và Nâng cao.

Phần Bố cục : bạn có ba tùy chọn Ngang, dọc hoặc đàn accordion thả xuống ẩn.

• Ngang: Bố cục ngang là bố cục phổ biến nhất được các trang web sử dụng. Nó trải rộng trên màn hình từ hướng trái sang phải.
• Dọc: Bạn cũng sẽ tìm thấy bố cục dọc trên nhiều trang web, đặc biệt là trên các trang web cung cấp dịch vụ sáng tạo. Trong trường hợp bố cục theo chiều dọc, độ dàn trải của thanh điều hướng sẽ từ trên xuống dưới.
• Dropdown: Menu thả xuống cũng khá phổ biến. Dropdowns là bố cục theo chiều dọc và yêu cầu tương tác với người dùng để hiển thị. Chúng chủ yếu được sử dụng để tạo ra một thiết kế sạch sẽ.

Phần Align : phần này giúp bạn căn chỉnh các mục văn bản trong menu; giữa, phải hoặc trái.

Phần hoạt hình : phần này sẽ cho phép bạn thêm các hiệu ứng hoạt hình dưới, trên hoặc các hiệu ứng hoạt hình dòng đôi. Bạn cũng có thể sử dụng hoạt ảnh khung, nền và văn bản tinh tế.

Các hình ảnh động được gạch chân như sau:

• Làm mờ: Hoạt ảnh mờ dần cung cấp hoạt ảnh mờ dần bên dưới các mục menu.
• Slide: Hoạt ảnh slide trượt thanh bên dưới các mục menu.
• Phát triển : Hoạt ảnh phát triển phát triển từ giữa ra ngoài và mang lại cảm giác phát triển.
• Drop in : Hoạt ảnh thả vào chảy từ dưới lên trên.
• Drop out: Hoạt ảnh thả ra diễn ra từ trên xuống dưới.

Tương tự, có hoạt ảnh đóng khung, gạch chân, dòng đôi, nền và văn bản. Mỗi người trong số họ cung cấp bộ hoạt ảnh riêng và bạn có thể tự mình kiểm tra chúng để tìm hiểu những gì bạn nhận được với chúng.

Phần con trỏ : chọn loại con trỏ từ menu thả xuống.

Phần chỉ báo menu con : tiện ích Elementor có nhiều tùy chọn kiểu dáng menu con. Nơi bạn không chỉ có thể kiểm soát màu sắc, kiểu dáng cũng như nền của menu.

Khoảng cách phần đệm và menu: phần đệm có thể được điều chỉnh nhanh chóng. Bạn có thể thay đổi khoảng đệm ngang cho menu và menu con, khoảng đệm dọc, khoảng trống ở giữa cũng như căn lề phải, trái và giữa.

Elementor tiếp cận khoảng cách và phần đệm menu cực kỳ tốt. Họ đã làm việc chăm chỉ để đảm bảo rằng họ có thể mang các công cụ đến cho nhà phát triển để họ có thể dễ dàng tạo ra thiết kế mà họ đang nghĩ đến.

Khoảng cách giữa các menu cung cấp rất nhiều tùy chọn bao gồm:

• Khoảng cách giữa các mục menu
• Phần đệm ngang và dọc cho các thành phần menu và menu con
• Căn lề giữa, trái, phải và căn đều.

Màu nền và Kiểu chữ : bạn có thể có được giao diện phù hợp với thương hiệu của mình với sự trợ giúp của bảng màu và màu nền mong muốn. Ngoài ra, bạn cũng có thể chọn các tùy chọn menu trong suốt hoặc bán trong suốt.

Là một nhà thiết kế, bạn có thể thử nghiệm các tùy chọn này nhiều nhất có thể và đảm bảo rằng bạn thiết kế hình nền theo ý thích của mình.

Menu đáp ứng di động

Thiết bị di động là một phần quan trọng của web và đó là lý do tại sao các nhà phát triển Elementor cũng cung cấp các công cụ để bạn có thể tạo thanh điều hướng cho thiết bị di động.

Tiện ích Elementor cho phép bạn kiểm soát hoàn toàn các tùy chọn menu di động trên WordPress. Bạn có thể kiểm soát chế độ xem màn hình trên thiết bị di động bằng một bộ cài đặt riêng cho màn hình chỉ dành cho thiết bị di động. Có một tùy chọn cho cài đặt màn hình thiết bị di động ở cuối phần cài đặt Elementor nơi bạn có thể xem các tùy chọn màn hình thiết bị di động của mình.

Nói tóm lại, các tính năng menu di động của Elementor như sau:

• Chiều rộng đầy đủ trên thiết bị di động: Bạn cũng có tùy chọn đặt chiều rộng đầy đủ hoặc chiều rộng giới hạn.
• Điểm dừng của máy tính bảng hoặc thiết bị di động: Bạn có thể sử dụng cài đặt điểm dừng để đặt menu di động cho thiết bị di động hoặc máy tính bảng.
• Menu dọc và Accordion: Elementor cũng cung cấp tùy chọn hiển thị biểu tượng bánh hamburger có thể thu gọn.
• Chuyển đổi căn chỉnh: Biểu tượng bánh hamburger có thể được căn giữa, trái hoặc phải.
• Căn lề/Căn giữa: Chọn căn chỉnh của menu di động.

Điều hướng đáp ứng: Cung cấp khả năng định vị phản hồi của menu.

Kết thúc

Menu là một trong những tính năng quan trọng nhất của bất kỳ trang web nào. Bởi vì nó giúp khách truy cập duyệt qua trang web của bạn và nếu bạn tạo danh sách một cách thông minh, nó sẽ giúp giữ chân khách truy cập trên trang web của bạn trong thời gian dài. Menu cũng quan trọng như toàn bộ bố cục, phần đầu trang và phần chân trang của bất kỳ trang web nào.

Do đó, tiện ích menu phải có khả năng mang lại giao diện thương hiệu độc đáo của bạn với tất cả các tính năng cần thiết. Tiện ích Điều hướng Elementor đi kèm với các khả năng giàu tính năng cho phép khách hàng tùy chỉnh phần menu để phù hợp với giọng điệu thương hiệu của bạn. Giờ đây, bạn có thể sử dụng menu phong cách được thiết kế riêng tùy chỉnh trên trang web của mình, trên trang đích, tiêu đề hoặc bất kỳ phần nào khác mà bạn muốn hiển thị.