ต้องสร้างส่วนหัวส่วนกลางสำหรับ .ของคุณ เว็บไซต์ กับดีวี่?
ส่วนหัวส่วนกลางจะปรากฏทุกที่บน .ของคุณ เว็บไซต์เว็บเว้นแต่คุณจะกำหนดส่วนหัวอื่นให้กับเพจหรือโพสต์
เริ่มกันเลย!
การสำรวจ
นี่คือตัวอย่างส่วนหัวส่วนกลางที่เราจะออกแบบ
กำหนดค่าเมนูหลักของคุณ
เริ่มต้นด้วยการสร้างเมนูของคุณในการตั้งค่าลักษณะที่ปรากฏของไซต์ WordPress
เข้าถึงตัวเลือกตัวสร้างธีมภายใต้ Divi
ในตัวเลือกของ ธีม Diviคลิก ตัวสร้างธีม คุณจะสังเกตเห็น เทมเพลตเว็บไซต์ ผิดนัด
เพิ่มและสร้างส่วนหัวส่วนกลาง
Le เทมเพลตเว็บไซต์ ค่าเริ่มต้นคือที่ที่คุณสามารถเริ่มสร้างส่วนหัวส่วนกลาง เนื้อหาส่วนกลาง และส่วนท้ายส่วนกลางที่กำหนดเองได้ คลิก "เพิ่มส่วนหัวส่วนกลาง" และดำเนินการต่อโดยคลิก "สร้างส่วนหัวส่วนกลาง" เพื่อเริ่มกระบวนการ
การตั้งค่ามาตรา
ปรับขนาด
เปิดการตั้งค่าส่วนที่คุณจะพบในหน้า ในแท็บ สไตล์ เปลี่ยนขนาดในขนาดหน้าจอต่างๆ
- ความกว้างสูงสุด: 100%
- ความกว้างสูงสุด: 1280px (สำหรับพีซีและแท็บเล็ต), 100% (สำหรับมือถือ)
การเว้นวรรค
ลบระยะขอบภายในด้านบนและด้านล่างทั้งหมด
- ระยะขอบภายใน จุดยอด: 0px
- ระยะขอบภายในด้านล่าง: 0px
ชายแดน
ตอนนี้เพิ่มรัศมีเส้นขอบที่มุมล่างซ้ายและขวาของส่วน
- ล่างซ้าย: 50px
- ล่างขวา: 50px
กล่องเงา
มาเพิ่มเงาของกล่องที่ละเอียดอ่อนกันดีกว่า
- ความแรงของกล่องเงาเบลอ: 60px
- สีแบบอักษรของคำบรรยาย: rgba(0,0,0,0.13)
ความชัดเจน
- ล้นแนวนอน: มองเห็นได้
- ล้นแนวตั้ง: มองเห็นได้
อุทิศบรรทัดใหม่ให้กับส่วนหัว
เมื่อตั้งค่าส่วนทั่วไปเสร็จแล้ว ก็เริ่มเพิ่มแถวได้ โดยรวมแล้วเราต้องการสองบรรทัด หนึ่งที่ทุ่มเทให้กับส่วนหัวและอีกอันหนึ่งที่ช่วยให้สามารถแสดงรายการเมนูได้ เราจะเริ่มต้นด้วยส่วนหัวโดยการเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
การตั้งค่าสาย
การตั้งค่าพื้นหลัง
โดยไม่ต้องเพิ่มโมดูลใดๆ ในบรรทัด ให้เปิดการตั้งค่าบรรทัดและเปลี่ยนสีพื้นหลัง
- พื้นหลัง: #38383F
ปรับขนาด
จากนั้นแก้ไขพารามิเตอร์การปรับขนาดเส้น
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ระยะห่างคอลัมน์: 1
- ความกว้างสูงสุด: 100%
- ความกว้างสูงสุด: 100%
กำลังดู
ตอนนี้ ให้ตรวจสอบให้แน่ใจว่าคอลัมน์ต่างๆ ปรากฏติดกันบนหน้าจอขนาดเล็กโดยเพิ่มโค้ด CSS บรรทัดนี้ในองค์ประกอบแถวหลัก
01
display: flex;
เพิ่มโมดูลรูปภาพในคอลัมน์ 1
โลโก้ดาวน์โหลด
เมื่อคุณตั้งค่าแถวเสร็จแล้ว ก็ถึงเวลาเริ่มเพิ่มโมดูล เพิ่มโมดูลรูปภาพในคอลัมน์ 1 และอัปโหลดโลโก้ของคุณ
การวางแนว
ไปที่แท็บ ลักษณะ และจัดแนวรูปภาพไปทางซ้าย
ปรับขนาด
แก้ไขความกว้างของโมดูลด้วย
การเว้นวรรค
เพิ่มค่าระยะขอบแบบกำหนดเองด้วย
เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 2
เพิ่มเครือข่ายสังคม
ไปที่คอลัมน์ที่สองกัน เราจะต้องมีโมดูลการติดตามโซเชียลมีเดียที่นั่น เพิ่มเครือข่ายโซเชียลที่คุณเลือก คุณสามารถเพิ่มโซเชียลมีเดียได้มากเท่าที่คุณต้องการ
สีพื้นหลังโซเชียลเน็ตเวิร์ก
ถัดไป เปิดแต่ละเครือข่ายโซเชียลแยกกันและเปลี่ยนสีพื้นหลังเป็นสีโปร่งใสทั้งหมด
- สีพื้นหลัง: rgba (0,0,0,0)
การวางแนว
กลับไปที่การตั้งค่าโมดูลปกติแล้วเปลี่ยนการจัดตำแหน่งแบบเต็มของโมดูล
ไอคอน
เปลี่ยนการตั้งค่าไอคอนด้วย
- สีไอคอน: #FFFFFF
- ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
- ขนาดแบบอักษรของไอคอน: 16px (พีซีและแท็บเล็ต), 12px (โทรศัพท์)
การเว้นวรรค
เพิ่มระยะขอบด้านบน
เพิ่มโมดูลปุ่มในคอลัมน์ 3
ย้ายไปยังคอลัมน์ที่สามและเพิ่มโมดูลปุ่มที่มีข้อความที่คุณเลือก
การวางแนว
เปลี่ยนการจัดตำแหน่งของปุ่มในแท็บลักษณะ
การตั้งค่าปุ่ม
ปรับแต่งการตั้งค่าปุ่มดังต่อไปนี้:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 12px (เดสก์ท็อป), 10px (แท็บเล็ต), 8px (โทรศัพท์)
- สีข้อความของปุ่ม: #ffffff
- ปุ่มพื้นหลัง: #ffae25
- ความกว้างของขอบปุ่ม: 0 พิกเซล
- ปุ่มรัศมีเส้นขอบ: 0 พิกเซล
- ระยะห่างระหว่างตัวอักษรของปุ่ม: 5 px (เดสก์ท็อป), 3 px (แท็บเล็ตและโทรศัพท์)
- ปุ่มแบบอักษร: เปิดไม่มี
- ปุ่ม Soft Light: ข้อความตัวหนา
- รูปแบบปุ่มคัดลอก: TT
การเว้นวรรค
ปรับแต่งค่ามาร์จิ้น
อุทิศบรรทัดใหม่ให้กับแถบเมนู
เมื่อคุณกรอกบรรทัดสำหรับส่วนหัวส่วนกลางแล้ว คุณสามารถเพิ่มบรรทัดอื่นด้านล่างได้
การตั้งค่าสาย
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าบรรทัดและเปลี่ยนการตั้งค่าการปรับขนาดในแท็บรูปแบบ
การเว้นวรรค
จากนั้นลบระยะขอบด้านล่างและด้านบนทั้งหมด
เพิ่มโมดูลเมนูลงในคอลัมน์
เลือกเมนู
จากนั้น เพิ่มโมดูลเมนูลงในคอลัมน์และเลือกเมนูที่คุณสร้างขึ้นในส่วนแรกของบทช่วยสอนนี้
อารมณ์
สลับไปที่แท็บสไตล์และเปลี่ยนการตั้งค่าเลย์เอาต์ดังนี้:
สัมพันธ์
เปลี่ยนสีของลิงก์ที่ใช้งานอยู่ในแท็บสไตล์ด้วย
- สีของลิงค์ที่ใช้งาน: #ffae25
เมนูแบบเลื่อนลง
ทำเช่นเดียวกันกับสีเส้นของเมนูดรอปดาวน์ในการตั้งค่าเมนูดรอปดาวน์
- สีของแถวแบบเลื่อนลง: #ffae25
ไอคอน
- สีไอคอนเมนูแฮมเบอร์เกอร์: #ffae25
ข้อความเมนู
ด้วยการตั้งค่าข้อความเมนู
- แบบอักษรของเมนู: Prata
- สีข้อความของเมนู: #000000
ทำให้ส่วนหัวและแถบเมนูอยู่ด้านบน
เปิดการตั้งค่าส่วน
เมื่อคุณทำแถวที่สองเสร็จแล้ว สิ่งที่คุณต้องทำคือตรวจสอบให้แน่ใจว่าส่วนนั้นอยู่ที่ด้านบนสุดของหน้าและโพสต์ของเรา ในการดำเนินการนี้ เราจะเปิดการตั้งค่าส่วนอีกครั้ง
เพิ่ม CSS ที่กำหนดเองให้กับองค์ประกอบหลัก
ต่อไป เราจะไปที่แท็บขั้นสูง และเราจะเพิ่มโค้ด CSS สองสามบรรทัดลงในองค์ประกอบหลักของส่วน
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
บันทึกตัวเลือกส่วนหัวและตัวสร้างธีมทั่วโลก
เมื่อคุณออกแบบส่วนหัวส่วนกลางเสร็จแล้ว อย่าลืมบันทึกการออกแบบก่อนออกจากเค้าโครงเทมเพลต เมื่อคุณออกจากเลย์เอาต์เทมเพลตแล้ว ให้บันทึกการเปลี่ยนแปลงตัวสร้างธีมทั้งหมด เท่านี้ก็เรียบร้อย!
การสำรวจ
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ครั้งสุดท้ายกัน
สรุป
ในบทความนี้ เราได้แสดงวิธีสร้างส่วนหัวส่วนกลางที่กำหนดเองด้วยตัวสร้างธีมใหม่ของ Divi บทช่วยสอนนี้แสดงให้เห็นว่าการสร้างส่วนหัวที่สวยงามและนำไปใช้กับทั้งหมดของคุณนั้นง่ายดายเพียงใด เว็บไซต์เว็บ หรือประเภทโพสต์ที่กำหนดเองเฉพาะเจาะจง
เราหวังว่ามันจะช่วยคุณในการปรับแต่งเว็บไซต์ของคุณด้วย Theme Builder
หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นใน ส่วนความคิดเห็น CI-Dessous
...
