วิธีสร้างการซ้อนทับเส้นขอบแบบเคลื่อนไหวเพื่อเน้นเนื้อหาด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

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

สร้างหน้าใหม่โดยใช้หน้า Landing Page ของ App Developer Layout Pack

สิ่งแรกที่คุณต้องทำคือสร้างหน้าใหม่โดยใช้หน้า Landing Page ของ App Developer Layout Pack

ส่วนโคลนฮีโร่

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

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

เพิ่มแถวใหม่ให้กับหมวดฮีโร่

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

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

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

เว้นช่องเนื้อหาว่างไว้

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

ระยะห่าง

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

• ขอบบน: -480px
• ช่องว่างภายในด้านบน: 223px
• ช่องว่างภายในด้านล่าง: 223px

ชายแดน

จากนั้นไปที่การตั้งค่าเส้นขอบของโมดูลและเพิ่มเส้นขอบที่คุณต้องการ

• ความกว้างของเส้นขอบ: 9px
• สีเส้นขอบ: #0ae2ff
• สไตล์เส้นขอบ: เริ่มแรก

กล่องเงา

เพิ่มเงากล่องด้วย

• Box Shadow Blur ความแรง: 1px
• ความแรงของการกระจายเงาของกล่อง: 15px
• เงาสี: rgba(10,226,255,0.59)

แอนิเมชั่น

และลองเล่นกับการตั้งค่าแอนิเมชั่นเพื่อทำให้เนื้อหาโดดเด่น

• สไตล์แอนิเมชั่น: Flip
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ขวา
• ระยะเวลาแอนิเมชั่น: 1500ms
• ภาพเคลื่อนไหวล่าช้า: 1500ms
• ความเข้มของแอนิเมชั่น: 500%

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

เพิ่มแถวใหม่ในส่วนฮีโร่ที่ซ้ำกัน

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

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

เว้นช่องเนื้อหาว่างไว้

เรากำลังใช้โมดูลข้อความเปล่าอีกครั้ง

ระยะห่าง

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

• ขอบบน: -480px
• ช่องว่างภายในด้านบน: 223px
• ช่องว่างภายในด้านล่าง: 223px

ชายแดน

ดำเนินการต่อโดยเพิ่มเส้นขอบให้กับโมดูลข้อความ

• ความกว้างของเส้นขอบ: 9px
• สีเส้นขอบ: #0ae2ff
• สไตล์เส้นขอบ: สองเท่า

แอนิเมชั่น

และลองเล่นกับการตั้งค่าแอนิเมชั่นเพื่อสร้างเอฟเฟกต์การหมุน

• สไตล์แอนิเมชั่น: Roll
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ศูนย์
• ระยะเวลาแอนิเมชั่น: 4500ms
• ภาพเคลื่อนไหวล่าช้า: 1500ms
• ความเข้มของแอนิเมชั่น: 100%
• ภาพเคลื่อนไหวเริ่มต้นความทึบ: 100%

โมดูลข้อความโคลน

เมื่อคุณแก้ไขโมดูลข้อความแรกเสร็จแล้ว ให้ดำเนินการโคลน

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

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

• ขอบบน: -495px

เปลี่ยนเส้นขอบ

แก้ไขสีขอบด้วย

• สีขอบ: #ededed

เปลี่ยนแอนิเมชั่น

และแก้ไขการตั้งค่าแอนิเมชั่นเพื่อให้ได้ผลลัพธ์ที่คุณเห็นในตัวอย่างโพสต์นี้

• ภาพเคลื่อนไหวซ้ำ: Loop
• ระยะเวลาแอนิเมชั่น: 5000ms
• ภาพเคลื่อนไหวล่าช้า: 2000ms

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

เปลี่ยนระยะห่างของโมดูลรูปภาพในคอลัมน์ 2

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

• ขอบบน: 70px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

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

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

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

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

เว้นช่องเนื้อหาว่างไว้

ตอนนี้เราสามารถเริ่มเพิ่มการทับซ้อนกันของเส้นขอบภาพเคลื่อนไหวแรกได้แล้ว! เพิ่มโมดูลข้อความใหม่ในคอลัมน์แรก (ดูหน้าจอการพิมพ์) และตรวจสอบให้แน่ใจว่าคุณเว้นช่องเนื้อหาว่างไว้

ระยะห่าง

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

• ขอบบน: -230px
• ระยะขอบซ้าย: 80px
• ระยะขอบขวา: 100px
• ช่องว่างภายในด้านบน: 120px
• ช่องว่างภายในด้านล่าง: 120px

ชายแดน

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

• ความกว้างของเส้นขอบ: 13px
• สีเส้นขอบ: #bcf5f3
• สไตล์เส้นขอบ: สองเท่า

แอนิเมชั่น

ดำเนินการต่อโดยเพิ่มแอนิเมชั่นที่คุณเลือกซึ่งจะช่วยให้คุณเน้นเนื้อหาที่คุณกำลังแบ่งปัน

• สไตล์แอนิเมชั่น: พับ
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ขวา
• ความเข้มของแอนิเมชั่น: 100%

ดัชนี Z

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

• ดัชนี Z: -1

โมดูลข้อความโคลน & วางที่ส่วนท้ายของคอลัมน์ 1

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

เปลี่ยนเส้นขอบ

เปลี่ยนสีขอบ.

• สีของเส้นขอบ: #ffc0ec

เปลี่ยนแอนิเมชั่น

และเพิ่มการดีเลย์ของแอนิเมชั่นด้วย

• ภาพเคลื่อนไหวล่าช้า: 1000ms

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

เว้นช่องเนื้อหาว่างไว้

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

ระยะห่าง

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

• ขอบบน: -230px
• ระยะขอบซ้าย: 100px
• ระยะขอบขวา: -80px
• ช่องว่างภายในด้านบน: 120px
• ช่องว่างภายในด้านล่าง: 120px

ชายแดน

เพิ่มเส้นขอบที่คุณเลือกต่อไป

• ความกว้างของเส้นขอบ: 13px
• สีขอบ: #7479ff
• สไตล์เส้นขอบ: สองเท่า

แอนิเมชั่น

พร้อมกับแอนิเมชั่นที่มีแอนิเมชั่นดีเลย์สูงกว่าแอนิเมชั่นที่มีให้กับโมดูลข้อความก่อนหน้านี้

• สไตล์แอนิเมชั่น: พับ
• ภาพเคลื่อนไหวซ้ำ: Once
• ทิศทางของแอนิเมชั่น: ซ้าย
• ภาพเคลื่อนไหวล่าช้า: 2000ms
• ความเข้มของแอนิเมชั่น: 100%

ดัชนี Z

ตรวจสอบให้แน่ใจว่าโมดูลปรากฏใต้เนื้อหาโดยใช้ดัชนี Z เชิงลบ

• ดัชนี Z: -1

โมดูลข้อความโคลน & วางที่ส่วนท้ายของคอลัมน์ 3

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

เปลี่ยนเส้นขอบ

เปลี่ยนสีเส้นขอบของรายการที่ซ้ำกัน

• สีเส้นขอบ: #b3d1ff

เปลี่ยนแอนิเมชั่น

เพิ่มการดีเลย์ของแอนิเมชั่นเพิ่มเติม เท่านี้ก็เรียบร้อย!

• ภาพเคลื่อนไหวล่าช้า: 3000ms

ดูตัวอย่าง

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

ตัวอย่าง #1

ตัวอย่าง #2

ตัวอย่าง #3

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

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