วิธีสร้างการเปลี่ยนหน้าเคลื่อนไหวด้วยตัวสร้างธีมของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

การเปลี่ยนหน้าเคลื่อนไหว #1

เดสก์ทอป

มือถือ

การเปลี่ยนหน้าเคลื่อนไหว #2

เดสก์ทอป

มือถือ

การเปลี่ยนหน้าเคลื่อนไหว #3

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตหน้าฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

สิ่งแรกที่คุณต้องทำคือไปที่ Divi Theme Builder แล้วคลิก 'Add New Template'

ใช้เทมเพลตในทุกหน้า

ใช้เทมเพลตใหม่ในทุกหน้า (หรือหน้าที่คุณต้องการใช้การเปลี่ยนแปลง)

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

เริ่มสร้างเทมเพลต Body

จากนั้น เริ่มสร้างเนื้อหาแบบกำหนดเองของเทมเพลตเพจของคุณ

2. สร้างเนื้อหาของหน้าโดยใช้โมดูลเนื้อหาโพสต์

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

ระยะห่าง

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

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

ทัศนวิสัย

เพื่อให้แน่ใจว่าไม่มีแถบเลื่อนแนวนอนปรากฏขึ้นเมื่อมีภาพเคลื่อนไหว เราจะต้องซ่อนส่วนล้นทั้งสองส่วนในแท็บขั้นสูงของการตั้งค่าส่วน

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

เพิ่มโมดูลเนื้อหาโพสต์ลงในคอลัมน์

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

3. ใช้การเปลี่ยนหน้าเคลื่อนไหวที่คุณเลือก

สร้างการเปลี่ยนหน้าเคลื่อนไหว #1

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

สีพื้นหลัง

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

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

แอนิเมชั่น

เรายังใช้การตั้งค่าแอนิเมชั่นต่อไปนี้กับส่วน:

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

การตั้งค่าแถว

สีพื้นหลัง

เปิดการตั้งค่าแถวถัดไปและเพิ่มสีพื้นหลังต่อไปนี้:

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

แอนิเมชั่น

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

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

การตั้งค่าคอลัมน์

สีพื้นหลัง

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

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

แอนิเมชั่น

เพิ่มแอนิเมชั่นที่กำหนดเองลงในคอลัมน์ด้วย

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 1200ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

โพสต์การตั้งค่าโมดูลเนื้อหา

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 2500ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

สร้างการเปลี่ยนหน้าเคลื่อนไหวใหม่ #2

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

สีพื้นหลัง

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

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

แอนิเมชั่น

จากนั้น นำแอนิเมชั่นแบบกำหนดเองไปใช้กับส่วน

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

การตั้งค่าแถว

พื้นหลังไล่โทนสี

เปิดการตั้งค่าแถวถัดไปและใช้พื้นหลังไล่ระดับสีต่อไปนี้:

• สี 1: rgba(255,255,255,0)
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

แอนิเมชั่น

เพิ่มแอนิเมชั่นแบบกำหนดเองให้กับแถวของคุณด้วย

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขึ้น
• ภาพเคลื่อนไหวล่าช้า: 800ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In
• ภาพเคลื่อนไหวซ้ำ: Once

การตั้งค่าคอลัมน์

สีพื้นหลัง

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

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

แอนิเมชั่น

ดำเนินการต่อโดยเพิ่มภาพเคลื่อนไหวลงในคอลัมน์

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ขวา
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

โพสต์การตั้งค่าโมดูลเนื้อหา

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 3000ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

สร้างการเปลี่ยนหน้าเคลื่อนไหวใหม่ #3

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

พื้นหลังไล่โทนสี

ไปยังการเปลี่ยนหน้าภาพเคลื่อนไหวถัดไปและครั้งสุดท้าย! เปิดการตั้งค่าส่วนและใช้พื้นหลังไล่ระดับสีต่อไปนี้:

• สี 1: #d8cdbe
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ด้านบน
• ตำแหน่งเริ่มต้น: 20%
• ตำแหน่งสุดท้าย: 20%

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ความเข้มของแอนิเมชั่น: 10%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

การตั้งค่าแถว

พื้นหลังไล่โทนสี

จากนั้นเปิดการตั้งค่าแถวและใช้พื้นหลังแบบไล่ระดับสี:

• สี 1: #ffffff
• สี 2: rgba (255,255,255,0)
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

แอนิเมชั่น

แก้ไขการตั้งค่าภาพเคลื่อนไหวของแถวด้วย

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

การตั้งค่าคอลัมน์

สีพื้นหลัง

ดำเนินการต่อโดยเปิดการตั้งค่าคอลัมน์ เปลี่ยนสีพื้นหลัง

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

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: สไลด์
• ทิศทางของแอนิเมชั่น: ลง
• ภาพเคลื่อนไหวล่าช้า: 1500ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

โพสต์การตั้งค่าโมดูลเนื้อหา

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ภาพเคลื่อนไหวล่าช้า: 3000ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

6. บันทึกการเปลี่ยนแปลงตัวสร้างธีมทั้งหมด & ดูตัวอย่างผล

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

ดูตัวอย่าง

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

การเปลี่ยนหน้าเคลื่อนไหว #1

เดสก์ทอป

มือถือ

การเปลี่ยนหน้าเคลื่อนไหว #2

เดสก์ทอป

มือถือ

การเปลี่ยนหน้าเคลื่อนไหว #3

เดสก์ทอป

มือถือ

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

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

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