เนื่องจากตัวเลือกการปรับขนาดใหม่ของ Divi ได้รับการเผยแพร่แล้ว มีบทช่วยสอนบางส่วนที่แสดงวิธีสร้างการเปิดเผยแบบโฮเวอร์ ในบทช่วยสอนเหล่านี้ เนื้อหา สวมหน้ากากถูกวางในแนวตั้ง อย่างไรก็ตาม ในบางกรณี คุณอาจต้องการสร้างการเปิดเผยในแนวนอน ในบทช่วยสอนนี้ เราจะแสดงวิธีเปิดเผยรูปภาพโดยใช้ตารางโฮเวอร์และตัวเลือกโอเวอร์โฟลว์ Divi. การทำงานนี้ต้องใช้แนวทางที่แตกต่างออกไปเล็กน้อย เราจะใช้แถวของคอลัมน์หนึ่งและวางโมดูลทั้งหมดไว้ด้านล่างอีกคอลัมน์หนึ่ง เมื่อวางเมาส์เหนือ เราจะเปลี่ยนคอลัมน์ให้เป็นตารางแนวนอน คุณสามารถดาวน์โหลดไฟล์ JSON ได้ฟรี!
Let 's go
การสำรวจ
ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูลักษณะของหน้าจอขนาดต่างๆกันก่อน
เริ่มสร้างใหม่กันเถอะ!
เพิ่มหัวข้อใหม่
เริ่มต้นด้วยการเพิ่มส่วนปกติใหม่ให้กับหน้าที่คุณกำลังทำงานอยู่
เพิ่มบรรทัดใหม่
โครงสร้างคอลัมน์
เพิ่มแถวใหม่ต่อไปโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
พื้นหลังไล่ระดับสีเริ่มต้น
โดยไม่ต้องเพิ่มโมดูลอื่น ๆ เปิดพารามิเตอร์บรรทัดและเพิ่มพื้นหลังไล่ระดับสีต่อไปนี้:
- สี 1: #b1ffc4
- สี 2: #ffffff
- ประเภทการไล่ระดับสี: รัศมี
- ทิศทางของรัศมี: กึ่งกลาง
- ตำแหน่งเริ่มต้น: 28%
- ตำแหน่งสุดท้าย: 28%
บินผ่านพื้นหลังไล่ระดับ
เปลี่ยนพื้นหลังไล่ระดับสีโดยการโฮเวอร์
- สี 1: #b1ffc4
- สี 2: #ffffff
- ประเภทการไล่ระดับสี: รัศมี
- ทิศทางเรเดียล: ซ้าย
- ตำแหน่งเริ่มต้น: 5%
- ตำแหน่งสุดท้าย: 5%
การเว้นวรรค
ไปที่การตั้งค่าระยะห่างจากนั้นเปลี่ยนค่าระยะห่างและระยะห่าง
- Padding ยอดนิยม: 0px
- ช่องว่างภายในด้านล่าง: 0px
- ขอบบน: 50px
- ขอบล่าง: 50px
เส้นขอบเริ่มต้น
เพิ่มรัศมีเส้นขอบของพิกเซล 50 ที่มุมบนขวาและมุมขวาล่าง
โฮเวอร์ชายแดน
นำมุมไปไว้ที่ "0px" โฉบ
เงาเริ่มต้น
จากนั้นเพิ่มเงาของกล่องเล็ก ๆ โดยใช้พารามิเตอร์ต่อไปนี้:
- Box Shadow Blur Force: 50px
- สีเงา: rgba (0,0,0,0.09)
Hover Box Shadow
นำเงาออกจากกล่องเมื่อบินผ่านไปแทนที่สีของเงาด้วยสีโปร่งใสอย่างสมบูรณ์
- สีเงา: rgba (0,0,0,0)
เพิ่มโมดูลข้อความในคอลัมน์
เพิ่มเนื้อหา H2
ถึงเวลาที่จะเริ่มเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความ ป้อน เนื้อหา H2 ที่คุณเลือก
การตั้งค่าข้อความ H2
ไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความ H2 ตาม:
- ชื่อ 2 ตัวอักษร: Acme
- ชื่อรูปแบบตัวอักษร 2: ขีดเส้นใต้
- ชื่อ 2 สีขีดเส้นใต้: #00ff3f
- ชื่อ 2 สีข้อความ: #000000
- หัวเรื่องขนาดข้อความ 2: 3vw
การเว้นวรรค
จากนั้นเพิ่มค่าการเติมที่กำหนดเอง
- ช่องว่างภายในที่ดีที่สุด: 6vw
- ช่องว่างภายในด้านล่าง: 7vw
- ช่องว่างภายในด้านซ้าย: 2vw
เพิ่มโมดูลรูปภาพลงในคอลัมน์
ลงรูปตนเอง
โมดูลที่สองที่เราต้องการในคอลัมน์นี้คือโมดูลรูปภาพ อัปโหลดภาพแนวนอนที่คุณเลือก
กล่องไฟ
เปิดใช้งานตัวเลือกไลท์บ็อกซ์ในการตั้งค่าลิงก์จากนั้น
- เปิดในมุมมองภาพ: ใช่
ปรับขนาด
และบังคับให้เต็มความกว้างของภาพในการตั้งค่าการปรับขนาด เพื่อให้แน่ใจว่าภาพยังคงมีความละเอียดอ่อนในทุกขนาดหน้าจอ
- บังคับให้เต็มความกว้าง: ใช่
โคลนอิมเมจโมดูลสองครั้ง
เมื่อคุณเสร็จสิ้นโมดูลภาพแรกแล้วคุณสามารถคัดลอกได้สองครั้ง
เปลี่ยนภาพ
เปลี่ยนรูปภาพในสองรายการที่ซ้ำกัน ตรวจสอบให้แน่ใจว่าภาพที่คุณอัปโหลดมีขนาดเดียวกับภาพแรก
เพิ่มเอฟเฟกต์โรลโอเวอร์ในแถว
ปรับขนาด
เมื่อเราเสร็จสิ้นการตั้งค่าแถวและพ็อดพื้นฐานแล้วก็ถึงเวลาสร้างเอฟเฟกต์โฮเวอร์! เราจะเริ่มต้นด้วยการเปลี่ยนความสูงและความกว้างของเส้นและซ่อนส่วนเกิน เปิดการตั้งค่าการปรับขนาดแถวและทำการเปลี่ยนแปลงต่อไปนี้:
- ใช้ความกว้างของรางน้ำที่กำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 20%
- ความกว้างสูงสุด: 100%
- ความสูง: 15.9vw
ที่โฉบ
ลดความกว้างเป็น "100%" ในขณะที่วางเมาส์ วิธีนี้จะทำให้ภาพแสดงเมื่อวางสายแล้ว
- ความกว้าง: 100%
ความชัดเจน
สลับไปที่แท็บขั้นสูงถัดไปและซ่อนโอเวอร์โฟลว์ วิธีนี้จะช่วยให้แน่ใจว่ารูปภาพถูกปิดบังก่อน ผู้เข้าชม วางเมาส์เหนือ (เดสก์ท็อป) หรือคลิก (แท็บเล็ต/มือถือ) บนโมดูลข้อความ
- ล้นแนวนอน: ซ่อน
- แนวตั้งล้น: ซ่อน
การเปลี่ยน
นอกจากนี้เรายังเปลี่ยนระยะเวลาของการเปลี่ยนแปลงในพารามิเตอร์การเปลี่ยนแปลง
- ระยะเวลาของการเปลี่ยนแปลง: 0ms
องค์ประกอบโรลโอเวอร์คอลัมน์หลัก
ในการสร้างโฮเวอร์กริดเราจะเปิดการตั้งค่าคอลัมน์ไปที่แท็บตัวเลือกขั้นสูงและวางโค้ด CSS ต่อไปนี้ในองค์ประกอบโฮเวอร์หลัก:
จอแสดงผล: ตาราง; ตารางเทมเพลตคอลัมน์: 20% 25% 25% 25%; กริดช่องว่าง: 10px;
โคลนบรรทัดสองครั้ง
เมื่อคุณสร้างแถวแรกเสร็จแล้วคุณสามารถโคลนได้หลายครั้งเท่าที่คุณต้องการ สำหรับตัวอย่างการออกแบบนี้เราโคลนแถวสองครั้ง
ปรับเปลี่ยนพื้นหลังไล่ระดับสีของบรรทัด 1
เปลี่ยนสีของการไล่ระดับสีแรกในพื้นหลังไล่ระดับสีของบรรทัดที่สอง
- สี 1: # ffdc96
เปลี่ยนพื้นหลังไล่ระดับสีของบรรทัด 2
ทำเช่นเดียวกันสำหรับแถวที่สาม
- สี 1: # b7c7ff
เปลี่ยนสำเนาของโมดูลข้อความและสีขีดเส้นใต้ของสองรายการที่ซ้ำกัน
ดำเนินการต่อโดยการเปลี่ยนสีขีดเส้นใต้ของรายการที่ซ้ำกันของโมดูลข้อความด้วยการคัดลอกและคุณเสร็จแล้ว!
- สีที่ขีดเส้นใต้ # 1: # ffaa00
- สีที่ขีดเส้นใต้ # 2: # 0037ff
คิดสุดท้าย
ในบทช่วยสอนนี้ เราได้แสดงวิธีแสดงภาพในตารางเลื่อนแนวนอนโดยใช้ตัวเลือกโอเวอร์โฟลว์ Divi. รูปภาพถูกเปิดเผยเมื่อวางเมาส์บนเดสก์ท็อปแล้วคลิกบนแท็บเล็ต/โทรศัพท์ แม้ว่าเราจะเปิดเผยภาพแล้ว แต่คุณก็สามารถเปิดเผยได้ เนื้อหา ที่คุณเลือกโดยการปรับเปลี่ยนพารามิเตอร์ในตัวสร้าง เราหวังว่าบทช่วยสอนนี้จะเป็นแรงบันดาลใจให้คุณสร้างการออกแบบตารางโฮเวอร์ทางเลือกของคุณเอง! หากคุณมีคำถามหรือข้อเสนอแนะใด ๆ อย่าลืมแสดงความคิดเห็นในส่วนความเห็นด้านล่าง!
