วิธีเปิดเผยรูปภาพโดยใช้กริดโฮเวอร์แนวนอนและโอเวอร์โฟลว์ที่ซ่อนอยู่ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครง Hover Grids ฟรี

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

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

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

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

ดาวน์โหลด

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

มาเริ่มสร้างใหม่กันเถอะ!

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

เพิ่มมาตราใหม่

เริ่มต้นด้วยการเพิ่มส่วนปกติใหม่ลงในเพจที่คุณกำลังดำเนินการอยู่

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

พื้นหลังไล่ระดับสีเริ่มต้น

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

• สี 1: #b1ffc4
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ศูนย์กลาง
• ตำแหน่งเริ่มต้น: 28%
• ตำแหน่งสุดท้าย: 28%

พื้นหลังไล่ระดับโฮเวอร์

เปลี่ยนพื้นหลังไล่ระดับบนโฮเวอร์

• สี 1: #b1ffc4
• สี 2: #ffffff
• ประเภทการไล่ระดับสี: เรเดียล
• ทิศทางเรเดียล: ซ้าย
• ตำแหน่งเริ่มต้น: 5%
• ตำแหน่งสุดท้าย: 5%

ระยะห่าง

ไปที่การตั้งค่าระยะห่างและเปลี่ยนค่าช่องว่างภายในและระยะขอบถัดไป

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

เส้นขอบเริ่มต้น

เพิ่มรัศมีเส้นขอบ '50px' ที่มุมขวาบนและมุมขวาล่างถัดไป

โฮเวอร์ชายแดน

นำมุมกลับมาที่ '0px' เมื่อวางเมาส์เหนือ

ค่าเริ่มต้นกล่องเงา

เพิ่มเงาของกล่องที่ละเอียดอ่อนต่อไปโดยใช้การตั้งค่าต่อไปนี้:

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.09)

เงากล่องเลื่อน

ลบเงาของกล่องเมื่อโฮเวอร์โดยแทนที่สีเงาด้วยสีที่โปร่งใสทั้งหมด

• เงาสี: rgba(0,0,0,0)

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา H2

ได้เวลาเริ่มเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความ ป้อนเนื้อหา H2 ที่คุณเลือก

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H2 ตามลำดับ:

• หัวข้อที่ 2 แบบอักษร: Acme
• รูปแบบตัวอักษรของหัวเรื่อง 2: ขีดเส้นใต้
• หัวเรื่อง 2 ขีดเส้นใต้สี: #00ff3f
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดข้อความ: 3vw

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

• แผ่นรองด้านบน: 6vw
• แผ่นรองด้านล่าง: 7vw
• ช่องว่างภายในด้านซ้าย: 2vw

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดภาพ

โมดูลที่สองที่เราต้องการในคอลัมน์นี้คือโมดูลรูปภาพ อัปโหลดภาพแนวนอนที่คุณเลือก

ไลท์บ็อกซ์

เปิดใช้งานตัวเลือกไลท์บ็อกซ์ในการตั้งค่าลิงก์ถัดไป

• เปิดในไลท์บ็อกซ์: ใช่

ขนาด

และบังคับภาพให้เต็มความกว้างในการตั้งค่าขนาด เพื่อให้แน่ใจว่ารูปภาพจะยังคงตอบสนองในทุกขนาดหน้าจอ

• บังคับเต็มความกว้าง: ใช่

โมดูลภาพโคลนสองครั้ง

เมื่อคุณสร้าง Image Module แรกเสร็จแล้ว คุณสามารถโคลนได้สองครั้ง

เปลี่ยนรูปภาพ

เปลี่ยนภาพที่ซ้ำกันทั้งสอง ตรวจสอบว่ารูปภาพที่คุณอัปโหลดมีการตั้งค่ามิติเดียวกันกับรูปภาพแรก

เพิ่มเอฟเฟกต์โฮเวอร์ไปที่ Row

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 20%
• ความกว้างสูงสุด: 100%
• ส่วนสูง: 15.9vw

เลื่อนขนาด

นำความกว้างกลับเป็น '100%' เมื่อวางเมาส์เหนือ ซึ่งจะทำให้รูปภาพปรากฏขึ้นเมื่อวางแถวนั้นแล้ว

• ความกว้าง: 100%

ทัศนวิสัย

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

การเปลี่ยนผ่าน

เรากำลังเปลี่ยนระยะเวลาการเปลี่ยนในการตั้งค่าการเปลี่ยน

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

องค์ประกอบหลักโฮเวอร์คอลัมน์

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

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

โคลนแถวสองครั้ง

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

เปลี่ยนพื้นหลังการไล่ระดับสีแถวที่ 1 ที่ซ้ำกัน

เปลี่ยนสีการไล่ระดับสีแรกของพื้นหลังไล่ระดับสีของแถวที่สอง

• สี 1: #ffdc96

เปลี่ยนพื้นหลังการไล่ระดับสีแถวที่ 2 ที่ซ้ำกัน

ทำเช่นเดียวกันสำหรับแถวที่สาม

• สี 1: #b7c7ff

เปลี่ยนการคัดลอกโมดูลข้อความและสีขีดเส้นใต้ของทั้งสองรายการที่ซ้ำกัน

ดำเนินการต่อโดยแก้ไขสีขีดเส้นใต้ของโมดูลข้อความทั้งสองที่ซ้ำกันพร้อมกับสำเนา เท่านี้ก็เรียบร้อย!

• ขีดเส้นใต้สี #1: #ffaa00
• ขีดเส้นใต้สี #2: #0037ff

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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