การแปลงโมดูลข้อความเป็นคำอธิบายเฉพาะบุคคลบน Hover ด้วย Divi

เผยแพร่แล้ว: 2018-12-05

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

คำอธิบายบุคคล

มือถือ

คำอธิบายบุคคล

ขั้นตอนทั่วไป

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

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

คำอธิบายบุคคล

เพิ่มแถว

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

ไปข้างหน้าและเลือกโครงสร้างคอลัมน์ต่อไปนี้ (คุณสามารถทำงานกับโครงสร้างคอลัมน์อื่นได้เช่นกัน):

คำอธิบายบุคคล

คอลัมน์ 1 ภาพพื้นหลัง

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

คอลัมน์ 1 เล่นภาพพื้นหลังซ้ำ: ไม่เล่นซ้ำ

คำอธิบายบุคคล

ขนาด

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าขนาดของแถว

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

คำอธิบายบุคคล

ระยะห่าง

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

ช่องว่างภายในด้านบน: 150px
ช่องว่างภายในด้านล่าง: 150px

คำอธิบายบุคคล

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

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

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

คำอธิบายบุคคล

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

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

สีข้อความ: rgba(255,255,255,0)
ขนาดตัวอักษร: 0.7vw (เดสก์ท็อป), 12px (แท็บเล็ตและโทรศัพท์)
การวางแนวข้อความ: Justify

คำอธิบายบุคคล

เลื่อนการตั้งค่าข้อความ

เปลี่ยนสีข้อความเมื่อโฮเวอร์

สีข้อความ: #000000

คำอธิบายบุคคล

การตั้งค่าข้อความหัวเรื่องเริ่มต้น

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

หัวข้อ 3 น้ำหนักแบบอักษร: Ultra Bold
หัวข้อ 3 รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
หัวเรื่อง 3 สีข้อความ: rgba(255,255,255,0)
หัวเรื่อง 3 ขนาดข้อความ: 2.5vw (เดสก์ท็อป), 40px (แท็บเล็ต), 30px (โทรศัพท์)
ส่วนหัว 3 ความสูงของบรรทัด: 2.2em

คำอธิบายบุคคล

โฮเวอร์การตั้งค่าข้อความหัวเรื่อง

และใช้สีข้อความ H3 อื่นบนโฮเวอร์

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

คำอธิบายบุคคล

โคลนแถว 3 ครั้ง

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

คำอธิบายบุคคล

ตัวอย่าง #1

คำอธิบายบุคคล

เปลี่ยนโมดูลข้อความ

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

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

สีพื้นหลัง: rgba(255,255,255,0)

คำอธิบายบุคคล

โฮเวอร์สีพื้นหลัง

เปลี่ยนสีพื้นหลังนี้เมื่อโฮเวอร์

สีพื้นหลัง: rgba(255,255,255,0.73)

คำอธิบายบุคคล

ระยะห่างเริ่มต้น

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

ขอบบน: -500px
ขอบล่าง: 500px
ช่องว่างภายในด้านบน: 250px
แผ่นรองด้านล่าง: 250px
ช่องว่างภายในด้านซ้าย: 70px
ช่องว่างภายในด้านขวา: 70px

คำอธิบายบุคคล

โฮเวอร์ระยะห่าง

เปลี่ยนค่าเมื่อโฮเวอร์

อัตรากำไรขั้นต้น: 0px
ขอบล่าง: 0px
ช่องว่างภายในด้านบน: 100px
ช่องว่างภายในด้านล่าง: 100px

คำอธิบายบุคคล

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

สุดท้าย สร้างการเปลี่ยนแปลงที่ราบรื่นโดยการเพิ่มระยะเวลาการเปลี่ยนแปลงในแท็บขั้นสูง

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

คำอธิบายบุคคล