วิธีสร้างส่วนหัวทั่วโลกที่หมุนเวียนด้วยตัวสร้างธีมของ Divi

นับตั้งแต่ Divi Theme Builder ออกมา เราได้พยายามแนะนำคุณตลอดขั้นตอนการสร้างส่วนหัวทั่วโลกของคุณเอง เราจะทำต่อไปโดยแสดงให้คุณเห็นถึงวิธีสร้างส่วนหัวส่วนกลางที่หมุนเวียนซึ่งปรากฏที่ด้านซ้ายของหน้าและโพสต์ของคุณ สีพื้นหลังของส่วนหัวจะโปร่งใสอย่างสมบูรณ์ ทำให้สามารถแสดงเนื้อหาหน้า/โพสต์ได้ เราได้ทำให้แน่ใจว่าส่วนหัวส่วนกลางจะคงอยู่ทางด้านซ้ายในขณะที่เลื่อน และเราได้เปลี่ยนเมนูให้เป็นเวอร์ชันที่เหมาะกับอุปกรณ์เคลื่อนที่ด้วย ในบทช่วยสอนกรณีการใช้งานนี้ เราจะแสดงให้คุณเห็นถึงวิธีการสร้างการออกแบบใหม่ตั้งแต่ต้น และคุณยังสามารถดาวน์โหลดไฟล์ JSON เทมเพลตได้ฟรีอีกด้วย!

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลต Rotated Global Header ฟรี

ในการวางมือบนเทมเพลตส่วนหัวส่วนกลางที่หมุนได้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

1. ไปที่ตัวสร้างธีม Divi และเริ่มสร้างส่วนหัวส่วนกลาง

ไปที่ตัวสร้างธีม Divi

เริ่มต้นด้วยการไปที่ Divi Theme Builder บนเว็บไซต์ WordPress ของคุณ

เริ่มสร้าง Global Header

คลิกที่ 'เพิ่มส่วนหัวส่วนกลาง' และเลือก 'สร้างส่วนหัวส่วนกลาง'

2. เริ่มสร้างส่วนหัวทั่วโลกที่หมุนเวียนแล้ว

เพิ่มมาตราใหม่

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(0,0,0,0) (เดสก์ท็อป), #FFFFFF (แท็บเล็ตและโทรศัพท์)

ขนาด

แก้ไขการตั้งค่าขนาดของส่วนถัดไป

• ความกว้าง: 5vw (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• ความสูงขั้นต่ำ: 100vw (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 2vw
• แผ่นรองด้านล่าง: 2vw

กล่องเงา

จากนั้นไปที่การตั้งค่าเงาของกล่องและเพิ่มเงาของกล่องแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ตำแหน่งแนวนอนของกล่องเงา: 32px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ความชัดเจนของเงากล่อง: 49px
• ความแรงของการกระจายเงาของกล่อง: 0px (เดสก์ท็อป), 19px (แท็บเล็ตและโทรศัพท์)
• เงาสี: rgba(0,0,0,0.12)

องค์ประกอบหลักเริ่มต้น

นอกจากนี้ เราจะตรวจสอบให้แน่ใจว่าส่วนหัวส่วนกลางที่หมุนอยู่นั้นคงอยู่ทางด้านซ้ายโดยการเพิ่มโค้ด 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
• ช่องว่างภายในด้านล่าง: 0px

การตั้งค่าคอลัมน์

องค์ประกอบหลัก (แท็บเล็ตและโทรศัพท์)

สำหรับแท็บเล็ตและโทรศัพท์ เราจะสร้างรูปลักษณ์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิง เราจะวางโมดูลที่แตกต่างกันสามโมดูลไว้ติดกัน ในการทำเช่นนั้น เราจะต้องเพิ่มโค้ด CSS เล็กน้อย เปิดการตั้งค่าของคอลัมน์ ไปที่แท็บขั้นสูง และแทรกโค้ด CSS ต่อไปนี้ลงในองค์ประกอบหลักของแท็บเล็ตและโทรศัพท์:

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดโลโก้

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลแรกที่เราต้องการคือโมดูลรูปภาพ อัปโหลดไฟล์ภาพโลโก้กึ่งโปร่งใสที่คุณเลือก

ขนาด

จากนั้นไปที่แท็บออกแบบและเปลี่ยนความกว้างตามขนาดหน้าจอต่างๆ

• ความกว้าง: 4vw (เดสก์ท็อป), 12vw (แท็บเล็ต), 16vw (โทรศัพท์)

แปลงมาตราส่วน

เพิ่มขนาดของโมดูลโดยแก้ไขการตั้งค่ามาตราส่วนการแปลงถัดไป

• ขวา: 170% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)
• ด้านล่าง: 170% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

แปลงแปล

และผลักโมดูลไปทางขวาโดยเพิ่มค่าการแปลการแปลงด้านล่างบนเดสก์ท็อป

• ด้านล่าง: 1vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลเมนูไปที่คอลัมน์

เลือกเมนู

โมดูลต่อไปที่เราต้องการคือโมดูลเมนู เลือกเมนูที่ต้องการ

ลบสีพื้นหลัง

ลบสีพื้นหลังของโมดูลถัดไป

เค้าโครง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าเค้าโครง

• สไตล์: กึ่งกลาง
• ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง

ข้อความเมนูเริ่มต้น

แก้ไขการตั้งค่าข้อความเมนูด้วย

• สีของลิงค์ที่ใช้งาน: #cecece
• แบบอักษรของเมนู: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• สีข้อความของเมนู: #000000
• ขนาดข้อความของเมนู: 0.9vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)

วางเมาส์เหนือข้อความเมนู

เปลี่ยนสีข้อความเมนูเมื่อวางเมาส์ไว้

• สีข้อความของเมนู: #afafaf

เมนูแบบเลื่อนลง

นอกจากนี้ เรายังทำการเปลี่ยนแปลงบางอย่างในการตั้งค่าเมนูดรอปดาวน์

• สีของเมนูดร็อปดาวน์: #000000
• สีข้อความของเมนูแบบเลื่อนลง: #000000

ไอคอน

เปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์ต่อไป

• ไอคอนเมนูแฮมเบอร์เกอร์สี: #000000

ระยะห่าง

และเพิ่มค่าระยะขอบแบบกำหนดเองในขนาดหน้าจอต่างๆ

• ขอบบน: 18vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบล่าง: 18vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: -13vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบขวา: -13vw (เดสก์ท็อป), 0vw (แท็บเล็ตและโทรศัพท์)

แปลงร่างหมุน

ตอนนี้ เพื่อสร้างเอฟเฟกต์การหมุน เราจะเล่นกับค่าการหมุนของการแปลงของโมดูล

• ซ้าย: 270deg (เดสก์ท็อป), 0deg (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์

เพิ่มโซเชียลเน็ตเวิร์ก

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

รีเซ็ตสไตล์เครือข่ายโซเชียล

ดำเนินการต่อโดยรีเซ็ตการตั้งค่าของแต่ละเครือข่ายโซเชียลทีละรายการ วิธีนี้จะช่วยเรากำจัดสีพื้นหลังของพวกมัน

การจัดตำแหน่ง

จากนั้น ไปที่แท็บการออกแบบของโมดูล และเปลี่ยนการจัดตำแหน่งโมดูลตามขนาดหน้าจอต่างๆ

• การจัดตำแหน่ง: ซ้าย (เดสก์ท็อป), ขวา (แท็บเล็ตและโทรศัพท์)

การตั้งค่าไอคอน

สุดท้ายแต่ไม่ท้ายสุด ให้เปลี่ยนการตั้งค่าไอคอนด้วย

• ไอคอนสี: #000000
• ใช้ขนาดไอคอนที่กำหนดเอง: ใช่
• ขนาดตัวอักษรของไอคอน: 2.1vw

3. บันทึกการเปลี่ยนแปลงของตัวสร้างและดูผลลัพธ์

เมื่อคุณทำโมดูลทั้งหมดเสร็จแล้ว คุณสามารถบันทึกเทมเพลต ออกจาก Divi Theme Builder และดูผลลัพธ์บนเว็บไซต์ของคุณ!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ความคิดสุดท้าย

ในโพสต์นี้ เราได้แสดงวิธีสร้างส่วนหัวทั่วโลกที่หมุนเวียนโดยใช้ Theme Builder ใหม่ของ Divi เรายังได้เปลี่ยนแถบเมนูให้เป็นเวอร์ชันที่เหมาะกับอุปกรณ์พกพาบนมือถืออีกด้วย เว้นแต่จะเลือกไว้เป็นอย่างอื่น ส่วนหัวส่วนกลางที่เราสร้างขึ้นจะแสดงขึ้นในโพสต์และหน้าทั้งหมดของคุณ คุณสามารถดาวน์โหลดไฟล์ JSON ได้ฟรีเช่นกัน! หากคุณมีคำถามหรือข้อเสนอแนะโปรดแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง!

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