วิธีทำให้ส่วนหัวทั่วโลกของคุณเคลื่อนไหวด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ดาวน์โหลด The Animated Global Header ฟรี

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

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

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

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

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

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

เริ่มต้นด้วยการไปที่ Divi Theme Builder ในแบ็กเอนด์ WordPress ของคุณ

สร้างส่วนหัวทั่วโลกตั้งแต่เริ่มต้น

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

2. สร้างการออกแบบบล็อกส่วนหัวทั่วโลก

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

ระยะห่าง

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

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

กล่องเงา

เพิ่มเงาของกล่องต่อไป

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(13,60,216,0.24)

ดัชนี Z

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

• ดัชนี Z: 99999

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

ทัศนวิสัย

ตรวจสอบให้แน่ใจว่าคุณตั้งค่าโอเวอร์โฟลว์ของแถวเป็น 'มองเห็นได้' ด้วย

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

การตั้งค่าคอลัมน์ (ทั้งสาม)

สีพื้นหลัง

เมื่อคุณตั้งค่าแถวเสร็จแล้ว คุณจะต้องจัดรูปแบบคอลัมน์ด้วย เปิดแต่ละคอลัมน์และเปลี่ยนสีพื้นหลังตามลำดับ:

• คอลัมน์ 1 สีพื้นหลัง: #efefef
• คอลัมน์ 2 สีพื้นหลัง: #ffcb0f
• คอลัมน์ 3 สีพื้นหลัง: #2848ff

ระยะห่าง

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

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

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

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

display: flex;
flex-direction: column;
justify-content: center;

คอลัมน์ 1 ดัชนี Z

สุดท้ายแต่ไม่ท้ายสุด เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มดัชนี z ในการตั้งค่าการมองเห็น

• ดัชนี Z: 10

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

เลือกเมนู

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลเมนูในคอลัมน์ 1 เลือกเมนูที่คุณต้องการ

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

อัปโหลดโลโก้ของคุณต่อไป

ลบพื้นหลัง

ดำเนินการต่อโดยลบสีพื้นหลังของโมดูล

เค้าโครง

ไปที่แท็บการออกแบบ และตรวจสอบให้แน่ใจว่าการตั้งค่าต่อไปนี้นำไปใช้กับเค้าโครง:

• สไตล์: จัดชิดซ้าย
• ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง

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

จัดรูปแบบการตั้งค่าข้อความถัดไป:

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

การตั้งค่าเมนูแบบเลื่อนลง

พร้อมกับการตั้งค่าเมนูแบบเลื่อนลง

• สีของเมนูดรอปดาวน์: #ffffff

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

และเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ด้วย

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

ขนาด

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

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

ระยะห่าง

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

• ระยะขอบซ้าย: 2vw
• ระยะขอบขวา: 2vw

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

ใส่โค้ด CSS สำหรับการตอบสนองของ VW

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

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 2

เพิ่มโซเชียลเน็ตเวิร์ก

ในคอลัมน์ถัดไป เราจำเป็นต้องมี Social Media Follow Module เพิ่มเครือข่ายโซเชียลที่คุณเลือก

รีเซ็ตสไตล์โซเชียลเน็ตเวิร์กทีละรายการ

ดำเนินการต่อโดยรีเซ็ตการตั้งค่าของแต่ละเครือข่าย

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

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

• การจัดตำแหน่งโมดูล: ศูนย์

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

เพิ่มสำเนา

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

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

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

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

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

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

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

• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: Ultra Bold
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

3. เพิ่มแอนิเมชั่นการจับคู่ให้กับองค์ประกอบ

Global Header Animation Combo #1

แอนิเมชั่นคอลัมน์ 1

ตอนนี้เราได้สร้างส่วนหัวส่วนกลางแล้ว ได้เวลาเพิ่มแอนิเมชั่นแล้ว! หากต้องการสร้างภาพเคลื่อนไหวแรกขึ้นใหม่ ให้เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มภาพเคลื่อนไหวต่อไปนี้

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ขึ้น
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

คอลัมน์ 2 นิเมชั่น

เพิ่มการตั้งค่าภาพเคลื่อนไหวต่อไปนี้ในคอลัมน์ 2 ถัดไป:

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ลง
• ภาพเคลื่อนไหวล่าช้า: 500ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

แอนิเมชั่นคอลัมน์ 3

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

• สไตล์แอนิเมชั่น: Zoom
• ทิศทางของแอนิเมชั่น: ขึ้น
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

ภาพเคลื่อนไหวของโมดูล (ทั้งสามโมดูล)

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 1500ms

Global Header Animation Combo #2

แอนิเมชั่นคอลัมน์ 1

ต้องการสร้างชุดแอนิเมชั่นชุดที่สองขึ้นมาใหม่แทนหรือไม่? เปิดการตั้งค่าคอลัมน์ 1 และเพิ่มภาพเคลื่อนไหวต่อไปนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

คอลัมน์ 2 นิเมชั่น

ใช้การตั้งค่าภาพเคลื่อนไหวต่อไปนี้สำหรับคอลัมน์ 2 ถัดไป:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ภาพเคลื่อนไหวล่าช้า: 500ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

แอนิเมชั่นคอลัมน์ 3

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ภาพเคลื่อนไหวล่าช้า: 1000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

ภาพเคลื่อนไหวของโมดูล (ทั้งสามโมดูล)

จากนั้นเปิดแต่ละโมดูลและเพิ่มภาพเคลื่อนไหวต่อไปนี้:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ภาพเคลื่อนไหวล่าช้า: 1500ms

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

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

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

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

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

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