วิธีสร้างการซ้อนทับ Hover ที่ไม่ซ้ำสำหรับคำรับรองด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

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

มาเริ่มกันเลย! เพิ่มหน้าใหม่หรือเปิดหน้าที่มีอยู่แล้วเพิ่มส่วนปกติใหม่

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

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 2 ด้านขวา: 11vw (เดสก์ท็อป), 3vw (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

ได้เวลาเริ่มเพิ่มโมดูลต่างๆ แล้ว! เริ่มต้นด้วย Image Module ในคอลัมน์แรก อัปโหลดรูปภาพแนวตั้งที่เลือก

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

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

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

ขนาด

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

• ความกว้าง: 78% (เดสก์ท็อป), 70% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ซ้าย

เพิ่ม Hover Overlap Text Module ไปยังคอลัมน์ 1

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

ด้านล่างโมดูลรูปภาพ ให้เพิ่มโมดูลข้อความ ใส่รายละเอียดของบุคคลในกล่องเนื้อหา

พื้นหลังเริ่มต้น

ดำเนินการต่อโดยเพิ่มสีพื้นหลัง

• สีพื้นหลัง: rgba(255,255,255,0)

โฮเวอร์พื้นหลัง

เพิ่มสีพื้นหลังอื่นบนโฮเวอร์

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

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

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

• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 0px
• ความสูงของบรรทัดข้อความ: 0px

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

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

• ขนาดตัวอักษร: 19px
• ความสูงของบรรทัดข้อความ: 2em

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

ต้องแก้ไขการตั้งค่าข้อความส่วนหัวด้วย

• หัวข้อ 3 น้ำหนักแบบอักษร: Ultra Bold
• หัวข้อ 3 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ: 0px
• ส่วนหัว 3 ความสูงของบรรทัด: 0em

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

เพิ่มค่าต่างๆ บนโฮเวอร์

• หัวเรื่อง 3 ขนาดข้อความ: 35px
• ส่วนหัว 3 ความสูงของบรรทัด: 1.1em

ระยะห่าง

จากนั้นไปที่การตั้งค่าการเว้นวรรคและเพิ่มค่าบางอย่าง

• อัตรากำไรขั้นต้น: -100px
• ระยะขอบซ้าย: 50px
• ระยะขอบขวา: 50px
• ช่องว่างภายในด้านบน: 40px
• ช่องว่างภายในด้านล่าง: 60px

เปลี่ยนการวางแนวข้อความ

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

• การวางแนวข้อความ: ศูนย์

ค่าเริ่มต้นกล่องเงา

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

• กล่องเงาตำแหน่งแนวนอน: 1000px
• ตำแหน่งแนวตั้งเงาของกล่อง: -400px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 250px
• เงาสี: rgba(175,175,175,0.13)

เงากล่องเลื่อน

หากต้องการสร้างเอฟเฟกต์การซ้อนทับแบบพิเศษ ให้เพิ่มเงาของกล่องโฮเวอร์ด้วย

• ตำแหน่งแนวนอนของกล่องเงา: -73px
• ตำแหน่งแนวตั้งเงาของกล่อง: -49px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 10px
• เงาสี: rgba(255,182,12,0.53)

การเปลี่ยนผ่าน

หากต้องการสร้างการเปลี่ยนแปลงที่ราบรื่น ให้เปลี่ยนระยะเวลาการเปลี่ยนในแท็บขั้นสูง

• ระยะเวลาการเปลี่ยนภาพ: 1000ms

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

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

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

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

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

• หัวข้อ 3 แบบอักษร: Goudy Bookletter 1911
• การจัดตำแหน่งข้อความหัวเรื่อง 3: ซ้าย
• หัวเรื่อง 3 ขนาดข้อความ: 3.5vw (เดสก์ท็อป), 40px (แท็บเล็ต), 30px (โทรศัพท์)
• ส่วนหัว 3 ความสูงของบรรทัด: 1.1em

ระยะห่าง

ดำเนินการต่อโดยเพิ่มค่าการเว้นวรรคที่กำหนดเอง

• ขอบบน: 7vw (เดสก์ท็อป), 100px (แท็บเล็ต), 50px (โทรศัพท์)

เพิ่มโมดูลข้อความคำอธิบายลงในคอลัมน์ 2

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

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

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

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

• ความสูงของบรรทัดข้อความ: 2.2em
• การวางแนวข้อความ: ซ้าย

ระยะห่าง

เพิ่มระยะขอบบนที่กำหนดเองด้วย

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

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

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• ขอบบน: 100px
• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px
• คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 11vw (เดสก์ท็อป), 3vw (แท็บเล็ตและโทรศัพท์)
• คอลัมน์ที่ 1 ด้านขวา: 2vw (เดสก์ท็อป), 3vw (แท็บเล็ตและโทรศัพท์)

โมดูลข้อความโคลนของแถวก่อนหน้า & วางในคอลัมน์ 1

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

เปลี่ยนการวางแนวข้อความ

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

• การวางแนวข้อความ: ขวา

เพิ่มโมดูลรูปภาพในคอลัมน์ 2

อัพโหลดภาพ

ถัดไป เพิ่มโมดูลรูปภาพในคอลัมน์ที่สองและอัปโหลดรูปภาพแนวตั้งใหม่

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

เปลี่ยนการจัดตำแหน่งรูปภาพของโมดูล

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

ขนาด

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าการปรับขนาด

• ความกว้าง: 78% (เดสก์ท็อป), 70% (แท็บเล็ตและโทรศัพท์)
• การจัดตำแหน่งโมดูล: ขวา

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• ขอบบน: 50px (แท็บเล็ตและโทรศัพท์)

เพิ่ม Hover Overlap Text Module ไปที่คอลัมน์ 2

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

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

พื้นหลังเริ่มต้น

จากนั้น เพิ่มภาพพื้นหลังให้กับโมดูล

• สีพื้นหลัง: rgba(255,255,255,0)

โฮเวอร์พื้นหลัง

เปลี่ยนสีพื้นหลังบนโฮเวอร์

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

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

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

• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 0px
• ความสูงของบรรทัดข้อความ: 0px
• การวางแนวข้อความ: ศูนย์

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

ทำการปรับเปลี่ยนบางอย่างเมื่อวางเมาส์เหนือ

• ขนาดตัวอักษร: 19px
• ความสูงของบรรทัดข้อความ: 2em

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

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

• หัวข้อ 3 น้ำหนักแบบอักษร: Ultra Bold
• หัวเรื่อง 3 สีข้อความ: #ffffff
• หัวเรื่อง 3 ขนาดข้อความ: 0px
• ส่วนหัว 3 ความสูงของบรรทัด: 0em

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

ด้วยการปรับแต่งเล็กน้อยเมื่อโฮเวอร์

• หัวเรื่อง 3 ขนาดข้อความ: 35px
• ส่วนหัว 3 ความสูงของบรรทัด: 1.1em

ระยะห่าง

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

• ขอบบน: -80px
• ระยะขอบซ้าย: 50px
• ระยะขอบขวา: 50px
• ช่องว่างภายในด้านบน: 40px
• ช่องว่างภายในด้านล่าง: 60px

ค่าเริ่มต้นกล่องเงา

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

• ตำแหน่งแนวนอนของกล่องเงา: -1000px
• ตำแหน่งแนวตั้งเงาของกล่อง: -420px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 250px
• เงาสี: rgba(175,175,175,0.13)

เงากล่องเลื่อน

และเปลี่ยนเงากล่องเมื่อโฮเวอร์

• ตำแหน่งแนวนอนของกล่องเงา: -73px
• ตำแหน่งแนวตั้งเงาของกล่อง: -49px
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 10px
• เงาสี: rgba(12,255,238,0.53)

การเปลี่ยนผ่าน

สุดท้ายแต่ไม่ท้ายสุด สร้างการเปลี่ยนแปลงที่ราบรื่นโดยการเปลี่ยนระยะเวลาการเปลี่ยน

• ระยะเวลาการเปลี่ยนภาพ: 1000ms

ดูตัวอย่าง

เมื่อเราได้ผ่านทุกขั้นตอนแล้ว มาดูผลลัพธ์สุดท้ายกัน!

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

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