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

ผลลัพธ์สุดท้ายที่เป็นไปได้

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

1. สร้างส่วนเต็มหน้าจอแรกของหน้า

เพิ่มหัวข้อใหม่

สีพื้นหลัง

เริ่มต้นด้วยการเพิ่มส่วนแรกในหน้าเกี่ยวกับของคุณ เปิดการตั้งค่าส่วนและเปลี่ยนสีพื้นหลังเป็นสีดำ

• สีพื้นหลัง: # 000000

ปรับขนาด

จากนั้นหมุนส่วนเป็นแบบเต็มหน้าจอโดยเพิ่มความสูงขั้นต่ำในพารามิเตอร์การปรับขนาด

• ความสูงขั้นต่ำ: 100vh

2. เพิ่มบรรทัดภาพเคลื่อนไหว

เพิ่มบรรทัดใหม่

โครงสร้างคอลัมน์

จากนั้นเพิ่มแถวใหม่ในส่วนของคุณโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ปรับขนาด

เปิดพารามิเตอร์บรรทัดและอนุญาตให้บรรทัดใช้ความกว้างทั้งหมดของคอนเทนเนอร์ส่วนโดยแก้ไขพารามิเตอร์การกำหนดขนาด

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

การเว้นวรรค

จากนั้นเพิ่มการเติมด้านซ้ายและขวาบนหน้าจอขนาดต่างๆ

• ช่องว่างด้านซ้าย: 20vw (โต๊ะทำงาน), 10vw (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในขวา: 20vw (โต๊ะทำงาน) 10vw (แท็บเล็ตและโทรศัพท์)

นิเมชั่น

เพื่อเพิ่มเอฟเฟกต์การเล่าเรื่องเราจะใช้แอนิเมชั่นจาง ๆ สำหรับเส้นด้วย

• รูปแบบภาพเคลื่อนไหว: Fade
• ระยะเวลาการเคลื่อนไหว: 3000 มิลลิวินาที
• เส้นโค้งความเร็วของภาพเคลื่อนไหว: เข้า - ออกได้ง่าย
• ภาพเคลื่อนไหวซ้ำ: หนึ่งครั้ง

ตำแหน่ง

ในที่สุดเราจะตรวจสอบให้แน่ใจว่าบรรทัดนั้นอยู่ในตำแหน่งกึ่งกลางของส่วนคอนเทนเนอร์โดยการแก้ไขตัวเลือกตำแหน่ง

• ตำแหน่ง: สัมบูรณ์
• สถานที่ตั้ง: ศูนย์กลาง

3. ใส่ชื่อเรื่องพร้อมเอฟเฟกต์การเลื่อน

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

เพิ่มเนื้อหา H1

โมดูลเดียวที่เราต้องการในบรรทัดนี้คือโมดูลข้อความที่มี เนื้อหา H1

ชื่อ 1 การตั้งค่าข้อความ

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

• แบบอักษรของชื่อเรื่อง: Nunito
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนากึ่ง
• สีข้อความส่วนหัว: #ffffff
• ขนาดข้อความส่วนหัว: 7vw (เดสก์ท็อป), 9vw (แท็บเล็ต), 11vw (โทรศัพท์)

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

นอกจากนี้เรายังจะเพิ่มภาพเคลื่อนไหวแนวตั้งที่บอบบาง

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

เอฟเฟกต์การเลื่อนเข้าและออก

พร้อมเอฟเฟกต์จางหายเข้าและออก

• เปิดใช้งานจางหายไป: ใช่
• ความทึบเริ่มแรก: 100%
• ความทึบแสงเฉลี่ย: 100% (ที่ 55%)
• สิ้นสุดความทึบ: 0% (ถึง 62%)

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

สุดท้าย แต่ไม่ท้ายสุดเราจะใช้เอฟเฟกต์การเลื่อนขึ้นและลง

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• ระดับเริ่มต้น: 100% (ถึง 40%)
• ระดับเฉลี่ย: 95% (ถึง 74%)
• ขนาดสิ้นสุด: 90%

4. โคลนส่วนทั้งหมดครั้งเดียวและรวมถึงข้อความคำอธิบายที่มีผลการเลื่อน

แก้ไขชื่อและเนื้อหา

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

แก้ไขพารามิเตอร์ข้อความของโมดูลข้อความ H2

เปลี่ยนการตั้งค่าข้อความ H2 ตามลำดับ:

• ตำแหน่ง 2 ตำรวจ: Nunito
• ชื่อแบบอักษร 2: ตัวหนากึ่ง
• สีข้อความของรายการ 2: #ffffff
• รายการ 2 ขนาดตัวอักษร: 5vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ความสูงของบรรทัด 2: 1em (สำนักงาน), 1.2em (แท็บเล็ตและโทรศัพท์)

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

เพิ่มเนื้อหา

ถัดไป เพิ่มโมดูลข้อความอื่นในคอลัมน์ที่มี a เนื้อหา คำอธิบายที่คุณเลือก

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: เปิด Sans
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงบรรทัดข้อความ: 3.1em (โต๊ะทำงาน), 2.5em (แท็บเล็ตและโทรศัพท์)

การเว้นวรรค

ใช้ระยะขอบบนสุดด้วย

• ขอบบน: 8vw

เอฟเฟกต์การเลื่อนเข้าและออก

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

• เปิดใช้งานจางหายไป: ใช่
• ความทึบเริ่มแรก: 100%
• ความทึบแสงเฉลี่ย: 0% (ที่ 31%)
• ความทึบสุดท้าย: 0% (ถึง 35%)

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

เพิ่มเอฟเฟกต์การปรับขนาดขึ้นและลง

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• ระดับเริ่มต้น: 100% (ถึง 40%)
• ระดับเฉลี่ย: 95% (ถึง 74%)
• ขนาดสิ้นสุด: 90%

ตอนนี้คุณสามารถโคลนส่วนสุดท้ายนี้ได้บ่อยที่สุดเท่าที่จะเป็นไปได้ อย่างไรก็ตาม คุณจะต้องปรับ เนื้อหา ของแต่ละส่วนตามความต้องการของคุณ

การสำรวจ

ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ

คิดสุดท้าย

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