วิธีใช้รูปร่างเคลื่อนไหวที่แปลงร่างเป็นพื้นหลังด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ดาวน์โหลดเลย์เอาต์ Transformed Motion Shapes ฟรี

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

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

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

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

ดาวน์โหลด

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

ขั้นตอนทั่วไป

เพิ่มมาตราใหม่

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

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

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

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและใช้ค่าระยะขอบและช่องว่างภายในที่กำหนดเอง

• ระยะขอบซ้าย: 4%
• ระยะขอบขวา: 4%
• ช่องว่างภายในด้านบน: 11%
• ช่องว่างภายในด้านล่าง: 11%

กล่องเงา

เรากำลังใช้เงากล่องที่ละเอียดอ่อนเช่นกัน

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.1)
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

ทัศนวิสัย

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

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

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

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

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

ขนาด

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

• ความกว้างสูงสุด: 1580px

ระยะห่างคอลัมน์ 1

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

• ช่องว่างภายในด้านบน: 9%

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

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

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

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

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

• แบบอักษรของหัวเรื่อง 2: Abril Fatface
• หัวเรื่อง 2 สีข้อความ: #7206a0
• ขนาดข้อความของหัวเรื่อง 2: 80px (เดสก์ท็อป), 65px (แท็บเล็ต), 50px (โทรศัพท์)

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

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

เพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้าพร้อมเนื้อหาคำอธิบายที่คุณเลือก

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

เปลี่ยนการตั้งค่าข้อความของโมดูลดังนี้:

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #7206a0
• ความสูงของบรรทัดข้อความ: 2em

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

เพิ่มสำเนา

โมดูลสุดท้ายที่เราต้องการในคอลัมน์ 1 คือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #077bff
• ความกว้างของขอบปุ่ม: 0px

• แบบอักษรของปุ่ม: Abril Fatface

ระยะห่าง

เรากำลังเพิ่มค่าการเติมที่กำหนดเองด้วย

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

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

อัพโหลดภาพ

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

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

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

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

ขนาด

ตั้งค่าโมดูลให้สมบูรณ์โดยแก้ไขความกว้างตามขนาดหน้าจอต่างๆ

• ความกว้าง: 100% (เดสก์ท็อป), 50% (แท็บเล็ตและโทรศัพท์)

สร้างตัวอย่างใหม่ #1

เพิ่มโมดูลข้อความที่ด้านบนของคอลัมน์1

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

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

เพิ่มพื้นหลังไล่ระดับสีให้กับโมดูลถัดไป

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

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• ความกว้าง: 165%
• ส่วนสูง: 270%

ระยะห่าง

จากนั้นไปที่การตั้งค่าระยะห่างและใช้ค่าระยะห่างที่กำหนดเอง

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

แปลงร่างหมุน

เรากำลังหมุนโมดูลต่อไป

• ซ้าย: 270deg

แปลงร่างเอียง

เราจะใช้ค่าความเบ้ของการแปลงด้วย

• ด้านล่าง: 16deg
• ขวา: 16deg

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย
• ออฟเซ็ตแนวตั้ง: -50%
• ออฟเซ็ตแนวนอน: -50%

เอฟเฟกต์การเคลื่อนไหวในแนวตั้ง

ต่อไป เราจะเพิ่มเอฟเฟกต์การเลื่อน โดยเริ่มจากการเคลื่อนไหวในแนวตั้ง

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: 4
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: -4

เอฟเฟกต์การเลื่อนแนวนอน

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 4
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: -4%

สร้างตัวอย่างใหม่ #2

เพิ่มโมดูลข้อความที่ด้านบนของคอลัมน์1

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

สีพื้นหลัง

เปิดการตั้งค่าโมดูลและใช้สีพื้นหลัง

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

ขนาด

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

• ความกว้าง: 165%
• ส่วนสูง: 270%

ระยะห่าง

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

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

หมุนเอียง

และเราจะนำเอฟเฟกต์การเอียงของการแปลงไปใช้ในการตั้งค่าการแปลง

• ขวา: -54deg

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย
• ออฟเซ็ตแนวตั้ง: -50%
• ออฟเซ็ตแนวนอน: -50%

เอฟเฟกต์การเคลื่อนไหวในแนวตั้ง

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

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: 4
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: -4

เอฟเฟกต์การเลื่อนแนวนอน

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 4
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: -4

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

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

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

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