คุณต้องการสร้างส่วนหัวส่วนกลางด้านข้างด้วย Divi หรือไม่?
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างส่วนหัวแบบหมุนเวียนทั่วโลกซึ่งปรากฏทางด้านซ้ายของเพจและโพสต์ของคุณ สีพื้นหลังของส่วนหัวมีความโปร่งใสโดยสมบูรณ์ ทำให้สามารถ เนื้อหา ของเพจ/โพสต์
เราทำให้แน่ใจว่าส่วนหัวส่วนกลางจะคงอยู่ทางด้านซ้ายในขณะที่เลื่อน และเรายังทำให้เมนูเป็นเวอร์ชันที่เหมาะกับอุปกรณ์พกพาอีกด้วย
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างการออกแบบใหม่ตั้งแต่ต้น!
Let 's go
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์ที่เราต้องการบรรลุโดยเร็วก่อน
ไปที่ตัวสร้างธีมของ Divi และเริ่มสร้างส่วนหัวส่วนกลาง
จากแดชบอร์ด WordPress ให้ไปที่ Divi > ตัวสร้างธีม
คลิกที่ “เพิ่มส่วนหัวทั่วโลก”
เลือก “สร้างส่วนหัวระดับโลก”.
เริ่มสร้างส่วนหัวด้านโกลบอล
เพิ่มหัวข้อใหม่
สีพื้นหลัง
เมื่ออยู่ในเครื่องมือแก้ไขเทมเพลต คุณสามารถเปิดส่วนที่มีอยู่แล้วและเปลี่ยนสีพื้นหลังของหน้าจอขนาดต่างๆ ได้
- สีพื้นหลัง: rgba(0,0,0,0) (เดสก์ท็อป), #FFFFFF (แท็บเล็ตและโทรศัพท์)
ปรับขนาด
ไปที่แท็บ ออกแบบ, ดึงตัวเลือกลง การกำหนดขนาด แล้วเปลี่ยนพารามิเตอร์การปรับขนาดส่วน
- ความกว้าง: 5vw (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
- ความสูงขั้นต่ำ: 100 vw (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
การเว้นวรรค
จากนั้นดึงตัวเลือกการเว้นวรรคและเปลี่ยนการตั้งค่าดังนี้:
- Padding (บนและล่าง): 2vw
กล่องเงา
จากนั้นไปที่ กล่องเงา และเพิ่มเงากล่องแบบกำหนดเองบนหน้าจอขนาดต่างๆ
- ตำแหน่งแนวนอนของกล่องเงา: 32px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
- ความชัดเจนของเงากล่อง: 49px
- ความแรงของการแพร่กระจาย: 0px (เดสก์ท็อป), 19px (แท็บเล็ตและโทรศัพท์)
- เงาสี: rgba(0,0,0,0.12)
การเพิ่ม CSS ที่กำหนดเอง
นอกจากนี้ เรายังจะตรวจสอบให้แน่ใจว่าส่วนหัวด้านข้างส่วนกลางคงอยู่ทางด้านซ้ายโดยการเพิ่มโค้ด CSS สองสามบรรทัดลงในองค์ประกอบส่วนหลัก
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
เมื่อวางเมาส์เหนือส่วน
อย่าลืมเพิ่มบรรทัดของโค้ด CSS เหล่านี้ในองค์ประกอบหลักโดยวางเมาส์เหนือส่วนนั้น
position: fixed;
top: 0;
การมองเห็นเริ่มต้น
จากนั้นเพิ่มดัชนี z ในพารามิเตอร์ตำแหน่ง
- ดัชนี Z: 99999
เลื่อนระดับการมองเห็น
ตรวจสอบให้แน่ใจว่าใช้ค่าเดียวกันเมื่อวางเมาส์เหนือ
- ดัชนี Z: 99999
เพิ่มบรรทัดใหม่
โครงสร้างของคอลัมน์
เมื่อคุณตั้งค่าส่วนเสร็จแล้ว ให้ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าบรรทัดและเปลี่ยนการตั้งค่าการปรับขนาด
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
การเว้นวรรค
ลบระยะขอบเริ่มต้นทั้งหมดด้วย
- ช่องว่างภายใน (บนและล่าง): 0px
พารามิเตอร์คอลัมน์
เพิ่ม CSS ที่กำหนดเอง (แท็บเล็ตและโทรศัพท์)
บนแท็บเล็ตและโทรศัพท์ เราเลือกใช้จอแสดงผลที่ต่างไปจากเดิมอย่างสิ้นเชิง เราจะวางโมดูลที่แตกต่างกันสามโมดูลไว้ติดกัน ในการดำเนินการนี้ เราจะต้องเพิ่มโค้ด CSS บางส่วน
เปิดการตั้งค่าคอลัมน์ไปที่แท็บ ระดับสูง และแทรกโค้ด CSS บรรทัดต่อไปนี้ลงในช่องว่าง องค์ประกอบหลัก สำหรับแท็บเล็ตและโทรศัพท์:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
เพิ่มโมดูลรูปภาพลงในคอลัมน์
โลโก้ดาวน์โหลด
ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือโมดูลรูปภาพ อัปโหลดไฟล์ภาพโลโก้กึ่งโปร่งใสที่คุณเลือก
ปรับขนาด
จากนั้นไปที่แท็บ ออกแบบ และเปลี่ยนความกว้างของหน้าจอขนาดต่างๆ
- ความกว้าง: 4 vw (เดสก์ท็อป), 12 vw (แท็บเล็ต), 16 vw (โทรศัพท์)
ขนาดของการเปลี่ยนแปลง
เพิ่มขนาดของโมดูลโดยเปลี่ยนการตั้งค่ามาตราส่วนการแปลงในภายหลัง
- ขวา: 170% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
- ต่ำ: 170% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
“แปล แปล”
และดันโมดูลไปทางขวาโดยแก้ไขพารามิเตอร์ต่อไปนี้
- ด้านล่าง: 1vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
เพิ่มโมดูลเมนูลงในคอลัมน์
เลือกเมนูที่จะเพิ่ม
โมดูลต่อไปที่เราต้องการคือโมดูลเมนู เลือกเมนูที่ต้องการ
ลบสีพื้นหลัง
จากนั้นลบสีพื้นหลังออกจากโมดูล
อารมณ์
จากนั้นไปที่แท็บ ออกแบบ และเปลี่ยนการตั้งค่าเค้าโครง
- สไตล์: กึ่งกลาง
- ทิศทางของเมนูแบบเลื่อนลง: ลงด้านล่าง
การตั้งค่าข้อความเมนู
เปลี่ยนการตั้งค่าข้อความเมนูด้วย
- สีของลิงค์ที่ใช้งาน: #cecece
- แบบอักษรของเมนู: มอนต์เซอร์รัต
- น้ำหนักแบบอักษรของเมนู: ตัวหนา
- สีข้อความ: #000000
- ขนาดข้อความเมนู: 0,9 vw (เดสก์ท็อป), 2 vw (แท็บเล็ต), 2,5 vw (โทรศัพท์)
ข้อความเมนูเมื่อโฮเวอร์
เปลี่ยนสีของข้อความเมนูเมื่อวางเมาส์เหนือ
- สีข้อความของเมนู: #afafaf
เมนูแบบเลื่อนลง
เรายังทำการเปลี่ยนแปลงบางอย่างกับการตั้งค่าเมนูแบบเลื่อนลง
- สีของเมนูดร็อปดาวน์: #000000
- สีข้อความของเมนูแบบเลื่อนลง: #000000
ไอคอน
จากนั้นเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์
- ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000
การเว้นวรรค
และเพิ่มค่าระยะขอบที่กำหนดเองบนหน้าจอขนาดต่างๆ
- Margin (บนและล่าง): 18 vw (เดสก์ท็อป), 0 vw (แท็บเล็ตและโทรศัพท์)
- Margin (ซ้ายและขวา): -13vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
เปลี่ยนการหมุน
ตอนนี้ เพื่อสร้างเอฟเฟกต์การหมุน เราจะเล่นกับค่าการหมุนของการแปลงของโมดูล
- ซ้าย: 270 องศา (เดสก์ท็อป), 0 องศา (แท็บเล็ตและโทรศัพท์)
เพิ่มโมดูล “การติดตามโซเชียลมีเดีย” ลงในคอลัมน์
เพิ่มเครือข่ายสังคม
ไปที่โมดูล "การติดตามโซเชียลมีเดีย" ซึ่งเป็นโมดูลถัดไปและโมดูลสุดท้ายที่เราจำเป็นต้องใช้เพื่อทำให้ส่วนหัวที่เปลี่ยนทั่วโลกของเราสมบูรณ์ เพิ่มเครือข่ายโซเชียลที่คุณเลือก
รีเซ็ตสไตล์ไอคอนโซเชียลมีเดีย
ดำเนินการต่อโดยรีเซ็ตการตั้งค่าสำหรับเครือข่ายโซเชียลแต่ละรายการ วิธีนี้จะช่วยเรากำจัดสีพื้นหลังของพวกมัน
การวางแนว
จากนั้นสลับไปที่แท็บ ออกแบบ ของโมดูลและเปลี่ยนการจัดตำแหน่งของโมดูลตามขนาดหน้าจอต่างๆ
- โมดูลการจัดตำแหน่ง: ซ้าย (เดสก์ท็อป), ขวา (แท็บเล็ตและโทรศัพท์)
การตั้งค่าไอคอน
สุดท้าย เปลี่ยนการตั้งค่าไอคอนด้วย
- ไอคอนสี: #000000
- ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
- ขนาดตัวอักษรของไอคอน: 2,1 vw
บันทึกการเปลี่ยนแปลงตัวสร้างและดูผลลัพธ์
เมื่อคุณทำโมดูลทั้งหมดเสร็จแล้ว คุณสามารถบันทึกโมเดล ออกจากตัวสร้างของ ธีม ของ Divi และแสดงภาพผลลัพธ์ของคุณ เว็บไซต์เว็บ !
การสำรวจ
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ครั้งสุดท้ายกัน
สำนัก
ดาวน์โหลด DIVI ทันที !!!
สรุป
ในบทความนี้ เราแสดงวิธีสร้างส่วนหัวส่วนกลางที่หมุนเวียน เว้นแต่คุณจะเลือกเป็นอย่างอื่น ส่วนหัวส่วนกลางที่เราสร้างขึ้นจะปรากฏบนโพสต์และหน้าทั้งหมดของคุณ
หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ดูเพิ่มเติม ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
