วิธีเปิดเผยเนื้อหาคอลัมน์บน Hover ด้วย Divi (ดาวน์โหลดฟรี!)

เผยแพร่แล้ว: 2019-02-16

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

ดังที่คุณเห็นใน GIF ด้านล่าง เรามีการเปลี่ยนโฮเวอร์ที่ราบรื่นซึ่งแสดงเนื้อหาคอลัมน์เมื่อวางเมาส์ไว้

เปิดเผยเนื้อหาคอลัมน์

มือถือ

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

เปิดเผยเนื้อหาคอลัมน์

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

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

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

ระยะห่าง

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

  • ช่องว่างภายในด้านบน: 10vw
  • แผ่นรองด้านล่าง: 15vw

เปิดเผยเนื้อหาคอลัมน์

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

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

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

เปิดเผยเนื้อหาคอลัมน์

ขนาด

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

  • ทำให้แถวนี้เต็มความกว้าง: ใช่
  • ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
  • ความกว้างของรางน้ำ: 1

เปิดเผยเนื้อหาคอลัมน์

ระยะห่าง

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

  • ช่องว่างภายในด้านซ้าย: 8vw
  • ช่องว่างภายในด้านขวา: 8vw
  • คอลัมน์ 1 ช่องว่างภายในด้านขวา: 2vw
  • คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 1vw
  • คอลัมน์ 2 ช่องว่างภายในด้านขวา: 1vw
  • คอลัมน์ 3 ช่องว่างภายในด้านซ้าย: 2vw

เปิดเผยเนื้อหาคอลัมน์

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

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

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เริ่มต้นด้วยโมดูลข้อความในคอลัมน์ 1 เพิ่มเนื้อหา H3 ที่เลือก

เปิดเผยเนื้อหาคอลัมน์

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

จากนั้นไปที่การตั้งค่าข้อความหัวข้อและทำการเปลี่ยนแปลงลักษณะที่ปรากฏของเนื้อหา H3

  • หัวข้อ 3 แบบอักษร: Didact Gothic
  • ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
  • การจัดแนวข้อความหัวเรื่อง 3: Center
  • หัวเรื่อง 3 สีข้อความ: #3567ff
  • หัวเรื่อง 3 ขนาดข้อความ: 1.2vw (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)

เปิดเผยเนื้อหาคอลัมน์

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองให้กับโมดูลข้อความถัดไป

  • ระยะขอบล่าง: 4vw
  • แผ่นรองด้านบน: 4vw
  • แผ่นรองด้านล่าง: 4vw

เปิดเผยเนื้อหาคอลัมน์

กล่องเงา

และให้โมดูลมีเงาของกล่องที่ละเอียดอ่อน

  • ตำแหน่งแนวตั้งเงาของกล่อง: 36px
  • ความแรงของกล่องเงาเบลอ: 60px
  • เงาสี: rgba(0,0,0,0.06)

เปิดเผยเนื้อหาคอลัมน์

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์ 1

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

ดำเนินการต่อโดยเพิ่มโมดูลข้อความอื่นด้านล่างโมดูลก่อนหน้า เพิ่มเนื้อหาย่อหน้าที่เลือก

เปิดเผยเนื้อหาคอลัมน์

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

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

  • แบบอักษรข้อความ: เปิด Sans
  • ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 14px (แท็บเล็ตและโทรศัพท์)
  • ระยะห่างของตัวอักษรข้อความ: -0.05vw
  • ความสูงของบรรทัดข้อความ: 2.2em
  • การวางแนวข้อความ: Justified
  • สีข้อความ: Dark

เปิดเผยเนื้อหาคอลัมน์

เปิดเผยเนื้อหาคอลัมน์

ระยะห่าง

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

  • ระยะขอบล่าง: 3vw
  • ช่องว่างภายในด้านบน: 2vw
  • แผ่นรองด้านล่าง: 2vw
  • ช่องว่างภายในด้านซ้าย: 4vw
  • ช่องว่างภายในด้านขวา: 4vw

เปิดเผยเนื้อหาคอลัมน์

ชายแดน

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

  • ความกว้างของขอบขวา: 1px
  • สีขอบขวา: #e5e5e5

เปิดเผยเนื้อหาคอลัมน์

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

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

เปิดเผยเนื้อหาคอลัมน์

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบแล้วเปลี่ยนการจัดตำแหน่งปุ่มให้อยู่ตรงกลาง

  • การจัดตำแหน่งปุ่ม: กึ่งกลาง

เปิดเผยเนื้อหาคอลัมน์

การตั้งค่าปุ่ม

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

  • ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
  • ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 15px (แท็บเล็ตและโทรศัพท์)
  • สีข้อความของปุ่ม: #000000
  • ความกว้างของขอบปุ่ม: 1px
  • สีเส้นขอบของปุ่ม: #dddddd
  • รัศมีเส้นขอบของปุ่ม: 0px
  • ระยะห่างระหว่างตัวอักษรของปุ่ม: -0.05vw
  • น้ำหนักแบบอักษร: ตัวหนา
  • รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

เปิดเผยเนื้อหาคอลัมน์

เปิดเผยเนื้อหาคอลัมน์

ระยะห่าง

ลองใช้ค่าระยะห่างของโมดูลปุ่มด้วย

  • ขอบล่าง: 100px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างภายในด้านบน: 0.8vw (เดสก์ท็อป), 10px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างภายในด้านล่าง: 0.8vw (เดสก์ท็อป), 10px (แท็บเล็ตและโทรศัพท์)
  • Padding ด้านซ้าย: 3.5vw (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)
  • ช่องว่างภายในด้านขวา: 3.5vw (เดสก์ท็อป), 50px (แท็บเล็ตและโทรศัพท์)

เปิดเผยเนื้อหาคอลัมน์

โคลนโมดูลในคอลัมน์ 1 สองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปิดเผยเนื้อหาคอลัมน์

เปลี่ยนสีข้อความของโมดูลข้อความ #1 ในคอลัมน์ 2

เปิดโมดูลข้อความแรกในคอลัมน์ 2 และเปลี่ยนสีข้อความ

  • หัวเรื่อง 3 สีข้อความ: #6d28c1

เปิดเผยเนื้อหาคอลัมน์

เปลี่ยนสีข้อความของโมดูลข้อความ #1 ในคอลัมน์ 3

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

  • หัวเรื่อง 3 สีข้อความ: #15668e

เปิดเผยเนื้อหาคอลัมน์

เพิ่มโมดูลข้อความซ้อนทับในคอลัมน์ 1

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

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

เปิดเผยเนื้อหาคอลัมน์

พื้นหลังไล่โทนสี

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

  • สี 1: #6a30ff
  • สี 2: #3567ff
  • ทิศทางการไล่ระดับสี: 124deg

เปิดเผยเนื้อหาคอลัมน์

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

เปลี่ยนการตั้งค่าข้อความถัดไป

  • แบบอักษรของข้อความ: Didact Gothic
  • สีข้อความ: #ffffff
  • ขนาดตัวอักษร: 2vw
  • การวางแนวข้อความ: ศูนย์

เปิดเผยเนื้อหาคอลัมน์

ระยะห่าง

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

  • ขอบบน: -38vw
  • ช่องว่างภายในด้านบน: 15vw
  • แผ่นรองด้านล่าง: 15vw

เปิดเผยเนื้อหาคอลัมน์

ชายแดน

เพิ่มมุมโค้งมนให้กับโมดูลข้อความถัดไป

เปิดเผยเนื้อหาคอลัมน์

กล่องเงา

พร้อมด้วยกล่องเงาที่ละเอียดอ่อน

  • ความชัดเจนของเงากล่อง: 40px
  • เงาสี: rgba(0,0,0,0.16)

เปิดเผยเนื้อหาคอลัมน์

ตัวกรองเริ่มต้น

จากนั้นไปที่การตั้งค่าตัวกรองและตรวจสอบให้แน่ใจว่าความทึบเป็น '100%' โดยค่าเริ่มต้น

  • ความทึบ: 100%

เปิดเผยเนื้อหาคอลัมน์

โฮเวอร์ฟิลเตอร์

เปลี่ยนความทึบเมื่อโฮเวอร์เป็น '0%' ซึ่งจะทำให้โมดูลหายไปและจะทำให้เนื้อหาในคอลัมน์ทั้งหมดปรากฏขึ้นแทน

  • ความทึบ: 0%

เปิดเผยเนื้อหาคอลัมน์

CSS ที่กำหนดเอง

เพื่อให้แน่ใจว่าโมดูลข้อความยังคงอยู่ที่ด้านบนของเนื้อหาคอลัมน์ทั้งหมด ให้เพิ่มโค้ด CSS สองบรรทัดในแท็บขั้นสูงของโมดูลข้อความ 

z-index: 99;
position: relative

เปิดเผยเนื้อหาคอลัมน์

ทัศนวิสัย

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

เปิดเผยเนื้อหาคอลัมน์

โคลนโมดูลข้อความซ้อนทับสองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

เปิดเผยเนื้อหาคอลัมน์

เปลี่ยนพื้นหลังการไล่ระดับสีของโมดูลข้อความซ้อนทับในคอลัมน์ 2

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

  • สี 1: #d530ff
  • สี 2: #6d28c1

เปิดเผยเนื้อหาคอลัมน์

เปลี่ยนพื้นหลังไล่ระดับสีของโมดูลข้อความซ้อนทับในคอลัมน์ 3

และทำเช่นเดียวกันกับการทำซ้ำครั้งที่สองเช่นกัน

  • สี 1: #41ff30
  • สี 2: #15668e

เปิดเผยเนื้อหาคอลัมน์

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

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

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

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

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

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

ดูตัวอย่าง

เดสก์ทอป

เปิดเผยเนื้อหาคอลัมน์

มือถือ

เปิดเผยเนื้อหาคอลัมน์

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

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