Các trình đơn dính ( hoặc các thanh lệnh ) bây giờ là một phần quan trọng trong thiết kế web. Nhưng khi chúng biến mất, anh phải cuộn tất cả các đường lên trên để điều hướng đến một trang khác. Tất nhiên, điều này là bất tiện và lộn xộn với người dùng.
Một header dính cung cấp một trải nghiệm người dùng liền mạch, khuyến khích điều hướng trang web sâu, và giúp du khách dễ dàng tìm ra sản phẩm và dịch vụ họ cần, dẫn đến doanh thu nhiều hơn cho bạn.
Trong bài viết này, hãy đọc tiếp :.
- Thật là một món ăn dính dáng
- Cách tạo trình đơn dính bằng ứng dụng CSS
- Cách tạo trình đơn dính bằng một plugin
- Các chủ đề của WordPress với các trình đơn dính tích hợp,
- Các thực đơn dính tốt nhất, và
- Ví dụ về hướng dẫn dính
Đến cuối bài viết này, bạn có thể chọn một chủ đề hoàn hảo bằng một trình đơn dính tích hợp hoặc xây dựng trình đơn của riêng mình từ đầu. Chúng ta bắt đầu nào.
Một thực đơn dính dính là gì?
Một trình đơn dính cũng được gọi là trình đơn cố định là một thanh điều hướng tĩnh có thể nhìn thấy khi người truy cập cuộn lên và xuống một trang web. Các trình đơn dính luôn có thể truy cập và giúp khách truy cập nhanh hơn nhiều. Chúng bây giờ được sử dụng rộng rãi trên mạng.
Đây là một ví dụ về một trình đơn dính, được lấy thẳng từ trang chủ blog HubSpots :.
Như bạn có thể thấy, ngay cả khi bạn cuộn xuống trang, bạn vẫn có thể truy cập vào các blog tiếp thị, bán hàng, dịch vụ và trang web. Bạn cũng có thể đăng ký vào blog hoặc bắt đầu bản demo của nền tảng HubSpot CRM.
Tại sao bạn lại thêm một trình đơn dính vào website của mình?
Điều hướng là một tính năng quan trọng của bất kỳ trang web nào. Bạn muốn khách truy cập dễ dàng tìm kiếm và tham gia vào nội dung của mình trong khi duy trì sự nhất quán với thiết kế website của bạn.
Điều tương tự cũng đúng với trang web của WordPress. Cho dù anh đang viết blog du lịch, cửa hàng trực tuyến, hoặc một trang tài khoản cá nhân, bạn muốn đảm bảo rằng điều hướng trang web của bạn sẽ giúp người dùng dễ dàng tìm kiếm những thứ họ cần và trở thành người đăng ký hoặc khách hàng. Bởi vì điều hướng tốt làm tăng trải nghiệm người dùng của bạn, bạn có thể cải thiện thời gian tồn tại, một yếu tố SEO quan trọng.
Khi du khách duyệt web của bạn, bạn muốn cung cấp cho họ quyền truy cập dễ dàng vào nội dung của bạn. Một số du khách thấy khó khăn khi cuộn trở lại phía trên cùng của trang để điều hướng một trang web.
Các trình đơn dính cung cấp một giải pháp đơn giản cho vấn đề phiền phức ( và mất thời gian ) này. Với thanh điều hướng cố định, du khách có thể nhanh chóng tìm ra những thứ họ cần. Nó nâng cao trải nghiệm của trang web và thu hút du khách tiêu thụ nhiều nội dung hơn, dẫn đến tỷ lệ bounce thấp hơn.
Với thanh điều khiển dính, bạn cũng có thể :.
- Tăng tỷ lệ chuyển đổi bằng cách luôn hiển thị nút CTA ( điển hình là ở góc trên bên phải )
- Khuyến khích điều hướng trang web bằng cách duy trì các liên kết quan trọng trong tầm với
- Cải thiện thời gian bằng cách cung cấp nhiều nội dung hơn cho người dùng để tiêu thụ
- Cung cấp cho người dùng cơ hội để tìm thêm sản phẩm để mua, tăng doanh thu
- Tăng cường nhận dạng thương hiệu bằng cách duy trì logo trong tầm nhìn
Điều tốt nhất là bạn có thể tạo một thanh lệnh dính cho cả trình đơn điều hướng chính và thứ cấp mà không cần lựa chọn giữa hai trình đơn này.
Có một vài loại tiêu đề dính mà bạn có thể sử dụng trên trang web của mình, hãy xem các tuỳ chọn có sẵn.
Các loại header dính
Loại đầu trang dính mà bạn chọn cho trang của mình phụ thuộc vào thiết kế hiện tại và loại hình doanh nghiệp mà bạn sở hữu. Hầu hết các trang web sẽ được phục vụ tốt nhất bởi một Navbar hàng đầu. Tuy nhiên, nếu bạn là người sáng tạo, bạn có thể vui vẻ với vị trí và đặt nó ở bên trái hoặc bên phải.
- Navbar trên cùng được sửa chữa : Cho đến nay là loại Navbar phổ biến nhất, trình đơn dính này sẽ được cố định ở phía trên cửa sổ trình duyệt khi người dùng cuộn xuống trang. Điều này là lý tưởng cho các trang dài, bài viết blog, các trang hạng mục và hầu như bất kỳ trang web nào mà người dùng cần cuộn. Trang HubSpot có một thanh nhấp trên cùng cố định
- Navbar bên trái sửa chữa : Một số thương hiệu và trang web đặt Navbar của họ ở bên trái để làm cho các mục trình đơn ít xâm nhập hơn hoặc đặt thiết kế trang web của họ rời xa. Loại Navbar dính này phù hợp với các doanh nghiệp sáng tạo, thương hiệu quần áo, blog hoặc các trang web với thiết kế hiện đại và hiện đại mạnh mẽ
- Sửa chọn bên phải : Bạn có thể tạo một trình đơn điều hướng dính ở bên phải để thu hút sự chú ý đến các mục trình đơn. Trình điều hướng bên phải cố định là không phổ biến vì hầu hết mọi người đã quen với thiết kế từ trái sang phải. Điều đó có nghĩa là bên phải là nơi cuối cùng người dùng sẽ tìm. Tuy nhiên, bạn có thể sử dụng khu vực này để thêm thông tin bổ sung, chẳng hạn như một chiếc giỏ hoặc một bản sao của các bài viết liên quan
Giờ là lúc thiết lập trình đơn tiêu đề trên trang web của bạn. Nếu bạn có kỹ năng kỹ thuật, hãy bắt đầu với phương pháp CSS. Nếu bạn cảm thấy thoải mái khi thay đổi mã, bạn có thể sử dụng giao diện điều hướng dính.
Để tạo một thanh Navbar dính bằng cách sử dụng CSS, bạn sẽ cần thêm mã CSS thủ công vào chủ đề của mình. Được, hãy dùng vị trí cố định. Làm theo các bước bên dưới.
1. Đăng nhập vào bảng điều khiển của bạn.
2. Truy cập Appearance > Tuỳ biến.
3. Nhấp vào Additional CSS.
4. Thêm mã CSS sau :.
Xem mã trình đơn Pen Sticky của HubSpot (@ Hubspot ) trên CodePen.
5. Thay # websites-navigation bằng lớp CSS hoặc Id trong trình đơn điều hướng của bạn. ( Học cách tìm lớp CSS hoặc Id của bạn ở đây ).
6. Nhấp vào nút công bố màu xanh dương.
7. Làm mới trang web để xem trình đơn dính bẩn.
Nếu bạn không muốn mã hoá trình đơn dính, bạn có thể sử dụng plugin.
Cách tạo trình đơn header dính bằng plugin của WordPress
Các plugin của WordPress giúp bạn dễ dàng thêm các trình đơn dính, vì không cần đến kinh nghiệm mã hoá, hãy kiểm tra ba plugin dưới đây để bắt đầu.
1. trình đơn Sticky của tôi
MyStickymenu là một tiện ích phổ biến để tạo trình đơn dính tuỳ chỉnh.Các du khách sẽ truy cập vào trình đơn điều hướng của bạn mà không cần phải phí thời gian.
Để tạo một Navbar dính bằng trình đơn Sticky của tôi :.
- Cài đặt và kích hoạt plugin
- Truy cập đến Settings ( Cài đặt ) > trình đơn Sticky của tôi
- Ở mục Sticky Class ( Lớp dính ), chọn Other Class Or Id ( Lớp hoặc Id khác )
- Trong khung bên cạnh, thêm lớp hoặc Id. ( Học cách tìm lớp CSS hoặc Id của bạn ở đây )
- Thay đổi bất kỳ thiết lập nào bạn muốn, chẳng hạn như màu nền hoặc độ mờ
- Cuộn xuống và nhấp vào nút Save màu xanh lá cây
- Làm mới trang web để xem trình đơn dính bẩn
2. sticky Menu ( hoặc bất cứ thứ gì! ) trên Scroll
Sticky Menu ( hoặc Anything! ) trên Scroll cho phép bạn tạo các thanh điều hướng cố định, thanh bên và hộp gọi đến hành động. Ngoài ra còn có tuỳ chọn giới hạn trình đơn dính trên màn hình cụ thể.
Để tạo thanh điều khiển dính bằng Sticky Menu ( hoặc Anything! ) trên scroll :.
- Cài đặt và kích hoạt plugin
- Truy cập đến ứng dụng Settings ( Cài đặt ) > Sticky Menu ( hoặc bất kỳ thứ gì )
- Dưới chức năng thiết lập cơ bản, thêm thanh điều hướng mà bạn muốn trở thành trình đơn dính
- Thay đổi bất kỳ thiết lập mong muốn nào, chẳng hạn như khoảng trống giữa đầu trang và phần dính dính
- Nhấp vào Save Settings
- Làm mới trang web để xem trình đơn dính bẩn
3. Trình đơn Anh hùng
Hero Menu là một phần mềm cao cấp của WordPress để tạo các trình đơn dính đáp ứng. Builder drag-and-drop của nó giúp dễ dàng xây dựng mọi khía cạnh của việc điều hướng. Bạn cũng có thể cấu hình các trình đơn như chiều cao, màu sắc, độ trong và phông chữ để phù hợp với trang web của bạn. Tìm hiểu thêm về plugin và quy trình cài đặt ở đây.
Nếu bạn không muốn sử dụng CSS hoặc cài đặt một plugin, may mắn thay, bạn có thể cài đặt một chủ đề kèm theo thanh Navbar dính.
Các chủ đề của WordPress với trình đơn dính tích hợp
Một số chủ đề của WordPress đi kèm với các trình đơn dính sẵn sàng. Những người khác cung cấp các tiện ích để bạn có thể làm cho trình đơn dính bằng cách nhấp vào một nút. Dù thế nào đi nữa, bạn cũng không cần phải lo về việc thêm mã hoặc cài đặt plugin.
Đây là những gợi ý tốt nhất để bạn khám phá.
1. Hello Elementor Theme
Hello là một chủ đề sạch sẽ, nhẹ nhàng được thiết kế đặc biệt cho Elementor, người xây dựng trang WordPress hàng đầu. Trình đơn header dính được liệt kê là một trong nhiều tính năng nội dung động. Bạn có thể thêm một cái vào trang của mình bằng vài cú nhấp chuột.
Tìm hiểu thêm về việc xây dựng một trang web bằng cách sử dụng phần mềm Elementor với khoá học miễn phí của Học viện HubSpot.
Giá : miễn phí.
2. Chủ đề Salient
Nguồn ảnh.
Salient Theme cho phép bạn tạo một trang web tuyệt vời với bố cục được thiết kế trước. Tính trực quan của nó đối với các nhà thiết kế mới bắt đầu nhưng đủ mạnh mẽ cho các chuyên gia. Với việc chỉnh sửa phía trước, tích hợp Google Fonts và công cụ nhập demo, bạn có thể dễ dàng thiết kế một trang web có trình đơn dính thân thiện với người dùng.
Hầu hết các mẫu Salient đi kèm với trình đơn dính đã được kích hoạt. Nếu nó không hoạt động, bạn có thể kích hoạt nó trên bảng điều hành của bạn. Bonus : nếu bạn mệt mỏi với việc có một trình đơn dính, bạn có thể bao gồm một nút trở về phía trên để cho phép người dùng trở về với tiêu đề.
Giá : 60 đô la phí một lần.
3. Chủ đề chuyên nghiệp
Nguồn ảnh.
Pro Theme đang định nghĩa lại tương lai của phát triển website. Bộ xây dựng tiêu đề chủ đề cung cấp cho bạn khả năng tạo các trình đơn dính đơn giản đến phức tạp. Chủ đề cũng là năng động, cho phép bạn tạo một trang landing toàn bộ không có trình đơn. Khi người dùng cuộn xuống, trình đơn sẽ xuất hiện và dán ở đầu trang.
Giá : phí một lần $69 ( Giấy phép sử dụng đơn lẻ ) ; phí một lần $349 ( Giấy phép sử dụng không giới hạn ).
4. X Theme
Nguồn ảnh.
X Theme được coi là một trong những chủ đề WordPress tốt nhất. Với chủ đề này, bạn có thể cài đặt một trang web được xây dựng sẵn độc đáo với một trình đơn dính như bản demo được hiển thị ở trên chỉ cần vài cú nhấp chuột. Sau đó, bạn có thể cấu hình từng phần của trình đơn dính vào kích cỡ hoàn hảo. Bạn cũng có thể thêm vào một trình đơn điều hướng hình dán bên phải để thiết lập riêng trang web của bạn.
Giá : phí một lần 59 đô la.
5. Sao Mộc X
Nguồn ảnh.
Jupiter X cung cấp hơn 350 trang web được xây dựng trước cho các lĩnh vực kinh doanh khác nhau, bao gồm các tổ chức doanh nghiệp, sáng tạo và phi lợi nhuận. Bạn cũng có thể tạo các trang tuỳ chỉnh từ đầu. Cho dù bạn chọn một mẫu được thiết kế trước hoặc xây dựng từ đầu, việc tạo một header dính là đơn giản.
Giá : phí một lần 59 đô la.
Có phải bạn đang tạo tiêu đề dính bằng cách mã hoá bằng CSS, cài đặt một plugin, hoặc chuyển sang một chủ đề cung cấp tuỳ chọn, bạn nên nhớ đến những thực hành tốt nhất.
Các thực hành tốt nhất của trình đơn dính
Bạn nên dùng thanh nhấp nháy để làm cho trang của bạn dễ dàng hơn, không phải khó sử dụng, Hãy làm theo những lời khuyên này để làm cho trình đơn dính và thân thiện với người dùng.
1. Tuỳ biến màu trình đơn dính để phản ánh bản sắc thương hiệu của bạn
Để đảm bảo người dùng có được lợi ích tốt nhất từ thực đơn dẻo của bạn, bạn sẽ muốn chọn màu khuyến khích người dùng nhấp vào các liên kết và nút trên thanh Navbar.
Điều quan trọng nhất cần lưu ý là bạn không nên sử dụng các phông chữ hoặc màu sắc hoàn toàn khác với phần còn lại của trang. Bạn muốn trình đơn điều hướng vẫn phản ánh thương hiệu của mình. Ví dụ, bạn có thể thiết lập nền trong suốt, sau đó chọn màu tương phản trong màu sắc của mình để tạo liên kết.
Hầu hết các chủ đề và trang xây dựng sẽ cho phép bạn thay đổi màu nền của thanh điều hướng hoặc tiêu đề thông qua các tuỳ chọn chủ đề.
Tuy nhiên, nếu bạn không cài đặt một chủ đề cho phép tuỳ biến màu trình đơn dính, bạn có thể làm điều đó bằng ứng dụng tuỳ biến trực tiếp của WordPress.
- Đăng nhập vào bảng điều hành của quản trị viên Windows
- Trên thanh bên trái, hãy vào Appearance, rồi nhấp vào Customize ( Tuỳ chỉnh )
- Nhấp vào Additional CSS. Lưu ý : Đừng nhấp vào mục trên thanh bên có tiêu đề Menu.Nó cho phép bạn tuỳ biến danh sách trình đơn, không phải màu sắc
- Một trình soạn thảo sẽ xuất hiện, sao chép và dán mã bên dưới
Xem mã trình đơn Pen Sticky của HubSpot (@ Hubspot ) trên CodePen.
- Ở vị trí ghi Nav, đặt mã thực tế của CSS hoặc lớp cho trình đơn điều hướng. Lưu ý rằng nó có thể là Nav, vì đó là một phần tử HTML tiêu chuẩn. Nhưng chủ đề của bạn có thể dùng một Id khác cho trình đơn của bạn. ( Dưới đây là cách tìm lớp CSS hoặc Id của bạn. )
- Ở vị trí hiển thị Background, bạn nhập màu nền đã chọn
Chúng tôi khuyến nghị sử dụng các công cụ như Coolors.co để tìm ra màu sắc phù hợp với bạn. Bạn cũng có thể thiết lập màu sắc trong suốt (rgba ( 0.00,0 ).
2. Thêm logo thương hiệu
Thêm logo vào trình đơn dính là một cách đơn giản để duy trì sự chú ý của thương hiệu khi khách truy cập vào nội dung của bạn. Điều này đặc biệt hữu ích cho các doanh nghiệp muốn người dùng liên kết một ký hiệu hoặc ký hiệu hình ảnh cụ thể với thương hiệu của họ. Một ví dụ có thể là dấu tích của Nike trong trình đơn gắn dính của Nike :.
Chú ý đến cách Nike does not sử dụng tên thương hiệu của mình trong trình đơn của nó, nằm ở đầu màn hình khi người dùng cuộn ngược lên.
Sau đây là cách thêm biểu tượng logo vào thanh nhấp nháy dính trên Windows.
- Đăng nhập vào bảng điều hành của quản trị viên Windows
- Trên thanh bên trái, hãy vào Appearance, rồi nhấp vào Customize ( Tuỳ chỉnh )
- Truy cập vào Theme Options, sau đó nhấp vào Site Identity
- Nhấp vào nút đăng tải logo
- Chọn một hình ảnh từ ổ đĩa địa phương, mặc dù bạn có thể cắt nó, nhưng bạn cũng có thể để nó như cũ
Đảm bảo logo đủ nhỏ để phù hợp với trình đơn dính dính của bạn. Nếu không, nó sẽ treo trên mép và che khuất phần của trang khi người dùng cuộn. Chúng tôi khuyến nghị kích cỡ nhỏ hơn 100px x 100px cho các biểu tượng logo vuông.
3. Chỉ duy trì các mục trình đơn có liên quan nhất
Bạn sẽ không muốn quá nhiều tuỳ chọn trong trình đơn dính dáng. Khi thu hẹp lựa chọn của bạn, hãy cân nhắc những món đồ nào phù hợp nhất với du khách duy nhất của bạn. Ví dụ, trên một trang thương mại điện tử, một biểu tượng giỏ hàng sẽ quan trọng hơn để đưa vào trình đơn điều hướng hơn là một liên kết đến trang About.
Nếu bạn điều hành một trang web kinh doanh chung, đây là một ví dụ về các mục trình đơn mà bạn có thể bao gồm :.
- Nhà
- Về
- Dịch vụ
- Blog
- Liên hệ hoặc nút CTA
- Nút tìm kiếm
Nếu bạn là nhà bán lẻ thương mại điện tử, đây là một ví dụ về các mục trình đơn mà bạn có thể bao gồm :.
- Loại 1 ( ví dụ như Phụ nữ )
- Loại 2 ( ví dụ như đàn ông )
- Bán hàng
- Tài khoản
- Nút tìm kiếm
- Nút giỏ hàng
Nếu bạn là chuyên viên tự do, bạn có thể thêm các mục sau vào trình đơn :.
- Nhà
- Bắt đầu
- Tài khoản đầu tư
- Blog
- Liên lạc với tôi hoặc nút CTA
4. Tạo trình đơn dính tuỳ chỉnh cho trình duyệt di động
Vì bạn sẽ có ít không gian hơn để làm việc trên thiết bị di động, bạn cần tạo một trình đơn dành riêng cho màn hình nhỏ hơn.
Trên màn hình nhỏ hơn, bạn sẽ muốn giảm kích cỡ phông chữ và che dấu nhiều mục trình đơn hơn. Hoặc bạn có thể giấu tiêu đề khi người ta cuộn xuống trang, và làm cho nó xuất hiện khi người ta cuộn lên. Đây chỉ là một vài lựa chọn mà bạn có thể lựa chọn khi thiết kế giao diện di động.
5. Thêm vào một biểu tượng kính lúp thay vì trường tìm kiếm văn bản
Tối đa hoá bất động sản trong trình đơn điều hướng là rất cần thiết, bất kể thiết kế của thiết bị nào. Nhưng đó là một hành động cân bằng : Bạn muốn sử dụng không gian một cách hiệu quả mà không làm ảnh hưởng đến trải nghiệm của người dùng.
Một cách để bạn có thể giữ phòng trong khi vẫn đáp ứng mong đợi của du khách là thay thế trường tìm kiếm bằng biểu tượng kính lúp. Đây là chiến thắng : Người truy cập thích tìm kiếm hơn là duyệt web vẫn có tuỳ chọn để làm như vậy, và bây giờ bạn có thể thêm một mục danh sách khác vào trình đơn của bạn.
6. Thêm hoạt hình lơ lửng vào trình đơn
Mặc dù một số hoạt hình có thể gây phân tâm, nhưng một số hoạt hình khác có thể giúp cải thiện việc điều hướng trang web của bạn. Ví dụ, bạn có thể làm cho thanh Navbar trong suốt khi trang được tải lần đầu tiên. Như vậy, nó sẽ không bị phân tán khỏi thanh trượt hoặc tiêu đề có tính năng.
Nhưng nếu một vị khách lượn lờ trên trình đơn, thanh Navbar chuyển từ nền trong suốt sang màu trắng rắn. Bằng cách này, họ có thể dễ dàng nhìn thấy và nhấp vào các liên kết điều hướng.
Bạn có thể dễ dàng thêm hoạt hình lơ lửng vào trình đơn điều hướng dính bằng cách sử dụng CSS. Nhưng trước tiên, bạn cần kiểm tra lại liệu chủ đề hoặc trình xây dựng trang của bạn có cung cấp tuỳ chọn hover cho trình đơn của bạn hay không. Hãy chắc rằng bạn đã khám phá toàn bộ các thiết lập chủ đề trước khi thêm thêm thêm thêm các ứng dụng custom CSS.
Nếu bạn không thể tìm ra các cài đặt hover cho chủ đề của bạn, đây là cách thêm vào bằng cách sử dụng CSS :.
- Đăng nhập vào bảng điều hành của quản trị viên Windows
- Trên thanh bên trái, hãy vào Appearance, rồi nhấp vào Customize ( Tuỳ chỉnh )
- Nhấp vào Additional CSS. Lưu ý : Đừng nhấp vào mục trên thanh bên có tiêu đề Menu, mục này cho phép bạn tuỳ biến các mục danh sách trình đơn, không phải màu sắc
- Một trình soạn thảo sẽ xuất hiện, sao chép và dán mã bên dưới
Thấy dòng chữ Pen Sticky Navbar Hover Color của HubSpot (@ Hubspot ) trên CodePen.
- Ở vị trí ghi Nav, đặt mã thực tế của CSS hoặc lớp cho trình đơn điều hướng. Lưu ý rằng nó có thể là Nav, vì đó là một phần tử HTML tiêu chuẩn. Nhưng chủ đề của anh có thể dùng một Id khác cho yếu tố này. ( Dưới đây là cách tìm lớp CSS hoặc Id của bạn. )
- Tuỳ biến màu nền và hover cho đến khi bạn có được kết quả mong muốn
Nếu màu sắc không thay đổi trên phiên bản trực tiếp của trang web, hãy xoá bộ nhớ đệm của trình duyệt. Có thể trình duyệt của bạn đang tải một phiên bản cũ và lỗi thời của trang web.
Nếu nó không hoạt động, hãy thêm tài sản quan trọng vào cuối mỗi dòng mã CSS. Điều đó sẽ báo cho trang web vượt qua các cài đặt khác và tải các CSS tuỳ chỉnh của bạn.
7. Kiểm tra thực đơn dính bẩn của bạn
Thử nghiệm với các biến thể của trình đơn dính dáng để tìm ra những món nào phù hợp với du khách của bạn. Thay đổi màu sắc, kích cỡ phông chữ và vị trí của trình đơn. Bạn có thể làm điều này bằng cách sử dụng giao diện thử nghiệm A / B theo cách mà bạn không cần phải thực hiện ngay lập tức. Chia nhiều biến thể của trình đơn trước khi xoá bỏ phiên bản cuối cùng.
Nếu bạn không muốn thực hiện bài kiểm tra phân chia chính thức, bạn có thể nhấn một phiên bản thực đơn trực tiếp. Nếu bạn ngừng được nhấp vào nút CTA hoặc tăng tỷ lệ bounce rate, hãy thay đổi một yếu tố duy nhất trong trình đơn dính. Tiếp tục làm như vậy cho đến khi bạn tối ưu hoá từng yếu tố cho đến kích cỡ phông chữ.
Ví dụ về điều hướng dính
Một trình đơn dính và hấp dẫn sẽ giúp du khách điều hướng trang web của bạn và giữ cho họ chú tâm vào nội dung của bạn. Sử dụng các ví dụ dưới đây như một sự thúc đẩy sáng tạo để tạo ra trình đơn dính.
Công cụ lọc và khám phá dễ dàng
Trong ví dụ này, một ứng dụng mua sắm muốn cho phép người tiêu dùng dễ dàng tìm ra các thương hiệu thời trang độc đáo. Trình đơn dính được thiết kế rõ ràng với mục đích này. Nó cung cấp bốn liên kết điều hướng đơn giản để tìm, khám phá và lọc các nhãn hiệu và sản phẩm.
Đơn giản, tao nhã và sạch sẽ
Nhận ra vấn đề của trình đơn điều hướng cố định để lại ít không gian cho nội dung khác, trang này chọn tiêu đề nằm ngang tối thiểu. Navbar vẫn dễ dàng truy cập mà không bị phân tán khỏi các yếu tố quan trọng khác trên trang chủ.
Trình đơn topic-rich
Các trang báo chí có nghĩa là giúp bạn khám phá thêm nội dung. Trình đơn dính của trang web này được sắp xếp gọn gàng theo chủ đề cho độc giả háo hức để xác định nội dung cụ thể dễ dàng hơn.
Tự hỏi, Trở thành khách hàng
Hãng chăm sóc tóc này đã bỏ lỡ trên các thanh Navbar dính bằng cách có một nút Take Quiz được đánh dấu ở phía trên bên trái. Ở phía trên bên phải, bạn sẽ bắt đầu kiếm được phần thưởng bằng cách đăng ký một tài khoản.
Đứng thẳng và gần như vô hình
Một trình đơn dọc gần như vô hình làm cho thương hiệu quần áo này trông hiện đại và tối giản. Điều này sẽ tạo kiểu nhỏ và nền trong suốt cung cấp cho người dùng tối thiểu trần, duy trì sự tập trung vào các sản phẩm đang được bán.
Theo dõi chúng tôi về xã hội
Trang web này có một tiêu đề nằm ngang bằng chiều ngang dính, sụp lại phía sau nút hamburger khi người truy cập cuộn. Ở góc trên bên phải, các nút xã hội nổi bật mời bạn theo dõi ấn phẩm trên mạng xã hội.
The Menu Thats Not a Menu
Không giống như các ví dụ trên, trang danh mục này có trình đơn điều hướng theo chiều dọc được giấu đằng sau nút hamburger. Nó quá xa đường, nó gần như không có ở đó. Định dạng này là lý tưởng cho các doanh nghiệp sáng tạo và các trang đầu tư.
Tạo trình đơn điều hướng dính của riêng bạn
Bằng cách cố định và dễ dàng tiếp cận với du khách bất kể họ đã cuộn trên trang, các trình đơn dính có thể nâng cao trải nghiệm của du khách trên trang web của bạn. Dành vài phút để tạo một trình đơn dính để cải thiện sự điều hướng chính của trang web. Nếu bạn làm điều này bằng cách sử dụng CSS, một plugin, hoặc một chủ đề với một Navbar dính tích hợp, hãy chắc rằng bạn phải tuân theo những thực hành tốt nhất để trình đơn giúp trang của bạn dễ sử dụng hơn và tăng độ chuyển đổi.
Lưu ý của biên tập viên : Bài viết này ban đầu được xuất bản vào tháng 7 năm 2019 và đã được cập nhật về độ toàn diện.
