การใช้ภาพเคลื่อนไหวของ Divi เพื่อม้วนเนื้อหาของคุณเข้าสู่มุมมอง

ยินดีต้อนรับสู่ตอนที่ 5 ของซีรีส์ 6 ตอนที่นี้จะสอนวิธีใช้ตัวเลือกแอนิเมชั่นใหม่ของ Divi เพื่อออกแบบส่วนหน้าที่ยอดเยี่ยม ฉันจะแนะนำคุณเกี่ยวกับวิธีสร้างส่วนต่างๆ ของหน้าสาธิตสดของเรา เพื่อแสดงเทคนิคในการเพิ่มแอนิเมชั่นลงในเว็บไซต์ของคุณ คุณสมบัติของแอนิเมชั่นนั้นสนุกและใช้งานง่ายอย่างแท้จริง และด้วย Visual Builder คุณจะเห็นการสร้างสรรค์ของคุณมีชีวิตขึ้นมาในทุกขั้นตอน มาร่วมกับฉันในขณะที่เราสำรวจพลังของอนิเมชั่น Divi

ในโพสต์ล่าสุดของเรา เราได้สร้างส่วนที่ 6 ของหน้าสาธิตแอนิเมชั่นของเรา ฉันแสดงวิธีออกแบบเลย์เอาต์สำหรับแสดงการดาวน์โหลดผลิตภัณฑ์ด้วยสีสันสดใส เงาเรืองแสง และแอนิเมชั่นที่แม่นยำ

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

นี่เป็นหนึ่งในแอนิเมชั่นที่ฉันชอบ มาเริ่มกันเลย.

นี่คือตัวอย่างคร่าวๆ ของการออกแบบและแอนิเมชั่นที่เราจะสร้างในโพสต์ของวันนี้

การเตรียมองค์ประกอบการออกแบบ

คุณจะต้องมีภาพสามภาพสำหรับบทช่วยสอนนี้ ภาพแนวตั้งสองภาพแรกควรหมุนประมาณ 580×950 ที่มุมทวนเข็มนาฬิกา 10% รูปภาพแนวนอนควรมีขนาด 1250×608 (หมุนที่มุมทวนเข็มนาฬิกา 10% ด้วย) โดยมีพื้นที่พื้นหลังโปร่งใสเพิ่มเติมประมาณ 300px ทางด้านขวาของรูปภาพ เพื่อให้พอดีกับคอลัมน์ที่จัดไว้ให้พอดี ตรวจสอบให้แน่ใจว่ารูปภาพในโทรศัพท์อยู่ในรูปแบบ png โดยมีพื้นหลังโปร่งใส นี่คือรูปภาพที่ฉันใช้สำหรับโพสต์ของวันนี้

รูปภาพโทรศัพท์แนวตั้ง #1

รูปภาพในโทรศัพท์แนวตั้ง #2

รูปภาพโทรศัพท์แนวตั้ง #3

การใช้ภาพเคลื่อนไหวของ Divi เพื่อม้วนเนื้อหาของคุณเข้าสู่มุมมอง

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

อาคารส่วนที่ 7 ของการสาธิต

ก่อนที่เราจะเริ่มกระบวนการสร้าง ต่อไปนี้คือภาพรวมคร่าวๆ ของมุมมองโครงลวดของเลย์เอาต์ส่วนที่เราจะสร้างโดยใช้ตัวสร้างภาพ

ใช้ Visual Builder เริ่มต้นด้วยการเพิ่มส่วนปกติอื่นในเลย์เอาต์ของเรา จากนั้นเพิ่มสามคอลัมน์ (หนึ่งในสี่หนึ่งในสี่ครึ่ง) ในส่วนของคุณ

อัปเดตการตั้งค่าแถว

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

ภายใต้แท็บออกแบบ...

ใช้ความกว้างที่กำหนดเอง: ใช่
ความกว้างที่กำหนดเอง: 91%
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 1

คอลัมน์ 2 ช่องว่างภายในแบบกำหนดเอง: 5% ด้านบน
คอลัมน์ 3 ช่องว่างภายในแบบกำหนดเอง: 24% ด้านบน

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

ในคอลัมน์แรก (ซ้ายสุด) ของเลย์เอาต์ของเรา ให้เพิ่ม Image Module และอัปเดตการตั้งค่ารูปภาพดังนี้:

ภายใต้แท็บเนื้อหา…

URL รูปภาพ: [อัปโหลดรูปภาพ #1]

ภายใต้แท็บออกแบบ...

บังคับเต็มความกว้าง: ใช่

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

บันทึกการตั้งค่า

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

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

เพิ่มโมดูลตัวแบ่งในคอลัมน์

จากนั้นอัปเดตการตั้งค่าดังนี้:

ภายใต้แท็บเนื้อหา…

แสดงตัวแบ่ง: ใช่

ภายใต้แท็บออกแบบ...

สี: #e0c48f
น้ำหนักตัวแบ่ง: 3px
ความกว้าง: 60px (คุณต้องพิมพ์ค่านี้เนื่องจากค่าเริ่มต้นคือเปอร์เซ็นต์)
การจัดตำแหน่งโมดูล: ค่าเริ่มต้น (ซ้าย)
ช่องว่างภายในที่กำหนดเอง: ด้านบน 80px, ด้านซ้าย 80px

สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ขวา
ระยะเวลาของแอนิเมชั่น: 1200ms
ภาพเคลื่อนไหวล่าช้า: 50ms
ความเข้มของแอนิเมชั่น: 70%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%

บันทึกการตั้งค่า

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

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: “1000 คำ”
ข้อความปุ่ม: “เรียนรู้เพิ่มเติม”
เนื้อหา: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagitis mi id”
ลิงค์: #
ใช้สีพื้นหลัง: NO

ภายใต้แท็บออกแบบ...

สีข้อความ: Dark
การวางแนวข้อความ: ซ้าย
แบบอักษรของส่วนหัว: Lato, Bold (B) ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของส่วนหัว: 38px
สีข้อความส่วนหัว: #33454f
ระยะห่างระหว่างหัวกระดาษ: 0.2em
ความสูงของบรรทัดส่วนหัว: 1.4em

แบบอักษรของร่างกาย: Lato
ขนาดตัวอักษรของร่างกาย: 18px
สีข้อความ: #9b9b9b
ความสูงของเส้นร่างกาย: 1.8em

ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
ขนาดข้อความของปุ่ม: 15px
สีข้อความของปุ่ม: #f2733c
ปุ่มสีพื้นหลัง: rgba(225,225,225,0)
ความกว้างของขอบปุ่ม: 0px
ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
แบบอักษรของปุ่ม: Lato, Bold (B), ตัวพิมพ์ใหญ่ (TT)
ไอคอนปุ่ม: ลูกศรขวา
แสดงเฉพาะไอคอนบนโฮเวอร์สำหรับปุ่ม: NO
ปุ่มโฮเวอร์ตัวอักษรระยะห่าง: 0px

สไตล์แอนิเมชั่น: พับ
ทิศทางของแอนิเมชั่น: ขวา
ระยะเวลาของแอนิเมชั่น: 1200ms
ภาพเคลื่อนไหวล่าช้า: 50ms
ความเข้มของแอนิเมชั่น: 70%
ภาพเคลื่อนไหวเริ่มต้นความทึบ: 0%

บันทึกการตั้งค่า

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

ถัดไป เพิ่มโมดูลรูปภาพภายใต้โมดูลการเรียกร้องให้ดำเนินการที่คุณเพิ่งสร้างขึ้น อัปเดตการตั้งค่ารูปภาพดังนี้:

ภายใต้แท็บเนื้อหา…

URL รูปภาพ: [อัปโหลดรูปภาพ #2]

ภายใต้แท็บออกแบบ...

บังคับเต็มความกว้าง: ใช่

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

เพิ่มรูปภาพ #3

นั่นคือสำหรับคอลัมน์ที่สอง (กลาง) ของเรา ตอนนี้ มาเพิ่มรูปภาพ #3 ในคอลัมน์ที่สาม (ขวาสุด) ในการทำเช่นนี้ เราสามารถทำซ้ำ/คัดลอกโมดูลรูปภาพที่คุณเพิ่งเพิ่มไว้ที่ด้านล่างของคอลัมน์ที่สองแล้ววางลงในคอลัมน์ที่สาม เนื่องจากสไตล์แอนิเมชั่นเหมือนกัน คุณจึงต้องอัปเดตสำหรับโมดูลรูปภาพใหม่คือ URL รูปภาพจริง

ทำซ้ำและปรับแต่งตัวแบ่งและคำกระตุ้นการตัดสินใจ MODule

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

สำหรับโมดูลตัวแบ่ง ให้เปลี่ยนการตั้งค่าทิศทางของแอนิเมชันภายใต้แท็บออกแบบเป็น "ซ้าย"

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

ภายใต้แท็บเนื้อหา…

ชื่อเรื่อง: การสร้างวิถีใหม่

ภายใต้แท็บออกแบบ...

ช่องว่างภายในที่กำหนดเอง: 80px ขวา, 80px ด้านล่าง, 80px ซ้าย

ทิศทางของแอนิเมชั่น: ซ้าย

ตอนนี้เรามาดูผลลัพธ์สุดท้ายของเรา…

โบนัส: ดาวน์โหลดส่วนเหล่านี้เพื่อการนำเข้าที่ง่ายดาย

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

สนุก!

ดาวน์โหลด The Layout Pack

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

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

ดาวน์โหลด

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

หากต้องการใช้การดาวน์โหลดเหล่านี้ ให้เริ่มต้นด้วยการค้นหาไฟล์ซิปชื่อ Animation_Effects_Part_5.zip ในโฟลเดอร์ดาวน์โหลดของเรา เปิดเครื่องรูดเพื่อเปิดเผยการนำเข้าต่อไปนี้

เอฟเฟกต์ภาพเคลื่อนไหว ตอนที่ 5 (ตอนที่ 1).json

เอฟเฟกต์ภาพเคลื่อนไหว ตอนที่ 5 (ตอนที่ 2).json

นำทางในผู้ดูแลระบบ WordPress ของคุณไปที่ Divi > Divi Library > Import & Export เมื่อโมดอลพกพาปรากฏขึ้น ให้คลิกแท็บนำเข้าและปุ่มที่มีป้ายกำกับว่าเลือกไฟล์

เลือกไฟล์ json ที่คุณต้องการแล้วคลิก "นำเข้า Divi Builder Layouts" เมื่อการนำเข้าเสร็จสมบูรณ์ ไปที่โพสต์หรือเพจที่คุณต้องการเพิ่มส่วนใดส่วนหนึ่งด้านบน

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

ห่อ

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

กำลังมา

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

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