คุณต้องการทราบวิธีการปรับแต่งรถเข็นและไอคอนค้นหาของโมดูล Divi Fullwidth Menu หรือไม่?
เมนูของคุณ เว็บไซต์เว็บ เป็นหนึ่งในส่วนที่สำคัญที่สุดของคุณ เว็บไซต์เว็บ เนื่องจากมีผลกระทบโดยตรงต่อวิธีที่ผู้ใช้นำทางคุณ เนื้อหา.
แถบเมนูที่ออกแบบมาอย่างดีสามารถสร้างความแตกต่างได้อย่างมากโดยทำให้การนำทางง่ายขึ้น เน้นหน้าหลัก และปรับปรุงประสบการณ์ผู้ใช้โดยรวม
โมดูล "เมนูแบบเต็มความกว้าง" ของ Divi มอบความยืดหยุ่นที่ยอดเยี่ยมโดยให้คุณปรับแต่งตะกร้าสินค้าและไอคอนค้นหาตามที่เห็นสมควร
ในบทช่วยสอนนี้ เราจะแสดงการออกแบบที่แตกต่างกันสามแบบสำหรับโมดูล "เมนูแบบเต็มความกว้าง" พร้อมสไตล์ที่แตกต่างกันสำหรับตะกร้าสินค้าและไอคอนค้นหา
ขอเริ่มต้น!
การสำรวจ
นี่คือตัวอย่างสิ่งที่เราจะออกแบบ
การออกแบบครั้งแรก
สำหรับการออกแบบแรก เราวางไอคอนตัวใดตัวหนึ่งไว้ทางด้านซ้ายและอีกไอคอนหนึ่งอยู่ทางด้านขวาโดยการเลือกโครงสร้างเมนูที่อยู่ตรงกลาง เราจะเปลี่ยนสีเมื่อวางเมาส์ไว้
การออกแบบที่สอง
สำหรับการออกแบบที่สอง เราวางไอคอนทั้งสองไว้ทางด้านขวาและเปลี่ยนสีเมื่อวางเมาส์เหนือ
การออกแบบที่สาม
สำหรับการออกแบบที่สาม เราใช้ CSS เพิ่มเติมเพื่อปรับแต่งไอคอน
การปรับแต่งตะกร้าสินค้าและไอคอนค้นหาของโมดูล "เมนูแบบเต็มความกว้าง" ของ Divi
สร้างส่วนหัวส่วนกลาง
สำหรับแต่ละการออกแบบเมนูทั้งสามแบบ เราจะเริ่มต้นด้วยการเปิดตัวสร้างของ ธีม ของดีวี
ในการดำเนินการนี้ จากแดชบอร์ด WordPress ให้ไปที่ Divi > ตัวสร้างธีม
จากนั้นคลิกที่ เพิ่มส่วนหัวส่วนกลาง
จากนั้นเลือก สร้าง Global Header
แทรกส่วนเต็มความกว้างใหม่
จากนั้นลบส่วนก่อนหน้า
ใส่โมดูล เมนูเต็มความกว้าง.
อัปโหลดโลโก้ของคุณจากเมนู
ตอนนี้เราพร้อมที่จะดำเนินการต่อ
การออกแบบครั้งแรก
การออกแบบครั้งแรกของเราจะรวมเอฟเฟกต์โฮเวอร์ในตัวของ Divi เพื่อเปลี่ยนสีของข้อความและไอคอนเมื่อวางเมาส์ไว้ เริ่มกันเลย.
ดูสิ่งนี้ด้วย: Divi: วิธีเพิ่มไอคอนแฮมเบอร์เกอร์ในโมดูลเมนู
เริ่มต้นด้วยการเปิดการตั้งค่าโมดูลและเพิ่มพื้นหลัง
- พื้นหลัง: #fbf9f4
ไปที่แท็บ ออกแบบ และเลือกรูปแบบโลโก้
- สไตล์: Inline Centered Logo
ตอนนี้ มาเปลี่ยนการตั้งค่าข้อความในเมนูกันบ้าง
- แอ็คทีฟลิงค์สี: #09148c
- เมนูแบบอักษร: Ruby
- น้ำหนักแบบอักษรของเมนู: ตัวหนา
- รูปแบบตัวอักษร: TT และ U (ตัวพิมพ์ใหญ่และขีดเส้นใต้)
ถัดไป กำหนดสีข้อความของเมนู ขนาดตัวอักษร และระยะห่างระหว่างตัวอักษร
- สีข้อความของเมนู: #000000
- ขนาดข้อความของเมนู: 21px
- ระยะห่างระหว่างตัวอักษร: 1px
เราต้องการเพิ่มเอฟเฟกต์โฮเวอร์ให้กับเมนูนี้ ดังนั้นให้เปลี่ยนสีของข้อความเมนูเมื่อวางเมาส์ไว้ ตั้งค่าสีข้อความเมนูอื่นเมื่อวางเมาส์เหนือ
- สีข้อความของเมนู (โฮเวอร์): #b70018
จากนั้นไปที่การตั้งค่า เมนูแบบเลื่อนลง ใต้แท็บ ออกแบบ.
- สีพื้นหลังของเมนูแบบเลื่อนลง: #fbf9f4
- เมนูแบบเลื่อนลง Line Color: #b70018
- สีข้อความของเมนู: #000000
เราต้องการให้สีข้อความของเมนูดรอปดาวน์เปลี่ยนไปเมื่อวางเมาส์เหนือ ดังนั้นให้เลือกตัวเลือกโฮเวอร์สำหรับการตั้งค่านี้และตั้งค่าสีข้อความอื่น
- สีข้อความของเมนูแบบเลื่อนลง (โฮเวอร์): #b70018
- เมนูแบบเลื่อนลง Active Link Color: #b70018
- สีพื้นหลังเมนูมือถือ: #fbf9f4
- สีข้อความเมนูมือถือ: #000000
อีกครั้ง เราต้องการให้สีข้อความของเมนูมือถือเปลี่ยนไปเมื่อวางเมาส์ไว้ เลือกตัวเลือกโฮเวอร์สำหรับการตั้งค่านี้ จากนั้นตั้งค่าสีข้อความอื่นบนโฮเวอร์
- สีข้อความเมนูมือถือ (โฮเวอร์): #b70018
ตะกร้าสินค้าและการปรับแต่งไอคอนค้นหา
ตอนนี้ มาเพิ่มและปรับแต่งตะกร้าสินค้าและค้นหาไอคอนกัน ภายใต้แท็บ คอนเทนต์ไปที่ องค์ประกอบ และเปิดใช้งานไอคอนตะกร้าสินค้าและไอคอนค้นหา
- แสดงไอคอนรถเข็นช็อปปิ้ง: ใช่
- แสดงไอคอนค้นหา: ใช่
กลับไปที่แท็บ ออกแบบ และเปิดการตั้งค่าไอคอน ไอคอนของเราแต่ละรายการจะเป็นสีดำและสีแดงเมื่อวางเมาส์เหนือ ขั้นแรกให้ตั้งค่าสีดำ
- ไอคอนรถเข็นช็อปปิ้งสี: #000000
- ค้นหาไอคอนสี: #000000
- ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000
จากนั้นเลือกไอคอนโฮเวอร์และเพิ่มสีเมื่อวางเมาส์เหนือ
- สีไอคอนรถเข็นช็อปปิ้ง (โฮเวอร์): #b70018
- ค้นหาไอคอนสี (โฮเวอร์): #b70018
- สีไอคอนเมนูแฮมเบอร์เกอร์ (โฮเวอร์): #b70018
กำหนดขนาดไอคอน
- ขนาดตัวอักษรของไอคอนรถเข็นช็อปปิ้ง: 25 px
- ขนาดตัวอักษรของไอคอนค้นหา: 25 px
ไปที่ส่วน การเว้นวรรคแล้วตั้งค่า padding ด้านบนและด้านล่าง
- ช่องว่างภายใน (บนและล่าง): 5px
สุดท้าย เราจะเพิ่มเส้นขอบที่ด้านบนและด้านล่างของโมดูลเมนู เปิดการตั้งค่าเส้นขอบ
- ความกว้างขอบด้านบน: 3px
- ความกว้างขอบล่าง: 3px
การออกแบบขั้นสุดท้าย
และนี่คือการออกแบบขั้นสุดท้ายของเรา
การออกแบบที่สอง
การออกแบบที่สองของเราจะใช้เอฟเฟกต์โฮเวอร์ในตัวของ Divi เพื่อเปลี่ยนขนาดของไอคอนเมนูและข้อความเมื่อวางเมาส์ไว้ เริ่มกันเลย.
ขั้นแรก เราจะเพิ่มการไล่ระดับสีพื้นหลังให้กับโมดูลเมนู การไล่ระดับสีมีสามจุด การตั้งค่ามีดังนี้:
- ไล่ระดับหยุด:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
ตั้งค่าประเภทการไล่ระดับสีและตำแหน่งการไล่ระดับสี
- ประเภทการไล่ระดับสี: ทรงกรวย
- ตำแหน่งไล่ระดับ: ด้านล่าง
จากนั้นไปที่แท็บ ออกแบบ และกำหนดเค้าโครง (แบบ).
- สไตล์: กึ่งกลาง
ไปที่ส่วน เมนูข้อความ เพื่อปรับแต่งการออกแบบข้อความเมนู
- สีของลิงค์ที่ใช้งาน: #FFFFFF
- เมนูแบบอักษร: Syne
- น้ำหนักแบบอักษร: ตัวหนา
- รูปแบบตัวอักษรของเมนู: TT (ตัวพิมพ์ใหญ่)
- เมนูสีข้อความ: #FFFFFF
ตอนนี้ตั้งค่าขนาดข้อความของเมนูและระยะห่างระหว่างตัวอักษร
- ขนาดข้อความของเมนู: 20px
- ระยะห่างระหว่างตัวอักษรของเมนู: 2px
เนื่องจากเราต้องการให้ขนาดข้อความเมนูของเราเพิ่มขึ้นเมื่อวางเมาส์เหนือ ให้เลือกตัวเลือกโฮเวอร์
- ขนาดข้อความของเมนู: 22px
ถัดไป เปลี่ยนการตั้งค่าการออกแบบจากเมนูแบบเลื่อนลง
- สีพื้นหลังของเมนูแบบเลื่อนลง: #fcda90
- สีของเมนูดร็อปดาวน์: #FFFFFF
- เมนูสีข้อความ: #FFFFFF
- เมนูแบบเลื่อนลง Active Link Color: #FFFFFF
ตั้งค่าพื้นหลังเมนูมือถือและสีข้อความ
- สีพื้นหลังเมนูมือถือ: #fcda90
- สีข้อความเมนูมือถือ: #FFFFFF
ตะกร้าสินค้าและการปรับแต่งไอคอนค้นหา
มาเริ่มปรับแต่งไอคอนเมนูของเรากัน ไปที่ องค์ประกอบ ใต้แท็บ คอนเทนต์ และเปิดใช้งานไอคอนตะกร้าสินค้าและไอคอนค้นหา
- ไอคอนรถเข็นช็อปปิ้ง : ใช่
- แสดงไอคอนค้นหา: ใช่
กลับไปที่แท็บ ออกแบบ และเปิดการตั้งค่าไอคอน
- ไอคอนรถเข็นช็อปปิ้งสี: #ffffff
- ค้นหาไอคอนสี: #ffffff
- ไอคอนเมนูแฮมเบอร์เกอร์สี: #ffffff
ไอคอนจะมีสีส้มเข้มเมื่อวางเมาส์เหนือ เลือกตัวเลือกปกและตั้งค่าสี
- สีไอคอนรถเข็นช็อปปิ้ง (โฮเวอร์): #fcac00
- ค้นหาไอคอนสี (โฮเวอร์): #fcac00
- สีไอคอนเมนูแฮมเบอร์เกอร์ (โฮเวอร์): #fcac00
ถัดไป กำหนดขนาดแบบอักษรสำหรับตะกร้าสินค้าและไอคอนค้นหา
- ขนาดตัวอักษรไอคอนรถเข็นช็อปปิ้ง: 25 px
- ขนาดตัวอักษรของไอคอนค้นหา: 25 px
หากต้องการให้ขนาดไอคอนเพิ่มขึ้นเมื่อวางเมาส์เหนือ ให้เลือกตัวเลือกโฮเวอร์
- ขนาดตัวอักษรของไอคอนรถเข็นช็อปปิ้ง (โฮเวอร์): 30 px
- ขนาดตัวอักษรของไอคอนค้นหา (โฮเวอร์): 30 px
สุดท้ายไปที่ส่วน การเว้นวรรค และตั้งค่าการเติมด้านบนและด้านล่าง
- ช่องว่างภายใน (บนและล่าง): 5px
การออกแบบขั้นสุดท้าย
นี่คือการออกแบบขั้นสุดท้ายของเค้าโครงเมนูที่สองของเรา
การออกแบบที่สาม
สำหรับการออกแบบขั้นสุดท้าย เราจะเพิ่มวงกลมพื้นหลังด้านหลังไอคอนรถเข็นโดยใช้ CSS ที่กำหนดเอง
อ่าน: Divi: วิธีสร้างเมนูโฮเวอร์ที่เหนียวและขยายได้
ขอเริ่มต้น
ขั้นแรก เพิ่มสีพื้นหลังให้กับโมดูล
- พื้นหลัง: #efb6ac
จากนั้นไปที่แท็บ ออกแบบ และเปิดตัวเลือก เมนูข้อความ.
- สีของลิงค์ที่ใช้งาน: #e84322
- แบบอักษรของเมนู: Cinzel
- เมนูน้ำหนักแบบอักษร: Ultra Bold
เราต้องการให้สีของข้อความเมนูเปลี่ยนไปเมื่อวางเมาส์ไว้ ขั้นแรก ตั้งค่าสีข้อความของเมนู
- เมนูสีข้อความ (เดสก์ท็อป): #e7644a
คลิกไอคอนโฮเวอร์และตั้งค่าสีข้อความโฮเวอร์
- สีข้อความของเมนู (โฮเวอร์): #e84322
ถัดไป กำหนดขนาดข้อความของเมนูและระยะห่างระหว่างตัวอักษร
- ขนาดข้อความของเมนู: 21px
- ระยะห่างระหว่างตัวอักษรของเมนู: 1px
เรายังต้องการให้การเว้นวรรคตัวอักษรขยายเมื่อวางเมาส์เหนือ ดังนั้นให้เลือกตัวเลือกโฮเวอร์สำหรับการตั้งค่า
- ระยะห่างระหว่างตัวอักษรของเมนู: 2px
ตั้งค่าการจัดตำแหน่งข้อความไปทางซ้าย
- การจัดตำแหน่งข้อความ: ซ้าย
ถัดไป เปลี่ยนการตั้งค่าต่อไปนี้จากเมนูแบบเลื่อนลง
- สีพื้นหลังของเมนูแบบเลื่อนลง: #efb6ac
- สีของเมนูดรอปดาวน์: #e7644a
- สีข้อความเมนูแบบเลื่อนลง
- เดสก์ท็อป: #e7644a
- โฮเวอร์: #e84322
- เมนูแบบเลื่อนลง Active Link Color: #e84322
ตั้งค่าพื้นหลังเมนูมือถือและสีข้อความ
- สีพื้นหลังเมนูมือถือ: #efb6ac
- สีข้อความเมนูมือถือ:
- เดสก์ท็อป: #e7644a
- โฮเวอร์: #e84322
ตะกร้าสินค้าและการปรับแต่งไอคอนค้นหา
ก่อนอื่น ไปที่ องค์ประกอบ ใต้แท็บ คอนเทนต์ และเปิดใช้งานไอคอนตะกร้าสินค้าและไอคอนค้นหา
- แสดงไอคอนรถเข็นช็อปปิ้ง: ใช่
- แสดงไอคอนช้อปปิ้ง: ใช่
จากนั้นกลับไปที่แท็บ ออกแบบ และเปิดการตั้งค่าไอคอน กำหนดสีของไอคอน
- ไอคอนรถเข็นช็อปปิ้งสี: #e7644a
- ค้นหาไอคอนสี: #e7644a
- ไอคอนเมนูแฮมเบอร์เกอร์สี: #e7644a
สีของไอคอนเหล่านี้จะเปลี่ยนไปเมื่อวางเมาส์เหนือ เปิดใช้งานตัวเลือกโฮเวอร์และตั้งค่าสี
- สีไอคอนรถเข็นช็อปปิ้ง (โฮเวอร์): #e84322
- ค้นหาไอคอนสี (โฮเวอร์): #e84322
- สีไอคอนเมนูแฮมเบอร์เกอร์ (โฮเวอร์): #e84322
เรายังต้องการให้ขนาดไอคอนเพิ่มขึ้นเมื่อวางเมาส์ไว้ ขั้นแรก กำหนดขนาดแบบอักษรของไอคอน
- ขนาดตัวอักษรของไอคอนรถเข็นช็อปปิ้ง: 22 px
- ขนาดตัวอักษรของไอคอนค้นหา: 22 px
ถัดไป กำหนดขนาดแบบอักษรของไอคอนเมื่อวางเมาส์เหนือ
- ขนาดตัวอักษรของไอคอนรถเข็นช็อปปิ้ง (โฮเวอร์): 26 px
- ขนาดตัวอักษรของไอคอนค้นหา (โฮเวอร์): 26 px
จากนั้นไปที่ส่วน การเว้นวรรค และเสริมบุนวมด้านบนและด้านล่าง
- ช่องว่างภายใน (บนและล่าง): 5px
สุดท้าย เราสามารถเพิ่ม CSS ที่กำหนดเองในส่วนหัวส่วนกลางเพื่อเพิ่มวงกลมด้านหลังตะกร้าสินค้าและไอคอนค้นหา
คุณสามารถปรับแต่ง CSS นี้ได้ตามที่คุณต้องการเพื่อให้ตรงกับการออกแบบโมดูลเมนูของคุณ
เปิดการตั้งค่าเทมเพลตส่วนหัว จากนั้นไปที่แท็บ ระดับสูง และแทรก CSS ที่กำหนดเองต่อไปนี้
.et_pb_menu__icon.et_pb_menu__cart-button,
.et_pb_menu__icon.et_pb_menu__search-button {
padding: 2% 2% 2% 2%;
background-color:#F7D5C2;
border-radius: 50%;
}
การออกแบบขั้นสุดท้าย
การออกแบบเลย์เอาต์เมนูที่สามและขั้นสุดท้ายของเราเสร็จสมบูรณ์
ผลสุดท้าย
ตอนนี้เรามาดูการออกแบบขั้นสุดท้ายของสามเมนูที่แตกต่างกัน
การออกแบบครั้งแรก
ดาวน์โหลด DIVI ทันที!!!
การออกแบบที่สอง
การออกแบบที่สาม
ดาวน์โหลด DIVI ทันที!!!
สรุป
โมดูลเมนูและรถเข็นและไอคอนการค้นหาของ Divi นั้นปรับแต่งได้ง่ายเพื่อสร้างเลย์เอาต์และการออกแบบที่ไม่ซ้ำใครสำหรับคุณ เว็บไซต์เว็บ.
คุณสามารถเพิ่มรูปลักษณ์ของโมดูลเมนูของคุณได้อย่างง่ายดายโดยใช้การตั้งค่า Divi ในตัว เช่น เอฟเฟกต์โฮเวอร์และ CSS ที่กำหนดเอง
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ
อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
