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

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

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

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

ขอเริ่มต้น!

การสำรวจ

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

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

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

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

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

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

การสร้างเค้าโครงการวางซ้อนเนื้อหาที่ขยายได้ใน Divi

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

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

ก่อนเพิ่มโมดูล ให้อัปเดตพารามิเตอร์บรรทัดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 4

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

อ่านคู่มือของเราได้ที่ Divi: วิธีสร้างตารางคอลัมน์ของเหลวบนโฮเวอร์

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

เพิ่มโมดูล Blurb ลงในคอลัมน์ 1

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

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

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

หมายเหตุ: สำหรับตัวอย่างนี้ เรากำลังใช้ภาพเบียร์พื้นหลังโปร่งใสที่นำมาจากแพ็คเลย์เอาต์ « โรงเบียร์“. พวกมันมีขนาด 128 พิกเซลคูณ 359 พิกเซล ดังนั้นเราจึงใช้ขนาดภาพจริง

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

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

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

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

height: 400px;

ตัวเลือกแบบเลื่อนลง 'ทัศนวิสัย' และทำการเปลี่ยนแปลงดังต่อไปนี้:

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

เพิ่มเนื้อหาไปยังโมดูล Blurb

ตอนนี้เราพร้อมที่จะเริ่มปรับแต่งโมดูล 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
• สีข้อความ (เดสก์ท็อป): clear
• สีข้อความ (โฮเวอร์): #121212

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

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

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

• มาตราส่วนการแปลง (X และ Y): 50%

• แปลงแปล
  • แกน Y: 50%
  • แกน X: 30%

อ่านคู่มือของเราได้ที่: Divi: วิธีสร้างส่วนท้ายที่ติดหนึบด้วยเอฟเฟกต์ "เปิดเผย"

• กำเนิดการแปลง: ล่างและขวา

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

• มาตราส่วนการแปลง (Y และ X) (โฮเวอร์): 100%

• แปลงแปล (Y และ X) (โฮเวอร์): 0%

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

direction: rtl

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

ผล

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

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

คอลัมน์ซ้ำ

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

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

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

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

อัพเดตพารามิเตอร์ของโมดูล Blurb

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

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

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

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

ผล

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

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

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

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

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

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

อัพเดตพารามิเตอร์ของโมดูล Blurb

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

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

• Transform Translate (แกน Y) (เดสก์ท็อป): -50%
• กำเนิดการแปลง: บนขวา

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

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

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในพื้นที่ หัวข้อประกาศ :

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

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

direction: rtl;
height: 100%;

การออกแบบตัวปรับมุมที่ขยายได้จากตำแหน่งบนซ้าย

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

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

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

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

อัพเดตพารามิเตอร์ของโมดูล Blurb

ถัดไป เปิดการตั้งค่าข้อความโมดูล Blurb ในคอลัมน์ 2 และอัปเดตสิ่งต่อไปนี้:

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

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

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

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

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ลงในพื้นที่ หัวข้อประกาศ :

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

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

height: 100%;

เสร็จสิ้นการออกแบบเลย์เอาต์

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

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

• ความเป็นมา: #efefef

เพิ่มหัวข้อ

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

จากนั้นเพิ่มโมดูลข้อความ

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

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

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

• ช่องว่างภายใน (ซ้าย): 50px (เดสก์ท็อป), 30px (แท็บเล็ต), 24px (โทรศัพท์)

ผลสุดท้าย

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

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

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

สรุป

แท็บมุมที่แสดงในบทช่วยสอนนี้จะใช้ได้กับเนื้อหาทุกประเภทที่คุณต้องการแสดงบน เว็บไซต์เว็บ ดีวี 

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

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

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

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

...