วิธีสร้าง Divi Fullwidth Header Module แบบเต็มหน้าจอ

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

มาเริ่มกันเลย.

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

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

เดสก์ทอป

ยาเม็ด

โทรศัพท์

เหตุใดจึงต้องสร้างส่วนหัวแบบเต็มหน้าจอด้วยโมดูลส่วนหัวแบบเต็มหน้าจอของ Divi

ก่อนที่เราจะพูดถึงวิธีสร้างส่วนหัวแบบเต็มหน้าจอ เรามาพูดถึงสาเหตุที่ผู้ใช้ Divi อาจต้องการกันก่อน

ส่วนหัวแบบเต็มหน้าจอจะแสดงองค์ประกอบเฉพาะในส่วนที่มีอยู่ ส่วนนี้นำเสนอองค์ประกอบเหล่านี้ในรูปแบบที่สะอาดตาซึ่งดึงดูดความสนใจและทำงานหลายอย่าง

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

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

มีบางสิ่งที่ควรคำนึงถึงเมื่อสร้างส่วนหัวแบบเต็มหน้าจอ:

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

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

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

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

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

เปิดใช้งานไอคอนเลื่อนส่วนหัวแบบเต็มหน้าจอ

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

ในการตั้งค่าของโมดูล เราจะเห็นส่วนที่เรียกว่าไอคอนเลื่อนลงใต้ตัวเลือกเค้าโครง คลิกปุ่มเพื่อเปิดใช้ งาน Show Scroll Down Button

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

ตอนนี้เราได้พูดคุยกันแล้วว่าเหตุใดเราจึงต้องการสร้าง Fullwidth Header ให้เต็มหน้าจอ และดูวิธีการทำงานให้สำเร็จ มาดูตัวอย่างกัน ฉันจะสร้างส่วนหัวแบบเต็มความกว้างโดยใช้ส่วนฮีโร่ของเค้าโครง Divi

สำหรับตัวอย่างนี้ ฉันใช้ส่วนฮีโร่จากหน้าแรกใน Photography Studio Layout Pack ฟรีที่มีให้ใน Divi ฉันจะปรับแต่งส่วนฮีโร่นี้โดยใช้แบบอักษรและสีจากเค้าโครงเพื่อสร้างส่วนหัวแบบเต็มความกว้างที่ไม่เหมือนใคร

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

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

ข้อความ

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

• ชื่อ: Divi Photography Studio
• คำบรรยาย: การถ่ายภาพ
• ปุ่ม 1: สรุปโครงการ
• ปุ่ม 2: การวางแผนโครงการ
• เนื้อหา: เนื้อหา

รูปภาพ

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

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

พื้นหลัง

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

• สี: #f6f5ee

เค้าโครง

ถัดไป ไปที่แท็บออกแบบ เปิดใช้งานทำให้เต็มหน้าจอ

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

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

ถัดไป เปิดใช้งาน ไอคอนเลื่อนลง เปลี่ยนสีเป็นสีดำสำหรับเดสก์ท็อปและแท็บเล็ต และสีขาวสำหรับโทรศัพท์ ด้วยรูปภาพที่ฉันเลือก ไอคอนจะปรากฏบนรูปภาพที่ด้านล่างสุดสำหรับโทรศัพท์ และทำให้มองเห็นได้ด้วยสีของรูปภาพ เปลี่ยนขนาดไอคอนเป็น 70px สำหรับเดสก์ท็อป 60px สำหรับแท็บเล็ต และ 50px สำหรับโทรศัพท์

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

ข้อความชื่อเรื่อง

ต่อไป เราจะปรับ Title Text ตั้งค่าข้อความเป็น H1 และเลือก Inter สำหรับฟอนต์ ตั้งค่า Weight ให้เป็นตัวหนา Alignment ให้อยู่ตรงกลาง และ Color เป็นสีดำ

• หัวข้อ: H1
• แบบอักษร: Inter
• น้ำหนัก: หนา
• การจัดตำแหน่ง: ศูนย์
• สี: #000000

เราจะใช้ขนาด แบบอักษร สาม ขนาด : 75px สำหรับเดสก์ท็อป 40ps สำหรับแท็บเล็ต และ 24px สำหรับโทรศัพท์ เปลี่ยนความสูงของบรรทัดเป็น 1.2em

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

เนื้อความ

จากนั้นเลื่อนลงไปที่ Body Text เลือก Open Sans สำหรับฟอนต์ ตั้งค่า Alignment ไปทางซ้าย และ Color เป็นสีดำ

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

ตั้งค่า ขนาดแบบอักษร เป็น 16px สำหรับเดสก์ท็อป 15px สำหรับแท็บเล็ต และ 14px สำหรับโทรศัพท์ เปลี่ยนความสูงของเส้นเป็น 1.8em

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

ข้อความคำบรรยาย

จากนั้นเลื่อนลงไปที่ Subtitle Text เปลี่ยนฟอนต์เป็นอินเตอร์ ตั้งค่าน้ำหนักเป็นตัวหนา สไตล์เป็น TT จัดแนวให้อยู่ตรงกลาง และสีเป็น #ff5a17

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

เปลี่ยน ขนาด เป็น 14px สำหรับขนาดหน้าจอทั้งสามขนาด เปลี่ยนระยะห่างระหว่างตัวอักษรเป็น 1px และความสูงของเส้นเป็น 1.4em

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

ปุ่มหนึ่ง

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

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

เปลี่ยน สีพื้นหลังเป็นสี ขาวและตั้งค่าความกว้างของเส้นขอบและรัศมีเป็น 0px

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

เปลี่ยน Font เป็น Inter และ Weight เป็น Bold

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

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

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

สุดท้าย เลื่อนลงไปที่ตัวเลือก Padding ของ Button One เราจะใช้ Padding ที่แตกต่างกันสำหรับแต่ละขนาดหน้าจอ สำหรับเดสก์ท็อป ให้ใช้ 20px สำหรับบนและล่าง และ 40px สำหรับซ้ายและขวา สำหรับแท็บเล็ต เปลี่ยน Padding บนและล่างเป็น 16px บนโทรศัพท์ เปลี่ยน Padding บนและล่างเป็น 12px ปล่อยให้ช่องว่างภายในซ้ายและขวาเหมือนกันสำหรับทั้งสาม

• การขยายบนเดสก์ท็อป: บนและล่าง 20px, ซ้ายและขวา 40px
• Padding แท็บเล็ต: 16px บนและล่าง 40px ซ้ายและขวา
• ช่องว่างภายในโทรศัพท์: 12px บนและล่าง, 40px ซ้ายและขวา

ปุ่มที่สอง

สุดท้าย เลื่อนลงไปที่ ปุ่มที่สอง เลือก ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม ตั้งค่าขนาดแบบอักษรเป็น 20px สำหรับเดสก์ท็อป 19ps สำหรับแท็บเล็ต และ 16px สำหรับโทรศัพท์ เปลี่ยนสีข้อความเป็นสีขาว

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

เปลี่ยน สีพื้นหลัง เป็น #ff5a17 ตั้งค่าความกว้างของเส้นขอบและรัศมีเป็น 0px

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

จากนั้น เปลี่ยน Font เป็น Inter และ Weight to Bold

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

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

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

สุดท้าย เลื่อนลงไปที่ตัวเลือก Padding ของปุ่มที่สอง สำหรับเดสก์ท็อป ให้ใช้ 20px สำหรับบนและล่าง และ 40px สำหรับซ้ายและขวา บนแท็บเล็ต เปลี่ยน Padding บนและล่างเป็น 16px สำหรับโทรศัพท์ ให้เปลี่ยนช่องด้านบนและด้านล่างเป็น 12px ปิดโมดูลและบันทึกงานของคุณ

• การขยายบนเดสก์ท็อป: บนและล่าง 20px, ซ้ายและขวา 40px
• Padding แท็บเล็ต: 16px บนและล่าง 40px ซ้ายและขวา
• ช่องว่างภายในโทรศัพท์: 12px บนและล่าง, 40px ซ้ายและขวา

ผลลัพธ์ส่วนหัวแบบเต็มหน้าจอ

นี่คือลักษณะของส่วนหัวแบบเต็มความกว้างของเราบนเดสก์ท็อป แท็บเล็ต และโทรศัพท์

เดสก์ทอป

ยาเม็ด

โทรศัพท์

สิ้นสุดความคิดในการสร้างส่วนหัวแบบเต็มหน้าจอด้วยโมดูลส่วนหัวแบบเต็มหน้าจอของ Divi

นั่นคือรูปลักษณ์ของเราในการสร้างส่วนหัวแบบเต็มหน้าจอด้วย Divi Fullwidth Header Module ของคุณ กระบวนการนี้เรียบง่าย และดูดีบนทุกอุปกรณ์ การเพิ่มปุ่มเลื่อนลงเป็นภาพที่ยอดเยี่ยมซึ่งบ่งชี้ว่าผู้ใช้สามารถเลื่อนได้ การออกแบบส่วนหัวแบบเต็มหน้าจอคล้ายกับการออกแบบส่วนฮีโร่ การปฏิบัติตามหลักเกณฑ์ง่ายๆ สองสามข้อจะช่วยให้คุณสร้างส่วนหัวแบบเต็มหน้าจอที่น่าทึ่งด้วยโมดูลส่วนหัวแบบเต็มหน้าจอของ Divi

เราต้องการได้ยินจากคุณ คุณได้สร้าง Divi Fullwidth Header แบบเต็มหน้าจอหรือไม่? แจ้งให้เราทราบเกี่ยวกับเรื่องนี้ในความคิดเห็น