Divi: วิธีเพิ่มรูปภาพใน Mega Menu

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

เรารักการโต้ตอบกับภาพออนไลน์ เมื่อคำนึงถึงสิ่งนี้ การเพิ่มรูปภาพลงใน เว็บไซต์เว็บ เมื่อใดก็ตามที่เป็นไปได้ 

นอกจากนี้ การเพิ่มรูปภาพในเมนูเด่นเป็นอีกโอกาสที่ดีในการให้ผู้ใช้ของคุณมีปฏิสัมพันธ์ที่พวกเขาต้องการ

รูปภาพยังปรับปรุงเมนูด้วยการดึงดูดความสนใจเพื่อทำให้กระบวนการนำทางง่ายขึ้น

การสำรวจ

ก่อนที่เราจะเข้าสู่บทช่วยสอนนี้ มาดูผลลัพธ์ที่เราต้องการบรรลุกันก่อน

การสร้างเมนูเมก้า

ในการเริ่มต้น เราต้องสร้างเมนูก่อน 

สำหรับตัวอย่างนี้ เราจะสร้างรายการเมนูหลักที่เรียกว่า “เมนูเมก้า” โดยมีสี่เมนูย่อยด้านล่าง รายการเมนูย่อยทั้งสี่รายการมีรายการเมนูย่อยสามรายการ

ไปที่แดชบอร์ด WordPress จากนั้นคลิกที่ ลักษณะ> เมนู

คลิกที่ 'สร้างเมนูใหม่'ให้ตั้งชื่อและคลิกที่ 'สร้างเมนู'.

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

คุณสามารถเพิ่มรายการเมนูของคุณลงในเมนูใหม่ที่คุณสร้างขึ้นได้แล้ว

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

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

• URL: http://#
• ชื่อการนำทาง: Mega Menu
• คลาส CSS: mega-menu

ตอนนี้จัดเรียง/ลากสี่รายการเมนู (แต่ละรายการมีสามรายการย่อยของตัวเอง) เพื่อให้กลายเป็นรายการย่อยของลิงก์หลักหลักของเมนูเมกะ

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

นี่คือหน้าตาเมนูเด่นของเราในตอนนี้:

การเพิ่มรูปภาพในเมนูเมก้า

เมื่อเมนูพร้อมแล้วก็ถึงเวลาเพิ่มรูปภาพ

อ่าน: ฉันจะลอยโพสต์บล็อกใน DIVI ได้อย่างไร

รับภาพ

เริ่มต้นด้วยการรับสี่ภาพ รูปภาพเหล่านี้ควรเกี่ยวข้องกับรายการเมนูย่อยสี่รายการ (เกี่ยวกับ การส่งมอบบริการ งานของเรา และติดต่อเรา).

ใช้โปรแกรมแก้ไขรูปภาพเพื่อย่อขนาดและครอบตัดแต่ละภาพให้มีความกว้าง 500px และสูง 300px

เพิ่มรูปภาพเหล่านี้ในไลบรารี WordPress คลิกที่ สื่อ > เพิ่ม.

ลากรูปภาพของคุณไปที่หน้าเพื่อเพิ่มหรือคลิก 'เลือกไฟล์'

แทรกรูปภาพในเมนูเมก้า

กลับไปที่หน้าเมนูในแดชบอร์ด WordPress

ในตัวอย่างนี้ ลิงก์ที่ด้านบนของคอลัมน์แรกคือ " เกี่ยวกับ ". 

คลิกลูกศรทางด้านขวาของรายการ " เกี่ยวกับ ". ในกล่องป้ายนำทาง เพิ่มรูปภาพที่ต้องการโดยใช้แท็ก html img โดยตรงก่อนข้อความ " เกี่ยวกับ ". แท็กรูปภาพควรมีลักษณะดังนี้:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />

หากต้องการค้นหา URL ของรูปภาพ ให้ไปที่ สื่อ > ห้องสมุดสื่อคลิกรูปภาพที่คุณต้องการเพิ่ม 

ในหน้าจอป๊อปอัป รายละเอียดเอกสารแนบค้นหา URL ในส่วนด้านขวา จากนั้นคลิก 'คัดลอก URL ไปยังคลิปบอร์ด'

กลับไปที่การกำหนดค่ารายการเมนู " เกี่ยวกับ " บนหน้าเมนูและแทนที่ข้อความ "ใส่ URL รูปภาพ" โดยวาง URL รูปภาพของคุณโดยใช้ ctrl + v.

ก่อนออกจากตัวเลือกการกำหนดค่าสำหรับรายการเมนู " เกี่ยวกับ "ค้นหากล่องข้อความ CSS Classes และป้อนคลาส "mega-link"

ซึ่งจะทำให้เราสามารถเพิ่มรูปแบบที่กำหนดเองได้ในภายหลัง

ทำขั้นตอนนี้ซ้ำเพื่อเพิ่มรูปภาพสามรูปต่อไปนี้ให้กับแต่ละรายการในเมนูย่อยที่มีคลาส "mega-link" (ในตัวอย่างนี้ อีกสามรายการที่เหลือคือ “บริการจัดส่ง”, “งานของเรา” et " ติดต่อเรา ".)

ผล

เข้าถึง .ของคุณ เว็บไซต์ แล้ววางเมาส์เหนือลิงค์เมนูเมก้า ตอนนี้เมนูเด่นของคุณควรมีลักษณะดังนี้:

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

สัมผัสสุดท้าย

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

ในแดชบอร์ด WordPress ให้ไปที่ Divi> ตัวเลือกธีม . 

เลื่อนลงไปที่กล่อง CSS ที่กำหนดเอง ป้อน CSS ด้านล่างแล้วคลิก 'บันทึกการเปลี่ยนแปลง' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

ผลสุดท้าย

คุณทำเสร็จแล้ว !

หากคุณทำตามขั้นตอนทั้งหมดในบทช่วยสอนนี้แล้ว นี่คือผลลัพธ์ที่คุณควรได้รับ

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

สรุป

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

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

หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน

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

...