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 yếu tố bạn đặt trong tiêu đề của mình sẽ giúp bạn khách để điều hướng một cách dễ dàng. Để giảm thời gian mọi người dành cho trình duyệt, nhiều nhà thiết kế web chọn tiêu đề trên cùng cố định, cho phép khách để truy cập ngay vào các trang hoặc ấn phẩm khác. Điều này thực sự tiện dụng, nhưng khi tạo tiêu đề cố định, phần lớn chiều cao của khung nhìn của bạn khách đang bận nên cho phép ít hơn nội dung để hiển thị cùng một lúc. 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 vậy. Bạn có thể tận dụng lợi ích của tiêu đề cố định bằng cách cho phép tiêu đề tổng thể 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 cách ẩn và hiển thị tiêu đề chung của bạn bằng Trình tạo chủ đề của 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.

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.

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

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%

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

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)

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

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;

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 của bài đăng, chúng tôi cũng sẽ tăng chỉ mục z trong cài đặt hiển thị.

• Chỉ số Z: 99999

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:

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%

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.

• Phần đệm trên: 0px
• Đệm dưới: 0px

Yếu tố chính

căn giữa nó nội dung của 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 thành phần chính của hàng.

display: flex;align-items: center;

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ị.

Đặ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.

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

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

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

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

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

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.

Tải logo

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

Xóa màu nền

Và loại bỏ 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:

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

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)

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

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

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

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)

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;

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 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à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)

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

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

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

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

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.

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;}

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 tiêu đề chung, hãy lưu tất cả các thay đổi và xem kết quả trên Website!

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.

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.