วิธีสร้างเอฟเฟกต์การเลื่อนข้อความอย่างเจ็บแสบใน Divi

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

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

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

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

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

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

ส่วนที่ 1: การออกแบบมาตรา

ในส่วนแรกนี้ เราจะออกแบบพื้นหลังของส่วนสำหรับเค้าโครงส่วนของเรา

สีพื้นหลัง

ในการเริ่มต้น ให้เพิ่มสีพื้นหลังในส่วนเริ่มต้นดังนี้:

• ไล่สีพื้นหลังซ้ายสี: #29c4a9
• สีพื้นหลังไล่ระดับสี: #2b87da

ตัวแบ่ง

ใต้แท็บการออกแบบ ให้เพิ่มตัวแบ่งด้านบนดังนี้:

• สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
• ตัวแบ่งสี: ขาว
• ตัวคั่นพลิก: แนวตั้ง

ระยะห่าง

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

• ขอบ: 80vh บน 80vh ล่าง
• ช่องว่างภายใน: บน 200px ด้านล่าง 200px

กล่องเงาสำหรับพื้นที่ด้านล่างพิเศษ

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

• กล่องเงา: ดูภาพหน้าจอ
• กล่องเงาตำแหน่งแนวนอน: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 100px
• สีเงา: #2b87da

ซ่อนการมองเห็น

จากนั้นตั้งค่าโอเวอร์โฟลว์เป็นซ่อนเพื่อไม่ให้เอฟเฟกต์การเลื่อนของเราปรากฏให้เห็นเมื่อย้ายออกนอกส่วน

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

ส่วนที่ 2: การสร้างเอฟเฟกต์ข้อความอย่างเจ็บแสบ

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

เพิ่มแถวสำหรับครึ่งบนของข้อความ

ขั้นแรก ให้เพิ่มแถวหนึ่งคอลัมน์

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

• ความกว้างของรางน้ำ: 1
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

ซ่อนการมองเห็นคอลัมน์

ถัดไป เปิดการตั้งค่าคอลัมน์และอัปเดตโอเวอร์โฟลว์เป็นซ่อน:

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มโมดูลข้อความ

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

เนื้อหาข้อความ

ในพื้นที่เนื้อหา ให้เพิ่มคำว่า "Slash"

การออกแบบข้อความ

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

• แบบอักษรข้อความ: B612 โมโน
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: #ffffff
• ขนาดข้อความ: 150px (เดสก์ท็อป), 100px (แท็บเล็ต), 60px (โทรศัพท์)
• ระยะห่างของตัวอักษรข้อความ: 0.1em
• การจัดตำแหน่งข้อความ: center

ระยะขอบข้อความ

ที่นี่เราต้องตรวจสอบให้แน่ใจและเพิ่มระยะขอบด้านล่างที่มีขนาดเพียงครึ่งเดียวของข้อความ

• ขอบ: -75px ด้านล่าง (เดสก์ท็อป), -50px (แท็บเล็ต), -30px (โทรศัพท์)

เพิ่มแถวสำหรับครึ่งล่างของข้อความ

แถวที่ซ้ำกัน

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

อัปเดตส่วนต่างของโมดูลข้อความ

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

• ขอบ: -75px ด้านบน (เดสก์ท็อป), -50px ด้านบน (แท็บเล็ต), -30px ด้านบน (โทรศัพท์)

เพิ่มเอฟเฟกต์การเลื่อนไปที่คอลัมน์แถวบนสุด

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

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

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

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

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

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

ภายใต้แท็บการหมุน...

• เปิดใช้งานการหมุน: ใช่
• การหมุนเริ่มต้น: 0 (ที่ 0%)
• การหมุนรอบกลาง: 0 (ที่ 50%)
• สิ้นสุดการหมุน: 1deg (ที่ 75%)

ตอนนี้เอฟเฟกต์ข้อความอย่างเจ็บแสบของเราเสร็จสมบูรณ์แล้ว!

ส่วนที่ 3: การสร้างตัวแบ่งแบบเคลื่อนที่

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

นี่คือวิธีการทำ

เพิ่มแถว

เพิ่มแถวหนึ่งคอลัมน์ใต้แถวที่สอง

เพิ่มโมดูลตัวแบ่ง

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

พื้นหลังตัวแบ่ง

จากนั้นเลือกไม่แสดงตัวแบ่ง ให้กำหนดสีพื้นหลังให้กับตัวแบ่งแทนดังนี้:

• พื้นหลังไล่ระดับซ้ายสี: โปร่งใส
• การไล่สีพื้นหลังด้านขวา: #29c4a9

แปลงมาตราส่วน

จากนั้นอัปเดตความสูงและเลื่อนไปทางซ้ายโดยใช้ตัวเลือกการแปลการแปลง

• ส่วนสูง: 4px
• แปลงแกน X แปล: -100%

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

ตอนนี้เพิ่มเอฟเฟกต์การเลื่อนเพื่อย้ายตัวแบ่งไปทางขวา

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

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: -18 (ที่ 25%)
• ออฟเซ็ตกลาง: 0 (ที่ 50%)
• ออฟเซ็ตสิ้นสุด: 13 (ที่ 75%)

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

เพื่อให้แน่ใจว่าตัวแบ่ง "ทับ" ตรงกลางข้อความ เราจำเป็นต้องอัปเดตการตั้งค่าแถวดังนี้:

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง
• ตำแหน่ง: Absolute
• ที่ตั้ง: left center
• ดัชนี Z: 9

ตอนนี้ตัวแบ่งจะเดินทางจากซ้ายไปขวาทับตรงกลางข้อความ

ส่วนที่ 4: การเพิ่มเนื้อความ

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

เพิ่มแถว

เพิ่มแถวหนึ่งคอลัมน์ใหม่ใต้แถวที่มีตัวแบ่ง

เพิ่มโมดูลข้อความ

จากนั้นเพิ่มโมดูลข้อความใหม่ในแถว

เนื้อหาข้อความ

จากนั้นวาง HTML ต่อไปนี้ลงในพื้นที่เนื้อหา:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

การออกแบบข้อความ

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

• สีข้อความ: #ffffff
• ลิงค์สีข้อความ: #121212
• ขนาดข้อความลิงก์: 20px

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

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

• ความกว้างของรางน้ำ: 1
• ความกว้างสูงสุด: 400px
• ตำแหน่ง: Absolute
• ที่ตั้ง: ตรงกลางด้านล่าง
• ออฟเซ็ตแนวตั้ง: 20px (เดสก์ท็อปและแท็บเล็ต), -25px (โทรศัพท์)

ผลสุดท้าย

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

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

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

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

ไชโย!