วิธีใช้เอฟเฟกต์โฮเวอร์ความสูงของตัวแบ่งส่วนเพื่อเปิดเผยเนื้อหาใน Divi

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

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

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

แอบมอง

ดาวน์โหลดเอฟเฟกต์โฮเวอร์ส่วนสูงของตัวแบ่งส่วนฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

หลังจากนั้นคุณก็พร้อมที่จะเริ่มต้น!

การนำการออกแบบเอฟเฟกต์โฮเวอร์ความสูงของตัวแบ่งส่วนไปใช้ใน Divi

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

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

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

ไล่สีพื้นหลังด้านซ้าย: #73ba57
ไล่สีพื้นหลังด้านขวา: #2a4c23
ความกว้าง: 80%
ความกว้างสูงสุด: 1080px
การจัดตำแหน่งส่วน: ศูนย์

การเพิ่มชื่อส่วน

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

<h2>The Juice</h2>

จากนั้นอัปเดตการออกแบบดังนี้:

หัวข้อ 2 แบบอักษร: Lato
หัวเรื่อง 2 ขนาดข้อความ: 80px
หัวเรื่อง 2 ระยะห่างตัวอักษร: -5px
ขอบ: -50px ด้านบน, -40px ด้านล่าง
ดัชนี Z: -1

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

การเพิ่มรูปภาพ

ใต้โมดูลข้อความที่มีชื่อเรื่องในคอลัมน์ 1 ให้เพิ่มโมดูลรูปภาพ จากนั้นอัปโหลดภาพที่มีพื้นหลังโปร่งใส ฉันใช้รูปภาพจาก Juice Shop Layout Pack ที่มีขนาด 240px x 300px

การปรับการจัดตำแหน่งภาพให้อยู่ตรงกลาง

การเพิ่มคำกระตุ้นการตัดสินใจในคอลัมน์ 2

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

เพิ่ม URL ลิงก์ของปุ่มเพื่อให้แน่ใจว่าปุ่มจะแสดงขึ้น

การจัดรูปแบบพื้นหลัง CTA และข้อความชื่อเรื่อง

จากนั้นอัปเดตการตั้งค่าการออกแบบต่อไปนี้:

สีพื้นหลัง: #ffffff
สีข้อความ: dark
แบบอักษรของชื่อเรื่อง: Lato
น้ำหนักแบบอักษรของชื่อเรื่อง: หนัก
รูปแบบตัวอักษรของชื่อเรื่อง: TT
ชื่อเรื่อง ขนาดข้อความ: 18px

จัดแต่งทรงผมปุ่ม CTA

ปรับปรุงการออกแบบปุ่มดังนี้:

สีข้อความของปุ่ม: #ffffff
สีพื้นหลังของปุ่ม: #73ba57
ความกว้างของขอบปุ่ม: 0px

การจัดรูปแบบ CTA Border

จากนั้นเพิ่มเส้นขอบสำหรับเฟรมโมดูลดังนี้:

ความกว้างของเส้นขอบ: 10px
เส้นขอบสี: rgba(115,186,87,0.15)

การเพิ่มเอฟเฟกต์โฮเวอร์ความสูงของตัวแบ่งเพื่อเปิดเผยคำกระตุ้นการตัดสินใจ

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

การเพิ่มตัวแบ่งด้านบน

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

สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสีด้านบน: #73ba57
ความสูงของตัวแบ่งด้านบน: 70% (ค่าเริ่มต้น), 0% (โฮเวอร์)
พลิกตัวแบ่งด้านบน: แนวนอน

สังเกตว่าตัวแบ่งส่วนสูงเริ่มต้นด้วยความสูงเริ่มต้น 70% แล้วเปลี่ยนเป็นความสูง 0% เมื่อวางเมาส์เหนือ

การเพิ่มตัวแบ่งด้านล่าง

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

สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสีด้านบน: #73ba57
ความสูงของตัวแบ่งด้านบน: 70% (ค่าเริ่มต้น), 0% (โฮเวอร์)
พลิกตัวแบ่งด้านบน: แนวนอน
การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

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

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

การเพิ่มเอฟเฟกต์ Box Shadow Hover สำหรับการเปลี่ยนผ่านและการออกแบบที่ไม่เหมือนใคร

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

กล่องเงา: ดูภาพหน้าจอ
กล่องเงาตำแหน่งแนวนอน: 0px
ตำแหน่งแนวตั้งเงาของกล่อง: 0px
ความแรงของการกระจายเงาของกล่อง: 0px (ค่าเริ่มต้น), 150px (โฮเวอร์)
กล่องสีเงา: #73ba57

ชะลอระยะเวลาการเปลี่ยนภาพ

สำหรับขั้นตอนสุดท้าย ให้ลดระยะเวลาการเปลี่ยนภาพลงเล็กน้อย

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

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายบนเดสก์ท็อป

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

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

ทดลองกับรูปแบบตัวแบ่งส่วนอื่นๆ สำหรับการออกแบบที่ไม่เหมือนใครในไม่กี่วินาที

ด้วยการตั้งค่านี้ คุณสามารถทดลองกับรูปแบบและชุดตัวแบ่งต่างๆ ได้อย่างง่ายดาย!

ต่อไปนี้คือบางส่วนที่ฉันได้รวมไว้ในการดาวน์โหลดฟรี

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

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

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

ไชโย!