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

คุณต้องการปรับแต่งโมดูล Fullwidth Header ของ Divi ด้วยการปรับสมดุลปุ่มหลักและปุ่มรองหรือไม่

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

ในบทความของวันนี้ เราจะแสดงวิธีสร้างส่วนฮีโร่ใหม่โดยใช้ปุ่ม Divi เต็มความกว้างส่วนหัว. เราจะเริ่มการออกแบบโดยใช้ชุดเค้าโครงที่สร้างไว้ล่วงหน้า 3 ชุด และออกแบบส่วนของเราโดยเน้นที่ความสมดุลของปุ่มหลักและรอง 

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

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

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

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

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

การสำรวจ

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

เริ่มต้นด้วยการสร้างหน้าใหม่ด้วย Divi Builder

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

อ่าน: Divi: วิธีใช้มาสก์และรูปแบบพื้นหลังสำหรับส่วนฮีโร่

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

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

กำลังกำหนดค่าเพจของเรา

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

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

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

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

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

ลบส่วนแรก

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

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

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

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

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

ในไลบรารีโมดูล Divi Fullwidth ให้คลิกที่ " ส่วนหัวแบบเต็มความกว้าง".

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

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

เพิ่มข้อความ

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

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

เพิ่มรูปภาพ

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

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

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

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

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

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

เมื่อเนื้อหาของเราได้รับการตั้งค่าแล้ว มาเพิ่มสไตล์ผ่านปุ่ม ออกแบบ.

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

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

1. แสดงปุ่มเลื่อนลง: ใช่
2. เลือกไอคอนลูกศรลง
3. เลื่อนลงไอคอนสี: #000

ภาพ

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

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

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

ข้อความชื่อ

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

• หัวข้อ:
  • แบบอักษร: PT Sans
  • น้ำหนักแบบอักษร: ตัวหนา
  • ขนาดตัวอักษร: 5 rem
  • ความสูงของสาย: 1,2 em

ข้อความของร่างกาย

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

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

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

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

• คำบรรยาย :
  • แบบอักษร: มุกตา
  • น้ำหนักแบบอักษร: ตัวหนา
  • สไตล์: ตัวพิมพ์ใหญ่
  • สีข้อความ: #13d678
  • ระยะห่างตัวอักษร: 3px

ปุ่มหนึ่ง

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่มหนึ่ง : ใช่
• ปุ่มที่หนึ่ง:
  • สีข้อความ: #ffffff
  • สีพื้นหลัง: #13d678
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • รัศมีเส้นขอบ: 100px
  • แบบอักษร: มุกตา
  • น้ำหนักแบบอักษร: ตัวหนา
• แสดงไอคอนปุ่มหนึ่ง: ใช่
• ไอคอน: ลูกศรขวา
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่มที่หนึ่ง: ไม่

ปุ่มที่สอง

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

• ใช้รูปแบบที่กำหนดเองสำหรับปุ่ม: ใช่
  • ปุ่มที่สอง
  • สีข้อความ: #ffffff
  • สีพื้นหลัง: #303030
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • รัศมีเส้นขอบ: 100 พิกเซล
  • แบบอักษร: มุกตา
  • น้ำหนักแบบอักษร: ตัวหนา
• แสดงไอคอนปุ่มที่สอง: ใช่
• ปุ่ม XNUMX ไอคอน: ลูกศรขวา
• แสดงเฉพาะไอคอนบนปุ่มวางเมาส์ที่ XNUMX : ใช่

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

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

1. ปุ่ม #1 URL ของลิงก์: วาง URL ของปุ่ม 1 ที่นี่
2. ปุ่ม #1 URL ของลิงก์: วาง URL ของปุ่ม 2 ที่นี่

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

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

• คลิกลูกศรสีเขียวที่ด้านล่างขวาของหน้าต่างโมดูล
• ลด
• ออกจาก VisualBuilder

อ่าน: Divi: วิธีสร้างส่วน Fluid Hero

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

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

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

ส่วนหัวแบบเต็มความกว้างจากชุด "ศูนย์เกษียณอายุ"

ลักษณะปุ่ม

มาดูรูปแบบปุ่มหลักและปุ่มรองที่ไม่ซ้ำใครกัน

ปุ่มหนึ่ง

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

• ใช้รูปแบบที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
• ปุ่มที่หนึ่ง:
  • ขนาดตัวอักษร: 14px
  • สีข้อความ: #ffffff
  • สีพื้นหลัง: #0a0a0a
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • รัศมีเส้นขอบ: 10px
  • ระยะห่างระหว่างตัวอักษร: 3px
  • น้ำหนักแบบอักษร: ตัวหนา
  • รูปแบบตัวอักษร: TT
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือสำหรับ Buttpn One : ใช่
• ปุ่มที่หนึ่ง Padding: 15px (บนและล่าง), 25px (ซ้ายและขวา)

ปุ่มที่สอง

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

• ใช้รูปแบบที่กำหนดเองสำหรับปุ่ม: ใช่
  • ปุ่มที่สอง:
  • ขนาดตัวอักษร: 14px
  • สีข้อความ: #ffffff
  • สีพื้นหลัง: #0a0a0a
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • รัศมีเส้นขอบ: 10px
  • น้ำหนักแบบอักษร: ตัวหนา
  • รูปแบบตัวอักษร: TT
• ปุ่มที่สอง Padding: 10px (ล่าง), 10px (ซ้ายและขวา)

และไปแล้ว! ปุ่มสองปุ่มที่ไม่เหมือนใคร ปุ่มหนึ่งที่โดดเด่นและอีกปุ่มหนึ่งที่ใช้ที่นั่งที่สอง

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

ลักษณะปุ่ม

มาดูลักษณะปุ่มหลักและปุ่มรองที่ไม่เหมือนใครกัน

ปุ่มหนึ่ง

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

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

ปุ่มที่สอง

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

• ใช้รูปแบบที่กำหนดเองสำหรับปุ่มที่สอง: ใช่
• ปุ่มที่สอง:
  • สีข้อความ: #1b4ffe
  • สีพื้นหลัง: ใส
  • สีไอคอน: #1b4ffe

ดาวน์โหลด DIVI ทันที !!!

สรุป

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

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

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

หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...