วิธีเพิ่มเอฟเฟกต์โฮเวอร์แบบขีดเส้นใต้และแบบโอเวอร์ไลน์ในเมนู Divi

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

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

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

วิธีเพิ่มเอฟเฟกต์โฮเวอร์แบบขีดเส้นใต้และแบบโอเวอร์ไลน์ในเมนู Divi

ขั้นตอนที่ 1: สร้างหรือเปิดเทมเพลตส่วนหัว

บนแดชบอร์ด WordPress ของคุณ ไปที่ Divi -> Theme Builder ในหน้าตัวสร้างธีม ให้สร้างเทมเพลตส่วนหัวใหม่หรือเปิดเทมเพลตที่มีอยู่โดยคลิกปุ่ม เพิ่มส่วนหัวร่วม หรือเลือกเทมเพลตของส่วนหัวที่คุณต้องการเพิ่มเอฟเฟกต์การขีดเส้นใต้หรือโอเวอร์ไลน์แบบมีสไตล์

หากคุณกำลังสร้างส่วนหัวตั้งแต่เริ่มต้น เมื่อคุณเข้าสู่เทมเพลตส่วนหัวแล้ว คุณสามารถเริ่มต้นด้วยการออกแบบได้

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

จากนั้น แก้ไขและจัดสไตล์ส่วนหัวของคุณตามที่คุณต้องการ

ขั้นตอนที่ 2: เพิ่ม CSS ที่กำหนดเอง

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

ไปที่ การตั้งค่าเพจ โดยคลิกปุ่มเฟือง (️) บนเครื่องมือแก้ไขเทมเพลตส่วนหัว หลังจากนั้นไปที่แท็บ ขั้นสูง -> CSS แบบกำหนดเอง เมื่อคุณเข้าสู่ส่วน CSS ที่กำหนดเอง ให้คัดลอกส่วนย่อย CSS แบบง่ายด้านล่างแล้ววางลงในช่องอินพุต CSS ที่กำหนดเอง

นี่คือตัวอย่างโค้ด CSS ที่คุณสามารถใช้เพื่อเพิ่มเอฟเฟกต์โฮเวอร์ที่ขีดเส้นใต้อย่างมีสไตล์ให้กับเมนูของคุณ:

 .et_pb_menu_0_tb_header ul li > a:ก่อน{
    เนื้อหา: '';
    ความกว้าง: 0;
    ซ้าย: 50%;
    ความสูง: 4px;
    รัศมีเส้นขอบ: 2px;
    พื้นหลัง: RGB (145, 255, 2);
    ตำแหน่ง: แน่นอน;
    ดัชนี z: -1;
    ด้านล่าง: 14px;
    ความทึบ: 0;
    การเปลี่ยนแปลง: .4s ลูกบาศก์เบซิเยร์ (.27,.03,.30,1.63);
-

.et_pb_menu_0_tb_header ul li > a:โฮเวอร์:ก่อน{
    ความกว้าง: 110%;
    ซ้าย: -5%;
    ความทึบ: 1;
-

.et-menu li li > a{
    ความกว้าง: 140px;
    ช่องว่างภายใน: 15px;
- 

หมายเหตุ : หากคุณต้องการเปลี่ยนเอฟเฟกต์โฮเวอร์จากขีดเส้นใต้เป็นการซ้อนทับ คุณสามารถแทนที่คุณสมบัติและค่าของ “ bottom: 14px; ” (เช่น top:15px ;)

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

หากต้องการดูผลลัพธ์ ให้เปิดหน้าใดก็ได้บนไซต์ของคุณที่มีเทมเพลตส่วนหัวที่คุณเพิ่งปรับแต่ง

โค้ด CSS ทำอะไร?

สถานะเริ่มต้น

 .et_pb_menu_0_tb_header ul li > a:ก่อน {
-

ตัวเลือก CSS นี้กำหนดเป้าหมายองค์ประกอบหลอก :before องค์ประกอบจุดยึด (< a >) ภายในรายการ (< li >) ของรายการที่ไม่เรียงลำดับ (< ul >) กับชั้นเรียน

.et_pb_menu_0_tb_header มันใช้สไตล์ดังต่อไปนี้:

• content: '' : สร้างเนื้อหาว่างสำหรับองค์ประกอบหลอก
• width: 0 : ตั้งค่าความกว้างเริ่มต้นเป็น 0 พิกเซล
• left: 50% : วางตำแหน่งองค์ประกอบเส้นในแนวนอนที่กึ่งกลาง
• height: 4px : ตั้งค่าความสูงเป็น 4 พิกเซล
• border-radius: 2px : ปัดเศษมุม
• background: rgb(145, 255, 2) : ตั้งค่าสีพื้นหลังเป็นค่า RGB เฉพาะ
• position: absolute : วางตำแหน่งองค์ประกอบเส้นภายในคอนเทนเนอร์หลัก (รายการเมนู)
• z-index: -1 : วางองค์ประกอบไว้ด้านหลังเนื้อหาอื่น
• bottom: 14px : วางตำแหน่งองค์ประกอบเส้น 14 พิกเซลจากด้านล่างของรายการเมนู
• opacity: 0 : ทำให้องค์ประกอบเส้นมองไม่เห็นในตอนแรก
• transition: .4s cubic-bezier(.27,.03,.30,1.63) : เพิ่มเอฟเฟกต์การเปลี่ยนแปลงที่ราบรื่นเมื่อคุณสมบัติขององค์ประกอบเปลี่ยนไป

รัฐโฮเวอร์

 .et_pb_menu_0_tb_header ul li > a:โฮเวอร์:ก่อน {
-

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

• width: 110% : ขยายความกว้างเป็น 110% ของความกว้างของรายการเมนู
• left: -5% : เลื่อนองค์ประกอบเส้นไปทางซ้าย 5%
• opacity: 1 : ทำให้มองเห็นองค์ประกอบของเส้นได้

จัดแต่งทรงผมเพิ่มเติม

 .et-menu li li > {
    ความกว้าง: 140px;
    ช่องว่างภายใน: 15px;
-

รหัส CSS นี้ใช้สไตล์กับรายการเมนูย่อยภายในรายการเมนูหลัก นี่คือรายละเอียดของแต่ละส่วน:

• width: 140px : ตั้งค่าความกว้างของจุดยึดเป็น 140 พิกเซล
• padding: 15px : เพิ่มช่องว่างภายใน 15 พิกเซลรอบเนื้อหาของจุดยึด

บรรทัดล่าง

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

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