วิธีวางส่วนหัวของคุณไว้ใต้ส่วน Divi แรกของแต่ละหน้าโดยอัตโนมัติ

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตส่วนหัวที่กำหนดเองได้ฟรี

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

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

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

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

ดาวน์โหลด

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

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

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

เริ่มต้นด้วยการไปที่ Divi Theme Builder และเพิ่มเทมเพลตใหม่

ใช้ On

ใช้เทมเพลตใหม่นี้กับทุกหน้า

• ใช้บน: ทุกหน้า

2. เริ่มสร้างการออกแบบส่วนหัวที่กำหนดเอง

ดำเนินการต่อโดยสร้างส่วนหัวที่กำหนดเองภายในเทมเพลตของเพจ

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

สีพื้นหลัง

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

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

ระยะห่าง

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

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

ชายแดน

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

• ความกว้างขอบบนและล่าง: 1px
• สีขอบบนและล่าง: #002d4c

CSS ID

และใส่รหัส CSS ภายหลังในบทช่วยสอน เราจะใช้ CSS ID นี้เพื่อวางส่วนใต้ส่วนแรกของแต่ละหน้า

• CSS ID: ส่วนหัวที่กำหนดเอง

ดัชนี Z

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

• ดัชนี Z: 99999

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

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

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

ขนาด

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

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

ระยะห่าง

ลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมดด้วย

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

องค์ประกอบหลัก

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

display: flex;
align-items: center;

คอลัมน์ 1

ระยะห่าง

ดำเนินการต่อโดยเปิดการตั้งค่าคอลัมน์ 1 และเพิ่มช่องว่างด้านบนและด้านล่างในการตั้งค่าการเว้นวรรค

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

ชายแดน

เพิ่มเส้นขอบด้านขวาให้กับคอลัมน์ด้วย

• ความกว้างของขอบขวา: 1px
• สีขอบขวา: #002d4c

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

อัพโหลดโลโก้

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! ในคอลัมน์ 1 เราจำเป็นต้องมี Image Module อัปโหลดโลโก้ของคุณ

การจัดตำแหน่ง

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดตำแหน่งรูปภาพ

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

แก้ไขความกว้างของโมดูลตามขนาดหน้าจอต่างๆ ด้วย

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

เพิ่มโมดูลเมนูไปที่คอลัมน์ 2

เลือกเมนู

ในคอลัมน์ที่สอง ตรงนั้น เราจะต้องมีโมดูลเมนู เลือกเมนูที่ต้องการ

เค้าโครง

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

• สไตล์: กึ่งกลาง
• ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง

ข้อความเมนู

แก้ไขการตั้งค่าข้อความเมนูด้วย

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

ข้อความแบบเลื่อนลง

จากนั้นเปลี่ยนสีบางส่วนในการตั้งค่าข้อความแบบเลื่อนลง

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• เมนูแบบเลื่อนลง Line Color: #002d4c

ไอคอน

และตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ในการตั้งค่าไอคอน

• ไอคอนเมนูแฮมเบอร์เกอร์ สี: #002d4c

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 3

เพิ่มสำเนา

ไปยังคอลัมน์ถัดไปและคอลัมน์สุดท้าย ที่นั่น เราจำเป็นต้องมีโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การจัดตำแหน่ง

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

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

ดำเนินการต่อโดยกำหนดสไตล์ปุ่มในการตั้งค่าปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 13px
• สีข้อความของปุ่ม: #002d4c
• สีพื้นหลังของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 2px
• สีเส้นขอบของปุ่ม: #ffffff (ค่าเริ่มต้น), #d1d1d1 (โฮเวอร์)
• รัศมีเส้นขอบของปุ่ม: 0px

• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: ห้องโดยสาร
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

จากนั้น เพิ่มช่องว่างภายในที่กำหนดเองในขนาดหน้าจอต่างๆ

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

กล่องเงา

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

• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 2px (ค่าเริ่มต้น), 6px (โฮเวอร์)
• สีเงา: #002d4c
• ตำแหน่งเงาของกล่อง: เงาภายใน

3. วางส่วนหัวโดยอัตโนมัติหลังจากส่วนแรกของแต่ละหน้าโดยใช้ JQuery

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

ตอนนี้ หากต้องการวางเมนูไว้ใต้ส่วนแรกของแต่ละหน้าโดยอัตโนมัติ เราจำเป็นต้องใช้โค้ด JQuery เล็กน้อย หากต้องการรวมโค้ดนี้ในส่วนหัวที่กำหนดเอง ให้เพิ่ม Code Module ลงในคอลัมน์ 2

ใส่รหัส JQuery

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

jQuery(ฟังก์ชัน($){
$('#custom-header').insertAfter('.et_pb_section_0');
});

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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