Divi: วิธีเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือตัวแบ่งส่วน

คุณต้องการทราบวิธีการเปิดเผย เนื้อหา เมื่อวางเมาส์เหนือตัวคั่นส่วนใน Divi ?

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

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

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

การสำรวจ

ดาวน์โหลด DIVI ทันที!!!

สร้างหน้าใหม่ด้วย Divi Builder

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

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

การออกแบบเอฟเฟกต์โฮเวอร์ตัวแบ่งส่วนใน Divi

การสร้างส่วนและบรรทัด

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

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

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

เพิ่มชื่อหัวข้อ

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

<h2>The Juice</h2>

ถัดไป ปรับปรุงการออกแบบดังนี้:

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

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

ใส่รูปภาพ

ใต้โมดูลข้อความที่มีชื่อเรื่องในคอลัมน์ 1 ให้เพิ่มโมดูลรูปภาพ จากนั้นอัปโหลดภาพที่มีพื้นหลังโปร่งใส เราใช้รูปภาพจากชุดเลย์เอาต์ ร้านน้ำผลไม้ 240 พิกเซลคูณ 300 พิกเซล

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

เพิ่มโมดูล "Call To Action" ในคอลัมน์ 2

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

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

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

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

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

ปรับแต่งปุ่ม CTA

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #73ba57
• ความกว้างของเส้นขอบ: 0px

กำหนดเส้นขอบโมดูล CTA เอง

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

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

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

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

อ่าน: Divi: วิธีเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือแท็บ

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

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

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

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

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

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

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

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

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

ดาวน์โหลด DIVI ทันที!!!

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

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

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

ชะลอระยะเวลาของการเปลี่ยนแปลง

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

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

ผลสุดท้าย

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

ดาวน์โหลด DIVI ทันที!!!

สรุป

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

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

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

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

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...