การใช้แอนิเมชั่นสไลด์ของ Divi เพื่อแสดงความคืบหน้าของกระบวนการ

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

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

วันนี้ เราจะมาจัดการกับส่วนที่ 5 ซึ่งใช้แอนิเมชั่นที่ยอดเยี่ยมเพื่อแสดงโมดูล Blurb อันน่าทึ่งสี่ชุด การกำหนดเวลาทีละขั้นตอนของแอนิเมชั่นการนำเสนอนั้นช่วยเสริมกระบวนการทีละขั้นตอนที่ใช้การนำเสนอ

มาดำน้ำกันเถอะ!

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

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

สิ่งเดียวที่คุณต้องการจริงๆ สำหรับบทช่วยสอนนี้คือไอคอนรูปภาพ 4 207×188 4 รูปที่ใช้สำหรับโมดูล Blurb นี่คือภาพที่ฉันจะใช้

การใช้แอนิเมชั่นสไลด์ของ Divi เพื่อแสดงความคืบหน้าของกระบวนการ

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

อาคารมาตรา 5

ใช้ Visual Builder เพิ่มส่วนปกติ (ภายใต้หัวข้อ 4 หากคุณติดตามซีรีส์) ก่อนที่คุณจะดำเนินการใดๆ ให้เพิ่มสีพื้นหลัง #f5f9fc ในส่วนของคุณและบันทึกการตั้งค่าของคุณ

เพิ่มหัวข้อของคุณโดยใช้สองโมดูลข้อความ

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

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

เนื้อหา: “การตั้งค่า”

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

แบบอักษรข้อความ: ตัวหนา (B), ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของข้อความ: 15px
สีข้อความ: #6a8091
ระยะห่างของตัวอักษรข้อความ: 5px
ความสูงของบรรทัดข้อความ: 1.9em
การวางแนวข้อความ: ศูนย์

ระยะห่าง: 20px ด้านล่าง

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ขึ้น
ระยะเวลาของแอนิเมชั่น: 850ms

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

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

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

เพิ่ม html ต่อไปนี้ในแท็บข้อความของกล่องเนื้อหา:

<h1>Say Hello to DIVI</h1>

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

แบบอักษรของส่วนหัว: ตัวหนา (B)
การจัดตำแหน่งข้อความส่วนหัว: Center
ขนาดตัวอักษรของส่วนหัว: 39px
สีข้อความส่วนหัว: #2f3a54

หมายเหตุ: เนื่องจากนี่คือส่วนหัว h1 เราจึงต้องแก้ไขการตั้งค่าข้อความส่วนหัว

ความกว้าง: 600px (พิมพ์ค่านี้)
การจัดตำแหน่งโมดูล: ศูนย์
มาร์จิ้นที่กำหนดเอง: 20px ล่างสุด

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ขึ้น
ระยะเวลาของแอนิเมชั่น: 850ms
ความเข้มของแอนิเมชั่น: 12%
ภาพเคลื่อนไหวความเร็ว Curve: Ease-Out

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

ออกแบบ The Four Blurbs

ตอนนี้เราพร้อมที่จะเพิ่มโมดูล Blurb แล้ว ขั้นแรก สร้างแถวที่มีโครงสร้างสี่คอลัมน์ (1/4 1/4 1/4 1/4)

เพิ่ม Blurb Module ลงในคอลัมน์แรก (ซ้ายสุด)

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

ภายใต้แท็บเนื้อหา…
เพิ่ม html ต่อไปนี้ในแท็บข้อความของกล่องเนื้อหา:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p>
<p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>

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

URL: [ป้อน url]
ภาพ: [ป้อนภาพ 207×188 ของคุณ]
สีพื้นหลัง: #ffffff

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

การวางแนวข้อความ: ศูนย์

แบบอักษรส่วนหัว: ค่าเริ่มต้น ตัวหนา (B) ตัวพิมพ์ใหญ่ (TT)
สีข้อความส่วนหัว: #7969f4
ระยะห่างของตัวอักษรส่วนหัว: 3px
ความสูงของบรรทัดส่วนหัว: 3em

สีข้อความ: #6a8091
ความสูงของเส้นร่างกาย: 1.9em

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

สไตล์แอนิเมชั่น: สไลด์
ทิศทางของแอนิเมชั่น: ขึ้น
ระยะเวลาของแอนิเมชั่น: 700ms
ความเข้มของแอนิเมชั่น: 4%
แอนิเมชั่นรูปภาพ/ไอคอน: ไม่มีแอนิเมชั่น

ภายใต้แท็บขั้นสูง…

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในกล่ององค์ประกอบหลัก:

border-radius: 6px;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);

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

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

ไปข้างหน้าและคลิกขวาที่โมดูลและเลือกคัดลอกโมดูล จากนั้นวาง (ctrl + v) โมดูลลงในคอลัมน์ที่เหลือทั้งสามคอลัมน์

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

สำหรับ Blurb Module ในคอลัมน์ที่สอง ให้อัปเดตสิ่งต่อไปนี้:

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

ชื่อเรื่อง: ขั้นตอนที่ 2
เนื้อหา: [อัปเดตข้อความและ URL ลิงก์ด้วยตนเอง]
URL: [อัปเดต url ของข้อความแจ้ง]
ภาพ: [เพิ่มภาพใหม่ 207×188]

ภายใต้แท็บออกแบบ...
สีข้อความส่วนหัว: #e944ff
ภาพเคลื่อนไหวล่าช้า: 50ms
ความเข้มของแอนิเมชั่น: 12%

สำหรับ Blurb Module ในคอลัมน์ที่สาม ให้อัปเดตสิ่งต่อไปนี้:

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

ชื่อเรื่อง: ขั้นตอนที่ 3
เนื้อหา: [อัปเดตข้อความและ URL ลิงก์ด้วยตนเอง]
URL: [อัปเดต url ของข้อความแจ้ง]
ภาพ: [เพิ่มภาพใหม่ 207×188]

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

สีข้อความส่วนหัว: #3ebaef
ภาพเคลื่อนไหวล่าช้า: 100ms
ความเข้มของแอนิเมชั่น: 20%

สำหรับ Blurb Module ในคอลัมน์ที่สี่ ให้อัปเดตสิ่งต่อไปนี้:

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

ชื่อเรื่อง: ขั้นตอนที่ 4
เนื้อหา: [อัปเดตข้อความและ URL ลิงก์ด้วยตนเอง]
URL: [อัปเดต url ของข้อความแจ้ง]
ภาพ: [เพิ่มภาพใหม่ 207×188]

ภายใต้แท็บออกแบบ...
สีข้อความส่วนหัว: #95d624
ภาพเคลื่อนไหวล่าช้า: 150ms
ความเข้มของแอนิเมชั่น: 30%

เมื่อคุณอัปเดต Blurbs ทั้งหมดแล้ว มาอัปเดตการตั้งค่า Row ดังนี้:

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

ใช้ความกว้างที่กำหนดเอง: ใช่
กำหนดความกว้าง: 1366px
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 2

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

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

ตอนนี้คุณทำส่วนนี้เสร็จแล้ว หน้าสาธิตมีรูปภาพอื่นด้านล่างคำประกาศ แต่ฉันไม่คิดว่าจำเป็นต้องรวมไว้ที่นี่

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

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

สนุก!

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

ห่อ

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

กำลังมา

ในตอนที่ 4 ของซีรีส์นี้ ฉันจะแสดงเค้าโครงที่สวยงามสำหรับแสดงผลิตภัณฑ์หรือดาวน์โหลด และแน่นอน ฉันจะเน้นย้ำถึงการใช้แอนิเมชั่นอย่างชาญฉลาดตลอด

จนกว่าจะถึงครั้งต่อไป!

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