วิธีแปลง Divi Rows เป็นแท็บโฮเวอร์แนวนอนและแนวตั้ง

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

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

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

แอบมอง

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

ดาวน์โหลด Divi Rows Hover Tabs Layout ฟรี

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

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

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

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

ดาวน์โหลด

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

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

ไปที่บทช่วยสอนกันไหม

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

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

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

1. ธีม Divi ติดตั้งและใช้งานอยู่
2. หน้าใหม่ที่สร้างขึ้นเพื่อสร้างตั้งแต่เริ่มต้นที่ส่วนหน้า (ตัวสร้างภาพ)
3. สามภาพที่จะใช้สำหรับเนื้อหาจำลอง

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

การสร้างแท็บโฮเวอร์แนวนอนโดยใช้ Divi Rows

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

พื้นหลังแถว ช่องว่างภายใน และเงากล่อง

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

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

พื้นหลังไล่ระดับสีซ้าย: #284f91
ไล่สีพื้นหลังด้านขวา: #4646c4

ช่องว่างภายใน: บน 50px, ด้านล่าง 50px, ด้านซ้าย 50px, ด้านขวา 50px
กล่องเงา: ดูภาพหน้าจอ
กล่องเงาสี: rgba(70,70,196,0.66)

การเพิ่มเนื้อหาลงในแถว

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

ในคอลัมน์ 1 เพิ่มรูปภาพด้วยโมดูลรูปภาพ ฉันใช้จาก Design Conference Layout Pack

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

URL ลิงก์ของปุ่ม: # (เพียงเพื่อแสดงปุ่มในตอนนี้)
ใช้สีพื้นหลัง: NO

การจัดตำแหน่งข้อความ: ซ้าย
แบบอักษรของชื่อเรื่อง: Lato
ขนาดข้อความของชื่อเรื่อง: 60px (เดสก์ท็อป), 50px (โทรศัพท์)

การสร้างแท็บ

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

ไปข้างหน้าและเพิ่มโมดูลข้อความใหม่ใต้รูปภาพในคอลัมน์ 1 และอัปเดตสิ่งต่อไปนี้:

เนื้อหา: “แท็บหนึ่ง”

สีพื้นหลัง: #284f91 (ควรตรงกับสีไล่ระดับด้านซ้ายของแถว)
การจัดตำแหน่งข้อความ: center
สีข้อความ: #ffffff
ความกว้าง: 100px
ส่วนสูง: 50px
ขอบ: -100px ด้านบน, -50px เหลือ
ช่องว่างภายใน: 14px ด้านบน

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

position: absolute !important;
top: 0;

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

ส่วนสูงและระยะห่าง

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

ในตอนนี้ ให้เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

ความสูง: 500px (เดสก์ท็อป), 900px (แท็บเล็ต), 750px (โทรศัพท์)
ระยะขอบ: บน 100px ด้านล่าง 100px
ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

ตอนนี้ให้บันทึกการตั้งค่าของคุณแล้วกลับไปเพิ่มแถวเหล่านั้นกัน

การสร้างแถวที่สองของเนื้อหาแท็บ

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

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

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

สีพื้นหลัง: #4646c4

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

ระยะขอบ: 50px ซ้าย

การเพิ่มเอฟเฟกต์โฮเวอร์ตัวกรองความทึบสำหรับแถวที่สอง

สำหรับแถวนั้น เราสามารถเพิ่มเอฟเฟกต์โฮเวอร์ฟิลเตอร์ทึบเพื่อให้มีการเปลี่ยนโฮเวอร์ที่ดีเมื่อวางเมาส์เหนือแท็บและเปิดเผยเนื้อหาของแถว

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

ความทึบ: 70% (ค่าเริ่มต้น), 100% (โฮเวอร์)

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

ระยะเวลาการเปลี่ยนภาพ: 500ms
เส้นโค้งความเร็วการเปลี่ยน: เชิงเส้น

การสร้างแถวที่สามของเนื้อหาแท็บ

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

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

ไล่สีพื้นหลังด้านซ้าย: #333333
ไล่สีพื้นหลังด้านขวา: #4646c4

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

สีพื้นหลัง: #333333
ระยะขอบ: เหลือ 150px

นี่คือลักษณะที่หน้าของคุณควรมีลักษณะก่อนที่เราจะวางแถวของเราให้ซ้อนทับกัน

ซ้อนทับแถวด้วยการวางตำแหน่งที่แน่นอน

ในการซ้อนทับแถวของเรา เราจำเป็นต้องใช้ตำแหน่งที่แน่นอน จากนั้นเราจะใช้ตัวเลือกดัชนี Z เพื่อนำแต่ละแถวไปไว้แถวหน้าเมื่อวางเมาส์เหนือแท็บ แต่เนื่องจากเรากำหนดตำแหน่งที่แน่นอนให้แถวของเรา (และพาเรนต์/ส่วนมีความสูงที่กำหนดไว้) เราจึงสามารถเพิ่มความสูง 100% ให้กับแต่ละแถวเพื่อให้ขยายความสูงทั้งหมดของส่วนได้

นี่คือวิธีการทำ

ขั้นแรก ปรับใช้โหมดโครงร่าง จากนั้นใช้การเลือกหลายรายการเพื่อเลือกทั้งสามแถวและเปิดการตั้งค่าหนึ่งในนั้นเพื่อปรับใช้โมดอลการตั้งค่าองค์ประกอบ จากนั้นอัปเดตความสูงเป็น 100%

ส่วนสูง: 100%

ซึ่งจะกำหนดความสูงของทั้งสามแถวเป็น 100%

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

position: absolute !important;
left: 0;
right: 0;
margin: auto;

ตอนนี้ปรับใช้โหมดมุมมองเดสก์ท็อปเพื่อดูว่าแถวซ้อนทับกันอย่างไรเพื่อสร้างแท็บของเรา

การเปลี่ยนลำดับของแถวบนโฮเวอร์ด้วยดัชนี Z

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

ในการดำเนินการนี้ ให้กลับไปที่โหมดการดูโครงร่างและเปิดการตั้งค่าสำหรับแถวแรกที่คุณสร้าง (ด้วยแท็บที่หนึ่ง) จากนั้นอัพเดตดัชนี z ดังนี้:

ดัชนี Z: 10

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

ดัชนี Z: 11 (โฮเวอร์)

แค่นั้นแหละ. มาดูผลสุดท้ายกัน

ผลสุดท้าย

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

และนี่คือลักษณะที่ปรากฏบนมือถือ

การสร้างแท็บโฮเวอร์แนวตั้ง

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

นี่คือสิ่งที่ต้องทำ

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

จากนั้นเปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

ช่องว่างภายใน: เหลือ 10%, ขวา 10%

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

ความกว้าง: 70% (เดสก์ท็อป), 70% (แท็บเล็ต), 80% (โทรศัพท์)
ความกว้างสูงสุด: 980px

จากนั้นอัปเดตทิศทางการไล่ระดับสีเป็น 90deg สำหรับทั้งสาม blurbs เพื่อที่เมื่อเราวางตำแหน่งแท็บทางด้านซ้าย สีการไล่ระดับสีด้านซ้ายจะกลมกลืนกับสีพื้นหลังของแท็บ

ทิศทางการไล่ระดับสี: 90deg

ตอนนี้ได้เวลาวางตำแหน่งแท็บโมดูลข้อความทางด้านซ้ายของแถวเพื่อรับแท็บแนวตั้งที่เราต้องการ

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

ระยะขอบ (เดสก์ท็อป): -50px ด้านบน, -150px เหลือ
ระยะขอบ (โทรศัพท์): -100px ด้านบน, -50px เหลือ

การตั้งค่าระยะขอบสำหรับโทรศัพท์คือการนำแท็บกลับมาเหนือแถวเพื่อแสดงแท็บแนวนอน

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

ขอบ (เดสก์ท็อป): 0px ด้านบน, -150px เหลือ
ระยะขอบ (โทรศัพท์): -100px บนสุด, 50px เหลือ

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

ระยะขอบ (เดสก์ท็อป): ด้านบน 50px, เหลือ -150px
ขอบ (โทรศัพท์): -100px ด้านบน, 150px ซ้าย

ผลสุดท้าย

ตอนนี้เรามาดูผลลัพธ์สุดท้ายกัน

และนี่คือแท็บเล็ตและโทรศัพท์หนึ่งเครื่อง

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

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

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

ไชโย!