วิธีแฟลชขั้นตอนสู่กระบวนการอย่างค่อยเป็นค่อยไปด้วยเอฟเฟกต์การเลื่อนของ Divi

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

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

แอบมอง

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

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

ง่ายพอจนถึงตอนนี้ ตอนนี้ขอเริ่มเพิ่มเนื้อหาบางส่วน

การเพิ่มเนื้อหา (ขั้นตอน) ลงในแต่ละคอลัมน์

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

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

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

เนื้อหาและการออกแบบโมดูลข้อความ

จากนั้นอัปเดตเนื้อหาข้อความดังนี้:

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

• แบบอักษรของข้อความ: Lato
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #fc6d71
• แบบอักษรของหัวเรื่อง 2: Oswald
• หัวข้อ 2 น้ำหนักแบบอักษร: เบา
• หัวเรื่อง 2 ขนาดข้อความ: 32px
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 1px
• ส่วนหัว 2 ความสูงของบรรทัด: 1.3em
• ระยะขอบ: 0px ด้านล่าง
• เบาะ: 10% บน 10% ล่าง
• ความกว้างของเส้นขอบ: 1px
• เส้นขอบสี: rgba(166,166,166,0.16)

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

เมื่อโมดูลข้อความอยู่ในตำแหน่งแล้ว ให้เพิ่มโมดูลรูปภาพด้านล่างโมดูลข้อความในคอลัมน์ 1

จากนั้นอัปเดตขอบภาพดังนี้:

คัดลอกและวางคอลัมน์ 1 เนื้อหา

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

อัปเดตเนื้อหาสำหรับโมดูลที่ซ้ำกัน

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

เมื่อเสร็จแล้ว การออกแบบของคุณควรมีลักษณะดังนี้

การเพิ่มเอฟเฟกต์การเลื่อนในแต่ละคอลัมน์

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

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

เอฟเฟกต์การเลื่อนคอลัมน์ 1

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

ใต้แท็บตัวเลือก Fading In and Out:

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

เอฟเฟกต์การเลื่อนคอลัมน์ 2

เปิดการตั้งค่าสำหรับคอลัมน์ 2 และเพิ่มเอฟเฟกต์การเลื่อนต่อไปนี้:

ใต้แท็บตัวเลือก Fading In and Out:

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

เอฟเฟกต์การเลื่อนคอลัมน์ 3

เอฟเฟกต์การเลื่อนคอลัมน์ 4

การเพิ่มหัวเรื่อง

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

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

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งข้อความ: Lato
• หัวข้อ 2 น้ำหนักแบบอักษร: เบา
• ส่วนหัว 2 รูปแบบตัวอักษร: TT
• หัวเรื่อง 2 สีข้อความ: #fc6d71
• ขนาดข้อความของหัวเรื่อง 2: 70px (เดสก์ท็อป), 40px (แท็บเล็ต), 24px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 0.5em

ผลสุดท้าย

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

นี่คือผลลัพธ์

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

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

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

ไชโย!