การสร้างคำอธิบายบริการแบบป๊อปเอาท์บน Hover ด้วย Divi

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

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

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

แอบมอง

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

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

ในการนำเข้าเลย์เอาต์ไปยังเพจของคุณ เพียงแตกไฟล์ zip แล้วลากไฟล์ json ไปที่ Divi Builder

ไปที่บทช่วยสอนกันไหม

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้:

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. รูปภาพที่จะใช้สำหรับเนื้อหาจำลอง เราจะใช้ชุดเค้าโครงของ Investment Company สองสามชุดสำหรับบทช่วยสอนนี้

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างคำอธิบายบริการแบบป๊อปอัปบน Hover ด้วย Divi

สร้างส่วนและแถว

ขั้นแรก สร้างส่วนปกติใหม่ด้วยแถวหนึ่งคอลัมน์

ก่อนที่คุณจะเพิ่มโมดูลใดๆ ให้อัปเดตการตั้งค่าแถวดังนี้:

เพิ่มภาพพื้นหลังสีเข้มหรือสีพื้นหลังสีเข้ม ฉันใช้ภาพพื้นหลังนามธรรมจาก Investment Company Layout Pack แต่ถ้าคุณไม่ต้องการใช้สีนั้น คุณสามารถเพิ่มสีพื้นหลัง #161c29 ได้

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความสูง: 320px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)\
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

เพิ่มโมดูล Blurb

ถัดไป เพิ่มโมดูลการนำเสนอลงในแถวของคุณ

และอัปเดตการตั้งค่าโมดูลการนำเสนอดังนี้:

• ชื่อเรื่อง: บริการ
• ไอคอน: ดูภาพหน้าจอ

ลบเนื้อหาเริ่มต้นเช่นกัน

• ภาพพื้นหลัง: เพิ่มรูปภาพที่มีขนาดประมาณ 320px x 215px
• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: กึ่งกลางด้านบน

• พื้นหลังไล่ระดับสีซ้าย: rgba(31,72,192,0.61)
• พื้นหลังไล่ระดับสีขวา: #161c29
• ตำแหน่งเริ่มต้น: 34%
• ตำแหน่งสุดท้าย: 71%
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

• สีไอคอน: #ffffff
• การจัดตำแหน่งข้อความ: center
• แบบอักษรของชื่อเรื่อง: Archivo
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 38px
• ชื่อเรื่อง ระยะห่างระหว่างตัวอักษร: 4px
• ความกว้างสูงสุด: 320px
• การจัดตำแหน่งโมดูล: ศูนย์
• ความสูง: 320px

• ช่องว่างภายใน: 68px ด้านบน
• มุมโค้งมน: 10px
• ดัชนี Z: 1

การเพิ่มค่าดัชนี z 1 มีความสำคัญอย่างยิ่งในการตรวจสอบให้แน่ใจว่าโมดูลการนำเสนอนั้นอยู่เหนือโมดูลอื่นๆ ที่จะซ้อนอยู่เบื้องหลังในท้ายที่สุด

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

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

นี่จะเป็นพื้นที่เนื้อหาแรกจากสองส่วนของเราที่จะโผล่ออกมาในที่สุดเมื่อวางเมาส์เหนือ

ตอนนี้เราจำเป็นต้องนำสีพื้นหลังเริ่มต้นออกและอัปเดตการตั้งค่าการออกแบบดังนี้:

• การจัดตำแหน่งข้อความ: ซ้าย
• แบบอักษรของชื่อเรื่อง: Archivo
• ขนาดข้อความชื่อเรื่อง: 22px
• ความกว้าง: 320px
• การจัดตำแหน่งโมดูล: ซ้าย (เดสก์ท็อป), กึ่งกลาง (แท็บเล็ตและโทรศัพท์)
• ความสูง: 320px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
• ระยะขอบ: -320px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายใน: ด้านบน 40px, ด้านซ้าย 40px, ด้านขวา 40px

ทำซ้ำโมดูลการเรียกร้องให้ดำเนินการและจัดชิดขวา

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

นี่คือสิ่งที่การออกแบบควรมีลักษณะเช่นนี้

การสร้างปุ่ม

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

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

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

เพิ่มข้อความปุ่ม “เรียนรู้เพิ่มเติม”

จากนั้นอัปเดตลักษณะปุ่มดังนี้:

• การจัดตำแหน่งปุ่ม: ศูนย์
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #1f48c0
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 10px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 4px
• แบบอักษรของปุ่ม: Archivo

ตอนนี้ สิ่งที่เราต้องทำคือวางตำแหน่งปุ่มของเรา

• ขอบ (เดสก์ท็อป): -25px ด้านบน
• ขอบ (แท็บเล็ตและโทรศัพท์): 25px บน, 50px ล่าง
• ดัชนี Z: 2

ค่าดัชนี z เท่ากับ 2 จะทำให้แน่ใจว่าปุ่มอยู่เหนือโมดูลการนำเสนอ (ซึ่งมีดัชนี az เท่ากับ 1)

การสร้างเอฟเฟกต์โฮเวอร์ป๊อปเอาต์

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

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

• ความกว้างสูงสุด (เดสก์ท็อป): 320px
• ความกว้างสูงสุด (โฮเวอร์): 1080px
• ความกว้างสูงสุด (แท็บเล็ตและโทรศัพท์) 1080px

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

• มุมโค้งมน: 10px
• แนวนอนล้น: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

ผลสุดท้าย

ตรวจสอบคำอธิบายบริการแบบป๊อปเอาต์จนถึงตอนนี้

และนี่คือการแสดงผลบนแท็บเล็ตและโทรศัพท์

ตัวเลือกการออกแบบเพิ่มเติมที่จะลอง

การทดลองกับตัวเลือกการออกแบบเพิ่มเติมเป็นเรื่องสนุกเสมอเมื่อเรามีการตั้งค่าพื้นฐานพร้อมแล้ว ต่อไปนี้คือคำแนะนำบางประการที่คุณสามารถลองใช้กับคำอธิบายบริการแบบป๊อปอัปของคุณ

การเพิ่มสีพื้นหลังของส่วน

หากต้องการ คุณสามารถเพิ่มสีพื้นหลังในส่วนที่ตรงกับสีพื้นหลัง/รูปภาพของแถวสำหรับการออกแบบแบบป็อปเอาท์ที่ไม่เหมือนใคร

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

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

จากนั้นตรวจสอบผลลัพธ์

ใช้เพียงสองโมดูล

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

เมื่อต้องการทำเช่นนี้ ปรับใช้โหมดมุมมองโครงร่าง จากนั้นลบโมดูลการเรียกร้องให้ดำเนินการครั้งแรกโดยตรงภายใต้โมดูลประกาศ

หลังจากนั้น ให้อัปเดตโมดูลการนำเสนอด้วยการจัดตำแหน่งโมดูลด้านซ้าย

• การจัดตำแหน่งโมดูล: ซ้าย (เดสก์ท็อป), กึ่งกลาง (แท็บเล็ต)

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

• ความกว้างสูงสุด (โฮเวอร์): 700px
• ความกว้างสูงสุด (แท็บเล็ต): 700px

นี่คือผลลัพธ์สุดท้าย

และนี่คือพื้นหลังสีขาว

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!