วิธีเพิ่มปุ่มสองปุ่มเคียงข้างกันในส่วนหัว Divi Global ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. ไปที่ Divi Theme Builder & Create Global Header

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

เริ่มต้นด้วยการไปที่ Divi Theme Builder และคลิกที่ 'Add Global Header'

สร้างส่วนหัวระดับโลก

ดำเนินการต่อโดยคลิกที่ 'สร้างส่วนหัวส่วนกลาง'

2. สร้างการออกแบบส่วนหัวทั่วโลก

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ดัชนี Z

ตรวจสอบให้แน่ใจว่าคุณเพิ่มดัชนี z ของส่วนในการตั้งค่าการมองเห็นด้วย เพื่อให้แน่ใจว่าเนื้อหาส่วนหัวส่วนกลางจะปรากฏที่ด้านบนของทุกหน้าและโพสต์เนื้อหา

• ดัชนี Z: 99999

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

เมื่อคุณตั้งค่าส่วนเสร็จแล้ว ให้เพิ่มแถวใหม่ในส่วนโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

แก้ไขค่าช่องว่างภายในด้านซ้ายและขวาของแถวด้วย

• Padding ด้านซ้าย: 2vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 2vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)

องค์ประกอบหลัก

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

display: flex;
align-items: center;

ลบคุณสมบัติการแสดงผลเดสก์ท็อปบนแท็บเล็ตและมือถือ

display: block;

คอลัมน์ 1

ชายแดน

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

• ความกว้างของขอบขวา: 1px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• สีขอบขวา: #d8d8d8

ดัชนี Z

เพิ่มดัชนี z ของคอลัมน์ด้วย

• ดัชนี Z: 11

คอลัมน์ 2

องค์ประกอบหลัก

จากนั้น เปิดการตั้งค่าคอลัมน์ 2 และเพิ่มโค้ด CSS ต่อไปนี้ลงในองค์ประกอบหลักของคอลัมน์เพื่อเปลี่ยนเป็นสองคอลัมน์

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

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

เลือกเมนู

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! เพิ่มโมดูลเมนูในคอลัมน์ 1 แล้วเลือกเมนูที่คุณต้องการ

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

อัปโหลดโลโก้ต่อไป

เค้าโครง

ไปที่แท็บการออกแบบของโมดูล และตรวจสอบให้แน่ใจว่าใช้การตั้งค่าเค้าโครงต่อไปนี้:

• สไตล์: จัดชิดซ้าย
• ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง

ข้อความเมนู

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

• สีของลิงค์ที่ใช้งาน: #ef6f49
• แบบอักษรของเมนู: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของเมนู: กึ่งหนา
• รูปแบบตัวอักษรของเมนู: ตัวพิมพ์ใหญ่
• สีข้อความของเมนู: #333333 (ค่าเริ่มต้น), #ef6f49 (วางเมาส์เหนือ)
• ขนาดข้อความเมนู: 0.7vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ระยะห่างระหว่างตัวอักษรของเมนู: 1px

ข้อความเมนูแบบเลื่อนลง

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

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• สีของเมนูดรอปดาวน์: #ef6f49

ไอคอน

จากนั้นเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์

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

ขนาด

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

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

โลโก้เมนู CSS

และตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มโค้ด CSS หนึ่งบรรทัดลงในโลโก้เมนูในแท็บขั้นสูง

margin-right: 10vw;

เพิ่มโมดูลโค้ดลงในคอลัมน์ 1

เพิ่มโค้ด CSS ที่กำหนดเองลงในโมดูล

โมดูลถัดไปและโมดูลสุดท้ายที่เราต้องการในคอลัมน์ 1 คือโมดูลโค้ด เพิ่มบรรทัดของโค้ด CSS ต่อไปนี้เพื่อปรับแต่งช่องว่างระหว่างรายการเมนู:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

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

เพิ่มสำเนา

ไปยังโมดูลถัดไป! เพิ่มโมดูลปุ่มแรกและป้อนสำเนาที่คุณเลือก

เพิ่มลิงค์

เพิ่มลิงก์ไปยังโมดูลปุ่มถัดไป

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

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

• การจัดตำแหน่งปุ่ม: ขวา

การตั้งค่าปุ่ม

สไตล์ปุ่มเช่นกัน

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.8vw (เดสก์ท็อป), 1.7vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #edeef0 (ค่าเริ่มต้น), #d6d7d8 (โฮเวอร์)
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของปุ่ม: กึ่งหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

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

• ด้านบน: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ช่วงล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
• Padding ซ้าย: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)

โมดูลปุ่มโคลน

เมื่อคุณสร้างโมดูลปุ่มแรกเสร็จแล้ว ให้ทำการโคลน

เปลี่ยนลิงค์

เปิดโมดูลปุ่มที่ซ้ำกันและเปลี่ยน URL

เปลี่ยนการจัดตำแหน่ง

เปลี่ยนการจัดตำแหน่งของโมดูลด้วย

• การจัดตำแหน่งปุ่ม: ซ้าย

เปลี่ยนการตั้งค่าปุ่ม

ทำการเปลี่ยนแปลงการตั้งค่าปุ่มด้วย

• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #ef6f49 (ค่าเริ่มต้น), #e06945 (โฮเวอร์)

โฮเวอร์แปลงมาตราส่วน

ตั้งค่าปุ่มให้สมบูรณ์โดยเพิ่มเอฟเฟกต์โฮเวอร์มาตราส่วนการแปลง

• ขวา: 110%
• ด้านล่าง: 110%

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

เมื่อส่วนหัวส่วนกลางของคุณเสร็จสมบูรณ์แล้ว ให้บันทึกการเปลี่ยนแปลงของตัวสร้างธีมทั้งหมดและดูผลลัพธ์บนเว็บไซต์ของคุณ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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