Divi: Cách hiển thị mô-đun Fullwidth Header trên toàn màn hình

Bạn có muốn hiển thị toàn màn hình mô-đun Divi Fullwidth Header không?

Tiêu đề toàn màn hình chiếm toàn bộ màn hình, bất kể kích thước màn hình của khách thăm quan. Điều này rất tốt để thu hút sự chú ý của người dùng. May mắn thay, thật dễ dàng để tạo tiêu đề toàn màn hình bằng mô-đun Tiêu đề toàn băng thông của Divi.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo tiêu đề có chiều rộng đầy đủ, tùy chỉnh tiêu đề và hiển thị toàn màn hình. Bạn có thể sử dụng phương pháp này để tạo bất kỳ phần anh hùng toàn màn hình nào cho các trang của mình.

Chúng ta hãy bắt đầu.

khảo sát

Hãy xem bản xem trước về những gì chúng tôi sẽ thiết kế trong hướng dẫn này.

Văn phòng

tablette

Toàn màn hình mô-đun Divi Fullwidth Header

Điện thoại

Cách biến Tiêu đề Toàn màn hình Divi của bạn thành Tiêu đề Toàn màn hình

Bắt đầu bằng cách thêm phần có chiều rộng đầy đủ vào trang bạn đang làm việc.

Sau đó, thêm một Mô-đun tiêu đề đầy đủ băng thông vào phần có chiều rộng đầy đủ.

Cài đặt mô-đun mở ra. Chọn tab Thiết kế. Kích hoạt tùy chọn được gọi là Đặt toàn màn hình

Bây giờ chúng ta có một tiêu đề toàn màn hình. Nó đơn giản như vậy.

Bật biểu tượng cuộn

Chúng ta cũng có thể thêm một nút yêu cầu người dùng cuộn xuống. Tuy nhiên, chúng ta cần kích hoạt nó. Nút này luôn hiển thị trong tùy chọn toàn màn hình. Tùy chọn tiêu đề toàn màn hình luôn khớp với chiều cao màn hình của khách thăm quan.

Hiển thị nút cuộn xuống: CÓ

Ví dụ về tiêu đề toàn màn hình có độ rộng lớn Divi

Thông số mô-đun tiêu đề đầy đủ

Dưới đây là các bước cho từng phần của cài đặt mô-đun Fullwidth Header.

Đọc cũng: Divi: Cách kết hợp mặt nạ nền và dấu phân cách

Văn bản

Tất cả đầu tiên, thêm văn bản sẽ hiển thị trong tiêu đề có chiều rộng đầy đủ. Điều này bao gồm tiêu đề, phụ đề, nội dung và văn bản nút.

Tiêu đề: Tạo blog của bạn với Divi
Phụ đề: Blogpascher
Burron # 1: Tóm tắt
Nút # 2: Lên lịch
Nội dung: (mặc định)

Hình ảnh

sau đó Thêm ảnh. Điều này hiển thị ở phía bên phải của tiêu đề có chiều rộng đầy đủ, chuyển văn bản sang bên trái.

Hình ảnh tiêu đề: sự lựa chọn của bạn

lý lịch

Di chuyển đến Tiểu sử và đặt màu thành # f6f5ee.

Màu nền: # f6f5ee

Bố trí

Tiếp theo, điều hướng đến tab Thiết kế.

Đặt chế độ toàn màn hình: CÓ

Biểu tượng cuộn xuống

Hiển thị nút cuộn xuống: CÓ
Màu biểu tượng cuộn xuống: # 000000 (Máy tính để bàn và máy tính bảng), #ffffff (Điện thoại)
Kích thước biểu tượng cuộn xuống: 70px (Máy tính để bàn), 60px (Máy tính bảng), 50px (Điện thoại)

Văn bản tiêu đề

Tiếp theo, chúng tôi sẽ điều chỉnh tiêu đề văn bản.

Mức tiêu đề: H1
Phông chữ: Inter
Độ đậm phông chữ: Bold
Căn chỉnh văn bản: Căn giữa
Màu văn bản: # 000000

Kích thước văn bản tiêu đề: 75px (Máy tính để bàn), 40px (Máy tính bảng), 24px (Điện thoại)
Chiều cao dòng tiêu đề: 1.2em

Văn bản mô tả

Sau đó cuộn xuống Bài kiểm tra cơ thể.

Phông chữ: Mở Sans
Căn chỉnh: Trái
Màu: # 000000

Kích thước văn bản: 16px (Máy tính để bàn), 15px (Máy tính bảng), 14px (Điện thoại)
Chiều cao dòng: 1.8em

Subtitle

Sau đó cuộn xuống Văn bản phụ đề.

Phông chữ: Inter
Độ đậm phông chữ: Bold
Phong cách: TT
Căn chỉnh: Trung tâm
Màu: # ff5a17

Kích thước: 14px
Khoảng cách chữ: 1px
Chiều cao dòng: 1.8em

Nút số 1

Sau đó cuộn xuống Nút một.

Sử dụng kiểu tùy chỉnh cho nút: CÓ
Kích thước văn bản: 20px (Máy tính để bàn), 18px (Máy tính bảng), 16px (Điện thoại)
Màu văn bản: # 000000

Màu nền: #ffffff
Chiều rộng đường viền: 0px
Bán kính đường viền: 0px

Phông chữ: Inter
Độ đậm phông chữ: Bold

Biểu tượng: sự lựa chọn của bạn
Màu biểu tượng: # 000000
Vị trí: Đúng
Chỉ Hiển thị Biểu tượng Khi Di chuột cho Nút Một: KHÔNG

Cuối cùng, cuộn xuống tùy chọn Nút một đệm.

Đệm:
- Màn hình nền: 20px (Trên và Dưới), 40px (Trái và Phải)
- Máy tính bảng: 16px (Trên và Dưới), 40px (Trái và Phải)
- Điện thoại: 12px (Trên và Dưới), 40px (Trái và Phải)

Nút số 2

Cuối cùng, cuộn xuống Nút hai.

Sử dụng kiểu tùy chỉnh cho nút thứ hai: Có
Kích thước văn bản: 20px (Máy tính để bàn), 18px (Máy tính bảng), 16px (Điện thoại)
Màu văn bản: #ffffff

Màu nền: # ff5a17
Chiều rộng đường viền: 0px
Bán kính đường viền: 0px

Phông chữ: Inter
Độ đậm phông chữ: Bold

Chọn biểu tượng yêu thích của bạn.

Biểu tượng: sự lựa chọn của bạn
Màu biểu tượng: # 000000
Vị trí: trái
Chỉ hiển thị biểu tượng khi di chuột cho nút thứ hai: KHÔNG

Cuối cùng, cuộn xuống các tùy chọn Nút hai đệm.

Đệm:
- Màn hình nền: 20px (Trên và Dưới), 40px (Trái và Phải)
- Máy tính bảng: 16px (Trên và Dưới), 40px (Trái và Phải)
- Điện thoại: 12px (Trên và Dưới), 40px (Trái và Phải)