วิธีสร้างเอฟเฟกต์การเลื่อนเลเยอร์ที่ขยายเพื่อดึงดูดภาพประกอบแอพใน Divi

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

มาเริ่มกันเลยดีกว่า

แอบมอง

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ JSON ไปที่ Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างเอฟเฟกต์การเลื่อนเลเยอร์ขยายสำหรับภาพประกอบแอพที่มีส่วนร่วมใน Divi

เพิ่มแถว

เริ่มต้นด้วยการเพิ่มแถว 2 คอลัมน์ (ครึ่งหนึ่งครึ่งหนึ่ง)

เพิ่มระยะขอบชั่วคราวในส่วน

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

• ระยะขอบ: บน 80vh ด้านล่าง 80vh

เพิ่ม 3 ภาพเป็นเลเยอร์

เราจะสร้างภาพสามภาพเพื่อใช้เป็นภาพประกอบแอปสามชั้น แนวคิดคือการใช้ภาพสามภาพ (หรือภาพหน้าจอ) ของฟีเจอร์ของแอปที่มีขนาด/ขนาดเท่ากัน เพื่อให้ภาพวางซ้อนกันได้อย่างลงตัว จากนั้นเราจะย้ายทั้งสามเลเยอร์โดยใช้เอฟเฟกต์การเลื่อน Divi

มาเริ่มกันที่ภาพแรก

สร้างภาพ 1

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

จากนั้นอัปโหลดภาพแรกไปยังโมดูล อย่าลืมตรวจสอบให้แน่ใจว่าภาพทั้งสามภาพจะมีขนาดเท่ากัน อันนี้คือ 500px x 1050px

ภาพที่ 1 การตั้งค่า

เปิดการตั้งค่าโมดูลรูปภาพและอัปเดตสิ่งต่อไปนี้:

ความกว้างและระยะขอบ

• ความกว้าง: 300px (เดสก์ท็อปและแท็บเล็ต), 150px (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ซ้าย
• ระยะขอบ: 0px ด้านล่าง

ชายแดน

• มุมโค้งมน: 40px
• ความกว้างของเส้นขอบ: 15px
• สีเส้นขอบ: #ffffff

กล่องเงา

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• Box Shadow Blur ความแรง: 48px
• เงาสี: rgba(0,0,0,0.2)

สร้างภาพ2

ในการสร้างภาพที่ 2 ให้ทำซ้ำภาพที่ 1

จากนั้นอัปเดตโมดูลรูปภาพที่ซ้ำกันด้วยรูปภาพใหม่ที่มีขนาดเท่ากัน (500px x 1050px)

ภาพที่ 2 การตั้งค่า

จากนั้นนำเส้นขอบออกโดยอัปเดตสิ่งต่อไปนี้:

ชายแดน

• ความกว้างของเส้นขอบ: 0px

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

การขยายความ

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

ตำแหน่ง

จากนั้นอัปเดตตำแหน่งสำหรับภาพที่ 2 เป็น Absolute ซึ่งจะทำให้ภาพซ้อนภาพ 1 ได้อย่างลงตัว

• ตำแหน่ง: Absolute

สำหรับข้อมูลเพิ่มเติม โปรดดูโพสต์แบบเต็มของเราเกี่ยวกับวิธีใช้ตำแหน่งที่แน่นอนใน Divi

เอฟเฟกต์เลื่อน

ตอนนี้ได้เวลาเพิ่มเอฟเฟกต์การเลื่อนที่ย้ายเลเยอร์ของเรา (ภาพที่ 2) เมื่อเลื่อนหน้าลง

อัปเดตเอฟเฟกต์การเลื่อนดังนี้:

ใต้แท็บ Vertical Motion …

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

ใต้แท็บการ เคลื่อนไหวในแนวนอน …

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

ใต้แท็บ Fading In and Out …

• เปิดใช้งานการเฟดเข้าและออก: ใช่
• ความทึบเริ่มต้น: 0% (ที่วิวพอร์ต 0%)
• ความทึบปานกลาง: 100% (ที่วิวพอร์ต 10% -15%)
• ความทึบสิ้นสุด: 70% (ที่วิวพอร์ต 30%)

สร้างภาพ 3

เมื่อเพิ่มเอฟเฟกต์การเลื่อนทั้งหมดในภาพที่ 2 แล้ว เราก็พร้อมที่จะสร้างภาพที่ 3

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

ตอนนี้เปิดการตั้งค่าสำหรับภาพที่ซ้ำกัน (ภาพที่ 3) และอัปโหลดภาพใหม่ ตรวจสอบให้แน่ใจว่ามีขนาดเท่ากัน (500px x 1050px)

เอฟเฟกต์การเลื่อนภาพที่ 3

ใต้แท็บขั้นสูง ให้อัปเดตตัวเลือกเอฟเฟกต์การเลื่อนสำหรับรูปภาพ 3

ภายใต้แท็บ Vertical Motion ให้อัปเดตการชดเชยการเคลื่อนที่ในแนวตั้งดังนี้:

• ออฟเซ็ตสิ้นสุด: -2 (ที่วิวพอร์ต 100%)

ใต้แท็บ Horizontal Motion ให้อัพเดต Horizontal Motion ดังนี้:

• ออฟเซ็ตกลาง: 2 (ที่ 50% วิวพอร์ต)
• ออฟเซ็ตสิ้นสุด: 3 (ที่วิวพอร์ต 100%)

ใต้แท็บ Fading In and Out ให้อัปเดตการตั้งค่า Fading In and Out ดังนี้:

• ความทึบเริ่มต้น: 5% (ที่วิวพอร์ต 0%)
• ความทึบปานกลาง: 100% (ที่วิวพอร์ต 30%-40%)
• ความทึบสิ้นสุด: 100% (ที่วิวพอร์ต 50%)

ผลลัพธ์

ตรวจสอบผลลัพธ์จนถึงตอนนี้

เพิ่ม Transform Skew เป็นคอลัมน์ 1

นี่เป็นเอฟเฟกต์ที่ดูดีตามที่เห็น แต่เราจะเอียงคอลัมน์เพื่อสร้างเอฟเฟกต์ 3D เพิ่มเติม

เปิดการตั้งค่าสำหรับคอลัมน์ 1 และเพิ่มการเอียงของการแปลงดังนี้:

Transform Skew (แกน X และ Y): 8deg

สิ่งนี้จะสร้างเอฟเฟกต์ 3 มิติที่ดีบนเลเยอร์ที่ขยาย

แค่นั้นแหละ!

ไม่บังคับ: เพิ่ม CTA ให้กับคอลัมน์ 2

ตอนนี้ เราสามารถเพิ่มชื่อและปุ่มใดๆ (หรือ CTA ใดๆ ก็ได้) ลงในคอลัมน์ด้านขวาพร้อมเอฟเฟกต์การเลื่อนเพิ่มเติม ตรวจสอบการดาวน์โหลดฟรีของเลย์เอาต์นี้ด้านบนเพื่อรับ CTA เดียวกันในภาพประกอบนี้

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้าย

และนี่คือวิธีการวางซ้อนกันบนแท็บเล็ตและโทรศัพท์

การใช้รูปภาพจาก Divi Layout Pack

รูปภาพที่ใช้จากบทช่วยสอนนี้เป็นภาพจำลองจาก Shutterstock และยังแสดงอยู่ในหน้าสาธิตเอฟเฟกต์การเลื่อนของเราด้วย

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

ในอีกไม่กี่นาที เรามีการออกแบบที่แตกต่างไปจากเดิมอย่างสิ้นเชิง!

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!