วิธีทริกเกอร์เอฟเฟกต์โฮเวอร์สำหรับโมดูล คอลัมน์ และแถวพร้อมกัน

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

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

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

แอบมอง

ต่อไปนี้คือตัวอย่างโดยย่อของลักษณะการเรียกใช้เอฟเฟกต์ของโฮเวอร์ขององค์ประกอบ Divi ที่ต่างกันไปพร้อม ๆ กัน

ดาวน์โหลดตัวอย่างการออกแบบฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

ไปกวดวิชากันเถอะ

ทำความเข้าใจวิธีทริกเกอร์สถานะ Hover บนองค์ประกอบ Divi หลายรายการพร้อมกัน

แต่ละองค์ประกอบใน Divi (ส่วน แถว หรือโมดูล) มีพื้นที่โฮเวอร์ของตัวเอง ซึ่งโดยทั่วไปแล้วจะเป็นขนาดขององค์ประกอบ

แต่ละองค์ประกอบเหล่านี้มีตัวเลือกโฮเวอร์ในตัวที่เปิดใช้งานเมื่อวางเมาส์เหนือองค์ประกอบนั้นหรือองค์ประกอบย่อยใด ๆ ที่มีอยู่

ตัวอย่างเช่น หากคุณได้เพิ่มตัวเลือกการวางเมาส์เหนือส่วนใดส่วนหนึ่ง ตัวเลือกการวางเมาส์เหนือเหล่านั้นจะใช้งานได้ทุกครั้งที่คุณวางเมาส์เหนือส่วนนั้น

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

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

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

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

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

ตัวอย่างการรวมเอฟเฟกต์โฮเวอร์

นี่คือตัวอย่างการทำงานกับ Divi

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

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

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

เนื่องจากมีระยะห่างระหว่างแต่ละองค์ประกอบ เราจึงสามารถเห็นผลโฮเวอร์เฉพาะของแต่ละองค์ประกอบเมื่อเราวางเมาส์เหนือแต่ละช่องว่างโฮเวอร์

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

ความล่าช้าในการเปลี่ยนใช้ได้ดีกับการตั้งค่านี้

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

การสร้างตัวอย่างการออกแบบใหม่ใน Divi

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

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

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

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

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

การเพิ่มส่วนและแถว

สิ่งแรกที่คุณต้องทำคือสร้างส่วนปกติด้วยแถวหนึ่งคอลัมน์

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

ถัดไป ให้เปิดการตั้งค่าแถวและกำหนดภาพพื้นหลังให้กับแถว

จากนั้นเราจำเป็นต้องนำช่องว่างภายในเริ่มต้นออกเพื่อไม่ให้มีช่องว่างในช่องว่างโฮเวอร์ระหว่างแถวและคอลัมน์

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

จากนั้นเพิ่มเงาของกล่องต่อไปนี้ในแถวเมื่อวางเมาส์เหนือ

• กล่องเงา: ดูภาพหน้าจอ
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 0px (เดสก์ท็อป), 10px (โฮเวอร์)
• สีเงา: #063c68

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

• ระยะเวลาการเปลี่ยนภาพ: 500ms
• ความล่าช้าในการเปลี่ยน: 700ms

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

• กล่องเงา: ดูภาพหน้าจอ
• ความแรงของกล่องเงาเบลอ: 0px
• ความแรงของการกระจายเงาของกล่อง: 200px (เดสก์ท็อป), 0px (โฮเวอร์)
• เงาสี: #000000
• ระยะเวลาการเปลี่ยนภาพ: 500ms
• ความล่าช้าในการเปลี่ยน: 200ms

เพิ่มโมดูล Blurb

ตอนนี้เพิ่มโมดูลการนำเสนอลงในแถว

จากนั้นอัปเดตประกาศดังนี้:

• ภาพ: [ใส่ภาพประกาศ]
• สีพื้นหลัง: #0c71c3
• สีพื้นหลัง (โฮเวอร์): rgba(12,113,195,0.35)

• การจัดตำแหน่งข้อความ: center
• สีข้อความ: เบา
• ช่องว่างภายใน: บน 20px ล่าง 20px ซ้าย 20px ขวา 20px

ผลสุดท้าย

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

ความคิดและเคล็ดลับสุดท้าย

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

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

ฉันหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำรวจการผสมผสานเอฟเฟกต์โฮเวอร์ที่น่าทึ่งใน Divi

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

ไชโย!