Cách tạo liên kết trong menu trang đích - hướng dẫn từng bước. Menu thích ứng cho trang đích

Làm cách nào để tạo liên kết trong menu đích? Vâng, rất đơn giản! Chỉ cần sao chép một phần mã (vài dòng) và dán vào đúng chỗ. Bây giờ chúng ta hãy xem xét tất cả điều này. Nhưng hãy giải thích trước. Ban đầu, người ta cho rằng trang đích không dẫn đến đâu cả (nghĩa là dẫn đến các trang khác), đó là trang một trang. Do đó, về mặt lý thuyết, tất cả các liên kết chỉ dẫn đến các phần của LP(). Đôi khi cần phải đặt một liên kết đến một trang khác, chẳng hạn như chính sách bảo mật. Chúng tôi đã mô tả tất cả những chi tiết này trong bài viết “”. Hãy xem xét cả hai tùy chọn để thêm siêu liên kết vào trang một trang.

Ví dụ: chúng tôi sẽ sử dụng tài nguyên của mình “”. Theo link tới trang và nhấn tổ hợp Phím Ctrl+ U (không cần chuyển bàn phím sang tiếng Anh). Sẽ mở Mã HTML trang.

Mã HTML trang đích

Các siêu liên kết trên các trang web được đính kèm trong phần đặc biệt thẻ html. Nhãn có thuộc tính href = theo sau là địa chỉ hợp pháp, liên kết đến một trang (trang khác) hoặc liên kết đến một phần của tài liệu có dấu # và tiêu đề, đại loại như thế này Thưởng

Mã thực đơn

Bây giờ bạn cần chuyển tiếp đến phần đích mong muốn, để làm điều này, bạn sử dụng mã định danh id = “tên đã được sử dụng trong menu có dấu #”, trong trường hợp của chúng tôi là “màn hình”, xem hình ảnh

ID từ trình đơn

Bây giờ hãy tạo liên kết bổ sungở footer (chân trang). Đối với điều này, theo một cách nào đó trình soạn thảo html, ví dụ như NotePad++, chỉ cần sao chép một trong các liên kết menu hiện có và dán bên dưới sau giá. Tiếp theo, sau biểu tượng #, thay thế bằng futer và từ sau con chim >Footer. Đây là những gì bạn nên nhận được.

thêm liên kết mới trên thực đơn

Bắt đầu công việc kinh doanh của bạn trên Internet - mở liên kết internet cửa hàng. Trong bài viết "", được đưa ra hướng dẫn từng bước khi ra mắt, không cần đầu tư. Và bằng cách đăng ký, bạn sẽ nhận được toàn bộ khóa học về chủ đề này và hoàn toàn miễn phí. Xem thêm “”, bài viết đưa ra trường hợp thực tế và nguyên tắc đưa tài nguyên lên TOP kết quả tìm kiếm.

Menu trước khi thêm liên kết

Menu sau khi thêm mã

Tiếp theo, bạn cần đặt id vào đúng vị trí. Để làm điều này, hãy đi xuống cuối tài liệu và tìm một div có tên chân trang, tôi cố tình viết sai tên menu mới và đặt chân trang, vì id phải là duy nhất. Đây là kết quả sẽ như thế nào, xem ảnh chụp màn hình.

Đặt mã định danh từ menu Thay thế liên kết sang trang khác

Với sự trợ giúp của trình soạn thảo kỳ diệu và các mẫu thú vị của chúng tôi, bạn có thể dễ dàng chỉnh sửa tất cả văn bản, phần và tạo trang đích bán hàng thú vị.

Điều hướng mang lại cảm giác kiểm soát, bản thân điều này không tệ. Nhưng còn quy tắc “một trang, một mục tiêu” thì sao? Không có câu trả lời rõ ràng cho câu hỏi này (giống như hầu hết các câu hỏi tối ưu hóa), nhưng có một số nghiên cứu điển hình tuyệt vời có thể giúp bạn đưa ra quyết định.

Tối ưu hóa trang đích

Hạ cánh là một phần không thể thiếu trong chiến lược tăng lợi nhuận. Trung bình, lượng khách hàng tiềm năng tăng 55% khi các công ty tăng số lượng trang đích. Tuy nhiên, nghiên cứu cho thấy chỉ có 22% công ty hài lòng với tên miền .

Xem tất cả các yếu tố trên? Chúng đánh lạc hướng sự chú ý và đưa bạn ra khỏi trang đích. Điều hướng dẫn từ trang đích, mâu thuẫn với ý nghĩa tồn tại của nó.

Trang đích là một trang tự trị mà khách truy cập tiếp cận thông qua liên kết quảng cáo hoặc từ kết quả tìm kiếm. Nhiệm vụ của nó là khuyến khích người dùng thực hiện hành động. Ví dụ: nhận bản demo sản phẩm hoặc đăng ký hội thảo trên web.

Rõ ràng là điều hướng ở đây không có nhiều ý nghĩa nhưng chỉ có 16% trang đích không chứa nó. Người ta tin rằng cần có các liên kết để đi đến các phần khác trong bố cục trang đích. Hãy xem thử nghiệm phân tách cho thấy điều gì.

Trường hợp "cho" điều hướng

hiểu vị trí của bạn;
Dễ dàng điều hướng đến các phần khác.

Có ba loại điều hướng:

chủ yếu;
địa phương;
theo ngữ cảnh.

Loại này đại diện cho menu chính của trang web. Mỗi phần tử trong đó dẫn đến một phần cụ thể của tài nguyên. Tiêu đề trên trang Edgar là một ví dụ về điều hướng chính:

Điều hướng cục bộ

Đây là các phần phụ của điều hướng chính ở định dạng menu thả xuống nhằm cấu trúc thông tin. Có một menu như vậy trên trang đích Zoho được đề cập ở trên.

Điều hướng theo ngữ cảnh

Cả ba loại đều cần thiết để xem tài nguyên và sắp xếp nội dung trên đó. Chúng giúp bạn dễ dàng chuyển từ trang này sang trang khác và tìm hiểu sâu hơn về công ty.

Theo WordStream, có tới 96% trang đích chứa ít nhất một liên kết đưa khách truy cập đi. Những con số nói:

chỉ 4% trang đích không có liên kết nào cả;
81% trang chứa từ 1 đến 9 liên kết;
14% sử dụng hơn 10 yếu tố điều hướng.

Việc đặt liên kết cho phép bạn giải quyết các vấn đề khác ngoài mục đích chính của trang đích. Ví dụ, nút xã hội. mạng tăng số lượng thuê bao.

Hãy lấy trang Meltwater làm ví dụ.

Landing page không chỉ giới thiệu sản phẩm bằng cách nhấn vào nút CTA mà còn mở đường đến các phần khác thông qua điều hướng. Đối với những người không quan tâm đến mục đích chính của trang, có thể có nội dung khác phù hợp. Nó chỉ ra rằng ngay cả khi các liên kết dẫn khách truy cập đi, thì cuối cùng chúng vẫn hoạt động vì kết quả.

Trường hợp chống lại điều hướng

Liên kết điều hướng không hoạt động trên trang đích vì đây không phải là một trong các trang trên trang web của bạn và phải khác biệt với trang đó. Các liên kết trên cửa sổ đầu tiên của tài nguyên giúp bạn nghiên cứu thông tin bằng cách di chuyển từ trang này sang trang khác. Trên trang đích họ chỉ đơn giản đưa người dùng đi.

Không quan trọng tiêu đề hấp dẫn đến mức nào, thông tin được trình bày khéo léo như thế nào hay nội dung . Liên kết điều hướng đưa bạn ra khỏi mục tiêu chuyển đổi và không thể dự đoán liệu khách truy cập có quay lại hay không. Khoảng chú ý của người dùng bị hạn chế, vì vậy bạn cần thu hút họ ngay từ đầu và loại bỏ những phiền nhiễu trong quá trình thực hiện.

Điều này cũng áp dụng cho phần footer (chân trang của trang), chứa đầy các liên kết. Hãy tưởng tượng một khách truy cập đang xem trang đích của bạn và định nhấp vào nút CTA nhưng đột nhiên bị phân tâm bởi các liên kết bên dưới. Điều này ảnh hưởng đến chuyển đổi của bạn.

Ví dụ: trên trang đích rút thăm trúng thưởng của Better Homes and Gardens, có khả năng cao là khách truy cập sẽ muốn tìm hiểu thêm về Meredith Corporation và sẽ đi chệch khỏi con đường dẫn đến việc nhấp vào nút CTA.

Có đủ ví dụ, bây giờ hãy xem thử nghiệm phân tách nói gì về tác động của liên kết đến chuyển đổi. Bài kiểm tra - Cách tốt nhất tìm hiểu điều gì hiệu quả trên trang đích và điều gì mang tính phá hoại. Để thấy tác động tích cực của việc xóa liên kết điều hướng, chỉ cần xem ví dụ của AmeriFirst.

Các nhà tiếp thị muốn cải thiện hiệu suất nhưng lại ngần ngại thiết kế lại toàn bộ trang vì sợ mất lòng tin của khách hàng. Quyết định loại bỏ thanh điều hướng được đưa ra, điều này giúp trang có tổ chức hơn và dẫn đến tỷ lệ chuyển đổi tăng 30-40%. Dưới đây là sự khác biệt giữa hai trang:

Tương tự, Hubspot đã thử nghiệm năm trang đích có lưu lượng truy cập cao. Phiên bản A, không giống như phiên bản B, có phần trên và bảng điều khiển phía dưới các nút điều hướng và phương tiện truyền thông xã hội.

Dữ liệu cho thấy rằng việc xóa tất cả các liên kết điều hướng sẽ làm tăng chuyển đổi.

Điều đặc biệt thú vị là việc loại trừ điều hướng từ giữa kênh chuyển đổi dẫn đến mức tăng 16% và 28% và từ đầu kênh - 0-4%.
Khi nhóm Minders kiểm tra trang đích của họ và loại bỏ thanh điều hướng, trong vòng một tháng, tỷ lệ chuyển đổi đã tăng từ 9,2% lên 17,6%.

Bài kiểm tra số 4. Yuppiechef là nhà bán lẻ trực tuyến hàng đầu về đồ dùng nhà bếp cao cấp có trụ sở tại Nam Phi. Họ đã thử nghiệm loại bỏ thanh điều hướng để tránh việc khách truy cập bị phân tâm khỏi nhiệm vụ chuyển đổi chính là đăng ký tạo danh sách quà cưới trực tuyến.

Đây là những gì đã xảy ra sau khi xóa thanh điều hướng:

Tùy chọn này đã tăng tỷ lệ chuyển đổi lên 100%.

Khi không có liên kết không liên quan trên trang đích (ngoại trừ nút CTA), không có gì khiến người dùng mất tập trung vào nhiệm vụ chính. Trang đích không có liên kết sẽ tập trung vào một hành động, có nghĩa là khách truy cập sẽ chú ý đến hành động đó. Nhưng liên kết điều hướng Họ không chỉ đánh lạc hướng sự chú ý - họ còn gây ra nhiều tổn thất về vật chất.

Nếu bạn sử dụng trang đích để quảng cáo thì bạn sẽ trả tiền cho mỗi khách truy cập. Và nếu trang không dẫn đến mục tiêu chuyển đổi, bạn chỉ đơn giản là đang mất tiền. Bất kể bạn tạo trang đích bằng cách nào - sử dụng mẫu hay từ đầu, các liên kết điều hướng sẽ đưa khách truy cập rời khỏi nhiệm vụ chính và chuyển sang nhiệm vụ phụ.

Cần phải làm rõ rằng việc đặt các liên kết giúp điều hướng và làm việc trên trang dễ dàng hơn là điều khá bình thường. Trang đích dài thực hành đặt di động thanh điều hướng, giúp di chuyển từ khối thông tin này sang khối thông tin khác.

Trang đại lý Chuyển đổi XL có một menu cho phép bạn di chuyển xung quanh trang đích mà không cần cuộn.

Nếu có nhiều thông tin trên trang, menu trong tiêu đề sẽ cho phép bạn chuyển ngay đến phần được yêu cầu. Nó thoải mái hơn cuộn vô hạn phần.

Đây là cách nó hoạt động trang GoogleỨng dụng:

Phần kết luận

Không giống như trang web, trang đích nên dẫn đến Hành động cụ thể và tập trung sự chú ý của bạn vào nó. Khi bạn thêm liên kết, khả năng mất khách truy cập sẽ tăng lên.

Trên một tài nguyên thông thường, việc điều hướng là cần thiết. Việc cung cấp cho khách truy cập bản đồ trang web cũng rất đáng giá vì anh ta cần xem một số trang với các ưu đãi khác nhau. Nhưng việc đặt liên kết trên trang đích là vô nghĩa vì bạn sẽ bị lạc vào trang duy nhất được tạo bên dưới. nhiệm vụ cụ thể, Không chắc nó sẽ xảy ra.

Vì vậy, dữ liệu là không ngừng. Trang đích phải phục vụ một mục đích. Bạn không nên cung cấp cho khách truy cập hàng loạt lý do để rời bỏ bạn.

Hôm nay chúng ta sẽ xem cách bạn có thể sử dụng plugin để tạo cuộn toàn màn hình trang đích. Nghĩa là, trang đích của bạn bao gồm các khối nhất định và các khối tương tự này sẽ chỉ thay đổi khi cuộn với độ trễ nhẹ. Các công ty rất nổi tiếng tạo trang đích của họ theo phong cách này. Và hôm nay bạn sẽ tìm hiểu việc tự mình tạo một thiết kế trang đích như vậy dễ dàng như thế nào.

Bài viết về hiệu ứng cuộn:

Bản chất của hiệu ứng: có một chút chậm trễ trước khi cuộn sang khối tiếp theo và sau đó trang sẽ chuyển sang khối tiếp theo. Hoạt ảnh cũng xảy ra khi cuộn vào hướng ngược lại. Nó có vẻ nhỏ.

Hãy thử cuộn trang đích này đến cuối rồi sử dụng menu:

Tải xuống

Quá trình thay đổi khối:

Làm cách nào để tạo một thiết kế trang đích như thế này?1 Cấu trúc HTML

Trước tiên, hãy tạo một menu để chúng ta không chỉ có thể cuộn qua các khối mà còn có thể sử dụng menu chung.

Cấu trúc menu là tiêu chuẩn:

1 2 3 4 5 6

Khối 1 Khối 2 Khối 3 Khối 4

Hãy để tôi giải thích các thuộc tính:

data-menuanchor - thuộc tính bắt buộc để tạo menu.
href là thuộc tính liên kết đi đến neo tương ứng có cùng ID.

Bây giờ hãy tạo cấu trúc của tất cả các khối:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Có một khối chung với mã định danh "toàn trang" trong đó có các khối có nội dung. Có một thuộc tính ở đây không quen thuộc với bạn:

data-anchor - thuộc tính này dành cho hoạt động của menu, chúng tôi sẽ thực hiện chức năng này sau.

2 kiểu CSS

Không có style đặc biệt nào ở đây nên ở đây tôi sẽ chỉ đặt các style cho menu:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

#menu ( chiều cao : 60px ; trái : 0 ; lề : 0 ; đệm : 0 ; vị trí : cố định ; trên cùng : 0 ; chiều rộng : 100% ; z-index : 70 ; căn chỉnh văn bản : phải ; nền : #fff ; ) #menu li ( nền : rgba(255 , 255 , 255 , 0.5 ) ; bán kính đường viền : 4px ; màu : #000 ; hiển thị : khối nội tuyến; lề : 10px ; ) /* Kiểu liên kết khi khối tương ứng đang hoạt động* / # menu li a , #menu li.active a ( display : block ; phần đệm : 9px 18px ; text-trang trí : none ; color : #ccc ; ) /*Liệt kê kiểu mục khi khối tương ứng được kích hoạt*/ #menu li .active ( nền : rgba(0 , 0 , 0 , 0.5 ) ;color : #fff ;

Tất cả những gì còn lại là kết nối tập lệnh và viết một mã JS nhỏ.

3 phần JS

Thư viện cần thiết:

jQuery.min.js

Hãy kết nối chúng:

1 2

Xin chào các bạn, đồng nghiệp! Bạn dạo này thế nào? Tôi hy vọng mọi người đang làm tốt :) Hôm nay chúng tôi sẽ tạo một menu thích ứng đơn giản cho trang đích của mình. Mọi người hỏi về vấn đề này ngày càng thường xuyên hơn, và tôi viết ra những câu hỏi như vậy và cố gắng viết bài về những chủ đề này vào thời gian rảnh.

Cảm ơn bạn đã cho tôi những ý tưởng mới theo cách này và giúp phát triển blog. Nhân tiện, bạn muốn đọc bài viết tiếp theo về chủ đề gì? Hãy viết bình luận nhé, điều này rất quan trọng với tôi. Bây giờ, hãy bắt đầu...

Cách tạo menu đáp ứng cho trang web

Google đã xác nhận rằng bắt đầu từ giữa tháng 4, khả năng phản hồi của trang web dành cho thiết bị di động sẽ trở thành một trong những yếu tố xếp hạng. Về vấn đề này, tất cả tài liệu về cách làm cho trang đích của bạn thích ứng đều phù hợp hơn bao giờ hết. Hôm nay tôi sẽ không giải thích bất cứ điều gì phức tạp mà ngược lại, tôi sẽ mách bạn cách tạo một menu thích ứng rất đơn giản với thời gian tối thiểu.

Về cơ bản nó sẽ là html + css, nhưng bạn sẽ cần một đoạn script rất nhỏ để xử lý cú nhấp chuột. Vì thế…

Menu ngang đáp ứng

Hãy bắt đầu với html. Trước hết, hãy kết nối thư viện jquery. Có thể bạn đã sử dụng nó trong một thời gian dài, vì vậy hãy đảm bảo bạn không kết nối nó lần thứ hai:

Bây giờ là các dấu hiệu. Một danh sách không có thứ tự thông thường và một div nhỏ chứa biểu tượng menu. Nó sẽ chỉ hiển thị ở độ phân giải thấp.

Giá tải về

Liên lạc

Đánh giá

Như bạn thấy, nó không phức tạp, tôi nghĩ bạn có thể tự cải thiện nó khi cần thiết.
Bây giờ hãy thêm phong cách:

#menu ( nền: #2ba9c0; chiều rộng: 100%; đệm: 10px 0; căn chỉnh văn bản: giữa; ) #menu a ( color: #fff; text-trang trí: none; đệm: 12px 12px; ) #menu a: di chuột ( border-bottom: 4px Solid #fff; nền: #078ecb; ) .itemsMenu li ( display:inline; đệm-phải: 35px; width:100%; lề: 0 auto; ) .itemsMenu li img( Vertical-align : middle; lề phải: 10px; .iconMenu ( color: #fff; con trỏ: con trỏ; display: none; ) .showitems ( display:block !important; ) @media screen và (max-width: 600px) ( # menu a( đệm-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; đệm:10px 0 ; ) )

Bây giờ khi thu nhỏ cửa sổ trình duyệt bạn sẽ thấy hình ảnh sau:

Tôi thực sự không muốn mô tả từng dòng vì blog không phải là về bố cục như vậy. Hãy để tôi cố gắng giải thích.

Đầu tiên, chúng ta đặt thuộc tính display:inline cho các phần tử li để làm cho chúng xuất hiện cạnh nhau theo chiều ngang. Tôi có thể sử dụng float:left, nhưng tôi quyết định làm theo cách này. Và ẩn biểu tượng menu bằng thuộc tính display:none. Khi độ phân giải màn hình nhỏ hơn 600 pixel, hãy xóa nội tuyến khỏi các phần tử li, ẩn chúng và hiển thị biểu tượng. Tóm lại - vâng.

Bây giờ chúng ta cần một tập lệnh đơn giản để xử lý một cú nhấp chuột vào biểu tượng menu và hiển thị các thành phần của nó:

$(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

Như thế này. Tôi đã đưa nó đến tập tin riêng biệt và thêm nó vào trước thẻ body đóng.

Đó là tất cả. Bằng cách này, bạn có thể nhanh chóng tạo một menu thích ứng đơn giản cho trang đích.

Tất nhiên, có những nhược điểm. Thụt lề được chỉ định bằng pixel, nhưng bạn có thể đặt tất cả khoảng cách trong phần trăm. Đơn giản là không cần thiết cho nó. Nếu đây là một trang web chính thức thì tôi sẽ sử dụng biểu tượng phông chữ hoặc svg, không phải png và tôi sẽ tính toán lại mức thụt lề theo tỷ lệ phần trăm. Và vì vậy, đó là một chút ngẫu hứng :) Tôi hy vọng mọi thứ đều rõ ràng? Tạm biệt.