วิธีปรับสมดุลปุ่มหลักและรองในโมดูลส่วนหัว Divi Fullwidth

เผยแพร่แล้ว: 2022-10-26

โมดูล Divi Fullwidth Header ทำให้ง่ายต่อการเพิ่มส่วนฮีโร่ที่สวยงามในเว็บไซต์ของคุณ โมดูลนี้มาพร้อมกับปุ่มสองปุ่ม ข้อความชื่อ ข้อความคำบรรยาย ข้อความเนื้อหา โลโก้ และรูปภาพ ทำให้ตัวเลือกการปรับแต่งไม่มีที่สิ้นสุด

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

หลักการออกแบบปุ่มหลักและปุ่มรอง

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

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

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

ตัวอย่างการออกแบบ

ต่อไปนี้คือภาพรวมส่วนหัวแบบเต็มความกว้างสามรายการที่เราจะออกแบบในวันนี้

UX เต็มความกว้างส่วนหัว

Divi Retirement Center ส่วนหัวแบบเต็ม

ส่วนหัวแบบเต็มความกว้างของการวางแผนทางการเงิน

ดาวน์โหลดเลย์เอาต์ฟรี

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

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

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

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

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

ในการนำเข้าเทมเพลตส่วนหัวไปยังไลบรารี Divi ให้ทำดังต่อไปนี้:

  1. ไปที่ตัวสร้างธีม Divi
  2. คลิกปุ่มนำเข้าที่ด้านบนขวาของหน้า
  3. ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้า
  4. เลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ (อย่าลืมแตกไฟล์ก่อนแล้วจึงใช้ไฟล์ JSON)
  5. จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปที่บทช่วยสอนกันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

  1. ติดตั้ง Divi บนเว็บไซต์ WordPress ของคุณ
  2. เพิ่มหน้าและตั้งชื่อ
  3. เปิดใช้งาน Visual Builder

ขั้นตอนการออกแบบส่วนหัว Ux แบบเต็มความกว้าง

ตอนนี้เราได้ตั้งค่าเพจแล้ว มาเริ่มกันที่ส่วนหัวแบบเต็มความกว้างสำหรับหน้า Landing Page UX

การตั้งค่าเพจของเรา

ก่อนที่เราจะเริ่มจัดสไตล์ เราจะต้องโหลดแพ็คเลย์เอาต์ UX ที่สร้างไว้ล่วงหน้าฟรีจาก Divi Library เมื่อคุณเปิดใช้งาน Visual Builder คุณจะเห็นป๊อปอัปสามตัวเลือก ให้เลือก เลือกเค้าโครงที่สร้างไว้ล่วงหน้า

โหลดเลย์เอาต์แพ็ค

ในการโหลดชุดเลย์เอาต์ UX ลงในเพจของคุณ:

  1. ในแท็บ "Premade Layouts" ให้ใช้ฟังก์ชันการค้นหาเพื่อค้นหาชุดเลย์เอาต์ UX
  2. เมื่อคุณพบแล้วให้คลิกที่มัน สิ่งนี้จะแสดงรายละเอียดเค้าโครงและหน้าที่พร้อมใช้งาน
  3. คลิกที่การออกแบบหน้า Landing Page จากนั้นคลิก "ใช้เค้าโครงนี้"

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

ลบส่วนแรก

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

เพิ่มมาตราเต็มความกว้าง

ก่อนที่เราจะสามารถเพิ่มส่วนหัวแบบเต็มได้ เราต้องเพิ่มส่วนแบบเต็มความกว้างก่อน

คลิกลูกศร "+" เพื่อเปิดส่วน Divi จากนั้นคลิก "เต็มความกว้าง" สิ่งนี้จะนำไลบรารี Divi Fullwidth Module ขึ้นมาโดยอัตโนมัติ

เพิ่มส่วนหัวแบบเต็ม

ภายในไลบรารี Divi Fullwidth Module คลิก "Fullwidth Header"

การเพิ่มเนื้อหา

ก่อนที่เราจะเริ่มกำหนดสไตล์โมดูล มาเพิ่มเนื้อหาที่จำเป็นสำหรับโมดูลนี้ก่อน

เพิ่มเนื้อหาข้อความ

ใต้แท็บข้อความ ให้เพิ่มเนื้อหาต่อไปนี้:

  1. หัวข้อ: พัฒนาความรู้ด้านการออกแบบ UX ของคุณ
  2. คำบรรยาย: หลักสูตรการออกแบบ UX
  3. ปุ่ม #1: ภาพรวมหลักสูตร
  4. ปุ่ม #2: เรียนรู้เพิ่มเติม
  5. เนื้อหา: Placeholder text

เพิ่มรูปภาพ

ตอนนี้เรามีเนื้อหาที่เป็นข้อความแล้ว เราต้องเพิ่มภาพสองภาพในการออกแบบของเรา

  1. ในแท็บรูปภาพ ให้เพิ่มรูปภาพโลโก้ (รูปดาว) และรูปภาพส่วนหัว (รูปภาพของบุคคลที่ถือโทรศัพท์)

เปลี่ยนสีพื้นหลัง

ในแท็บ พื้นหลัง กำหนดการตั้งค่านี้:

  1. สีพื้นหลัง: #131517

จัดแต่งทรงผมส่วนหัวเต็มความกว้าง

ตอนนี้เราได้ตั้งค่าเนื้อหาแล้ว มาเพิ่มสไตล์ผ่านแท็บออกแบบกันเถอะ

เลื่อนลงไอคอน

มาเพิ่มไอคอนเลื่อนลง ลูกศรชี้ลง

  1. การออกแบบนี้ใช้ไอคอนแบบเลื่อนลง ดังนั้นให้สลับตัวเลือกนี้เป็นใช่
  2. เลือกไอคอนลูกศรชี้ลง แล้วตั้งค่าสีของไอคอนเป็นสีขาว

ภาพ

เพิ่มความโค้งให้กับรูปภาพของเราด้วยการปัดเศษมุม

ในแท็บรูปภาพ กำหนดการตั้งค่าต่อไปนี้:

  1. มุมโค้งมนของรูปภาพ : คลิกปุ่ม chainlink เพื่อยกเลิกการเชื่อมโยงมุม จากนั้นพิมพ์ 1000px ในช่องป้อนข้อมูลด้านล่างซ้ายและด้านล่างขวา ซึ่งจะปัดเศษที่มุมล่างซ้ายและมุมขวาล่างของรูปภาพ

ข้อความชื่อเรื่อง

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

  1. แบบอักษรของชื่อเรื่อง: PT Sans
  2. น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
  3. ขนาดข้อความชื่อเรื่อง: 5rem
  4. ความสูงของบรรทัดชื่อเรื่อง: 1.2em

เนื้อความ

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

  1. Body Font: มุกตา
  2. ขนาดข้อความเนื้อหา: 18px

ข้อความคำบรรยาย

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

  1. Subtitle Font: มุกตา
  2. คำบรรยาย น้ำหนักแบบอักษร: ตัวหนา
  3. รูปแบบตัวอักษรของคำบรรยาย: ตัวพิมพ์ใหญ่
  4. สีข้อความคำบรรยาย: #13d678
  5. คำบรรยายการเว้นวรรคตัวอักษร: 3px

ปุ่มหนึ่ง

นี่คือที่ที่เราสามารถกำหนดรูปแบบที่กำหนดเองสำหรับปุ่มที่หนึ่ง ปุ่มหลัก ในแท็บปุ่มหนึ่ง กำหนดการตั้งค่าเหล่านี้:

  1. ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
  2. ปุ่มหนึ่งสี: #ffffff
  3. พื้นหลังปุ่มเดียว: #13d678
  4. ความกว้างของขอบปุ่มหนึ่ง: 0px
  5. รัศมีเส้นขอบหนึ่งปุ่ม: 100px
  6. แบบอักษรปุ่มหนึ่ง: มุกตา
  7. น้ำหนักแบบอักษรปุ่มเดียว: ตัวหนา
  8. แสดงไอคอนปุ่มหนึ่ง: ใช่
  9. ไอคอนปุ่มหนึ่ง: ลูกศรขวา
  10. แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือสำหรับปุ่มที่หนึ่ง: ไม่

ปุ่มที่สอง

ตอนนี้ มากำหนดรูปแบบปุ่มรอง ปุ่มที่สองกัน ในแท็บปุ่มที่สอง กำหนดการตั้งค่าเหล่านี้:

  1. ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
  2. ปุ่มหนึ่งสี: #ffffff
  3. พื้นหลังปุ่มเดียว: #303030
  4. ความกว้างของขอบปุ่มหนึ่ง: 0px
  5. รัศมีเส้นขอบหนึ่งปุ่ม: 100px
  6. แบบอักษรปุ่มหนึ่ง: มุกตา
  7. น้ำหนักแบบอักษรปุ่มเดียว: ตัวหนา
  8. แสดงไอคอนปุ่มหนึ่ง: ใช่
  9. ไอคอนปุ่มหนึ่ง: ลูกศรขวา
  10. แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือสำหรับปุ่มที่หนึ่ง: ใช่

เพิ่มลิงค์ปุ่ม

อย่าลืมเพิ่มลิงก์ไปยังปุ่มของคุณ! ในแท็บ ลิงก์ กำหนดการตั้งค่าต่อไปนี้:

  1. ปุ่ม #1 ลิงค์ URL: วาง URL สำหรับปุ่มที่หนึ่งที่นี่
  2. ปุ่ม #2 Link URL: วาง URL สำหรับปุ่มที่สองที่นี่

บันทึกการออกแบบของคุณ

ตอนนี้เรามีส่วนหัวแบบเต็มความกว้างที่ออกแบบอย่างสมบูรณ์แล้ว อย่าลืมบันทึกการออกแบบของคุณ!

  1. คลิกลูกศรสีเขียวที่ด้านล่างขวาของหน้าต่างโมดูล
  2. จากนั้นคลิกไอคอนบันทึกบนแถบเครื่องมือ Divi เพื่อบันทึกการออกแบบเพจของคุณ
  3. ออกจาก Visual Builder

ขอให้สนุกกับการทดลอง

วิธีการจัดรูปแบบโมดูล Divi Fullwidth Header นั้นไม่มีที่สิ้นสุด การใช้ประโยชน์จากปุ่มหลักและปุ่มรองสามารถช่วยนำผู้เยี่ยมชมของคุณไปยังหน้าที่คุณต้องการให้พวกเขาดูหรือดำเนินการ (เช่น ส่งคำถาม) ที่คุณต้องการให้พวกเขาดำเนินการ

ลองดูตัวอย่างส่วนหัวแบบเต็มความกว้างอีกสองตัวอย่างที่มีปุ่มหลักที่โดดเด่น

Divi Retirement Center ส่วนหัวแบบเต็ม

ลักษณะปุ่ม

มาดูสไตล์ที่เป็นเอกลักษณ์ของปุ่มหลักและปุ่มรองกัน

ปุ่มหนึ่ง

ในแท็บปุ่มหนึ่ง กำหนดการตั้งค่าต่อไปนี้:

  1. ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
  2. ขนาดข้อความปุ่มเดียว: 14px
  3. ปุ่มหนึ่งสี: #ffffff
  4. พื้นหลังปุ่มเดียว: #0a0a0a
  5. ความกว้างของขอบปุ่มหนึ่ง: 0px
  6. รัศมีเส้นขอบหนึ่งปุ่ม: 10px
  7. น้ำหนักแบบอักษรปุ่มเดียว: ตัวหนา

ปุ่มที่สอง

ในแท็บปุ่มที่สอง กำหนดการตั้งค่าต่อไปนี้:

  1. ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
  2. ขนาดข้อความปุ่มเดียว: 14px
  3. ปุ่มหนึ่งสี: #ffffff
  4. พื้นหลังปุ่มเดียว: #0a0a0a
  5. ความกว้างของขอบปุ่มหนึ่ง: 0px
  6. รัศมีเส้นขอบหนึ่งปุ่ม: 10px
  7. น้ำหนักแบบอักษรปุ่มเดียว: ตัวหนา

และที่นั่นคุณมีมัน! ปุ่มที่ไม่ซ้ำกันสองปุ่ม ปุ่มหนึ่งที่โดดเด่น และอีกปุ่มสำหรับที่นั่งที่สอง

ส่วนหัวแบบเต็มความกว้างของการวางแผนทางการเงิน

ลักษณะปุ่ม

มาดูสไตล์ที่เป็นเอกลักษณ์ของปุ่มหลักและปุ่มรองกัน

ปุ่มหนึ่ง

ในแท็บปุ่มหนึ่ง กำหนดการตั้งค่าต่อไปนี้:

  1. ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
  2. ขนาดข้อความปุ่มเดียว: 18px
  3. สีข้อความปุ่มเดียว: #ffffff
  4. สีพื้นหลังปุ่มเดียว: #1b4ffe
  5. ปุ่มที่หนึ่ง Padding: 15px บนและล่าง; 25px ซ้ายและขวา

ปุ่มที่สอง

ในแท็บปุ่มที่สอง กำหนดการตั้งค่าต่อไปนี้:

  1. ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่สอง: ใช่
  2. ปุ่มสีข้อความที่สอง: #1b4ffe
  3. ปุ่มสองสีพื้นหลัง: โปร่งใส
  4. ปุ่มสองไอคอนสี: #1b4ffe

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

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