วิธีบอกเล่าเรื่องราวของคุณบน Scroll ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

ดาวน์โหลด The About Page Story บน Scroll Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

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

เพิ่มมาตราใหม่

สีพื้นหลัง

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

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

ขนาด

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

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

2. เพิ่มแถวเคลื่อนไหว

เพิ่มแถวใหม่

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

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

ขนาด

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

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

ระยะห่าง

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

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

แอนิเมชั่น

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

• สไตล์แอนิเมชั่น: Fade
• ระยะเวลาแอนิเมชั่น: 3000ms
• ภาพเคลื่อนไหวความเร็ว Curve: Ease-In-Out
• ภาพเคลื่อนไหวซ้ำ: Once

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ที่ตั้ง: Center

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 ไปยังคอลัมน์

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

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

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

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

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

ระยะห่าง

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

• ขอบบน: 8vw

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

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

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

เอฟเฟกต์เลื่อนขึ้นและลง

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

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

5. โคลนส่วนที่สองได้มากเท่าที่คุณต้องการ

เปลี่ยนเนื้อหาตามที่คุณไป

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

6. กรอกหน้าด้วยมาตรา CTA

เปลี่ยนคำอธิบาย ระยะห่างโมดูลข้อความ

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

• อัตรากำไรขั้นต้น: 4vw
• ระยะขอบล่าง: 4vw

เพิ่มโมดูลปุ่ม

เพิ่มสำเนา

จากนั้นเพิ่มโมดูลปุ่มพร้อมกับสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #FFFFFF
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 100px
• แบบอักษรของปุ่ม: Nunito
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

ระยะห่าง

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

• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)
• Padding ขวา: 3vw (เดสก์ท็อป), 6vw (แท็บเล็ต), 8vw (โทรศัพท์)

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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