ภาพรวมของประเภทส่วนหัว Divi บทช่วยสอน & ของสมนาคุณ

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

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

ค้นพบประเภทส่วนหัว
ค้นพบเคล็ดลับและเคล็ดลับของส่วนหัว
ค้นพบ Header Freebies

ประเภทส่วนหัว

1. ส่วนหัวปกติ

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

เยี่ยมชมบทช่วยสอน

2. ส่วนหัวติดหนึบ

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

เยี่ยมชมบทช่วยสอน

3. ส่วนหัวแบบเต็มหน้าจอ

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

1. PR Firm Header & Footer Template Template
2. เทมเพลตส่วนหัวและส่วนท้ายของร้านอาหารอิตาเลียน
3. เทมเพลตส่วนหัวและส่วนท้ายของนักเขียนอิสระ
4. เทมเพลตส่วนหัวและส่วนท้ายของที่ปรึกษาทางการเงิน

เยี่ยมชมบทช่วยสอน

4. สไลด์ในส่วนหัว

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

เยี่ยมชมบทช่วยสอน

5. เลื่อนหัวกดลง

ส่วนหัวที่ยอดเยี่ยมอีกประเภทหนึ่งในรายการของเราคือส่วนหัวแบบเลื่อนลง เมื่อคลิกไอคอนแฮมเบอร์เกอร์ ส่วนหัวจะเลื่อนลงจากด้านบนและดันเนื้อหาของหน้าลง สิ่งนี้ให้เอฟเฟกต์ที่สนุกและสวยงามในทุกขนาดหน้าจอ

เยี่ยมชมบทช่วยสอน

6. การนำทางแนวตั้ง

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

เยี่ยมชมบทช่วยสอน

7. ส่วนหัวลอยโปร่งใส

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

เยี่ยมชมบทช่วยสอน

8. ส่วนหัว Sticky โปร่งใส

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

เยี่ยมชมบทช่วยสอน

9. หมุนส่วนหัว

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

เยี่ยมชมบทช่วยสอน

10. แบบเลื่อนลงอีคอมเมิร์ซที่กำหนดเอง

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

เยี่ยมชมบทช่วยสอน

11. ดรอปดาวน์ของธีมหรูหราที่กำหนดเอง

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

เยี่ยมชมบทช่วยสอน

Tips & Tricks

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

1. เปิดเผยและซ่อนส่วนหัวบน Scroll

เยี่ยมชมบทช่วยสอน

2. เมนูซ้อนกันแบบยุบมือถือ

เยี่ยมชมบทช่วยสอน

3. การสร้างภาพเคลื่อนไหวส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

4. การเพิ่มแบบฟอร์มการเข้าสู่ระบบแบบอินไลน์ในส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

5. การเพิ่มปุ่มสองปุ่มเคียงข้างกันในส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

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

เยี่ยมชมบทช่วยสอน

7. การเพิ่มแบบฟอร์มการติดต่อแบบเลื่อนลงในส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

8. สลับส่วนหัวของคุณบน Scroll

เยี่ยมชมบทช่วยสอน

9. เพิ่มประสิทธิภาพโมดูลเมนูของ Divi ด้วย 5 Global Presets

เยี่ยมชมบทช่วยสอน

10. การเพิ่มป้ายมุมไปยังรายการเมนูภายในส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

11. การเพิ่มและทำให้โลโก้ SVG ของคุณเคลื่อนไหวภายในส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

12. ผสมผสานส่วนหัวและหน้าของคุณด้วยตัวแบ่งส่วน Divi

เยี่ยมชมบทช่วยสอน

13. การเพิ่มชื่อไซต์แบบไดนามิกและสโลแกนในส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

14. เพิ่มประสิทธิภาพโลโก้ไซต์ Divi ของคุณด้วย Global Presets

เยี่ยมชมบทช่วยสอน

15. การเพิ่มแถบเสียง "ตอนล่าสุด" แบบคงที่ในส่วนหัวของคุณ

เยี่ยมชมบทช่วยสอน

16. การเพิ่มแอนิเมชั่นปุ่มที่ล่าช้าให้กับส่วนหัวของคุณ CTA

เยี่ยมชมบทช่วยสอน

17. การเปลี่ยนโลโก้ Sticky ของคุณบน Scroll

เยี่ยมชมบทช่วยสอน

ของสมนาคุณฟรี

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

1. ชุดตัวสร้างธีม

Theme Builder Pack #1

เยี่ยมชมบทช่วยสอน

Theme Builder Pack #2

เยี่ยมชมบทช่วยสอน

Theme Builder Pack #3

เยี่ยมชมบทช่วยสอน

Theme Builder Pack #4

เยี่ยมชมบทช่วยสอน

Theme Builder Pack #5

เยี่ยมชมบทช่วยสอน

Theme Builder Pack #6

เยี่ยมชมบทช่วยสอน

2. ชุดรูปแบบส่วนหัวและส่วนท้ายของแจกฟรี

แพ็คเลย์เอาต์ร้านอาหารอิตาเลียน

เยี่ยมชมบทช่วยสอน

Virtual Assistant Layout Pack

เยี่ยมชมบทช่วยสอน

Coworking Space Layout Pack

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงทำความสะอาดหน้าต่าง

เยี่ยมชมบทช่วยสอน

ไพ่ทาโรต์เลย์เอาต์แพ็ค

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงจิตรกร

เยี่ยมชมบทช่วยสอน

Pet Supply Layout Pack

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงผลิตภัณฑ์ความงาม

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงโรงเรียนสอนทำอาหาร

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงน้ำหอม

เยี่ยมชมบทช่วยสอน

ชุดเลย์เอาต์ร้านซูชิ

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงสมุนไพร

เยี่ยมชมบทช่วยสอน

Renovation Layout Pack

เยี่ยมชมบทช่วยสอน

Robotics Layout Pack

เยี่ยมชมบทช่วยสอน

Holistic Healer Layout Pack

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงร้านเครื่องเทศ

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงเบาะ

เยี่ยมชมบทช่วยสอน

PR Firm Layout Pack

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงโค้ชฟิตเนส

เยี่ยมชมบทช่วยสอน

เลย์เอาต์ช่างภาพงานแต่งงาน

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงนักกำหนดอาหาร

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงนักเขียนอิสระ

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงล่าม

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงที่ปรึกษาทางการเงิน

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงร้านทำเล็บ

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงผู้มีอิทธิพล

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงบริษัทเครื่องหนัง

เยี่ยมชมบทช่วยสอน

ชุดเค้าโครงการฝังเข็ม

เยี่ยมชมบทช่วยสอน

3. อื่นๆ

คำสั่งผสมส่วนหัวและส่วนท้ายขั้นต่ำ

เยี่ยมชมบทช่วยสอน

ค้นหาส่วนหัวใหม่ในบล็อกของเรา

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

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

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

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