Bạn có muốn tạo một tiêu đề trong suốt và đẹp mắt với Divi không?
Khi nói đến việc thiết lập tiêu đề chung cho Website, có nhiều cách để tiếp cận nó. Một trong những cách tiếp cận tinh tế hơn là một tiêu đề trong suốt.
Nếu bạn quyết định sử dụng tiêu đề trong suốt nhưng cần nó dính khi cuộn, bạn sẽ thích hướng dẫn này. Quá trình chuyển đổi giữa trong suốt và dính thật dễ dàng!
Đi thôi.
khảo sát
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh kết quả.
Tạo một mẫu tiêu đề chung mới
Đi đến Divi > Trình tạo chủ đề.
Phần # 1 Cài đặt
Màu nền
Khi ở trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Phần này sẽ dành riêng cho thanh tiêu đề trên cùng mà bạn có thể nhận thấy trong phần xem trước của bài viết này. Mở cài đặt phần và thêm màu nền đen.
- Nền: # 000000
khoảng cách
Chuyển sang tab Kiểu phần và loại bỏ tất cả các Lề bên trong (Trên cùng và Dưới cùng) theo mặc định.
- Đỉnh lề bên trong: 0px
- Lề nội bộ dưới cùng: 0px
Thêm một dòng mới
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
Thêm mô-đun Văn bản vào cột
Thêm mô-đun Văn bản vào cột hàng và nhập thông báo bạn chọn.
Cài đặt văn bản
Chuyển sang tab Kiểu mô-đun và thay đổi cài đặt văn bản cho phù hợp:
- Phông chữ văn bản: Oswald
- Kiểu sao chép văn bản: TT
- Màu văn bản Văn bản: #ffffff
- Văn bản Kích thước văn bản:
- Máy tính để bàn: 19px
- Máy tính bảng: 18px
- Điện thoại: 16px
- Căn chỉnh văn bản: Căn giữa
Thêm phần # 2
khoảng cách
Ngay bên dưới phần đầu tiên, hãy thêm một phần thông thường khác. Phần này sẽ dành riêng cho menu trong suốt của chúng ta, menu này sẽ trở nên dính khi cuộn.
Mở cài đặt phần và loại bỏ tất cả các lề bên trong (Trên cùng và Dưới cùng) theo mặc định trong tab Kiểu.
- Đỉnh lề bên trong: 0px
- Lề nội bộ dưới cùng: 0px
Thêm một dòng mới
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
Màu nền trong suốt
Mở cài đặt đường kẻ và áp dụng màu nền hoàn toàn trong suốt cho đường kẻ.
- Nền: rgba (255,255,255,0)
kích thước
Chuyển sang tab Kiểu đường và thay đổi cài đặt định cỡ.
- Sử dụng chiều rộng máng xối tùy chỉnh: Có
- Khoảng cách cột: 1
- Chiều rộng tối đa: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó, thêm lề nội bộ tùy chỉnh (Trái và Phải).
- Lề bên trong bên trái: 10%
- Ký quỹ nội bộ Phải: 10%
Hộp bóng
Tiếp theo, áp dụng một bóng hộp trong suốt. Phần sau của hướng dẫn, chúng ta sẽ sử dụng bóng hộp này ở trạng thái dính với một màu bóng khác.
- Độ mạnh của Box Shadow Blur: 50px
- Màu phông chữ phụ đề: rgba (0,0,0,0)
Chức vụ
Để đảm bảo dòng này xuất hiện ở đầu nội dung của trang, với nền trong suốt, chúng tôi sẽ sử dụng vị trí tuyệt đối cho hàng của mình trong tab nâng cao.
- Chức vụ: Tuyệt đối
- Vị trí: Trên cùng bên trái
Mức độ hiển thị của cột 2
Chúng tôi cũng ẩn cột thứ hai của hàng trên máy tính bảng và điện thoại để có thiết kế tiêu đề ít phức tạp hơn trên kích thước màn hình nhỏ hơn.
Thêm mô-đun Menu vào cột 1
Chọn một Menu
Bây giờ cài đặt hàng của chúng ta đã sẵn sàng, đã đến lúc thêm mô-đun, bắt đầu với mô-đun Menu trong cột 1. Chọn menu bạn chọn.
Tải logo
Sau đó tải lên một logo.
Xóa màu nền
Cũng xóa màu nền khỏi mô-đun.
Menu cài đặt văn bản
Chuyển sang tab Kiểu mô-đun và thay đổi cài đặt văn bản menu cho phù hợp:
- Menu phông chữ: Oswald
- Menu Soft Light: Bold
- Sao chép Menu kiểu: TT
- Màu văn bản menu: #efefef
- Kích thước văn bản trên menu: 18px
- Căn chỉnh văn bản: phải
Cài đặt menu thả xuống
Đồng thời thay đổi cài đặt menu thả xuống.
- Màu hàng thả xuống: rgba (0,0,0,0)
- Menu di động Màu nền: rgba (0,0,0,0,95)
Cài đặt biểu tượng
Tiếp theo, thay đổi màu sắc biểu tượng trong cài đặt biểu tượng.
- Màu biểu tượng giỏ hàng: #ffffff
- Màu biểu tượng tìm kiếm: #ffffff
- Màu biểu tượng menu bánh hamburger: #ffffff
Cài đặt biểu trưng
Chúng tôi cũng thay đổi màu biểu trưng của mình trong cài đặt biểu trưng bằng cách thay đổi bộ lọc đảo ngược hình ảnh.
- Đảo ngược hình ảnh: 90%
kích thước
Tiếp theo, chúng tôi sẽ chỉ định chiều cao tối đa cho logo của chúng tôi.
- Biểu trưng Chiều rộng tối đa: 40 pixel
khoảng cách
Tiếp theo, chúng tôi sẽ thêm phần đệm Trên cùng và Dưới cùng trên các kích thước màn hình nhỏ.
- Lợi nhuận nội bộ cao nhất:
- Máy tính bảng và điện thoại: 10px
- Lề nội bộ dưới cùng:
- Máy tính bảng và điện thoại: 10px
Thêm mô-đun Nút vào cột 2
Chèn văn bản đến nút
Trong cột 2, mô-đun duy nhất chúng ta cần là mô-đun Nút. Thêm một văn bản của sự lựa chọn của bạn.
Căn chỉnh nút
Chuyển sang tab Kiểu mô-đun và thay đổi căn chỉnh nút.
- Căn chỉnh nút: phải
Cài đặt nút
Tùy chỉnh nút tiếp theo.
- Sử dụng các kiểu tùy chỉnh cho Nút: Có
- Kích thước văn bản nút: 16px
- Màu văn bản của nút: #ffffff
- Nút nền: # ed4441
- Màu viền nút: # ed4441
- Nút Border Radius: 0 pixel
- Khoảng cách chữ cái nút: 4px
- Phông chữ nút: Oswald
- Nút Soft Light: Chữ in đậm
- Sao chép nút kiểu: TT
- Hiển thị biểu tượng nút: Có
- Màu biểu tượng nút: # 1a1a1a
khoảng cách
Và hoàn thành các thông số mô-đun bằng cách thêm các giá trị khoảng cách tùy chỉnh.
- Lề trên: -70px
- Lề trong trên và dưới: 25 px
Áp dụng các hiệu ứng dính tùy chỉnh
Làm cho phần # 2 trở nên dính
Bây giờ chúng ta đã đặt nền tảng cho tiêu đề của mình, đã đến lúc áp dụng hiệu ứng dính! Để thực hiện việc này, hãy bắt đầu bằng cách mở cài đặt trong phần thứ hai và áp dụng các cài đặt cố định sau cho tab nâng cao:
- Vị trí cố định: Bám sát lên đầu
- Thanh bù đắp hàng đầu: 0px
- Bottom Sticky Mimit: Không có
- Bù đắp từ các yếu tố dính xung quanh: CÓ
- Chuyển đổi mặc định và kiểu cố định: CÓ
Màu nền đường dính
Bây giờ tùy chọn cố định đã được bật, chúng tôi có thể thực hiện các thay đổi tùy chọn cố định cho tất cả các phần tử trong phần. Chúng tôi sẽ bắt đầu bằng cách mở hàng chứa menu của chúng tôi và áp dụng màu nền trắng cho tùy chọn dính.
- Màu nền: #FFFFFF
Khoảng cách hàng dính
Tiếp theo, chúng ta sẽ sửa đổi các giá trị giãn cách của hàm dính của dòng.
- Đỉnh lề bên trong: 0px
- Lề nội bộ dưới cùng: 0px
Hộp bóng hàng dính
Chúng tôi cũng đang thay đổi màu của bóng hộp ở trạng thái dính.
- Màu phông chữ phụ đề: rgba (0,0,0,0.08)
Định vị dòng cố định
Tiếp theo, chúng tôi sẽ trả lại vị trí hàng về tương đối ở trạng thái dính.
- Chức vụ: Họ hàng
- Xuất xứ bù đắp: trên cùng bên trái
Cài đặt văn bản menu trạng thái cố định
Tiếp theo, chúng tôi sẽ thay đổi màu văn bản menu sang trạng thái dính.
- Màu văn bản menu: # 000000
Menu thả xuống cài đặt ở trạng thái cố định
Với màu nền menu di động trong cài đặt menu thả xuống.
- Menu di động, màu nền: #ffffff
Màu biểu tượng menu ở trạng thái dính
Đồng thời thay đổi màu sắc biểu tượng ở trạng thái dính.
- Màu biểu tượng giỏ hàng: # 000000
- Màu biểu tượng tìm kiếm: # 000000
- Màu biểu tượng menu bánh hamburger: # 000000
Bộ lọc biểu trưng ở trạng thái dính
Tiếp theo, loại bỏ bộ lọc đảo ngược khỏi hình ảnh logo ở trạng thái dính.
- Đảo ngược hình ảnh: 0%
Khoảng cách nút ở trạng thái dính
Và hoàn thành hướng dẫn bằng cách loại bỏ lề trên âm khỏi nút khi nó ở trạng thái dính.
- Lề trên cùng: 0px
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem lại kết quả cuối cùng.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong bài viết này, chúng tôi đã chỉ cho bạn cách kết hợp hàm tạo của chủ đề của Divi với các tùy chọn dính mới. Cụ thể, chúng tôi đã chỉ cho bạn cách chuyển từ tiêu đề trong suốt sang tiêu đề cố định kiểu khác trong khi cuộn.
Cách tiếp cận này cho phép bạn hợp nhất thiết kế trang với menu của mình trong khi vẫn duy trì một tiêu đề hấp dẫn khi cuộn.
Nếu bạn muốn biết thêm về Divi, đừng ngần ngại truy cập danh mục của chúng tôi về Hướng dẫn Divi. Bạn cũng có thể tham khảo Cách tạo trang Blog bằng mô-đun Divi Blog
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.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong khi đó, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
