วิธีเพิ่มสองปุ่มแบบเคียงข้างกันไปยังส่วนหัว Divi ทั่วโลกของคุณ

การมีคำกระตุ้นการตัดสินใจที่ชัดเจนบนหน้าเว็บของคุณเป็นสิ่งจำเป็นสำหรับเว็บไซต์ส่วนใหญ่ และจะมีวิธีใดที่จะดึงดูดความสนใจไปที่ CTA ที่สำคัญที่สุดของคุณได้ดีไปกว่าการวางไว้ในส่วนหัว 

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

การสำรวจ

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

สำนัก

1. เข้าถึง Divi Theme Builder และสร้างส่วนหัวร่วม

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

เริ่มต้นโดยไปที่ตัวสร้างธีม Divi และคลิกที่ "เพิ่มส่วนหัวร่วม"

สร้างส่วนหัวร่วม

ดำเนินการต่อโดยคลิกที่ "Build Global Header"

2. สร้างการออกแบบส่วนหัวโดยรวม

เพิ่มหัวข้อใหม่

การเว้นวรรค

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

• การเสริมด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ดัชนี Z

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

• ดัชนี Z: 99999

เพิ่มบรรทัดใหม่

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

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

ปรับขนาด

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

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

การเว้นวรรค

เปลี่ยนค่าการเติมทางซ้ายและขวาของบรรทัดด้วย

• ช่องว่างด้านซ้าย: 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>

เพิ่มโมดูลปุ่มแรกในคอลัมน์ 2

เพิ่มสำเนา

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

เพิ่มการเชื่อมโยง

จากนั้นเพิ่มลิงก์ไปยังโมดูลปุ่ม

การวางแนว

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

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

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

จัดสไตล์ปุ่มด้วย

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

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

การเว้นวรรค

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

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

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

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

แก้ไขลิงค์

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

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

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

• การจัดแนวปุ่ม: ซ้าย

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

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

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

โฮเวอร์สเกลการแปลง

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

• ขวา: 110%
• ต่ำ: 110%

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

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

การสำรวจ

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

คิดสุดท้าย

ในบทช่วยสอนนี้เราได้แสดงวิธีเพิ่มปุ่มสองปุ่มเคียงข้างกันในส่วนหัวโดยรวมของคุณโดยใช้ตัวสร้างธีมของ Divi 

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