วิธีสร้างส่วนหัวโกลบอลแบบเต็มหน้าจอแบบกำหนดเองด้วยตัวสร้างธีมของ Divi

หากคุณกำลังมองหาวิธีสร้างส่วนหัวส่วนกลางสำหรับเว็บไซต์ของคุณซึ่งไม่ใช้พื้นที่มากนัก คุณจะต้องชอบบทแนะนำนี้ เราจะแสดงวิธีสร้างส่วนหัวแบบเต็มหน้าจอโดยใช้ Divi's Theme Builder ขณะเลื่อนหน้าลง สิ่งที่คุณจะสังเกตเห็นเพิ่มเติมในโพสต์/หน้าของคุณมีเพียง 2 อย่างคือ 1) ไอคอนแฮมเบอร์เกอร์ที่คลิกได้ที่มุมซ้ายบน และ 2) โลโก้ที่มุมบนขวา ทั้งสองรายการนี้จะติดตามผู้เยี่ยมชมของคุณตลอดกระบวนการนำทาง และเมื่อคลิกไอคอนแฮมเบอร์เกอร์แล้ว เมนูเต็มหน้าจอแบบกำหนดเองจะเปิดขึ้น และอนุญาตให้ผู้เยี่ยมชมไปที่หน้าอื่นๆ ในเว็บไซต์ของคุณ ผลลัพธ์ของการออกแบบนี้มีการตอบสนองสูงและคุณจะสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน!

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตส่วนหัวแบบเต็มหน้าจอฟรี

หากต้องการใช้เทมเพลตส่วนหัวแบบเต็มหน้าจอ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

1. ไปที่ตัวสร้างธีม Divi และเริ่มสร้างส่วนหัวส่วนกลาง

ไปที่ตัวสร้างธีม Divi

เริ่มต้นด้วยการไปที่ตัวสร้างธีม Divi

เริ่มสร้าง Global Header

จากนั้นคลิกที่ 'เพิ่มส่วนหัวส่วนกลาง' และดำเนินการคลิกที่ 'สร้างส่วนหัวส่วนกลาง'

2. อุทิศส่วน #1 เพื่อการนำทางแบบเต็มหน้าจอ

การตั้งค่ามาตรา

สีพื้นหลัง

ถึงเวลาเริ่มสร้าง! เปิดการตั้งค่าของส่วนที่คุณสามารถสังเกตเห็นได้ในตัวแก้ไขเทมเพลตและเปลี่ยนสีพื้นหลังเป็นสีโปร่งใสทั้งหมด

• สีพื้นหลัง: rgba(255,255,255,0)

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของส่วนถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

CSS Class

ดำเนินการต่อโดยเพิ่มคลาส CSS ในส่วน ในโพสต์นี้ เราต้องใช้คลาส CSS นี้เพื่อเปลี่ยนเมนูแบบเต็มหน้าจอ

• CSS Class: ส่วนการแปลง

การมองเห็นเริ่มต้น

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน
• ดัชนี Z: 999999

โฮเวอร์การมองเห็น

เมื่อคุณได้เพิ่มดัชนี z แล้ว ให้เปิดใช้งานตัวเลือกโฮเวอร์ และตรวจสอบให้แน่ใจว่าดัชนี z เดียวกันนั้นใช้อยู่ที่นั่นด้วย

• ดัชนี Z: 999999

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวแรกในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา

โมดูลเดียวที่เราต้องการในแถวนี้คือโมดูลข้อความ เพิ่มสัญลักษณ์เมนูที่คุณเลือกลงในกล่องเนื้อหา ในบทช่วยสอนนี้ เราใช้ '≡'

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Abril Fatface
• สีข้อความ: #000000
• ขนาดตัวอักษร: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

แก้ไขค่าการเว้นวรรคตามขนาดหน้าจอต่างๆ ต่อไป

• ด้านบน: 2vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ช่วงล่าง: 2vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 7vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 7vw (โทรศัพท์)

CSS ID

โมดูลข้อความนี้จะทำหน้าที่เป็นทริกเกอร์สำหรับเมนูเต็มหน้าจอ นั่นเป็นเหตุผลที่เราจะต้องกำหนด CSS ID ให้กับโมดูลข้อความ ต่อไปในบทช่วยสอน เราจะใช้ CSS ID ในโค้ดของเรา

• CSS ID: เมนูเปิด

เพิ่มแถว #2

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวที่สองในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดดังต่อไปนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

แก้ไขค่าระยะห่างด้วย

• ขอบบน: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ระยะขอบล่าง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 19vw
• ช่องว่างภายในด้านขวา: 19vw

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา

จากนั้น เพิ่มโมดูลข้อความใหม่ลงในคอลัมน์ โมดูลข้อความนี้แสดงถึงรายการเมนูแรกของคุณ

เพิ่มลิงค์

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

• โมดูลลิงค์ URL: #

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 3vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: -0.1vw
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

แก้ไขการตั้งค่าระยะห่างของโมดูลถัดไป

• มาร์จิ้นสูงสุด: 1vw
• แผ่นรองด้านล่าง: 2vw
• ช่องว่างภายในด้านซ้าย: 3vw

ชายแดน

เพิ่มขอบด้านล่างด้วย

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #333333

CSS Class

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

โคลนโมดูลข้อความสามครั้ง

เมื่อคุณสร้างโมดูลข้อความแรกเสร็จแล้ว คุณสามารถโคลนได้หลายครั้งตามที่คุณต้องการ (ขึ้นอยู่กับรายการเมนูที่คุณต้องการให้แสดงในเมนูของคุณ) อย่างไรก็ตาม ตรวจสอบให้แน่ใจว่าโมดูลต่างๆ ไม่เกินความสูงของหน้าจอของคุณ

เปลี่ยนเนื้อหา & ลิงก์ของแต่ละรายการที่ซ้ำกัน

คุณจะต้องเปลี่ยนเนื้อหาและลิงก์ของแต่ละรายการที่ซ้ำกัน

เพิ่มโมดูลติดตามโซเชียลมีเดีย

เพิ่มเครือข่ายโซเชียลทางเลือก

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

รีเซ็ตสไตล์เครือข่ายโซเชียลส่วนบุคคล

ดำเนินการต่อโดยรีเซ็ตสไตล์ของแต่ละเครือข่ายโซเชียลทีละรายการ

การตั้งค่าไอคอน

จากนั้นไปที่แท็บการออกแบบของโมดูลและแก้ไขการตั้งค่าไอคอนดังนี้:

• ไอคอนสี: #000000
• ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
• ขนาดตัวอักษรของไอคอน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)

ระยะห่าง

เพิ่มช่องว่างภายในบางส่วนด้วย

• ช่องว่างภายในด้านซ้าย: 3vw

CSS Class

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มคลาส CSS

เพิ่มแถว #3

โครงสร้างคอลัมน์

แถวสุดท้ายที่เราต้องการในส่วนนี้มีโครงสร้างคอลัมน์ต่อไปนี้:

ระยะห่าง

จำกัดพื้นที่ที่แถวนี้ใช้โดยลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลโค้ดลงในคอลัมน์

แทรกโค้ด JQuery & CSS

จากนั้นเพิ่มโมดูลโค้ดและแทรกโค้ด CSS และ JQuery เพื่อสร้างฟังก์ชันเมนูแบบเต็มหน้าจอ ตรวจสอบให้แน่ใจว่าคุณวางโค้ด JQuery ด้วยตนเองระหว่างแท็กสคริปต์และโค้ด CSS ระหว่างแท็กสไตล์ตามที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

3. อุทิศส่วน #2 ถึงโลโก้มุมบนขวา

การตั้งค่ามาตรา

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(0,0,0,0)

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของส่วนถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

การมองเห็นเริ่มต้น

เพิ่มดัชนี z ของส่วนด้วย

• ดัชนี Z: 99999

โฮเวอร์การมองเห็น

เปิดใช้งานตัวเลือกโฮเวอร์บนดัชนี z และตรวจสอบให้แน่ใจว่าค่าเดียวกันนั้นมีผลกับโฮเวอร์ด้วย

• ดัชนี Z: 99999

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดดังต่อไปนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวด้วย

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัปโหลดรูปภาพโลโก้ PNG

โมดูลเดียวที่เราต้องการในแถวและส่วนนี้คือโมดูลรูปภาพ อัปโหลดไฟล์ภาพโลโก้กึ่งโปร่งใสของคุณ

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

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

• ด้านบน: 2.5vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
• Padding ด้านล่าง: 2.5vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 7vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 7vw (โทรศัพท์)

4. การตั้งค่าส่วนเพิ่มเติม

ส่วนที่ 1

ขนาด

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

• ความกว้าง: 8vw (เดสก์ท็อป), 11vw (แท็บเล็ต), 18vw (โทรศัพท์)
• ความสูง: 7vw (เดสก์ท็อป), 11vw (แท็บเล็ต), 18vw (โทรศัพท์)

องค์ประกอบหลักเริ่มต้น

จากนั้นไปที่แท็บขั้นสูงของส่วนและเพิ่มโค้ด CSS ต่อไปนี้:

position: fixed;
top: 0;

เลื่อนองค์ประกอบหลัก

ตรวจสอบให้แน่ใจว่าบรรทัดโค้ด CSS เดียวกันนั้นใช้กับโฮเวอร์

position: fixed;
top: 0;

มาตรา #2

ขนาด

ดำเนินการต่อโดยเปิดการตั้งค่าของส่วนที่สองและเปลี่ยนความกว้างตามขนาดหน้าจอต่างๆ

• ความกว้าง: 13vw (เดสก์ท็อป), 21vw (แท็บเล็ต), 30vw (โทรศัพท์)

องค์ประกอบหลักเริ่มต้น

จากนั้นไปที่แท็บขั้นสูงและเพิ่มโค้ด CSS ต่อไปนี้:

position: fixed;
right: 0;
top: 0;

เลื่อนองค์ประกอบหลัก

ตรวจสอบให้แน่ใจว่าบรรทัดโค้ด CSS เดียวกันนั้นใช้กับโฮเวอร์

position: fixed;
right: 0;
top: 0;

5. บันทึกการเปลี่ยนแปลงของตัวสร้างและดูผลลัพธ์

เมื่อคุณทำตามขั้นตอนทั้งหมดข้างต้นเสร็จแล้ว คุณสามารถบันทึกเทมเพลตส่วนหัวส่วนกลางและดูผลลัพธ์บนเว็บไซต์ของคุณได้!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

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

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