Divi: วิธีแสดงโมดูลส่วนหัวแบบเต็มหน้าจอแบบเต็มหน้าจอ

คุณต้องการแสดงโมดูล Divi Fullwidth Header แบบเต็มหน้าจอหรือไม่?

ส่วนหัวแบบเต็มหน้าจอจะกินพื้นที่ทั้งหน้าจอ โดยไม่คำนึงถึงขนาดหน้าจอของ ผู้มาเยือน. นี่เป็นวิธีที่ดีในการดึงดูดความสนใจของผู้ใช้ โชคดีที่การสร้างส่วนหัวแบบเต็มหน้าจอด้วยโมดูลเป็นเรื่องง่าย ส่วนหัวแบบเต็มความกว้าง ของดีวี

ในบทความนี้ เราจะแสดงวิธีสร้างส่วนหัวแบบเต็มความกว้าง ปรับแต่ง และแสดงแบบเต็มหน้าจอ คุณสามารถใช้วิธีนี้เพื่อสร้างส่วนฮีโร่แบบเต็มหน้าจอสำหรับเพจของคุณ

ขอเริ่มต้น

การสำรวจ

มาดูตัวอย่างสิ่งที่เราจะออกแบบในบทช่วยสอนนี้

สำนัก

ยาเม็ด

โมดูล Divi Fullwidth Header แบบเต็มหน้าจอ

โทรศัพท์

วิธีทำให้ Divi Fullwidth Header ของคุณเป็น Fullscreen Header

เริ่มต้นด้วยการเพิ่มส่วนเต็มความกว้างลงในหน้าที่คุณกำลังดำเนินการอยู่

แล้วเติม โมดูลส่วนหัวเต็มความกว้าง ไปที่ส่วนเต็มความกว้าง

การตั้งค่าโมดูลเปิดขึ้น เลือกแท็บ ออกแบบ. เปิดใช้งานตัวเลือกที่เรียกว่า ทำให้เต็มหน้าจอ

ตอนนี้เรามีส่วนหัวแบบเต็มหน้าจอแล้ว มันง่ายอย่างนั้น

เปิดใช้งานไอคอนเลื่อน

นอกจากนี้เรายังสามารถเพิ่มปุ่มที่บอกให้ผู้ใช้เลื่อนลงได้ อย่างไรก็ตาม เราจำเป็นต้องเปิดใช้งานมัน ปุ่มนี้จะมองเห็นได้เสมอในตัวเลือกเต็มหน้าจอ ตัวเลือกส่วนหัวแบบเต็มหน้าจอจะตรงกับความสูงของหน้าจอของเสมอ ผู้มาเยือน.

แสดงปุ่มเลื่อนลง: ใช่

ตัวอย่างส่วนหัวแบบเต็มหน้าจอ Divi แบบเต็มหน้าจอ

พารามิเตอร์โมดูลส่วนหัวแบบเต็มความกว้าง

ต่อไปนี้เป็นขั้นตอนสำหรับแต่ละส่วนของการตั้งค่าโมดูลส่วนหัวแบบเต็ม

อ่าน: Divi: วิธีรวมมาสก์พื้นหลังและตัวคั่น

ตำรา

ทั้งหมด ขั้นแรกให้เพิ่มข้อความ ซึ่งจะมองเห็นได้ในส่วนหัวแบบเต็มความกว้าง ซึ่งรวมถึงชื่อเรื่อง คำบรรยาย เนื้อหา และข้อความของปุ่ม

หัวเรื่อง: สร้าง บล็อกของคุณ กับดิวิ
คำบรรยาย: Blogpascher
Burron #1: บทสรุป
ปุ่ม #2: กำหนดการ
เนื้อหา: (ค่าเริ่มต้น)

ภาพ

แล้วก็ เพิ่มรูปภาพ. ซึ่งจะแสดงที่ด้านขวาของส่วนหัวแบบเต็มความกว้าง โดยเลื่อนข้อความไปทางซ้าย

รูปภาพส่วนหัว: ตัวเลือกของคุณ

พื้นหลัง

เลื่อนไปที่ พื้นหลัง และตั้งค่าสีเป็น #f6f5ee

สีพื้นหลัง: #f6f5ee

อารมณ์

ถัดไป ไปที่แท็บออกแบบ

ทำให้เต็มหน้าจอ: ใช่

เลื่อนลง ไอคอน

แสดงปุ่มเลื่อนลง: ใช่
เลื่อนลงไอคอนสี: #000000 (เดสก์ท็อปและแท็บเล็ต), #ffffff (โทรศัพท์)
ขนาดไอคอนเลื่อนลง: 70px (เดสก์ท็อป), 60px (แท็บเล็ต), 50px (โทรศัพท์)

ข้อความชื่อ

ต่อไปเราจะปรับ ข้อความชื่อเรื่อง.

ระดับหัวเรื่อง: H1
แบบอักษร: Inter
น้ำหนักแบบอักษร: ตัวหนา
การจัดตำแหน่งข้อความ: กึ่งกลาง
สีข้อความ: #000000

ขนาดข้อความชื่อเรื่อง: 75px (เดสก์ท็อป), 40px (แท็บเล็ต), 24px (โทรศัพท์)
ความสูงของบรรทัดชื่อเรื่อง: 1.2em

คำอธิบายข้อความ

จากนั้นเลื่อนลงไปที่ เนื้อความ.

แบบอักษร: เปิด Sans
การจัดตำแหน่ง: ซ้าย
สี: #000000

ขนาดตัวอักษร: 16px (เดสก์ท็อป), 15px (แท็บเล็ต), 14px (โทรศัพท์)
ความสูงของสาย: 1.8em

หัวเรื่องย่อย

จากนั้นเลื่อนลงไปที่ ข้อความคำบรรยาย.

แบบอักษร: Inter
น้ำหนักแบบอักษร: ตัวหนา
สไตล์: TT
การจัดตำแหน่ง: ศูนย์
สี: #ff5a17

ขนาด: 14px
ระยะห่างระหว่างตัวอักษร: 1px
ความสูงของสาย: 1.8em

ปุ่ม #1

จากนั้นเลื่อนลงไปที่ ปุ่มหนึ่ง.

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดตัวอักษร: 20px (เดสก์ท็อป), 18px (แท็บเล็ต), 16px (โทรศัพท์)
สีข้อความ: #000000

สีพื้นหลัง: #ffffff
ความกว้างของเส้นขอบ: 0px
รัศมีเส้นขอบ: 0px

แบบอักษร: Inter
น้ำหนักแบบอักษร: ตัวหนา

ไอคอน: ตัวเลือกของคุณ
ไอคอนสี: #000000
ตำแหน่ง: ขวา
แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่มที่หนึ่ง: NO

สุดท้ายเลื่อนลงไปที่ตัวเลือก ปุ่มหนึ่ง Padding.

การขยายความ:
- เดสก์ท็อป: 20px (บนและล่าง), 40px (ซ้ายและขวา)
- แท็บเล็ต: 16px (บนและล่าง), 40px (ซ้ายและขวา)
- โทรศัพท์: 12px (บนและล่าง), 40px (ซ้ายและขวา)

ปุ่ม #2

สุดท้ายเลื่อนลงไปที่ ปุ่มที่สอง.

ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่สอง: ใช่
ขนาดตัวอักษร: 20px (เดสก์ท็อป), 18px (แท็บเล็ต), 16px (โทรศัพท์)
สีข้อความ: #ffffff

สีพื้นหลัง: #ff5a17
ความกว้างของเส้นขอบ: 0px
รัศมีเส้นขอบ: 0px

แบบอักษร: Inter
น้ำหนักแบบอักษร: ตัวหนา

เลือกไอคอนที่คุณชื่นชอบ

ไอคอน: ตัวเลือกของคุณ
ไอคอนสี: #000000
ตำแหน่ง: left
แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่มที่สอง : NO

สุดท้ายเลื่อนลงไปที่ตัวเลือก ปุ่มที่สอง Padding.

การขยายความ:
- เดสก์ท็อป: 20px (บนและล่าง), 40px (ซ้ายและขวา)
- แท็บเล็ต: 16px (บนและล่าง), 40px (ซ้ายและขวา)
- โทรศัพท์: 12px (บนและล่าง), 40px (ซ้ายและขวา)