วิธีซิงโครไนซ์การขยายสำเนาบน Scroll ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลด The Expanding Copy on Scroll Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

1. สร้างการออกแบบส่วน

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

สีพื้นหลัง

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

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถว #1

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

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 90%
• ความกว้างสูงสุด: 1380px

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 150px
• ช่องว่างภายในด้านล่าง: 150px

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

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

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

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

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

• แบบอักษรของข้อความ: Livvic
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #f1f1f1
• ขนาดตัวอักษร: 170px (เดสก์ท็อป), 100px (แท็บเล็ต), 70px (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1em

• ข้อความเงา ความยาวแนวนอน: 0.06em
• ข้อความเงา ความยาวแนวตั้ง: 0em
• ข้อความเงาสี: rgba(79,79,79,0.74)
• การจัดตำแหน่งข้อความ: กึ่งกลาง (เดสก์ท็อป), ซ้าย (แท็บเล็ตและโทรศัพท์)

โคลนโมดูลข้อความสองครั้ง

โคลนโมดูลข้อความสองครั้ง

เปลี่ยนเนื้อหา

แก้ไขเนื้อหาของโมดูลข้อความที่ซ้ำกันทั้งสอง

เพิ่มแถว #2

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

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

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดตามลำดับ:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของแถวถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ชายแดน

เพิ่มเส้นขอบด้านบนต่อไป

• ความกว้างขอบด้านบน: 1px
• สีขอบบน: #4c4c4c

การตั้งค่าคอลัมน์

ระยะห่าง

เรากำลังเปลี่ยนแปลงการตั้งค่าคอลัมน์ด้วย เปิดการตั้งค่าและเพิ่มค่าช่องว่างภายในที่กำหนดเอง

• ช่องว่างภายในด้านบน: 5vw
• แผ่นรองด้านล่าง: 10vw
• ช่องว่างภายในด้านซ้าย: 6vw
• ช่องว่างภายในด้านขวา: 6vw

ชายแดน

ใช้เส้นขอบด้านขวาเช่นกัน

• ความกว้างของขอบขวา: 1px
• สีขอบขวา: #4c4c4c

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

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

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

เลือกไอคอน

เลือกไอคอนที่คุณต้องการถัดไป

การตั้งค่าไอคอน

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

• สีไอคอน: #a3acff
• การจัดตำแหน่งรูปภาพ/ไอคอน: ซ้าย

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

แก้ไขการตั้งค่าข้อความชื่อเรื่องด้วย

• แบบอักษรของชื่อเรื่อง: Livvic
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความชื่อเรื่อง: #c1c1c1
• ขนาดข้อความชื่อเรื่อง: 35px

• หัวเรื่อง ข้อความเงา ความยาวแนวนอน: 0.06em
• ชื่อเรื่อง ข้อความเงา ความยาวแนวตั้ง: 0em
• ชื่อข้อความเงาสี: rgba(79,79,79,0.74)

การตั้งค่าข้อความเนื้อหา

เรากำลังเปลี่ยนแปลงการตั้งค่าข้อความเนื้อหาด้วยเช่นกัน

• สีข้อความ: #878787
• ขนาดข้อความเนื้อหา: 16px
• ความสูงของเส้นร่างกาย: 2.4em

หัวข้อประกาศ CSS

และเราจะสร้างช่องว่างรอบๆ หัวเรื่องด้วยโค้ด CSS บรรทัดเดียว ซึ่งเราจะเพิ่มไปยังหัวข้อการนำเสนอในแท็บขั้นสูง

margin: 30px 0 40px 0;

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

เมื่อคุณทำทั้งคอลัมน์และโมดูล Blurb เสร็จแล้ว คุณสามารถโคลนทั้งคอลัมน์ได้สองครั้ง

ลบคอลัมน์ 3 เส้นขอบ

เปิดการตั้งค่าคอลัมน์ 3 และลบเส้นขอบด้านขวา

• ความกว้างของเส้นขอบขวา: 0px

เปลี่ยนเนื้อหา

และเปลี่ยนเนื้อหา Blurb Module สำหรับแต่ละรายการที่ซ้ำกัน

2. เพิ่มเอฟเฟกต์การเลื่อน

ส่วน

ปรับขนาดขึ้นและลง

ถึงเวลาเพิ่มเอฟเฟกต์การเลื่อนโดยเริ่มจากส่วน ใช้เอฟเฟกต์การเลื่อนขึ้นและลงโดยมีค่าต่อไปนี้:

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• ระดับเริ่มต้น: 70%
• ระดับกลาง: 100%
• สเกลสิ้นสุด: 100%

โมดูลข้อความ #1

จางหายเข้าและออก

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

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

ปรับขนาดขึ้นและลง

ใช้เอฟเฟกต์การปรับขนาดขึ้นและลงด้วย

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

ขยายเอฟเฟกต์การเลื่อนโมดูลข้อความ #1

ดำเนินการต่อโดยขยายเอฟเฟกต์การเลื่อนไปยังโมดูลข้อความอีกสองโมดูลในคอลัมน์

• ถึง: ข้อความทั้งหมด
• ตลอด: คอลัมน์นี้

โมดูล Blurb #1

ปรับขนาดขึ้นและลง

ต่อไป เราจะเพิ่มเอฟเฟกต์การเลื่อนขึ้นและลงในโมดูล Blurb ในคอลัมน์ 1

• เปิดใช้งานการปรับขนาดขึ้นและลง: ใช่
• มาตราส่วนเริ่มต้น:
  • เดสก์ท็อป: 0%
  • แท็บเล็ตและโทรศัพท์: 100%
• ระดับกลาง: 100% (ที่ 33%)
• สเกลสิ้นสุด: 100% (ที่ 64%)

ขยายเอฟเฟกต์การเลื่อน Blurb Module #1

จบบทช่วยสอนโดยขยายเอฟเฟกต์การเลื่อนไปยังโมดูล Blurb ทั้งหมดในแถว เท่านี้ก็เรียบร้อย!

• ถึง: ประกาศทั้งหมด
• ตลอด: แถวนี้

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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