วิธีเปิดเผยเนื้อหาเมื่อวางเมาส์เหนือด้วยการขยายแท็บมุมใน Divi (ดาวน์โหลดฟรี)

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

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

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

แอบมอง

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

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

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

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

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

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

ดาวน์โหลด

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

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

Letis ได้รับการกวดวิชาเราจะ?

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

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

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

การสร้างเลย์เอาต์การวางซ้อนเนื้อหาที่ขยายได้ตั้งแต่เริ่มต้น

ส่วนที่ 1: การสร้างแท็บมุมขยายจากตำแหน่งด้านล่างขวา

ในการเริ่มต้น ให้เพิ่มแถวสองคอลัมน์ (ครึ่งหนึ่งครึ่ง) ในส่วนปกติ

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

• ความกว้างของรางน้ำ: 4

สำหรับรายการเด่นแรกนี้ เราจะสร้างภาพพื้นหลังของคอลัมน์ซึ่งจะมีแท็บมุม (โดยใช้โมดูลการนำเสนอ) ที่ด้านล่างขวาของคอลัมน์ที่ขยายและซ้อนทับทั้งคอลัมน์/รูปภาพเมื่อวางเมาส์เหนือ

เริ่มต้นด้วยการเพิ่มโมดูลการนำเสนอ

เพิ่มโมดูล Blurb

เพิ่มโมดูลการนำเสนอลงในคอลัมน์ 1

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

คอลัมน์ 1 การตั้งค่า

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

• ภาพพื้นหลัง [แทรกรูปภาพ]
• ขนาดภาพพื้นหลัง: ขนาดจริง

หมายเหตุ: ตัวอย่างเช่น ฉันใช้ภาพเบียร์พื้นหลังโปร่งใสที่ถ่ายจาก Brewery Layout Pack มีขนาด 128px x 359px ซึ่งเป็นสาเหตุที่ฉันใช้ขนาดจริงของภาพ

คอลัมน์ 1 เส้นขอบ

• มุมโค้งมน : 10px ล่างขวา
• ความกว้างของเส้นขอบขวา: 2px
• สีขอบขวา: #e94558
• ความกว้างขอบล่าง: 2px
• สีขอบล่าง: #e94558

CSS ที่กำหนดเองและโอเวอร์โฟลว์

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

height: 400px;

ปรับปรุงดังต่อไปนี้:

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

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

การเพิ่มเนื้อหาโมดูล Blurb

ตอนนี้ เราพร้อมที่จะเริ่มปรับแต่งโมดูลการนำเสนอภายในคอลัมน์ 1 แล้ว เปิดการตั้งค่าการนำเสนอและอัปเดตสิ่งต่อไปนี้:

• ชื่อเรื่อง: Mango IPA
• ร่างกาย:

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

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

การออกแบบโมดูล Blurb

กำหนดสีพื้นหลังบนโฮเวอร์ดังนี้:

• สีพื้นหลัง (เดสก์ท็อป): โปร่งใส
• สีพื้นหลัง (โฮเวอร์): rgba(255,255,255,0.9)

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• แบบอักษรของชื่อเรื่อง: Oswald
• รูปแบบตัวอักษรของชื่อเรื่อง: TT
• ขนาดข้อความชื่อเรื่อง: 40px
• น้ำหนักแบบอักษรของร่างกาย: กึ่งหนา
• สีข้อความ (เดสก์ท็อป): โปร่งใส
• สีข้อความ (โฮเวอร์): #121212

• ความกว้างของรูปภาพ: 100px (เดสก์ท็อป), 64px (โทรศัพท์)
• ความกว้างของเนื้อหา: 100%
• ส่วนสูง: 100%
• Padding (เดสก์ท็อป): 15% บน, 15% ด้านล่าง, 8% ซ้าย, 8% ขวา
• Padding (โฮเวอร์): 8% บน 8% ล่าง 8% ซ้าย 8% ขวา

• มุมโค้งมน (ค่าเริ่มต้น): 20px บนซ้าย
• มุมโค้งมน (โฮเวอร์): 10px บนซ้าย
• ความกว้างของเส้นขอบด้านบน: 4px (เดสก์ท็อป), 2px (โฮเวอร์)
• สีขอบบน: #e94558
• ความกว้างของเส้นขอบด้านซ้าย: 4px (เดสก์ท็อป), 2px (โฮเวอร์)
• ขอบซ้ายสี: #e94558

ตัวเลือกการแปลง (เดสก์ท็อป)

• เปลี่ยนสเกลแกน Y: 50%
• เปลี่ยนสเกลแกน X: 50%
• แปลงแกนแปล Y: 50%
• แปลงแกน X แปล: 30%
• กำเนิดการแปลง: ล่างขวา

ตัวเลือกการแปลง (โฮเวอร์)

• เปลี่ยนสเกลแกน Y (โฮเวอร์): 100%
• เปลี่ยนสเกลแกน X (โฮเวอร์): 100%
• แปลงแกนแปล Y (โฮเวอร์): 0%
• แปลงแกน X แปล (โฮเวอร์): 0%

ในการพลิกภาพการนำเสนอไปทางด้านขวา ให้เพิ่ม CSS แบบกำหนดเองต่อไปนี้ลงในกล่องเนื้อหา Blurb:

direction: rtl

หมายเหตุ: ทิศทาง "rtl" หมายถึง "ขวาไปซ้าย" ซึ่งจะเปลี่ยนลำดับเริ่มต้นของเนื้อหา (ซ้ายไปขวา)

ผลลัพธ์

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

ส่วนที่ 2: การสร้างแท็บมุมขยายจากตำแหน่งล่างซ้าย

ทำซ้ำคอลัมน์

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

อัปเดตการตั้งค่าคอลัมน์ 2

ถัดไป เปิดการตั้งค่าสำหรับคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

• มุมโค้งมน: 10px ล่างซ้าย
• ความกว้างของเส้นขอบขวา: 0px
• ความกว้างของเส้นขอบด้านซ้าย: 2px
• ขอบซ้ายสี: #e94558

อัปเดตการตั้งค่าประกาศ

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

• การจัดตำแหน่งข้อความ: right
• มุมโค้งมน (เดสก์ท็อป): 20px บนขวา
• มุมโค้งมน (โฮเวอร์): 10px บนขวา
• ความกว้างของเส้นขอบด้านซ้าย: 0px
• ความกว้างของขอบขวา: 4px (เดสก์ท็อป), 2px (โฮเวอร์)
• สีขอบขวา: #e94558

• แปลงแกน X แปล (เดสก์ท็อป): -30%
• Transform Origin (เดสก์ท็อป): ล่างซ้าย

จากนั้นตรวจสอบให้แน่ใจว่าได้ลบ CSS ที่กำหนดเองในกล่องเนื้อหา Blurb

ผลลัพธ์

นี่คือผลลัพธ์ สังเกตว่าอันนี้สมมาตรกับอันแรกและขยายจากตำแหน่งล่างซ้ายของคอลัมน์

ส่วนที่ 3: การสร้างแท็บมุมขยายจากตำแหน่งบนขวา

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

อัปเดตการตั้งค่าคอลัมน์ 1

ถัดไป เปิดการตั้งค่าของแถวที่ซ้ำกัน จากนั้นเปิดการตั้งค่าสำหรับคอลัมน์ 1 และอัปเดตสิ่งต่อไปนี้:

• มุมมน 10px บนขวา
• ความกว้างขอบล่าง: 0px
• ความกว้างขอบด้านบน: 2px
• สีขอบบน: #e94558

อัปเดตการตั้งค่าโมดูล Blurb

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

• มุมโค้งมน (เดสก์ท็อป): 20px ล่างซ้าย
• มุมโค้งมน (โฮเวอร์): 10px ล่างซ้าย
• ความกว้างขอบด้านบน: 0px
• ความกว้างขอบด้านล่าง: 4px (เดสก์ท็อป), 2px (โฮเวอร์)
• สีขอบล่าง: #e94558
• แปลงแกนแปล Y (เดสก์ท็อป): -50%
• กำเนิดการแปลง: บนขวา

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

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

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในกล่อง Blurb Title:

position: absolute;
bottom: 0;
left: 15px;

จากนั้นเพิ่ม CSS ต่อไปนี้ลงใน Blurb Content Box:

direction: rtl;
height: 100%;

ส่วนที่ 4: การสร้างแท็บมุมขยายจากตำแหน่งซ้ายบน

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

อัปเดตการตั้งค่าคอลัมน์ 2

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

• มุมโค้งมน: 10px บนซ้าย
• ความกว้างขอบล่าง: 0px
• ความกว้างขอบด้านบน: 2px
• สีขอบบน: #e94558

อัปเดตการตั้งค่าประกาศ

ถัดไป เปิดการตั้งค่าสำหรับการนำเสนอในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

• มุมโค้งมน (เดสก์ท็อป): 20px ด้านล่างขวา
• มุมโค้งมน (โฮเวอร์): 10px ล่างขวา
• ความกว้างขอบด้านบน: 0px
• ความกว้างขอบด้านล่าง: 4px (เดสก์ท็อป), 2px (โฮเวอร์)
• สีขอบล่าง: #e94558

จากนั้นอัปเดตตัวเลือกการแปลง:

• แปลงแกน X แปล (เดสก์ท็อป): -30%
• กำเนิดการแปลง: บนซ้าย

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

จากนั้นเพิ่ม Custom CSS ต่อไปนี้ลงในกล่อง Blurb Title:

position: absolute;
bottom: 0%;
right: 0%;

จากนั้นเพิ่ม CSS ต่อไปนี้ลงในกล่องเนื้อหา Blurb:

height: 100%;

ส่วนที่ 4: จบการออกแบบเลย์เอาต์

ส่วนสีพื้นหลัง

เพิ่มสีพื้นหลังของส่วนดังนี้:

• สีพื้นหลัง: #efefef

การเพิ่มชื่อเรื่อง

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

เพิ่มเนื้อหา: "ตามฤดูกาล"

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

• แบบอักษรของหัวเรื่อง 2: Merriweather
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• ส่วนหัว 2 รูปแบบตัวอักษร: TT
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #999999
• หัวเรื่อง 2 ขนาดข้อความ: 50px (เดสก์ท็อป), 30px (แท็บเล็ต), 24px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 1em
• ช่องว่างภายใน: เหลือ 50px (เดสก์ท็อป), ซ้าย 30px (แท็บเล็ต), เหลือ 24px (โทรศัพท์)

ผลสุดท้าย

ตรวจสอบผลลัพธ์สุดท้ายของเค้าโครงด้วยแท็บมุมที่ขยายออก

และนี่คือการออกแบบบนมือถือ

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

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

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

ไชโย!