คุณต้องการสร้างส่วนหัวส่วนกลางด้วยโมดูลเมนูเต็มหน้าจอใน Divi หรือไม่?
ส่วนหัวเป็นหนึ่งในองค์ประกอบที่สำคัญที่สุดของทุก ๆ เว็บไซต์เว็บ และเป็นหัวใจของ ประสบการณ์ของผู้ใช้. เมนูการนำทางช่วยให้ผู้ใช้ของคุณทราบถึงสิ่งที่พวกเขาสามารถคาดหวังได้จาก เว็บไซต์เว็บ และช่วยค้นหาข้อมูลที่ต้องการ
นอกจากนี้ แถบเมนูรองอาจเป็นพื้นที่ที่เหมาะสมในการเน้นคำกระตุ้นการตัดสินใจหรือถึง ส่งเสริม ข้อเสนอ ไม่ต้องพูดถึงว่าส่วนหัวเป็นส่วนที่สำคัญที่สุดของคุณ เว็บไซต์เว็บเพราะมักจะปรากฏทุกหน้า นี่เป็นโอกาสที่ดีในการแสดงแบรนด์ของคุณและสร้างส่วนหัวที่สอดคล้องกับการออกแบบส่วนที่เหลือของเว็บไซต์ของคุณ
ตัวเลือกตัวสร้างธีมของ Divi ช่วยให้คุณสร้างส่วนหัวส่วนกลางแบบกำหนดเอง และปรับแต่งลักษณะที่ปรากฏของโมดูลส่วนหัวและเมนูของคุณทั่วทั้งเว็บไซต์
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างส่วนหัวส่วนกลางโดยใช้โมดูลเมนูแบบเต็มหน้าจอของ Divi
ขอเริ่มต้น!
การสำรวจ
นี่คือตัวอย่างส่วนหัวส่วนกลางที่เราจะออกแบบ
เปิดตัวสร้างธีม
เนื่องจากเรากำลังสร้างส่วนหัวส่วนกลางในตัวอย่างนี้ ให้ไปที่ "ตัวสร้างธีม" ซึ่งคุณจะพบได้ในเมนู WordPress Divi เลือกเพิ่มส่วนหัวส่วนกลาง จากนั้นเลือกสร้างส่วนหัวส่วนกลาง
สร้างแถบเมนูรอง
เมื่อคุณเปิดเลย์เอาต์ส่วนหัวส่วนกลางเป็นครั้งแรก เลย์เอาต์ดังกล่าวจะมาพร้อมกับส่วนปกติที่โหลดไว้ล่วงหน้า เราจะแก้ไขสิ่งนี้ให้เป็นแถบเมนูรอง ซึ่งจะอยู่เหนือเมนูแบบเต็มความกว้างของเรา และมีข้อความกระตุ้นการตัดสินใจและปุ่ม
ขั้นแรก เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลัง
- พื้นหลัง: #92A8A1
ถัดไป ระยะขอบของส่วน
- ระยะขอบภายใน จุดยอด: 0px
- ระยะขอบภายในด้านล่าง: 0px
ตอนนี้แทรกแถว สำหรับตัวอย่างนี้ เราจะใช้รูปแบบที่แสดงด้านล่าง
ในการตั้งค่าแถว ใต้แท็บ Sizing of the Style ให้ปรับความสูงของคอลัมน์ให้กลมกลืนกัน
- ประสานความสูงของคอลัมน์: ใช่
ถัดไป ตั้งค่าระยะขอบบนและล่างดังนี้:
- ขอบด้านในด้านบน: 5px
- ขอบด้านในด้านล่าง: 5px
เนื่องจากเราต้องการให้องค์ประกอบส่วนหัวรองของเรามีการจัดแนวในแนวตั้ง เราจะเพิ่ม CSS แบบกำหนดเองให้กับองค์ประกอบแถวหลัก
1.
align-items:center;
เมื่อกำหนดค่าบรรทัดของเราแล้ว เราก็สามารถแทรกโมดูลสำหรับเราได้ เนื้อหา. ขั้นแรกให้แทรกโมดูลข้อความทางด้านซ้าย
แก้ไข เนื้อหา ของข้อความ นี่เป็นสถานที่ที่สมบูรณ์แบบในการรวมคำกระตุ้นการตัดสินใจหรือถึง ส่งเสริม ข้อเสนอ
- ข้อความ: "เข้าร่วมรายชื่อผู้รับจดหมายของเราเพื่อรับส่วนลด 10% สำหรับการสั่งซื้อของคุณ!" »
เข้าถึงแท็บสไตล์ของโมดูลข้อความและแก้ไขพารามิเตอร์ดังต่อไปนี้:
- แบบอักษร “ข้อความ”: Poppins
- “ข้อความ” แสงสลัว: ปานกลาง
- สีข้อความ "Text": #FFFFFF
ถัดไป เพิ่มโมดูลปุ่มทางด้านขวา
เพิ่มข้อความปุ่ม
- ข้อความ: "รับใบเสนอราคาฟรี"
ในแท็บ ลักษณะ ให้จัดตำแหน่งปุ่มให้อยู่ตรงกลาง
- การจัดตำแหน่งปุ่ม: กึ่งกลาง
ตอนนี้ มาปรับแต่งรูปลักษณ์ของปุ่มกัน
- ใช้สไตล์ที่กำหนดเองสำหรับ "ปุ่ม": ใช่
- ขนาดข้อความของปุ่ม: 14px
- สีข้อความของปุ่ม: #FFFFFF
- ปุ่มพื้นหลัง: #2F5349
- ความกว้างของขอบปุ่ม: 0px
- ปุ่มรัศมีเส้นขอบ: 50px
- ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
- แบบอักษรของปุ่ม: Poppins
เพิ่มโมดูลเมนูเต็มหน้าจอ
เมื่อออกแบบเมนูรองแล้ว เราก็สามารถไปยังเมนูหลักได้ เราจะสร้างเมนูโดยใช้โมดูลเมนูเต็มหน้าจอ เพิ่มส่วนเต็มหน้าจอใหม่ในส่วนหัวส่วนกลาง
เลือกและแทรกโมดูลเมนูเต็มหน้าจอ
ต่อไป เราจะปรับแต่งการตั้งค่าเมนูเต็มหน้าจอ
- สีของลิงค์ที่ใช้งาน: #2F5349
- เมนูแบบอักษร: Poppins
- เมนูแสงสลัว: กึ่งหนา
- คัดลอกสไตล์เมนู: TT
- สีข้อความของเมนู: #000000
- สีข้อความของเมนูโฮเวอร์: #2F5349
- ขนาดข้อความของเมนู: 15px
- ระยะห่างระหว่างตัวอักษรของเมนู: 2px
เปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์เป็นสีดำ
- ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000
ก่อนที่เราจะเพิ่มโลโก้ลงในเมนู เรามาเปลี่ยนตัวเลือกการปรับขนาดกันก่อน เราจะใช้ตัวเลือกการตอบสนองในตัวของ Divi เพื่อตั้งค่าความสูงสูงสุดที่แตกต่างกันสำหรับพีซีและมือถือ
- ความสูงของโลโก้สูงสุดบนพีซี: 3vw
- ความสูงของโลโก้บนมือถือสูงสุด: 6vw
ตอนนี้เพิ่มโลโก้ของคุณไปยังเมนูเต็มหน้าจอ
สุดท้าย เราต้องการให้เมนูหลักอยู่ที่ด้านบนของหน้าจอเมื่อผู้ใช้เลื่อนดูเว็บไซต์ ดังนั้นเราจะใช้การตั้งค่า Sticky ในตัวของ Divi สำหรับสิ่งนี้
- ตำแหน่งเหนียว: ติดด้านบน
ด้วยเหตุนี้ การออกแบบส่วนหัวทั่วโลกของเราจึงสมบูรณ์
สร้างหน้าใหม่ด้วยเค้าโครงที่กำหนดไว้ล่วงหน้า
ในการดูการใช้งานส่วนหัวและเมนูแบบเต็มความกว้าง ให้สร้างหน้าใหม่ที่มีเค้าโครงที่กำหนดไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ เราจะใช้ Flooring Home Page จากแพ็คเกจ แบบพื้น.
เพิ่มหน้าใหม่ในเว็บไซต์ของคุณและตั้งชื่อ จากนั้นเลือกตัวเลือกใช้ Divi Builder
เรากำลังใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจาก Divi Library สำหรับตัวอย่างนี้ ดังนั้นให้เลือก เลือกเลย์เอาต์
ค้นหาและเลือกเลย์เอาต์ "Flooring Home Page"
เลือก "เลือกเลย์เอาต์" เพื่อเพิ่มเลย์เอาต์ในหน้าของคุณ
ตอนนี้การออกแบบเสร็จสมบูรณ์แล้ว!
ผลสุดท้าย
สรุป
ดังที่เราได้กล่าวไว้ข้างต้น ส่วนหัวและเมนูการนำทางเป็นหัวใจสำคัญของประสบการณ์ผู้ใช้เว็บไซต์ของคุณ ตอนนี้คุณได้เห็นแล้วว่าการออกแบบส่วนหัวโดยรวมที่น่าทึ่งด้วยโมดูล "เมนูเต็มหน้าจอ" ของ Divi นั้นง่ายเพียงใด
โชคดีที่เครื่องมือสร้างธีมของ Divi ให้คุณควบคุมทุกแง่มุมของเมนูและส่วนหัวของเว็บไซต์ของคุณ และคุณสามารถสร้างการออกแบบที่กำหนดเองและไม่ซ้ำใครได้ทั้งหมดด้วยการคลิกเพียงไม่กี่ครั้ง
คุณเคยใช้ตัวเลือกส่วนหัวส่วนกลางของ Divi เพื่อปรับแต่งส่วนหัวและเมนูการนำทางของคุณหรือไม่? บอกเราว่าคุณคิดอย่างไรในความคิดเห็น!
