วิธีทำเครื่องหมายส่วน Divi ใหม่ด้วยรูปร่างการเคลื่อนไหวที่ละเอียดอ่อน

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

ไปกันเถอะ

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ตัวอย่าง #3

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงรูปร่างเคลื่อนไหวที่ละเอียดอ่อนได้ฟรี

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

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

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

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

ดาวน์โหลด

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

ขั้นตอนทั่วไป

อัปโหลดเค้าโครงหน้า Landing Page ของหอศิลป์

สำหรับบทช่วยสอนนี้ เราจะใช้ Art Gallery Layout Pack แต่คุณสามารถใช้เทคนิคนี้กับเว็บไซต์ประเภทใดก็ได้ที่คุณกำลังสร้าง เพิ่มหน้าใหม่และอัปโหลดหน้า Landing Page ของชุดเค้าโครง

เพิ่มแถวใหม่ที่ด้านล่างของส่วน #1

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

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

ขนาด

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

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

ระยะห่าง

แก้ไขค่าระยะขอบและช่องว่างภายในด้วย

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

ลบส่วนที่ #1 ด้านล่าง Padding

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

• ช่องว่างภายใน: 0vw

สร้างตัวอย่างใหม่ #1

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

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

เส้น

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

• สีเส้น: #ffa100

ขนาด

แก้ไขการตั้งค่าขนาดของโมดูลด้วย

• น้ำหนักตัวแบ่ง: 50px
• ส่วนสูง: 50px

ระยะห่าง

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

• ระยะขอบซ้าย: -200px (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ระยะขอบขวา: -200px (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านซ้าย: 15vw
• ช่องว่างภายในด้านขวา: 15vw

แปลงร่างเอียง

นอกจากนี้ เราจะแปลงโมดูลเล็กน้อยด้วยการเพิ่มค่าความเบ้ด้านล่างในการตั้งค่าการแปลง

• ด้านล่าง: 60deg

เอฟเฟกต์การเลื่อนแนวนอน

ถึงเวลาเพิ่มเอฟเฟกต์การเลื่อนแบบต่างๆ ให้กับโมดูลของเราแล้ว! อันดับแรก เราจะเพิ่มการเคลื่อนไหวในแนวนอน

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: 0
• ออฟเซ็ตกลาง: 0 (ที่ 80%)
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: 20 (ที่ 85%)
  • แท็บเล็ตและโทรศัพท์: 5 (ที่ 85%)

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

เราจะเพิ่มเอฟเฟกต์เฟดเข้าและออกด้วย

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

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

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

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

โมดูลแบ่งโคลน #1

เมื่อคุณสร้างโมดูลตัวแบ่งเสร็จแล้ว คุณสามารถโคลนได้

แก้ไขสีเส้น

เปิดการตั้งค่าโมดูลที่ซ้ำกันและเปลี่ยนสีของเส้น

• สีเส้น: #24252d

แก้ไขระยะห่าง

แก้ไขค่าระยะห่างของโมดูลด้วย

• ระยะขอบซ้าย: -200px (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ระยะขอบขวา: -200px (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านซ้าย: 25vw
• ช่องว่างภายในด้านขวา: 25vw

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

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

• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: -20
  • แท็บเล็ตและโทรศัพท์: -5

สร้างตัวอย่างใหม่ #2

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

ทัศนวิสัย

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

• แสดงตัวแบ่ง: ใช่

เส้น

แก้ไขสีเส้นของโมดูลถัดไป

• สีเส้น: #ffa100

ขนาด

เปลี่ยนการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 200px
• ความกว้าง: 200px
• การจัดตำแหน่งโมดูล: ศูนย์
• ส่วนสูง: 200px

ชายแดน

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

• ทุกมุม: 200px

เอฟเฟกต์การเลื่อนแนวนอน

ถึงเวลาเพิ่มเอฟเฟกต์การเลื่อน! เอฟเฟกต์แรกที่เราใช้คือการเคลื่อนไหวในแนวนอน

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: -2
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: 20
  • แท็บเล็ตและโทรศัพท์: 5

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

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

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

โมดูลตัวแบ่งโคลน

ไปข้างหน้าและโคลนโมดูลตัวแบ่งทั้งหมด

เปลี่ยนสีเส้น

เปิดรายการที่ซ้ำกันและเปลี่ยนสีเส้น

• สีเส้น: #24252d

แก้ไขระยะห่าง

เพิ่มระยะขอบด้านบนด้วย

• อัตรากำไรขั้นต้น: -200px

เปลี่ยนเอฟเฟกต์การเลื่อนแนวนอน

จากนั้นไปที่การตั้งค่าเอฟเฟกต์การเลื่อนแนวนอนและเปลี่ยนออฟเซ็ตสิ้นสุด

• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: -20
  • แท็บเล็ตและโทรศัพท์: -5

สร้างตัวอย่างใหม่ #3

เพิ่มการเติมแถว

สู่ตัวอย่างต่อไปและสุดท้าย! เริ่มต้นด้วยการเปิดแถวที่คุณสร้างขึ้นในขั้นตอนทั่วไปของบทช่วยสอนนี้ และเปลี่ยนค่าช่องว่างภายในในการตั้งค่าการเว้นวรรค

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

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

ทัศนวิสัย

เพิ่มโมดูลตัวแบ่งใหม่ในแถวสุดท้ายของส่วนของคุณและซ่อนตัวแบ่ง

• แสดงตัวแบ่ง: ไม่

พื้นหลังไล่โทนสี

เพิ่มพื้นหลังไล่ระดับสีต่อไป

• สี 1: #ffa100
• สี 2: #f77f00
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 121deg

ขนาด

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

• ความกว้าง: 200px
• การจัดตำแหน่งโมดูล: ศูนย์
• ส่วนสูง: 0px

ระยะห่าง

เรากำลังเพิ่มการเติมด้านบนและด้านล่างแบบกำหนดเองบางส่วนต่อไป

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

เอฟเฟกต์การเลื่อนแนวนอน

ตอนนี้ ได้เวลาเพิ่มเอฟเฟกต์การเลื่อน เริ่มด้วยการเคลื่อนไหวในแนวนอนผ่านหน้าจอขนาดต่างๆ

• เปิดใช้งานการเคลื่อนไหวในแนวนอน: ใช่
• ออฟเซ็ตเริ่มต้น: -1 (ที่ 30%)
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: 20
  • แท็บเล็ตและโทรศัพท์: 5

เอฟเฟกต์การเลื่อนหมุน

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

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

โมดูลตัวแบ่งโคลน

ไปข้างหน้าและโคลนโมดูลทั้งหมด

เปลี่ยนพื้นหลังไล่ระดับ

เปิดการตั้งค่าของสำเนาและเปลี่ยนสีพื้นหลังแบบไล่ระดับสี

• สี 1: #24252d
• สี 2: #16161c

เปลี่ยนระยะห่าง

เพิ่มระยะขอบบนที่เป็นลบ

• อัตรากำไรขั้นต้น: -100px

เปลี่ยนเอฟเฟกต์การเลื่อนแนวนอน

และแก้ไขการสิ้นสุดของการเคลื่อนไหวในแนวนอนในการตั้งค่าเอฟเฟกต์การเลื่อน

• ออฟเซ็ตสิ้นสุด:
  • เดสก์ท็อป: -20
  • แท็บเล็ตและโทรศัพท์: -5

ดูตัวอย่าง

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

ตัวอย่าง #1

เดสก์ทอป

มือถือ

ตัวอย่าง #2

เดสก์ทอป

มือถือ

ตัวอย่าง #3

เดสก์ทอป

มือถือ

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

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

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