Divi: Cách tạo tiêu đề chung cố định

Bạn có muốn tạo một tiêu đề cố định với Divi ?

Việc tạo các tiêu đề cố định đã diễn ra suôn sẻ kể từ khi xuất hiện chủ đề, nhưng chúng tôi thấy rằng nhiều người không biết cách tạo chúng mà không sử dụng mã bổ sung. Tuy nhiên, cũng khá dễ dàng để làm điều đó nhờ các tùy chọn cố định của Divi.

Trên thực tế, không chỉ dễ dàng hơn mà phương pháp này còn cung cấp nhiều khả năng tùy chỉnh thiết kế hơn.

Do đó, trong hướng dẫn này, chúng tôi sẽ dành thời gian để chỉ cho bạn cách tạo tiêu đề cố định cực kỳ cá nhân hóa bằng cách sử dụng các tham số Divi.

khảo sát

Trước khi đi sâu vào hướng dẫn này, chúng ta hãy xem kết quả mà chúng ta muốn đạt được.

Xây dựng cấu trúc phần tử tiêu đề

Tạo một mẫu tiêu đề chung mới

Truy cập Trình tạo chủ đề Divi và bắt đầu tạo tiêu đề chung hoặc tiêu đề tùy chỉnh mới.

Phần 1 Các thông số

Nền Gradient

Khi ở trong trình chỉnh sửa mẫu, chúng tôi sẽ bắt đầu bằng cách xây dựng cấu trúc của các phần tử tiêu đề của chúng tôi. Trong phần thứ hai của hướng dẫn này, chúng tôi sẽ tập trung vào việc áp dụng các cài đặt cố định khác nhau để hoàn thành thiết kế tiêu đề dính.

Đọc cũng: Cách tạo menu trượt và đẩy trong DIVI

Trong trình chỉnh sửa mẫu, bạn sẽ thấy một phần. Mở phần này và áp dụng một nền gradient.

Màu 1: # ffba60
Màu 2: # ffd6a0
Hướng gradient: 90 độ
Vị trí bắt đầu: 50%
Vị trí cuối cùng: 50%

khoảng cách

Sau đó, loại bỏ tất cả các lề bên trong (Trên và Dưới) 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

Để tạo thanh tiêu đề trên cùng của chúng tôi, chúng tôi sẽ thêm một hàng mới vào phần của chúng tôi bằng cách sử dụng cấu trúc cột sau:

kích thước

Nếu chưa thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi cài đặt định cỡ như sau:

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: 95%
Chiều rộng tối đa: 2 pixel

khoảng cách

Đồng thời thêm các lề nội bộ tùy chỉnh (Trên cùng và Dưới cùng).

Đỉnh lề bên trong: 15px
Lề nội bộ dưới cùng: 15px

Phần tử chính CSS

Và để đảm bảo các cột nằm cạnh nhau trên kích thước màn hình nhỏ hơn, chúng tôi sẽ thêm một dòng mã CSS vào phần tử hàng chính trong tab nâng cao.

display: flex;

Thêm mô-đun 'Theo dõi chúng tôi trên mạng xã hội' vào cột 1

Thêm các mạng xã hội mà bạn lựa chọn

Đã đến lúc thêm các mô-đun, bắt đầu với mô-đun 'Theo dõi chúng tôi trên mạng xã hội' trong cột 1. Thêm các mạng xã hội mà bạn chọn cùng với các liên kết tương ứng của chúng.

Xóa màu nền khỏi mỗi mạng xã hội

Tiếp tục bằng cách xóa từng màu nền khỏi mạng xã hội.

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

Sau đó quay lại cài đặt mô-đun chung và thay đổi màu biểu tượng trong tab thiết kế.

Màu biểu tượng: # 26333a

khoảng cách

Ngoài ra, thêm một lề trên.

Lề trên cùng: 5 px

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

Thêm văn bản vào 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.

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

Sau đó, thêm một liên kết.

Căn chỉnh nút

Tiếp theo, chuyển sang tab Kiểu và thay đổi căn chỉnh nút.

Căn chỉnh nút: phải

Cài đặt nút

Chúng tôi cũng tùy chỉnh nút.

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: 14px
Màu văn bản nút: # 26333a
Chiều rộng đường viền nút: 2px
Màu viền nút: # 26333a
Bán kính đường viền nút: 0 pixel

Các nút khoảng cách chữ cái: 4px
Nút Soft Light: Chữ in đậm
Sao chép nút kiểu: chữ hoa
Nút hiển thị: có

khoảng cách

Và chúng tôi sẽ hoàn thành cài đặt mô-đun bằng cách thêm lề bên trong (Trên và Dưới) vào cài đặt giãn cách.

Đỉnh lề bên trong: 10px
Lề nội bộ dưới cùng: 10px