วิธีสร้างข้อความและรูปภาพที่เปลี่ยนไปเมื่อเลื่อนใน Divi

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

คุณสามารถดาวน์โหลดเค้าโครงเป็นไฟล์ JSON หรือสร้างใหม่บนเว็บไซต์ Divi ของคุณเอง

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

ดูตัวอย่าง

ก่อนที่เราจะเริ่ม มาดูเลย์เอาต์ของหน้าจอขนาดต่างๆ กัน

เดสก์ทอป

มือถือ

ดาวน์โหลดข้อความและรูปภาพที่เปลี่ยนในส่วนเลื่อนได้ฟรี

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

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

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

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

ดาวน์โหลด

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

สร้างส่วนใหม่ด้วยข้อความและรูปภาพที่เปลี่ยนเมื่อเลื่อน

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

พื้นหลัง

ในการเริ่มต้นสร้างการออกแบบใหม่ ให้เพิ่มส่วนใหม่บนหน้าใหม่หรือหน้าที่มีอยู่ เพิ่มภาพพื้นหลังที่เราให้ไว้ในการดาวน์โหลดด้านบน

• ภาพพื้นหลัง: การออกแบบกล่องและจุด
  • เดสก์ท็อป: รูปภาพ 1
  • แท็บเล็ต: รูปภาพ 2
  • โทรศัพท์: รูปภาพ 3
• ขนาดภาพ: ปก
• ทำซ้ำภาพพื้นหลัง: ทำซ้ำ Y (แนวตั้ง)

ระยะห่าง

เพิ่มระยะห่างบางส่วนให้กับส่วน

• ช่องว่างภายในด้านบนและด้านล่าง: 30%

ทัศนวิสัย

ซ่อนน้ำล้นด้วย

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

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

ทัศนวิสัย

ตอนนี้เพิ่มแถวแรกและปรับการตั้งค่าการมองเห็นในแท็บขั้นสูง

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

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

ข้อความ

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

• เนื้อหา: เนื้อหา H1 – ทีมผลิต

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

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

• ระดับหัวเรื่อง: H1
• แบบอักษร: Fredoke One
• น้ำหนัก: หนา
• สีดำ
• ขนาด
  • เดสก์ท็อป: 100px
  • แท็บเล็ต: 75px
  • โทรศัพท์: 33px
• การเว้นวรรคจดหมาย
  • เดสก์ท็อป: 4px
  • แท็บเล็ต: 3px
  • โทรศัพท์: 2px

ขนาด

จากนั้นปรับความกว้าง

• ความกว้าง: 100%

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

ขนาด

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

• ความกว้าง: 80%
• ความกว้างสูงสุด: 1000px

ทัศนวิสัย

ซ่อนน้ำล้นด้วย

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

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

ข้อความ

เพิ่มโมดูลข้อความอื่น คราวนี้ ป้อนเนื้อหา H2 ที่คุณเลือก

• เนื้อหา: เนื้อหา H2 – การถ่ายภาพชุด

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

จัดรูปแบบหัวเรื่องต่อไป

• ระดับหัวเรื่อง: H2
• น้ำหนัก: หนา
• สไตล์: TT
• สี: Black #000000
• ขนาด
  • เดสก์ท็อป: 50px
  • แท็บเล็ต: 40px
  • โทรศัพท์: 28px
• ระยะห่างระหว่างตัวอักษร: 3px

ระยะห่าง

กำหนดระยะห่างสำหรับโมดูลด้วย

• ระยะขอบบนและล่าง: 0px

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

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มเอฟเฟกต์การเลื่อนต่อไปนี้:

• เฟดเข้าและออก: เปิดใช้งาน
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 42%
  • ความทึบเริ่มต้น:0%
• ความทึบปานกลาง
  • ตำแหน่งล่างสุด: 43%
  • ตำแหน่งสูงสุด: 53%
  • ความทึบปานกลาง: 100%
• วิวพอร์ตด้านบน
  • ตำแหน่ง: 54%
  • ความทึบสิ้นสุด: 0%

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

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

ปรับโมดูลข้อความที่ 2

ข้อความ

เปลี่ยนเนื้อหาในโมดูลข้อความใหม่

• เนื้อหา: เนื้อหา H2 – ทิศทางศิลปะ

ตำแหน่ง

เพิ่มตำแหน่งที่แน่นอนให้กับโมดูลด้วย

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย

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

ถัดไป อัปเดตการตั้งค่าเอฟเฟกต์การเลื่อน

• เฟดเข้าและออก: เปิดใช้งาน
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 56%
  • ความทึบเริ่มต้น:0%
• ความทึบปานกลาง
• ตำแหน่งล่างสุด: 57%
• ตำแหน่งสูงสุด: 67%
• ความทึบปานกลาง: 100%
• วิวพอร์ตด้านบน
  • • ตำแหน่ง: 68%
    • ความทึบสิ้นสุด: 0%

  

ปรับโมดูลข้อความที่ 3

ข้อความ

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

• เนื้อหา: เนื้อหา H2 – อุปกรณ์ประกอบฉากและตู้เสื้อผ้า

ตำแหน่ง

เพิ่มตำแหน่งที่แน่นอนต่อไป

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย

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

จากนั้นแก้ไขเอฟเฟกต์การเลื่อน

• เฟดเข้าและออก: เปิดใช้งาน
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 70%
  • ความทึบเริ่มต้น:0%
• ความทึบปานกลาง
  • ตำแหน่งล่างสุด: 71%
  • ตำแหน่งสูงสุด: 80%
  • ความทึบปานกลาง: 100%
• วิวพอร์ตด้านบน
  • ตำแหน่ง: 81%
  • ความทึบสิ้นสุด: 0%

เพิ่มโมดูลรูปภาพ

ภาพ

ตอนนี้ได้เวลาเพิ่มโมดูลรูปภาพแล้ว ใช้รูปภาพสี่เหลี่ยมจัตุรัสที่มีขนาดรูปภาพ 350 x 350 พิกเซล

• รูปภาพ: รูปภาพสี่เหลี่ยมจัตุรัส 350 x 350 px

การจัดตำแหน่ง

ตั้งค่าการจัดตำแหน่งไปทางซ้าย

• การจัดตำแหน่งภาพ: ซ้าย

ระยะห่าง

ปรับระยะห่างด้วย

• แสดงช่องว่างด้านล่างภาพ: ไม่
• ขอบบน: -60px

ตัวกรอง

จากนั้นเพิ่มฟิลเตอร์เพื่อทำให้ภาพดูไม่อิ่มตัว

• ความอิ่มตัว: 0%

ทัศนวิสัย

ตอนนี้ ย้ายไปที่แท็บขั้นสูง และตั้งค่าโอเวอร์โฟลว์เป็นซ่อน

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

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

สุดท้ายแต่ไม่ท้ายสุด เพิ่มเอฟเฟกต์การเลื่อนเข้าและออก

• เฟดเข้าและออก: เปิดใช้งาน
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 70%
  • ความทึบเริ่มต้น:0%
• ความทึบปานกลาง
  • ตำแหน่ง: 71%
  • กลาง: 100%
• วิวพอร์ตด้านบน
  • ตำแหน่ง: 100%
  • ความทึบสิ้นสุด: 0%

เพิ่มโมดูลการเรียกร้องให้ดำเนินการ

ข้อความ

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

• ชื่อเรื่อง: Jason's Art Team
• ปุ่ม: Book Jason's Art Team
• เนื้อหา: เนื้อหาอธิบาย

ลิงค์

เพิ่มลิงค์ต่อไป

• ลิงค์: ลิงค์ของคุณ

พื้นหลัง

ลบสีพื้นหลังเริ่มต้นด้วย

• ใช้สีพื้นหลัง: ไม่

ข้อความ

จากนั้นตั้งค่าการจัดตำแหน่งไปทางขวา

• การจัดตำแหน่งข้อความ: ขวา

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

จัดรูปแบบข้อความหัวเรื่องด้วย

• ระดับหัวเรื่อง: H3
• แบบอักษร: Fredoke One
• การจัดตำแหน่งข้อความชื่อเรื่อง: ซ้าย
• สี : ดำ #oooooo
• ขนาด
  • เดสก์ท็อป: 48px
  • แท็บเล็ต: 42px
  • โทรศัพท์: 33px
• การเว้นวรรคจดหมาย
  • เดสก์ท็อปและแท็บเล็ต: 1px
  • โทรศัพท์: 0px
• ความสูงของเส้น
  • เดสก์ท็อปและแท็บเล็ต: 1.6em
  • โทรศัพท์: 1.1em

เนื้อความ

จากนั้นเนื้อความ

• แบบอักษร: Verdana
• สี: Black #000000
• ขนาด: 14px
• ระยะห่างระหว่างตัวอักษร: 0.5px

ปุ่ม

ปรับรูปแบบปุ่มด้วย

• สไตล์ที่กำหนดเอง
• ขนาดตัวอักษร: 17px
• สีข้อความ: ขาว #ffffff
• พื้นหลัง: สีดำ #000000
• ระยะห่างระหว่างตัวอักษร: 1px
• แบบอักษร: Verdana
• ขอบบน: 20px
• ช่องว่างด้านบนและด้านล่าง: 10px
• ช่องว่างภายในซ้ายและขวา: 25px

ตำแหน่ง

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

• ตำแหน่ง: ญาติ
• แหล่งกำเนิดออฟเซ็ต: บนซ้าย
• ออฟเซ็ตแนวนอน: 25px

ทัศนวิสัย

จากนั้นซ่อนน้ำล้น

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

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

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

• เฟดเข้าและออก: เปิดใช้งาน
• วิวพอร์ตด้านล่าง
  • ตำแหน่ง: 54%
  • ความทึบเริ่มต้น:0%
• ความทึบปานกลาง
  • ตำแหน่งล่างสุด: 55%
  • ตำแหน่งสูงสุด: 80%
  • กลาง: 100%
• วิวพอร์ตด้านบน
  • ตำแหน่ง: 100%
  • ความทึบสิ้นสุด: 0%

ซ้ำแถวที่ 2

โคลนแถวด้วยโมดูลทั้งหมด

ปรับโมดูลข้อความที่ 1

ข้อความ

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

• เนื้อหา: เนื้อหา H2 / ก่อนการผลิต

ข้อความ

เปลี่ยนการจัดตำแหน่งไปทางขวา

• การจัดตำแหน่งข้อความ: ขวา

ขยายการจัดแนวข้อความ

ใช้การจัดตำแหน่งกับโมดูลข้อความที่ลอกแบบทั้งหมดในแถวเดียวกันนั้น

• ขยายการจัดตำแหน่งข้อความ: ไปยังโมดูลข้อความทั้งหมดในแถวนี้

ปรับโมดูลข้อความที่ 2

ข้อความ

ตอนนี้อัปเดตเนื้อหาในโมดูลข้อความโคลนที่ 2

• เนื้อหา: เนื้อหา H2 / การผลิตตามชุด

ตำแหน่ง

เปลี่ยนตำแหน่งในการตั้งค่าตำแหน่งด้วย

• ตำแหน่ง: บนขวา

ปรับโมดูลข้อความที่ 3

ข้อความ

ตอนนี้เปลี่ยนเนื้อหาของโมดูลข้อความโคลนที่ 3

• เนื้อหา: เนื้อหา H2 / การประสานงานระหว่างทีม

ตำแหน่ง

เปลี่ยนตำแหน่งในการตั้งค่าตำแหน่งด้วย

• ตำแหน่ง: บนขวา

ปรับโมดูลรูปภาพใหม่

ภาพ

ถัดไป เปลี่ยนรูปภาพในโมดูลรูปภาพ

• รูปภาพ: รูปภาพใหม่ 350 x 350px

การจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งภาพด้วย

• การจัดตำแหน่งภาพ: ขวา

ปรับโมดูลการเรียกร้องให้ดำเนินการใหม่

ข้อความ

เปิดโมดูลการเรียกร้องให้ดำเนินการถัดไปและเปลี่ยนเนื้อหาทั้งหมด

• ชื่อเรื่อง: Alice's Production Team
• ปุ่ม: จองทีมผลิตของอลิซ
• เนื้อหา: เนื้อหาอธิบายใหม่

ลิงค์

เปลี่ยนลิงค์ด้วย

• ลิงค์: ลิงค์ใหม่

ข้อความ

ปรับเปลี่ยนการจัดตำแหน่งเช่นกัน

• การจัดตำแหน่งข้อความ: ซ้าย

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

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

• การจัดตำแหน่งข้อความชื่อเรื่อง: ซ้าย

เนื้อความ

เช่นเดียวกับข้อความเนื้อหา

• การจัดตำแหน่งข้อความเนื้อหา: ซ้าย

ขนาด

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

• การจัดตำแหน่งโมดูล: ซ้าย

ตำแหน่ง

สุดท้าย รีเซ็ตการตั้งค่าตำแหน่งเป็นค่าเริ่มต้น เท่านี้ก็เรียบร้อย!

• ตำแหน่ง: รีเซ็ตเป็นค่าเริ่มต้น

ดูตัวอย่าง

มาดูการจัดวางหน้าในขนาดหน้าจอต่างๆ กันเป็นครั้งสุดท้าย

เดสก์ทอป

มือถือ

นั่นคือบทสรุปสำหรับเลย์เอาต์ที่มีข้อความและรูปภาพที่เปลี่ยนไปเมื่อเลื่อน!

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

แจ้งให้เราทราบว่าคุณคิดอย่างไรในความคิดเห็น!