วิธีทำให้เนื้อหาแถวที่ซ่อนอยู่ปรากฏบนโฮเวอร์ด้วย Divi (ดาวน์โหลดฟรี!)
เผยแพร่แล้ว: 2019-02-07การเพิ่มการโต้ตอบที่ละเอียดอ่อนลงในเว็บไซต์ของคุณสามารถเพิ่มประสบการณ์ผู้ใช้โดยรวมที่ผู้เยี่ยมชมได้รับได้อย่างแท้จริง สิ่งหนึ่งที่จะทำให้เว็บไซต์ของคุณดูน่าสนใจยิ่งขึ้น ในขณะที่ยังคงคำนึงถึงความเป็นมิตรต่อผู้ใช้ ก็คือการทำให้เนื้อหาแถวปรากฏบนโฮเวอร์ นี่เป็นแนวทางที่ยอดเยี่ยมในการนำเสนอบริการ ผลิตภัณฑ์ คุณลักษณะ และอื่นๆ
ในบทช่วยสอนนี้ เราจะแสดงให้คุณเห็นถึงวิธีสร้างการออกแบบเฉพาะจาก A ถึง Z แต่เมื่อคุณได้รับแนวทางนี้แล้ว คุณสามารถทำให้มันใช้งานได้กับเว็บไซต์ประเภทใดก็ตามที่คุณกำลังทำงานอยู่ ที่ส่วนท้ายของบล็อกโพสต์นี้ เราจะแชร์ไฟล์ JSON ของการออกแบบนี้ด้วย ซึ่งคุณสามารถดาวน์โหลดได้ฟรีและใช้งานได้โดยไม่มีข้อจำกัดใดๆ
ไปกันเถอะ!
ดูตัวอย่าง
ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน
เดสก์ทอป
มือถือ
มาเริ่มสร้างกันเลย!
เพิ่มมาตราใหม่
สีพื้นหลังเริ่มต้น
เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าใหม่หรือหน้าที่มีอยู่แล้วเปลี่ยนสีพื้นหลังของส่วน
- สีพื้นหลัง: #e0e0e0
โฮเวอร์สีพื้นหลัง
แก้ไขสีพื้นหลังนี้เมื่อวางเมาส์เหนือ
- สีพื้นหลัง: #000000
ระยะห่าง
ไปที่แท็บออกแบบและเพิ่มค่าระยะห่างแบบกำหนดเอง เพื่อให้บทช่วยสอนนี้ใช้งานได้ เราจะใช้เฉพาะหน่วยวิวพอร์ตเท่านั้น ซึ่งจะช่วยให้มั่นใจได้ว่าทุกอย่างจะเข้าที่ ไม่ว่าหน้าจอจะเป็นขนาดใดก็ตาม
- ขอบบน: 5vw
- ขอบล่าง: 5vw
- ระยะขอบซ้าย: 3vw
- ระยะขอบขวา: 3vw
- ช่องว่างภายในด้านบน: 0px
- ช่องว่างภายในด้านล่าง: 0px
เพิ่มแถว #1
โครงสร้างคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
พื้นหลังไล่โทนสี
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและเพิ่มพื้นหลังการไล่ระดับสี
- สี 1: #ff5b79
- สี 2: rgba (255,255,255,0)
- ประเภทการไล่ระดับสี: เรเดียล
- ทิศทางเรเดียล: ศูนย์กลาง
- ตำแหน่งเริ่มต้น: 15%
- ตำแหน่งสุดท้าย: 15%
ขนาด
ทำการเปลี่ยนแปลงการตั้งค่าขนาดของแถวด้วย
- ทำให้แถวนี้เต็มความกว้าง: ใช่
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
ระยะห่าง
และเพิ่มค่าช่องว่างภายในที่กำหนดเองในการตั้งค่าการเว้นวรรค
- แผ่นรองด้านบน: 9vw
- แผ่นรองด้านล่าง: 9vw
- คอลัมน์ 1 ช่องว่างภายในด้านซ้าย: 5vw
- คอลัมน์ 1 ช่องว่างภายในด้านขวา: 5vw
- คอลัมน์ 2 ช่องว่างภายในด้านซ้าย: 5vw
- คอลัมน์ 2 ช่องว่างภายในด้านขวา: 5vw
เพิ่มโมดูลข้อความลงในคอลัมน์ 1
เพิ่มเนื้อหา
ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือโมดูลข้อความในคอลัมน์ 1 เพิ่มเนื้อหา H3 และลิงก์
ลิงก์การตั้งค่าข้อความ
จากนั้นไปที่การตั้งค่าข้อความลิงก์และทำการเปลี่ยนแปลงบางอย่างกับรูปลักษณ์ของลิงก์
- แบบอักษรของลิงก์: Didact Gothic
- ลักษณะแบบอักษรของลิงก์: ขีดเส้นใต้
- รูปแบบการขีดเส้นใต้ของลิงก์: Solid
- สีของข้อความลิงก์: #ffffff
- ขนาดข้อความลิงก์: 20px
การตั้งค่าข้อความหัวเรื่อง
แก้ไขการตั้งค่าข้อความ H3 ด้วย
- หัวข้อ 3 แบบอักษร: Didact Gothic
- หัวเรื่อง 3 สีข้อความ: #ffffff
- หัวเรื่อง 3 ขนาดข้อความ: 50px
ทัศนวิสัย
สุดท้ายแต่ไม่ท้ายสุด ปิดใช้งานโมดูลบนเดสก์ท็อป เราต้องการโมดูลนี้เพื่อแสดงในขนาดหน้าจอที่เล็กกว่าเท่านั้น
เพิ่มโมดูลตัวแบ่งในคอลัมน์ 2
ทัศนวิสัย
โมดูลที่สองและสุดท้ายที่จำเป็นในคอลัมน์ 1 คือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'
- แสดงตัวแบ่ง: ใช่
สี
จากนั้นเปลี่ยนสีตัวแบ่ง
- สี: #ffffff
ระยะห่าง
เพิ่มค่ามาร์จิ้นที่กำหนดเองบางส่วนลงในโมดูลตัวแบ่งด้วย
- ระยะขอบบน: 11vw (เดสก์ท็อป), 80px (แท็บเล็ต),
- ขอบล่าง: 50px (แท็บเล็ตและโทรศัพท์)
เพิ่มโมดูลข้อความ #1 ลงในคอลัมน์ 2
เพิ่มเนื้อหา
ต่อคอลัมน์ที่สอง! เพิ่มโมดูลข้อความที่มีเนื้อหา H4 ที่เลือกไว้
การตั้งค่าข้อความหัวเรื่อง
จากนั้นไปที่การตั้งค่าข้อความ H4 และทำการเปลี่ยนแปลงบางอย่าง
- หัวข้อที่ 4 แบบอักษร: Didact Gothic
- หัวข้อที่ 4 น้ำหนักแบบอักษร: ตัวหนา
- หัวเรื่อง 4 สีข้อความ: #ffffff
- หัวเรื่อง 4 ขนาดข้อความ: 2vw (เดสก์ท็อป), 40px (แท็บเล็ต), 30px (โทรศัพท์)
เพิ่มโมดูลข้อความ #2 ลงในคอลัมน์ 2
เพิ่มเนื้อหา
ด้านล่างโมดูลข้อความก่อนหน้า ไปข้างหน้าและเพิ่มอีกอันที่มีเนื้อหาย่อหน้าที่เลือกไว้
การตั้งค่าข้อความ
ไปที่การตั้งค่าข้อความถัดไปและทำการเปลี่ยนแปลงบางอย่าง
- แบบอักษรของข้อความ: Didact Gothic
- สีข้อความ: #ffffff
- ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 18px (แท็บเล็ตและโทรศัพท์)
- ความสูงของบรรทัดข้อความ: 2em
ระยะห่าง
เพิ่มค่าระยะขอบแบบกำหนดเองด้วย
- อัตรากำไรขั้นต้น: 2vw
- ระยะขอบขวา: 15vw
เพิ่มแถว #2
โครงสร้างคอลัมน์
เมื่อคุณแก้ไขแถวแรกและโมดูลทั้งหมดเสร็จแล้ว คุณสามารถเพิ่มแถวใหม่ได้โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ขนาด
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและทำการเปลี่ยนแปลงการตั้งค่าการปรับขนาด
- ทำให้แถวนี้เต็มความกว้าง: ใช่
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
ระยะห่าง
ลบช่องว่างภายในเริ่มต้นทั้งหมดในการตั้งค่าระยะห่างแถวด้วย
- ช่องว่างภายในด้านบน: 0px
- ช่องว่างภายในด้านล่าง: 0px
ทัศนวิสัย
สุดท้ายแต่ไม่ท้ายสุด ซ่อนแถวนี้บนแท็บเล็ตและโทรศัพท์
เพิ่มโมดูลข้อความลงในคอลัมน์
เพิ่มเนื้อหา
โมดูลเดียวที่เราต้องการในแถวนี้คือโมดูลข้อความ เพิ่มเนื้อหา H3 และลิงก์
สีพื้นหลังเริ่มต้น
จากนั้นไปที่การตั้งค่าพื้นหลังและเพิ่มสีพื้นหลังให้กับโมดูลข้อความ
- สีพื้นหลัง: #e0e0e0
โฮเวอร์สีพื้นหลัง
แก้ไขสีพื้นหลังนี้เมื่อวางเมาส์เหนือ
- สีพื้นหลัง: rgba(255,255,255,0)
การตั้งค่าข้อความเริ่มต้น
ถัดไป ไปที่การตั้งค่าข้อความและทำการเปลี่ยนแปลงบางอย่าง
- แบบอักษรของลิงก์: Didact Gothic
- ลักษณะแบบอักษรของลิงก์: ขีดเส้นใต้
- รูปแบบการขีดเส้นใต้ของลิงก์: Solid
- สีของข้อความลิงก์: #ffffff
- ขนาดข้อความลิงก์: 0px
- ระยะห่างระหว่างตัวอักษรของลิงก์: -1px
การตั้งค่าข้อความลิงก์โฮเวอร์
แก้ไขขนาดข้อความลิงก์เมื่อวางเมาส์ไว้ด้วย
- ขนาดข้อความลิงก์: 1.7vw
การตั้งค่าข้อความหัวเรื่องเริ่มต้น
ดำเนินการต่อโดยทำการเปลี่ยนแปลงการตั้งค่าข้อความ H3
- หัวข้อ 3 แบบอักษร: Didact Gothic
- ส่วนหัว 3 น้ำหนักแบบอักษร: ตัวหนา
- หัวเรื่อง 3 สีข้อความ: #000000
- หัวเรื่อง 3 ขนาดข้อความ: 12vw
- หัวเรื่อง 3 ระยะห่างตัวอักษร: -0.8vw
โฮเวอร์การตั้งค่าข้อความหัวเรื่อง
แก้ไขการตั้งค่าข้อความ H3 บางส่วนเมื่อวางเมาส์เหนือ
- หัวเรื่อง 3 สีข้อความ: #ffffff
- หัวเรื่อง 3 ขนาดข้อความ: 4vw
- หัวเรื่อง 3 ระยะห่างตัวอักษร: -0.2vw
ระยะห่าง
จากนั้นไปที่การตั้งค่าระยะห่างและเพิ่มค่าระยะขอบและช่องว่างภายในที่กำหนดเอง
- ขอบบน: -34.3vw
- ระยะขอบล่าง: -5vw
- ช่องว่างภายในด้านบน: 10vw
- แผ่นรองด้านล่าง: 10vw
- ช่องว่างภายในด้านซ้าย: 26.5vw
โฮเวอร์ระยะห่าง
แก้ไขค่าระยะห่างบนโฮเวอร์
- มาร์จิ้นสูงสุด: -34.1vw
- ระยะขอบล่าง: -5vw
- แผ่นรองด้านบน: 12vw
- แผ่นรองด้านล่าง: 12vw
- ช่องว่างภายในด้านซ้าย: 11.5vw
การเปลี่ยนผ่าน
เพิ่มระยะเวลาการเปลี่ยนผ่านของโมดูลข้อความด้วย
- ระยะเวลาการเปลี่ยนภาพ: 400ms
ส่วนโคลน
เมื่อส่วนแรกของคุณเสร็จสิ้น ให้ดำเนินการต่อและโคลนทั้งส่วนได้มากเท่าที่คุณต้องการ ในส่วนถัดไปของบทช่วยสอน เราจะแสดงการเปลี่ยนแปลงที่คุณต้องทำกับแต่ละรายการที่ซ้ำกัน
เปลี่ยนสีพื้นหลังของส่วนโฮเวอร์
สิ่งแรกที่คุณจะต้องแก้ไขคือสีพื้นหลังของส่วนโฮเวอร์
- สีพื้นหลัง: #ff5b79
เปลี่ยนพื้นหลังไล่ระดับแถว # 1
เปลี่ยนพื้นหลังการไล่ระดับสีแถว # 1 ด้วย
- สี 1: #000000
เปลี่ยนสีข้อความ & คัดลอก
พร้อมทั้งสีข้อความและสำเนาทั้งหมด
- หัวเรื่อง 3 สีข้อความ: #ff5b79
เปลี่ยนระยะห่างโมดูลข้อความ
สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนช่องว่างภายในด้านซ้ายของโมดูลข้อความในแถวที่ 2 จำนวนช่องว่างภายในที่คุณต้องใช้ขึ้นอยู่กับความยาวของเนื้อหาที่คุณใช้
- ช่องว่างภายในด้านซ้าย: 21vw
ดาวน์โหลด The Layout ฟรี
หากต้องการวางมือบนเลย์เอาต์ คุณจะต้องดาวน์โหลดเลย์เอาต์ก่อนโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม
ดาวน์โหลดฟรี
เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง
คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!
ดูตัวอย่าง
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ของหน้าจอขนาดต่างๆ กัน
เดสก์ทอป
มือถือ
ความคิดสุดท้าย
ในโพสต์นี้ เราได้แสดงวิธีเปิดเผยเนื้อหาแถวที่ซ่อนอยู่บนโฮเวอร์ ผลลัพธ์ที่เราสร้างขึ้นนั้นใช้ตัวเลือกในตัวของ Divi เท่านั้น เรายังได้แชร์ไฟล์ JSON ที่ส่วนท้ายของบทช่วยสอน ซึ่งหวังว่าจะช่วยคุณสร้างการออกแบบทางเลือกของคุณเองได้เช่นกัน หากคุณมีคำถามหรือข้อเสนอแนะใด ๆ โปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง!