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

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

มาเริ่มกันเลย.

แอบมอง

มาดูการออกแบบสำหรับวันนี้กัน

คุณยังสามารถดูการสาธิตสดดั้งเดิมของการออกแบบได้ในหน้าสาธิตภายใต้ชื่อ “การออกกำลังกายไม่จำเป็นต้องน่าเบื่อ”

ดาวน์โหลดเค้าโครง Divi การเปลี่ยนภาพ Breakaway ฟรี

ในการวางเลย์เอาต์จากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล 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 ด้านบน คุณจะต้อง:

• สองภาพ (อย่างน้อย 1080px x 540px)
• ซอฟต์แวร์แก้ไขรูปภาพ เช่น Photoshop เพื่อแบ่งภาพก่อนเพิ่มลงใน Divi

ส่วนที่ 1: การแบ่งส่วนรูปภาพใน Photoshop

ก่อนที่เราจะสามารถเริ่มสร้างการออกแบบของเราใน Divi เราต้องแบ่งภาพสองภาพของเราที่จะใช้สำหรับเอฟเฟกต์การเลื่อนการเปลี่ยนแบบแยกส่วน รูปภาพทั้งสองจะต้องถูกครอบตัดเพื่อให้มีขนาด 1080px x 540px หลังจากนั้นจะต้องหั่นเป็น 8 ส่วนเท่า ๆ กัน (4 ข้าม 2 ด้านล่าง) เมื่อพร้อมแล้ว เราสามารถบันทึกลงในคอมพิวเตอร์และอัปโหลดสไลซ์รูปภาพไปยังไซต์ของเรา มาเริ่มกันที่ภาพแรก

รูปภาพ #1

ครอบตัดรูปภาพ

สิ่งแรกที่เราต้องทำคือครอบตัดรูปภาพเพื่อให้มีขนาดที่แน่นอนที่ 1080px x 540px คุณสามารถใช้ซอฟต์แวร์แก้ไขรูปภาพเพื่อทำสิ่งนี้ได้ ใน Photoshop คุณสามารถใช้เครื่องมือครอบตัด

ตัดภาพ

ถัดไป คลิกเพื่อใช้เครื่องมือสไลซ์และเลือกรูปภาพทั้งหมด คลิกขวาที่สไลซ์/รูปภาพ แล้วเลือกตัวเลือกแบ่งสไลซ์

ในกล่องตัวเลือก Divide Slice ให้อัปเดตสิ่งต่อไปนี้:

แบ่งตามแนวนอนเป็น:

• 2 ชิ้นลงเว้นระยะห่างเท่า ๆ กัน
• 270 พิกเซลต่อสไลซ์

แบ่งตามแนวตั้งเป็น:

• 4 ชิ้นข้าม เว้นระยะห่างเท่า ๆ กัน
• 270 พิกเซลต่อสไลซ์

จากนั้นคลิกตกลง

การบันทึกสไลซ์รูปภาพ

ตอนนี้ เรามีภาพที่หั่นเป็น 8 บล็อกเท่าๆ กัน โดยแต่ละบล็อกมีขนาด 270 x 270 พิกเซล

หากต้องการบันทึกส่วนของรูปภาพ ให้ไปที่ไฟล์ > ส่งออก > บันทึกสำหรับเว็บ

จากนั้นเลือกรูปแบบไฟล์แล้วคลิกบันทึก

ในกล่องป๊อปอัป ตรวจสอบให้แน่ใจว่าได้อัปเดตสิ่งต่อไปนี้:

• บันทึกเป็น: [ป้อนชื่อสำหรับรูปภาพ]
• รูปแบบ: รูปภาพเท่านั้น
• การตั้งค่า: การตั้งค่าเริ่มต้น
• ชิ้น: ชิ้นทั้งหมด

จากนั้นคลิกบันทึก

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

รูปภาพ #2

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

หมุนชิ้นรูปภาพ

อย่างไรก็ตาม เนื่องจากลักษณะการทำงานของเอฟเฟกต์การเลื่อนแบบหมุน ส่วนของรูปภาพแต่ละส่วนที่ประกอบเป็นรูปภาพที่สองจะต้องหมุน 90 องศาไปทางซ้ายหรือทางขวา

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

นี่คือคำแนะนำเกี่ยวกับวิธีการหมุนภาพภายในตำแหน่งเดิมเมื่อแบ่งส่วนภาพ

นี่คือภาพต้นฉบับ

นี่คือวิธีการหมุนชิ้นรูปภาพก่อนที่จะอัปโหลดไปยังไซต์ของคุณ

นี่เป็นสิ่งจำเป็นเพื่อให้เราสามารถได้รับเอฟเฟกต์การเลื่อนต่อไปนี้ในที่สุด

ตอนนี้รูปภาพทั้งสองถูกครอบตัด สไลซ์ บันทึก และหมุนแล้ว คุณก็พร้อมที่จะเพิ่มลงในไซต์ Divi ของคุณแล้ว คุณควรมีทั้งหมด 16 ภาพ (8 จากภาพที่หนึ่งและ 8 จากภาพที่ 2)

ส่วนที่ 2: การสร้างเอฟเฟกต์การเลื่อนการเปลี่ยนภาพ Breakaway ใน Divi

เมื่อสไลซ์ภาพพร้อมแล้ว เราสามารถเริ่มกระบวนการออกแบบใน Divi ได้ นี่คือวิธีการทำ

เพิ่มแถว #1

ในการเริ่มต้น ให้สร้างแถวสี่คอลัมน์

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

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

• ความกว้างของรางน้ำ: 1
• ความกว้างสูงสุด: 1080px (เดสก์ท็อป), 540px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง
• แนวนอนล้น: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

อัปเดตส่วนเสริม

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

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

การเพิ่มรูปภาพ

ในแถวแรก เราจะเพิ่มแต่ละ 8 ภาพ/ชิ้นที่ประกอบเป็นภาพแรก รูปภาพควรถูกจัดวางตำแหน่งภายในคอลัมน์เหมือนกับที่สไลซ์ใน photoshop (4 ด้านและ 2 ด้านล่าง)

นี่คือภาพประกอบของแต่ละภาพที่มีตัวเลขกำกับอยู่ นี่คือลักษณะที่ปรากฏหลังจากเพิ่มรูปภาพทั้งหมดลงในแถวแล้ว

รูปภาพ #1

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

จากนั้นอัปโหลดสไลซ์รูปภาพแรกไปยังโมดูล

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

ใต้แท็บขั้นสูง ให้เพิ่มเอฟเฟกต์การเลื่อนต่อไปนี้ให้กับรูปภาพ

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

คลิกแท็บมาตราส่วนและอัปเดตสิ่งต่อไปนี้:

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• สเกลเริ่มต้น: 100% (ที่วิวพอร์ต 20%)
• ระดับกลาง: 70% (ที่ 32% - มุมมอง 48%)
• สเกลสิ้นสุด: 100% (ที่วิวพอร์ต 60%)

คลิกแท็บหมุนและอัปเดตสิ่งต่อไปนี้:

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0 องศา (ที่วิวพอร์ต 0%)
• การหมุนกลาง: 0 องศา (ที่วิวพอร์ต 20%)
• การหมุนรอบสุดท้าย: -90 องศา (ที่วิวพอร์ต 60%)

เอฟเฟกต์การเลื่อนจะมีลักษณะเช่นนี้เมื่อเลื่อนหน้าลง

รูปภาพ #2

ในการสร้างรูปภาพ #2 ให้ทำซ้ำรูปภาพ #1 และวางรูปภาพที่ซ้ำกันในคอลัมน์ 2

อัปเดตโมดูลรูปภาพที่ซ้ำกันด้วยรูปภาพ #2

อัปเดตเอฟเฟกต์การเลื่อน

เราจะเก็บเอฟเฟกต์การเลื่อนแบบเดียวกันส่วนใหญ่ที่ส่งต่อมาจากรูปภาพ #1 สิ่งเดียวที่เราต้องเปลี่ยนคือการหมุน ไปที่แท็บขั้นสูงและเปลี่ยนการหมุนสิ้นสุดเป็น 90 องศา (แทนที่จะเป็น -90 องศา) เพื่อให้หมุนไปในทิศทางตรงกันข้าม

• สิ้นสุดการหมุน: 90 องศา

รูปภาพ #3

หากต้องการสร้างรูปภาพ #3 ให้คัดลอกและวางรูปภาพ #1 ลงในคอลัมน์ 3 แล้วเปลี่ยนรูปภาพเป็นรูปภาพ #3

รูปภาพ #4

หากต้องการสร้างรูปภาพ #4 ให้คัดลอกและวางรูปภาพ #2 ลงในคอลัมน์ 4 และอัปเดตรูปภาพเป็นรูปภาพ #4

รูปภาพ #5

ในการสร้างรูปภาพ #5 ให้ทำซ้ำรูปภาพ #1 เพื่อให้รูปภาพที่ซ้ำกันอยู่ใต้คอลัมน์ 1 โดยตรง

อัปเดตรูปภาพเป็นรูปภาพ #5 จากนั้นอัปเดตเอฟเฟกต์การเลื่อน Fading In และ Out ดังนี้:

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

จากนั้นอัปเดตเอฟเฟกต์การเลื่อนขึ้นและลงดังต่อไปนี้:

• สเกลเริ่มต้น: 100% (ที่วิวพอร์ต 0%)
• ระดับกลาง: 70% (ที่ 12% – 28% วิวพอร์ต)
• สเกลสิ้นสุด: 100% (ที่วิวพอร์ต 40%)

และสุดท้าย อัปเดตเอฟเฟกต์การเลื่อนแบบหมุนดังนี้:

• การหมุนเริ่มต้น: 0 องศา (ที่วิวพอร์ต 0%)
• การหมุนกลาง: 0 องศา (ที่วิวพอร์ต 0%)
• สิ้นสุดการหมุน: 90 องศา (ที่วิวพอร์ต 40%)

รูปภาพ #6

ในการสร้างรูปภาพ #6 ให้ทำซ้ำรูปภาพ #5 และย้ายไปที่คอลัมน์ 2 (ใต้รูปภาพ #2)

อัปเดตโมดูลรูปภาพด้วยรูปภาพ #5 จากนั้นปรับเอฟเฟกต์การเลื่อนการหมุนไปในทิศทางตรงกันข้าม (-90 องศา) ดังนี้:

• สิ้นสุดการหมุน: -90 องศา

รูปภาพ #7

ในการสร้างรูปภาพ #7 ให้ทำซ้ำรูปภาพ #5 และย้ายไปใต้รูปภาพ #3 ในคอลัมน์ 3 จากนั้นอัปเดตโมดูลรูปภาพที่ซ้ำกันด้วยรูปภาพ #7

รูปภาพ #8

หากต้องการสร้างรูปภาพ #8 ให้ทำซ้ำรูปภาพ #6 และย้ายไปใต้รูปภาพ #4 ในคอลัมน์ 4 จากนั้นอัปเดตโมดูลรูปภาพที่ซ้ำกันด้วยรูปภาพ #8

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

นี่คือสิ่งที่ผลลัพธ์ดูเหมือนจนถึงตอนนี้

เพิ่มแถว #2

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

ไปข้างหน้าและทำซ้ำแถว # 1

อัปเดตแถว #2 รูปภาพ

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

อัปเดตเอฟเฟกต์การเลื่อนภาพ

เมื่อรูปภาพที่หมุนใหม่เข้าที่แล้ว เราจำเป็นต้องนำเอฟเฟกต์การเลื่อน Fading In และ Out ออกจากรูปภาพทั้งหมดในแถวที่ 2

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

• เปิดใช้งานการเฟดเข้าและออก: NO

ตำแหน่งแถว #2

ขั้นตอนสุดท้ายของเราคือการวางตำแหน่งแถวที่ 2 ไว้ด้านหลังแถวที่ 1 วิธีง่ายๆ ในการทำเช่นนี้คือการให้แถวและตำแหน่งที่แน่นอน เปิดการตั้งค่าสำหรับแถว #2 และอัปเดตสิ่งต่อไปนี้:

• ตำแหน่ง: Absolute
• ที่ตั้ง: ท็อปเซ็นเตอร์

ผลสุดท้าย

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

มาดูผลสุดท้ายกัน

และนี่คือบนมือถือ

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

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

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

ไชโย!