Divi: วิธีสร้างแท็บด้วยเอฟเฟกต์โฮเวอร์จากเส้น

ต้องการสร้างแท็บที่มีเอฟเฟกต์โฮเวอร์จากแถวด้วย Divi ?

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

แต่ในบทช่วยสอนนี้ เราจะแสดงวิธีแปลงแถวให้คุณดู Divi แท็บและปรากฏบนโฮเวอร์ 

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

ไม่จำเป็นต้องใช้ปลั๊กอิน!

ขอเริ่มต้น

การสำรวจ

นี่คือภาพรวมของแท็บที่เราจะสร้างร่วมกันในบทช่วยสอนนี้

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

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

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

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

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

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

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

ในส่วนเริ่มต้นที่มีอยู่ ให้เพิ่มแถวสองคอลัมน์

พื้นหลังเส้น เติมกล่องและเงา

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

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

• ช่องว่างภายใน: 50px (บนและล่าง), 50px (ซ้ายและขวา)

• กล่องเงา: ดูภาพหน้าจอ
• กล่องสีเงา: rgba(70,70,196,0.66)

เพิ่มเนื้อหาในแถว

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

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

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

• ใช้สีพื้นหลัง: NO

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

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

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

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

• เนื้อหา: "แท็บ 1"

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

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

position: absolute !important;
top: 0;

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

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

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

การสร้างบรรทัดที่สอง

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

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

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

เพิ่มเอฟเฟกต์โฮเวอร์

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

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

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

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

การสร้างแท็บที่สาม

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

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

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

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

• พื้นหลัง: #333333
• ระยะขอบ: 150px (ซ้าย)

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

เส้นทับซ้อนกับตำแหน่งที่แน่นอน

ในการซ้อนทับเส้นของเรา เราจำเป็นต้องใช้ตำแหน่งที่แน่นอน ขั้นแรก อัปเดตความสูงของทั้งสามแถวเป็น 100%

• ส่วนสูง: 100%

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

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

นี่คือลักษณะแท็บของเราในขณะนี้

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

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

อ่าน: วิธีสร้างภาพซ้อนทับแบบกำหนดเองใน Divi

ในการดำเนินการนี้ ให้เปิดการตั้งค่าแถวแรกและอัปเดตดัชนี z ดังนี้:

ดัชนี Z: 10

จากนั้นวางดัชนี Z ของอีกสองบรรทัดบนโฮเวอร์

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

เรียบร้อยแล้ว ! มาดูผลสุดท้ายกัน

ผลสุดท้าย

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

การสร้างแท็บแนวตั้ง

หากคุณต้องการเพิ่มแท็บแนวตั้งให้กับแถว ให้ทำดังนี้

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

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

• ช่องว่างภายใน: 10% (ซ้ายและขวา)

อัปเดตการตั้งค่าต่อไปนี้สำหรับทั้งสามบรรทัดของส่วนที่ซ้ำกันดังต่อไปนี้:

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

ถัดไป อัปเดตทิศทางการไล่ระดับสีเป็น 90 องศาสำหรับทั้งสามเส้น

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

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

ดูเพิ่มเติม: วิธีสร้างเมนู Spinning Wheel บน Hover ใน Divi

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

• ระยะขอบ (เดสก์ท็อป): -50px (บนสุด), -150px (ซ้าย)

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

• ระยะขอบ (เดสก์ท็อป): 0px (บนสุด), -150px (ซ้าย)

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

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

ผลสุดท้าย

ตอนนี้เรามาดูผลสุดท้าย

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

สรุป

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

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

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

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

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

...