ใช้ Hover Text Shadows เพื่อสร้างเนื้อหาแบบโต้ตอบด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

เข้าใกล้

• ตัวอย่างที่เราจะสร้างใหม่นั้นยอดเยี่ยมสำหรับเพจต่างๆ แต่คุณสามารถทำให้มันใช้งานได้กับคำที่มีอักขระ 5 ตัวหรือ 6 ตัว (จับคู่กับโครงสร้างคอลัมน์)
• อักขระแต่ละตัวจะทุ่มเทให้กับโมดูลข้อความแต่ละตัว
• เรากำลังใช้แถวที่มีจำนวนคอลัมน์เพียงพอในการเชื่อมต่ออักขระต่างๆ ของคำ และทำให้ดูเหมือนสร้างขึ้นในโมดูลเดียวกัน
• โดยค่าเริ่มต้น เราจะกำหนดให้สีข้อความของโมดูลข้อความตรงกับสีพื้นหลังของส่วน
• เพื่อให้แน่ใจว่าอักขระยังคงอ่านได้ เราจะใช้เงาข้อความสีขาวกับอักขระด้วย
• เมื่อคุณวางเมาส์เหนือตัวอักษร เงาข้อความจะหายไปและสีข้อความจะเปลี่ยนไป ทำให้คุณรู้สึกว่าข้อความกำลังเต็ม
• ขณะที่วางเมาส์ไว้เหนือตัวละคร จะมีข้อมูลเพิ่มเติมปรากฏขึ้นด้วย
• สำหรับขนาดหน้าจอที่เล็กลง ข้อเท็จจริงของบริษัทและ/หรือข้อมูลจะมีอยู่ตั้งแต่ต้น

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

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

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

สีพื้นหลัง

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

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

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

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

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

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

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

• น้ำหนักแบบอักษรของข้อความ: Ultra Bold
• สีข้อความ: #03007d
• ขนาดตัวอักษร: 27vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.1em
• ความแรงของเงาข้อความ: 0.01em
• สีเงาข้อความ: #ffffff
• การวางแนวข้อความ: ซ้าย

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

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

• สีข้อความ: #ffffff
• ข้อความเงาสี: rgba(255,255,255,0)

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

ดำเนินการต่อโดยไปที่การตั้งค่าข้อความรายการ ส่วนสำคัญของการตั้งค่าเหล่านี้คือการทำให้แน่ใจว่าขนาดข้อความบนเดสก์ท็อปคือ '0px' แต่เพิ่ม '18px' เป็นขนาดข้อความสำหรับขนาดหน้าจอที่เล็กกว่า วิธีนี้จะช่วยให้แน่ใจว่าข้อความในรายการแสดงขึ้นบนหน้าจอขนาดที่เล็กกว่าแต่จะไม่แสดงบนเดสก์ท็อปถ้าไม่ได้วางเมาส์ไว้

• น้ำหนักแบบอักษรของรายการที่ไม่เรียงลำดับ: เบา
• สีข้อความของรายการที่ไม่เรียงลำดับ: #ffffff
• ขนาดข้อความรายการที่ไม่เรียงลำดับ: 0px (เดสก์ท็อป), 18px (แท็บเล็ตและโทรศัพท์)
• สีเงาข้อความรายการที่ไม่เรียงลำดับ: rgba(255,255,255,0)
• Unordered List Style Type: วงกลม
• ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายนอก
• เยื้องรายการที่ไม่เรียงลำดับ: 0px

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

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

• ขนาดข้อความรายการที่ไม่เรียงลำดับ: 18px

ระยะห่าง

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

• ขอบล่าง: 50px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: -4vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

Clone Text Module 4 ครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

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

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

เปลี่ยนเนื้อหา

เปิดรายการที่ซ้ำกันในคอลัมน์ 2 และเปลี่ยนเนื้อหา

เปลี่ยนระยะห่าง

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

• ขอบล่าง: 50px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: -2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: -2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

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

เปลี่ยนเนื้อหา

เปลี่ยนเนื้อหาของรายการที่ซ้ำกันในคอลัมน์ 3 ด้วย

เปลี่ยนระยะห่าง

พร้อมกับการตั้งค่าระยะห่างในแท็บการออกแบบ

• ขอบล่าง: 50px (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: -5.5vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: 1.5vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

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

เปลี่ยนเนื้อหา

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

เปลี่ยนระยะห่าง

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

• ขอบล่าง: 50px
• ระยะขอบซ้าย: -6vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: 2vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

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

เปลี่ยนเนื้อหา

ต่อที่ซ้ำกันล่าสุด เปลี่ยนเนื้อหาในกล่องเนื้อหา

เปลี่ยนระยะห่าง

พร้อมกับการตั้งค่าระยะห่างแบบกำหนดเอง

• ขอบล่าง: 50px
• ระยะขอบซ้าย: -7vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: 3vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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