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 giao diện người dùng / người dùng của trang web của bạn? 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.

Trước tiên, chúng tôi chỉ cho bạn hướng dẫn từng bước về 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 tốc 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 - Các mục menu cha và con (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 '
• Elementor Nav-Menu widget Các tính năng chính
• Tạo một menu với widget pro-menu pro
• Menu đáp ứng di động
• Gói lại

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 rất quan trọng không chỉ để mang lại lưu lượng truy cập cho trang web của bạn mà còn để 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 cho sự tham gia của 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à theo dõi vai trò của Web WebCrawler, hoặc Bots được thiết kế để thu thập dữ liệu trang web và lập chỉ mục nội dung theo 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 đang 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, nhưng bạn cũng sẽ mất khách truy cập.

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

Đó là một lý do tuyệt vời cho nhiều trang web kinh doanh để giữ một biểu tượng điều hướng duy nhất thay vì một thanh menu phức tạp, tải lên một menu toàn màn hình khi 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à 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ẽ trình bày cho bạn cách sử dụng tiện ích menu điều hướng Elementor để có đượ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 tôi có thể tạo menu WordPress đơn giản bằng phiên bản miễn phí Elementor.

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

Bây giờ, để tạo một menu WordPress, bạn không cần phải cài đặt bất kỳ plugin đặc biệt nào. Theo mặc định, WordPress đi kèm với một trình tạo Menu dễ sử dụng, giúp bạn tạo 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

Điều đầu tiên, bạn 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, chuyển đến 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 một trường 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ể 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” để đặt tên cho Menu. 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 mà bạn điền vào menu mới của mình với các mục menu. Trong phần “Thêm các món trong menu” ở phía bên trái, bạn sẽ tìm thấy danh sách có tổ chức gồm những thứ mà bạn có thể thêm vào menu của mình.

Theo mặc định, điều 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 cách sử dụ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 các 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 nhiều mặt hàng.

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

3. Tạo menu con - Các mục menu cha và con (Tùy chọn)

Bạn có biết rằng 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 mẹ, nó sẽ hiển thị tất cả các mục menu con ẩn dưới nó.

Tuyệt vời phải không?

Bây giờ để tạo một 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 mẹ. Tiếp theo, kéo và thả tất cả các mục menu mà bạn muốn làm các mục menu con bên dưới nó. Bây giờ chỉ cần kéo nó sang bên phải và bạn đã hoàn tất!

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 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 gọi là “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 đây sẽ hiển thị:

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

Sau khi gán 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 Elementor Pro Nav.

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 web 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 Elementor nav 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 WooCommerce 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 Nav là gì? Dưới đây là một giới thiệu ngắn gọn.

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

• Tiện ích menu Nav cho phép bạn tự do đặt menu ở bất cứ đâu bạn muốn. Trên tiêu đề của bạn hoặc đầu 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 bạn và trên các trang của bạn một cách riêng biệt hoặc toàn cầu.
• Cung cấp một cái nhìn rực rỡ cho menu của bạn bằng cách sử dụng hình ảnh động, hiệu ứng di chuột hoặc trạng thái hoạt động
• Tạo một menu đáp ứng di động của trang web của bạn và kiểm soát trang web của bạn sẽ trông như thế nào trên màn hình 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 của thanh menu của bạn
• Tạo một menu hoàn hảo pixel với độ chính xác phù hợp của căn chỉnh, khoảng cách và phần đệm.

Tạo một menu với widget pro-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-menu. Khi bạn đã tạo danh sách chính, bước tiếp theo là thêm nó vào vị trí mong muốn của bạn, tức là phần Tiêu đề.

Bây giờ khi bạn hoàn thành 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.

Trên góc trên cùng của phần cài đặt, có ba tùy chọn khả dụng; 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 một đà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 theo hướng từ trái sang phải.
• Theo chiều dọc: Bạn cũng sẽ tìm thấy bố cục theo chiều 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, sự trải rộng của thanh điều hướng sẽ từ trên xuống dưới.
• Menu thả xuống : Menu thả xuống cũng khá phổ biến. Danh sách thả xuống có bố cục 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; trung tâm, bên phải hoặc bên trái.

Phần hoạt ả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 các hoạt ảnh khung, nền và văn bản tinh tế.

Các hoạt ảnh 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.
• Trang trình bày: Hoạt ảnh trang chiếu trượt thanh bên dưới các mục menu.
• Tăng trưởng: Hoạt ảnh phát triển phát triển từ giữa ra ngoài và tạo cảm giác tăng trưởng.
• Thả vào : Dòng hoạt ảnh thả từ dưới lên trên.
• Thả ra: Dòng hoạt ảnh thả từ trên xuống dưới.

Tương tự, có các hoạt ảnh được đóng khung, gạch ngang, dòng kép, nền và văn bản. Mỗi người trong số họ cung cấp bộ hoạt ảnh của riêng họ 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 đóng gói với nhiều tùy chọn tạo kiểu menu con. Nơi bạn không chỉ có thể kiểm soát màu sắc, kiểu dáng và cả nền của menu.

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

Elementor tiếp cận khoảng cách menu và đệm rất tốt. Họ đã làm việc chăm chỉ sau cánh cửa để đả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 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 phần tử menu và menu con
• Căn 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 mang nhãn hiệu riêng 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 nửa trong suốt.

Là một nhà thiết kế, bạn có thể sử dụng 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ế nền theo ý thích của mình.

Menu đáp ứng di động

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ũng có thể tạo đ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 di động với 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 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 di động của mình.

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 ngắt trên 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 ngắt để đặt menu di động cho thiết bị di động hoặc máy tính bảng.
• Vertical and Accordion Menus: 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.
• Căn chỉnh chuyển đổi: Biểu tượng bánh hamburger có thể được căn giữa, trái hoặc phải.
• Căn chỉnh bên cạnh / Căn giữa: Chọn căn chỉnh của menu di động.

Điều hướng thích ứng: Cung cấp vị trí nhanh của menu.

Gói lại

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 một danh sách một cách thông minh, điều đó sẽ giúp giữ khách truy cập của bạn trên trang web của bạn trong một thời gian dài. Menu cũng quan trọng không kém so với 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 cái nhì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 đi kèm với các tính năng phong phú cho phép khách hàng tùy chỉnh phần menu để phù hợp với tiếng nói của 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 trên trang web, 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ị.