Tạo menu cố định khi cuộn trang

      32

Gần đây, giữa những người cần sử dụng của công ty chúng tôi đã hỏi chúng tôi cách tạo thành menu điều hướng cố định và thắt chặt cho website của họ?

Các thực đơn điều hướng cố định và thắt chặt vẫn hiển thị trên màn hình hiển thị khi người dùng cuộn xuống trang. Điều này tạo nên menu bên trên cùng luôn hiển thị, điều này giỏi cho trải nghiệm người tiêu dùng vì nó chứa những liên kết đến các phần quan trọng nhất trên website của bạn.

Bạn đang xem: Tạo menu cố định khi cuộn trang

Trong nội dung bài viết này, công ty chúng tôi sẽ hướng dẫn chúng ta cách dễ dãi tạo menu điều phối nổi cố định trong WordPress.

*

Menu điều hướng nổi thắt chặt và cố định là gì?

Menu điều hướng cố định hoặc nổi là menu ‘dính’ vào đầu screen khi người tiêu dùng cuộn xuống. Điều này tạo nên menu của người tiêu dùng hiển thị cho người dùng hồ hết lúc.

Đây là 1 trong những menu lôi kéo đang hoạt động. Chúng tôi sẽ hướng dẫn chúng ta cách chế tạo một menu hệt nhau như nắm này cho website của riêng biệt bạn:

*

Tại sao và khi nào menu dính rất có thể hữu ích?

Thông thường, menu điều hướng trên cùng chứa các liên kết đến các phần đặc biệt quan trọng nhất của trang web. Thực đơn nổi làm cho những liên kết đó luôn hiển thị, giúp người tiêu dùng không đề nghị cuộn lại đầu trang. Nó cũng được chứng minh là làm cho tăng gửi đổi.

Nếu chúng ta điều hành cửa hàng trực con đường , thì menu điều hướng trên thuộc của chúng ta cũng có thể bao gồm các liên kết đến giỏ hàng, danh mục sản phẩm và search kiếm sản phẩm. Làm cho menu này trở cần hấp dẫn, rất có thể giúp bạn giảm tình trạng bỏ qua mất giỏ hàng và tăng thu nhập bán hàng.

Một số chủ thể WordPress cực tốt của có cung cấp tích hợp đến menu điều phối cố định. Chỉ việc xem setup chủ đề của chúng ta trong chủ thể »Tùy chỉnh nhằm bật bản lĩnh này.

Nếu nhà đề của doanh nghiệp không tất cả tùy chọn này, hãy liên tục đọc và chúng tôi sẽ phía dẫn bạn cách tiện lợi tạo menu điều hướng nổi thắt chặt và cố định trong ngẫu nhiên chủ đề WordPress như thế nào hoặc siêu thị WooCommerce .

Phương pháp 1: Thêm menu điều phối nổi hấp dẫn của người tiêu dùng bằng plugin

Đây là phương thức dễ nhất. Chúng tôi đề xuất nó cho tất toàn bộ cơ thể dùng WordPress, đặc trưng là cho tất cả những người mới bắt đầu.

Nếu bạn chưa tùy chỉnh menu điều phối của mình, hãy liên tục và tiến hành việc đó bằng phương pháp sử dụng hướng dẫn của chúng tôi về biện pháp thêm menu điều phối trong WordPress .

Sau đó, các bạn cần thiết đặt và kích hoạt Sticky menu (hoặc Anything!) trên plugin Scroll . Để biết thêm chi tiết, hãy xem phía dẫn từng bước của cửa hàng chúng tôi về cách setup plugin WordPress .

Sau khi kích hoạt, các bạn cần truy vấn trang setup »Menu dính (hoặc phần đông thứ!) nhằm định cấu hình setup plugin.

*

Trước tiên, bạn phải nhập ID CSS của menu điều phối mà bạn muốn tạo nếp.

Bạn sẽ cần thực hiện công cụ đánh giá của trình lưu ý để tìm kiếm ID CSS được thực đơn điều hướng của chúng ta sử dụng.

Chỉ cần truy cập trang web của người tiêu dùng và đưa chuột cho menu điều hướng. Sau đó, chúng ta cần bấm vào phải cùng chọn khám nghiệm từ trình đơn của trình duyệt.

*

Thao tác này sẽ phân chia đôi màn hình hiển thị trình duyệt của người sử dụng và các bạn sẽ có thể coi mã nguồn mang đến menu điều hướng của mình.

Xem thêm: Hết Hóc Xương Cá 100% Với 10 Cách Chữa Mẹo Hóc Xương Cá Tại Nhà Hiệu Quả

Bạn yêu cầu tìm một cái mã liên quan đến điều phối hoặc tiêu đề website của bạn. Nó sẽ y hệt như thế này:

Nếu bạn đang loay hoay search nó, hãy đưa nhỏ trỏ chuột qua các dòng mã khác nhau trong phòng Kiểm tra. Menu điều phối sẽ được ghi lại hoàn toàn khi chúng ta có mẫu mã phù hợp:

*

Trong trường phù hợp này, ID CSS của menu điều hướng của shop chúng tôi là site-navigation .

Tất cả rất nhiều gì bạn phải làm là nhập ID CSS của thực đơn vào setup plugin với cùng 1 mã băm sinh sống đầu. Trong trường vừa lòng này, chính là # site-navigation .

*

Đừng quên nhấp vào nút ‘Lưu vắt đổi’ sinh sống cuối trang.

Bây giờ, hãy liên tục và bình chọn menu cố định và thắt chặt của chúng ta trực tiếp trên website WordPress của bạn. Nó vẫn ở bên trên trang khi bạn cuộn xuống, như thế này:

*

Tùy chọn tiếp sau trên trang thiết đặt của plugin là xác minh khoảng trống thân đầu màn hình của doanh nghiệp và menu điều phối cố định. Bạn chỉ cần sử dụng thiết đặt này nếu menu của bạn ông chồng lên một phần tử mà bạn không muốn ẩn. Ví như không, hãy bỏ qua thiết đặt này.

Chúng tôi khuyên bạn nên để vỏ hộp chọn ở bên cạnh tùy chọn: ‘Kiểm tra Thanh quản lí trị viên’. Điều này có thể chấp nhận được plugin thêm 1 số không gian cho thanh quản trị WordPress , chỉ hiển thị cho tất cả những người dùng đang đăng nhập.

Tại đây, bạn cũng có thể thấy rằng thanh cai quản trị trên website thử nghiệm của shop chúng tôi đang hiển thị đúng chuẩn phía trên menu ráng định:

*

Tùy lựa chọn tiếp theo có thể chấp nhận được bạn bỏ khắc ghi menu điều hướng nếu người tiêu dùng đang truy cập trang web của người tiêu dùng bằng màn hình nhỏ tuổi hơn, ví dụ như thiết bị di động:

*

Bạn hoàn toàn có thể kiểm tra đồ họa trang web của bản thân trên thiết bị di động hoặc laptop bảng. Nếu như khách hàng không ưa thích nó trông như vậy nào, chỉ việc thêm 780px đến tùy lựa chọn này.

Đừng quên nhấp vào nút Lưu biến đổi sau lúc thực hiện bất kỳ thay thay đổi nào so với tùy lựa chọn của bạn.

Phương pháp 2: Thêm trình đơn điều phối nổi cố định và thắt chặt theo phương pháp thủ công

Phương pháp này yêu thương cầu bạn thêm mã CSS tùy chỉnh thiết lập vào chủ thể của mình. Cửa hàng chúng tôi không giới thiệu nó cho tất cả những người mới bắt đầu.

Chúng tôi cũng khuyên chúng ta nên xem lí giải của shop chúng tôi về cách thuận tiện thêm CSS tùy chỉnh vào website WordPress của chúng ta trước khi bắt đầu.

Trước tiên, các bạn cần truy vấn Appearance »Customize nhằm khởi chạy vẻ ngoài tùy trở nên chủ đề WordPress.

*

Tiếp theo, nhấp vào ‘CSS bửa sung’ trong ngăn phía trái và kế tiếp thêm mã CSS này.

#Điều hướng trang web nền: # 00000; chiều cao: 60px; chỉ số z: 170; margin: 0 auto; border-bottom: 1px solid #dadada; chiều rộng: 100%; vị trí: gắng định; đầu trang: 0; trái: 0; đúng: 0; text-align: center;Lưu ý: làm việc này sẽ tạo menu điều hướng có nền đen. Nếu bạn có nhu cầu có color khác, hãy thay đổi số ở kề bên nền . Ví dụ: thực hiện nền : #ffffff sẽ cung cấp cho mình nền menu màu trắng.

Chỉ cần thay thế # site-navigation bằng CSS ID của menu điều hướng, tiếp đến nhấp vào nút Xuất bạn dạng ở đầu màn hình.

Hãy thường xuyên và truy vấn trang web của công ty để xem menu điều hướng nổi thắt chặt và cố định của ai đang hoạt động:

*

Điều gì sẽ xẩy ra nếu menu điều hướng của bạn thường xuất hiện dưới tiêu đề trang web thay vì phía trên nó? nếu như vậy, mã CSS này có thể ông chồng lên tiêu đề cùng tiêu đề của website hoặc xuất hiện quá ngay gần với nó trước khi người tiêu dùng cuộn:

*

Có thể dễ ợt điều chỉnh điều này bằng cách thêm lề vào vùng title của bạn bằng phương pháp sử dụng một trong những mã CSS vấp ngã sung:

.site-thương hiệu margin-top: 60px! important;Thay rứa site-branding bởi lớp CSS của vùng tiêu đề của bạn. Tiếng đây, menu điều hướng thắt chặt và cố định sẽ không còn chồng lên tiêu đề của người sử dụng trước khi người tiêu dùng cuộn xuống:

*

Chúng tôi hy vọng bài viết này đã giúp đỡ bạn thêm một menu điều phối nổi cố định vào website WordPress của mình. Chúng ta có thể muốn xem lý giải của cửa hàng chúng tôi về phương pháp tạo chủ đề WordPress thiết lập cấu hình mà không đề xuất viết bất kỳ mã nào và so sánh của chúng tôi về plugin trình chế tạo ra trang WordPress rất tốt .