วิธีสร้างเอฟเฟกต์โฮเวอร์แบบขยายสำหรับเลย์เอาต์กริดของคุณใน Divi

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

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

แอบมอง

นี่คือตัวอย่างย่อของตัวอย่างเอฟเฟกต์โฮเวอร์ที่กำลังขยาย ฉันจะกล่าวถึงในบทช่วยสอนนี้

เริ่มต้น

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

ในการเริ่มต้น ให้สร้างเพจใหม่ ตั้งชื่อเพจของคุณ และคลิกเพื่อใช้ Divi Builder จากนั้นเลือกตัวเลือกเพื่อเลือกเค้าโครงที่สร้างไว้ล่วงหน้า จากการโหลดจากป๊อปอัปของไลบรารี ให้เลือก Design Agency Layout Pack จากนั้นคลิกเพื่อใช้หน้าเกี่ยวกับ Design Agency

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

ตอนนี้คุณพร้อมที่จะเริ่มต้นแล้ว!

การขยาย Blurbs บน Hover

สำหรับตัวอย่างแรกนี้ ฉันจะแสดงวิธีขยายคำประกาศในส่วนที่สองของเค้าโครงนี้ซึ่งแสดงบริการที่นำเสนอ

ย้ายโมดูล Blurb เพื่อครอบครองเพียงแถวเดียว

ปัจจุบันส่วนนี้ประกอบด้วยแถวสามคอลัมน์สองแถวพร้อมคำอธิบายในแต่ละคอลัมน์

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

จากนั้นลบแถวล่างที่ว่างเปล่า

การปรับแต่งโมดูล Blurb

ต่อไป เราจะใช้ Multiselect เพื่อเลือกภาพเบลอทั้งหกภาพ เพื่อให้เราสามารถนำการออกแบบเดียวกันไปใช้กับภาพทั้งหมดพร้อมกันได้ ในการทำเช่นนั้น ให้กด ctrl (หรือ cmd) ค้างไว้แล้วคลิกที่โมดูลการนำเสนอแต่ละโมดูลจนกว่าจะเลือกทั้งหมด จากนั้นคลิกไอคอนการตั้งค่าบนหนึ่งในการนำเสนอเพื่อเปิดโมดอลการตั้งค่าองค์ประกอบ

ไปข้างหน้าและนำเนื้อหาที่พบในกล่องเนื้อหาออกแล้วอัปเดตการตั้งค่าการออกแบบดังนี้:

ขนาดข้อความชื่อเรื่อง 16px
ความกว้าง: 150px
การจัดตำแหน่งโมดูล: ศูนย์
Custom Padding: ด้านบน 10px, ค่าเริ่มต้นด้านล่าง, ค่าเริ่มต้นด้านซ้าย, ค่าเริ่มต้น right

การกำหนดความกว้างแบบกำหนดเองให้กับโมดูล 150px ทำให้ข้อความชื่อถูกล็อกไว้เมื่อเราขยายแถว

บันทึกการเปลี่ยนแปลงและคลิกออกจากการเลือกหลายรายการ

ทำให้ Center Blurb เด่นชัดยิ่งขึ้น

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

ขนาดตัวอักษรของไอคอน: 120px
ขนาดข้อความชื่อเรื่อง: 18px (ค่าเริ่มต้น)

การทำเช่นนี้จะทำให้ข้อความแจ้งตรงกลางเด่นชัดขึ้นเนื่องจากส่วนตรงกลางที่ข้อความแจ้งอื่น ๆ จะขยายออกไปด้านนอก

การปรับแต่งแถวเพื่อขยายบน Hover

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

ความกว้างที่กำหนดเอง: 750px
ความกว้างของรางน้ำ: 4
Custom Padding (ค่าเริ่มต้น): 150px ซ้าย, 150px ขวา
ช่องว่างภายในที่กำหนดเอง (โฮเวอร์): 0px ซ้าย, 0px ขวา
Custom Padding (แท็บเล็ต): 0px ซ้าย, 0px ขวา

การเปลี่ยนแปลงค่าแพดดิ้งบนโฮเวอร์คือสิ่งที่สร้างเอฟเฟกต์โฮเวอร์แบบขยาย แถวจะขยายไปทางขวา 150px และทางซ้าย 150px

ตรวจสอบผลลัพธ์สุดท้าย

การทำตารางแบบวงกลม

หากคุณต้องการสร้างเค้าโครงตารางแบบวงกลมที่ขยายออก ทั้งหมดก็ต้องทำการปรับเปลี่ยนเล็กน้อย

ขั้นแรกให้ทำซ้ำคำประกาศภายนอกอันใดอันหนึ่งแล้วลากไปเหนือข้อความแจ้งขนาดใหญ่ของคอลัมน์ที่สอง จากนั้นลบข้อความชื่อเรื่องในการนำเสนอกลางด้วยไอคอนขนาดใหญ่

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

align-items: center;

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

ขยายกริดไปทางขวา

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

หน้าตาเป็นอย่างไรบนมือถือ

นี่คือสิ่งที่การออกแบบจะกลับมาใช้บนแท็บเล็ตและสมาร์ทโฟน เอฟเฟกต์โฮเวอร์แบบขยายจะไม่ทำงานบนมือถือเช่นกัน

การเพิ่มเอฟเฟกต์โฮเวอร์แบบขยายไปยังแกลเลอรีรูปภาพ

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

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

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

เพิ่มรูปภาพ 4 รูปลงในแกลเลอรีที่มีขนาดเท่ากันเพื่อให้ดูเหมือนกันในแถว

รูปภาพจำนวน: 4
แสดงชื่อและคำบรรยาย: NO
แสดงเลขหน้า: ไม่

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

ซูมไอคอนสี: #353740
วางเมาส์เหนือสี: rgba(252,210,29,0.92)

ความกว้าง (เดสก์ท็อป): 40%
ความกว้าง (โฮเวอร์): 100%
ความกว้าง (เม็ด): 100%

การเปลี่ยนความกว้างของโมดูลแกลเลอรีบนโฮเวอร์คือสิ่งที่สร้างเอฟเฟกต์โฮเวอร์แบบขยาย การตั้งค่าความกว้างของแท็บเล็ตเป็น 100% ยังป้องกันไม่ให้เอฟเฟกต์โฮเวอร์เกิดขึ้นบนมือถืออีกด้วย

นี่คือสิ่งที่ดูเหมือนจนถึงตอนนี้

เรายังคงต้องอัปเดตการตั้งค่าแถวของเราเพื่อปรับปรุงฟังก์ชันการทำงานเล็กน้อยและตรงกับรูปแบบ

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

ความกว้างที่กำหนดเอง: 80%
ความกว้างของรางน้ำ: 2
ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่

การหยุดการขยายเอฟเฟกต์โฮเวอร์จากการกดเนื้อหาลงเพจ

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

ไปที่การตั้งค่าแถวและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลัก:

min-height: 350px

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลักของคอลัมน์:

margin: auto;

การปรับความสูงของคอลัมน์จะเปิดใช้งานคุณสมบัติ "display: flex" css บนแบ็กเอนด์ ซึ่งช่วยให้ "margin: auto" สามารถจัดแนวเนื้อหาของคอลัมน์ให้อยู่ในแนวตั้งตรงกลางแถว ซึ่งขณะนี้มีความสูงต่ำสุดที่ 350px เรียนรู้เพิ่มเติมเกี่ยวกับแนวคิดนี้ในบทความฉบับเต็มเกี่ยวกับวิธีจัดแนวเนื้อหาในแนวตั้งใน Divi

ตรวจสอบผลลัพธ์สุดท้าย

การเพิ่มรูปภาพในแกลเลอรี่

คุณยังสามารถเพิ่มรูปภาพอีก 4 รูปในแกลเลอรีและเพิ่มความสูงขั้นต่ำของแถวของคุณเป็น 475px สำหรับผลลัพธ์ต่อไปนี้

หน้าตาเป็นอย่างไรบนมือถือ

นี่คือลักษณะของแกลเลอรีบนมือถือ เอฟเฟกต์โฮเวอร์แบบขยายไม่ทำงาน

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

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

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

ไชโย!