Bỏ qua đến nội dung chính

Cách tiết lộ tiêu đề của bạn trong khi cuộn trên Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Khi tạo tiêu đề chung của bạn, có rất nhiều điều bạn cần xem xét. Các mục bạn đặt trong tiêu đề sẽ giúp khách truy cập dễ dàng điều hướng. Để cắt giảm thời gian mọi người dành cho việc duyệt web, nhiều nhà thiết kế web chọn một tiêu đề trên cùng cố định, cho phép khách truy cập ngay lập tức vào các trang hoặc bài đăng khác. Điều này thực sự tiện dụng, nhưng khi tạo một tiêu đề cố định, rất nhiều chiều cao của khung nhìn của khách truy cập của bạn sẽ bị chiếm dụng, cho phép ít nội dung được hiển thị ở trên cùng. lần. Nếu bạn chưa sẵn sàng để hy sinh điều này, hãy biết rằng bạn không cần phải làm thế. Bạn có thể gặt hái những lợi ích của tiêu đề cố định bằng cách cho phép tiêu đề tổng thể của bạn hiển thị khi khách truy cập cuộn lên và ẩn nó khi họ cuộn xuống. Hôm nay, chúng tôi sẽ hướng dẫn bạn ẩn và tiết lộ tiêu đề tổng thể của bạn bằng Trình tạo chủ đề Divi.

khảo sát

Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.

Menu hoạt ảnh được tiết lộ divi

1. Chuyển đến Trình tạo chủ đề Divi và thêm một mẫu mới

Bắt đầu bằng cách đi đến Trình tạo chủ đề Divi.

Trình tạo chủ đề Divi

Bắt đầu tạo một tiêu đề toàn cầu

Ở đó, nhấp vào "Thêm tiêu đề toàn cầu" và chọn "Tạo tiêu đề toàn cầu".

2. Bắt đầu tạo một tiêu đề toàn cầu

Cài đặt phần

Màu nền

Bên trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Mở phần này và thay đổi màu nền của nó.

  • Màu nền: #ffffff
Cài đặt phiên Divi

kích thước

Chuyển đến tab thiết kế và chỉ định chiều rộng 100% cho phần tiếp theo của bạn.

  • Chiều rộng: 100%
Định cấu hình chiều rộng

khoảng cách

Cũng thêm phần đệm trên và dưới tùy chỉnh.

  • Phần đệm trên: 2vw
  • Đệm đáy: 2vw
Phần cài đặt

Hộp bóng

Chúng tôi cũng sẽ áp dụng một sắc thái tinh tế cho phần của chúng tôi.

  • Sức mạnh bóng mờ của hộp: 50px
  • Màu bóng: rgba (0,0,0,0,08)
Mô-đun Ombre divi

ID CSS

Phần sau của hướng dẫn này, chúng tôi sẽ cần một số mã tùy chỉnh để hiệu ứng cuộn xảy ra. Để chuẩn bị cho việc này, chúng tôi thêm CSS ID vào phần này.

  • ID CSS: phần tiêu đề chung
Thêm các lớp học css divi

Yếu tố chính

Chúng tôi cũng sẽ làm cho phần này trở thành một tiêu đề cố định bằng cách thêm hai dòng mã CSS vào phần tử chính của phần.

position: fixed;top: 0;

Cài đặt Divi sectoin

Chỉ số Z

Bây giờ, để đảm bảo phần của chúng tôi xuất hiện ở đầu trang hoặc nội dung bài đăng, chúng tôi cũng sẽ tăng chỉ số z trong cài đặt hiển thị.

  • Chỉ số Z: 99999
Cấu hình Zindex

Thêm một dòng mới

Cấu trúc cột

Khi bạn đã hoàn thành tất cả các tham số của phần, tiếp tục thêm một dòng mới vào phần bằng cấu trúc cột sau:

Chọn một bố cục

kích thước

Nếu chưa thêm mô-đun, hãy mở cài đặt hàng và để hàng lấp đầy toàn bộ chiều rộng của màn hình.

  • Sử dụng chiều rộng máng tùy chỉnh: Có
  • Chiều rộng máng xối: 1
  • Cân bằng chiều cao cột: Có
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 100%
Cấu hình của mô-đun dòng divi

khoảng cách

Cũng loại bỏ tất cả các phần đệm trên và dưới mặc định.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

  • Phần đệm trên: 0px
  • Đệm dưới: 0px
tiết lộ tiêu đề toàn cầu

Yếu tố chính

Căn giữa nội dung cột và cho phép các cột nằm cạnh nhau trên kích thước màn hình nhỏ hơn bằng cách thêm hai dòng mã CSS vào phần tử hàng chính.

display: flex;align-items: center;

Thêm mã css phần tử chính divi

Thêm mô-đun theo dõi phương tiện truyền thông xã hội vào cột 2

Thêm mạng xã hội

Đã đến lúc thêm các mô-đun, bắt đầu với một mô-đun theo dõi mạng xã hội trong cột 1. Thêm các mạng xã hội bạn muốn hiển thị.

Thêm nút mạng xã hội

Đặt lại các kiểu phương tiện truyền thông xã hội cá nhân

Tiếp tục bằng cách đặt lại các kiểu của mỗi mạng xã hội ở cấp độ cá nhân.

Đặt lại kiểu của mô-đun divi

Thêm một không gian mạng xã hội cá nhân

Bạn cũng sẽ cần mở cài đặt cho từng mạng xã hội riêng lẻ và thêm phần đệm dưới cùng trong cài đặt khoảng cách.

  • Đệm đáy: 0.5vw
Cấu hình giãn cách mô-đun Divi

sự liên kết

Sau khi bạn đã thêm từng phần đệm dưới cùng vào từng mạng xã hội, hãy quay lại cài đặt chung của mod. Chuyển sang tab thiết kế và thay đổi căn chỉnh mô-đun.

  • Sắp xếp mô-đun: trung tâm
Mô-đun cấu hình căn chỉnh Divi

Cài đặt biểu tượng mặc định

Đồng thời thay đổi màu biểu tượng trong cài đặt biểu tượng.

  • Màu biểu tượng: # 000000
Thay đổi divi màu

Cài đặt biểu tượng di chuột

Và thay đổi màu của biểu tượng di chuột.

  • Màu biểu tượng: # c2ab92
Sửa đổi biểu tượng khi di chuột

biên giới

Hoàn thành các tham số mô-đun bằng cách thêm một đường viền thấp hơn trong các tham số viền.

  • Chiều rộng đường viền dưới cùng: 1px
  • Màu đường viền dưới cùng: # 000000
Định cấu hình viền divi

Thêm một mô-đun menu vào cột 2

Chọn menu

Hãy chuyển sang cột tiếp theo! Thêm một mô-đun menu và chọn một menu bạn chọn.

Xác định nội dung của mô-đun menu divi

Tải logo

Sau đó tải lên một logo trong mô-đun.

Chọn một biểu tượng khuôn divi

Xóa màu nền

Và loại bỏ màu nền.

Xóa div màu nền

Bố trí

Sau đó, chuyển sang tab Thiết kế và đảm bảo các cài đặt sau áp dụng cho bố cục:

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

  • Phong cách: Trung tâm
  • Hướng của menu thả xuống: xuống
Bố cục menu Divi

Văn bản menu mặc định

Tiếp tục bằng cách thay đổi cài đặt văn bản menu như sau:

  • Màu liên kết hoạt động: # c2ab92
  • Phông chữ thực đơn: Cormorant Garhua
  • Màu văn bản: # 000000
  • Kích thước văn bản menu: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
Liên kết cấu hình mô-đun menu divi

Menu văn bản di chuột

Thay đổi văn bản menu trên di chuột.

  • Màu văn bản menu: # c2ab92
Cài đặt màu menu Divi

Menu thả xuống

Sau đó thay đổi màu của dòng menu thả xuống trong cài đặt menu thả xuống.

  • Màu của dòng của menu thả xuống: # 000000
Cấu hình màu mô-đun menu Divi

biểu tượng

Chúng tôi cũng đang thay đổi màu của biểu tượng menu bánh hamburger trong cài đặt biểu tượng.

  • Màu biểu tượng menu bánh hamburger: # 000000
Cấu hình biểu tượng menu Divi

kích thước

Tiếp tục bằng cách thay đổi chiều rộng logo tối đa trên các kích thước màn hình khác nhau trong cài đặt định cỡ.

  • Chiều rộng logo tối đa: 5vw (bàn), 10vw (máy tính bảng), 13vw (điện thoại)
Cấu hình chiều rộng menu Divi

Menu liên kết CSS

Và hoàn thành cài đặt mô-đun bằng cách thêm hai dòng mã CSS vào liên kết menu mô-đun trong tab nâng cao.

padding-bottom: 1vw;border-bottom: 1px solid #000;

Cấu hình menu css divi

Thêm một mô-đun văn bản vào cột 3

Thêm một bản sao

Hãy chuyển sang mô-đun cuối cùng! Ở đó mô-đun duy nhất chúng tôi cần là mô-đun văn bản.

Thêm một mô-đun văn bản divi

Thêm một liên kết

Mô-đun này sẽ đóng vai trò như một CTA. Thêm một liên kết của sự lựa chọn của bạn.

  • URL liên kết mô-đun: #
Cấu hình mô-đun văn bản Divi

Cài đặt văn bản mặc định

Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt văn bản cho phù hợp:

  • Phông chữ: Cormorant Garhua
  • Màu văn bản: # 000000
  • Kích thước văn bản: 1vw (máy tính để bàn), 2vw (máy tính bảng), 3vw (điện thoại)
Divi điều chỉnh màu phông chữ mô-đun văn bản

Cài đặt văn bản di chuột

Thay đổi màu sắc của văn bản trên di chuột.

  • Màu văn bản: # c2ab92
Điều chỉnh màu văn bản mô-đun Divi

kích thước

Tiếp tục bằng cách thay đổi thông số định cỡ mô-đun trên các kích thước màn hình khác nhau.

  • Chiều rộng: 12vw (máy tính để bàn), 18vw (máy tính bảng), 22vw (điện thoại)
  • Sắp xếp mô-đun: trung tâm
Điều chỉnh kích thước mô-đun văn bản Divi

khoảng cách

Và thêm một số đệm dưới cùng trong cài đặt khoảng cách.

  • Đệm đáy: 0.5vw
Điều chỉnh khoảng cách mô-đun Divi

biên giới

Hoàn thành các tham số mô-đun bằng cách thêm một đường viền thấp hơn.

  • Chiều rộng đường viền dưới cùng: 1px
  • Màu đường viền dưới cùng: # 000000
Điều chỉnh đường viền mô-đun văn bản Divi

Thêm một mô-đun mã vào cột 2

Chèn mã JQuery và CSS

Khi bạn đã tạo kiểu cho tất cả các mod trong hàng, đã đến lúc tạo hiệu ứng lộ / ẩn. Để thực hiện việc này, chúng tôi sẽ cần thêm mã tùy chỉnh vào mô-đun mã mà chúng tôi sẽ đặt trong cột 2. Mã này sẽ hoạt động trên bất kỳ phần nào bạn thêm vào, bất kể bạn thiết kế tiêu đề hoặc mô-đun như thế nào. mà bạn đang sử dụng, chỉ cần đảm bảo rằng bạn đã thêm CSS ID vào phần của mình. Đặt mã JQuery giữa các thẻ script và mã CSS giữa các thẻ kiểu như được hiển thị trong màn hình in bên dưới.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

Thêm mã js jquery wordpress divi

3. Lưu các sửa đổi máy phát điện và hiển thị kết quả

Khi bạn đã hoàn thành Global Header, hãy lưu tất cả các thay đổi và hiển thị kết quả trên trang web của bạn!

Thiết kế cuối cùng của mô-đun menu divi
Tiêu đề chung của trình tạo Divi

khảo sát

Bây giờ chúng ta đã đi qua tất cả các bước, hãy xem xét lần cuối cùng xem nó trông như thế nào trên các kích thước màn hình khác nhau.

Tổng quan đầy đủ về mô-đun

cuối cùng suy nghĩ

Trong bài viết này, chúng tôi đã hướng dẫn bạn cách làm cho tiêu đề chung của bạn xuất hiện khi cuộn lên và ẩn nó khi cuộn xuống. Đây là một cách phổ biến và hiệu quả để giúp khách truy cập của bạn điều hướng dễ dàng mà không chiếm một phần chiều cao cửa sổ của họ. Bạn cũng có thể tải xuống tệp JSON miễn phí! Nếu bạn có bất kỳ câu hỏi hoặc góp ý nào, đừng ngại để lại bình luận trong phần bình luận bên dưới.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
3 cổ phiếu
cổ phiếu3
tweet
Enregistrer