Divi: วิธีสร้างส่วนฮีโร่ด้วยโมดูลส่วนหัวแบบเต็ม

คุณต้องการทราบวิธีการสร้างส่วนฮีโร่ด้วยโมดูลส่วนหัวแบบเต็มความกว้างของ Divi หรือไม่?

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

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

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

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

ไปกันเถอะ !

การสำรวจ

นี่คือตัวอย่างสิ่งที่เราจะออกแบบ

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

ก่อนที่คุณจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณมี Divi เวอร์ชันล่าสุดใน เว็บไซต์เว็บ.

ตอนนี้คุณพร้อมที่จะเริ่มต้นแล้ว!

วิธีสร้างส่วนฮีโร่ด้วยโมดูลส่วนหัวแบบเต็มความกว้างของ Divi

อ่าน: Divi: วิธีใช้ “Gradient Builder” ในการตกแต่งภาพของคุณ

สร้างหน้าใหม่ด้วยเค้าโครงที่กำหนดไว้ล่วงหน้า

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

จากแดชบอร์ด Worpress เพิ่มหน้าใหม่ไปที่ .ของคุณ เว็บไซต์เว็บ

ตั้งชื่อแล้วเลือกตัวเลือก ใช้ Divi Builder.

เราจะใช้เค้าโครงที่กำหนดไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ เลือกเลย เรียกดูเค้าโครง.

ค้นหาและเลือกเค้าโครง พ่อพันธุ์แม่พันธุ์.

เลือก ใช้เค้าโครงนี้ เพื่อเพิ่มเลย์เอาต์ให้กับเพจของคุณ

ตอนนี้เราพร้อมที่จะออกแบบ

เพิ่มโมดูลส่วนหัวแบบเต็ม

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

เพิ่มโมดูลส่วนหัวแบบเต็มในส่วน

ถัดไป ลบส่วนหัวเดิม

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

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

เปิดการตั้งค่าโมดูลและเพิ่ม เนื้อหา ถัดจากโมดูล:

• Title: สัตวแพทย์
• คำบรรยาย: Divivet. ให้บริการเพื่อนที่ดีที่สุดของเรา
• ปุ่ม #1: บริการทั้งหมด
• ปุ่ม #2: ทำการนัดหมาย
• ร่างกาย: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi Nulla quis lorem ut libero malesuada feugiat Curabitur arcu erat, accumsan id imperdiet et, porttitor ที่ sem. Cras ultricies ligula sed magna dictum porta.

ถัดไป เพิ่มรูปภาพส่วนหัว

การตั้งค่าพื้นหลังไล่โทนสี

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

• 0%: rgba (255,170,205,0.48)
• 40%: rgba (110,66,255,0.24)
• 87%: rgba(124,239,255,0.71)
• ประเภทการไล่ระดับสี: วงรี
• ตำแหน่งไล่ระดับ: ขวา

จากนั้นเลือกแท็บ หน้ากากพื้นหลัง และเพิ่มมาสก์พื้นหลัง

• พื้นหลังของหน้ากาก: Corner Blob
• หน้ากากสี: #FFFFFF
• แปลงร่าง: แนวตั้ง

ปรับแต่งข้อความ

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

• แบบอักษรของชื่อเรื่อง: Nunito
• น้ำหนักแบบอักษรของชื่อเรื่อง: Ultra Bold
• รูปแบบตัวอักษร: TT (ตัวพิมพ์ใหญ่)

• สีข้อความชื่อเรื่อง: #a9cb6b
• ขนาดตัวอักษร: 14px
• ระยะห่างของตัวอักษรชื่อเรื่อง: 2px

ไปที่ส่วนของ เนื้อความ และปรับแต่งฟอนต์

• สีข้อความ: #000000
• ขนาดข้อความเนื้อหา:
  • เดสก์ท็อป: 18px
  • โทรศัพท์: 14px
• ความสูงของเส้นร่างกาย: 1.8em

ดูสิ่งนี้ด้วย: Divi: วิธีปรับแต่งตะกร้าและไอคอนค้นหาของโมดูล "เมนูเต็มความกว้าง"

ถัดไป เปิดการตั้งค่าคำบรรยายและกำหนดแบบอักษรเอง

• ฟอนต์คำบรรยาย : Nunito
• คำบรรยาย น้ำหนักแบบอักษร: ตัวหนา
• สีข้อความ: #000000

สุดท้าย เปลี่ยนขนาดของข้อความ

• ขนาดข้อความคำบรรยาย:
  • เดสก์ท็อป: 56px
  • เคลื่อนย้ายได้: 32px
• ความสูงของบรรทัดคำบรรยาย: 1.2em

ปรับแต่งปุ่ม #1

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความปุ่มเดียว: 14px

เพิ่มการไล่ระดับสีพื้นหลังให้กับปุ่ม ค่าความลาดชันมีดังนี้:

• 58%: #316EFF
• 100%: #1D2B60
• ทิศทางการไล่ระดับสี: 90deg

ถัดไป ปรับแต่งการตั้งค่าเส้นขอบและการตั้งค่าแบบอักษร

• ปุ่มที่หนึ่ง:
  • ความกว้างของเส้นขอบ: 0px
  • รัศมีเส้นขอบ: 80px
  • ระยะห่างระหว่างตัวอักษร: 2px
  • แบบอักษร: Nunito
  • น้ำหนักแบบอักษร: Ultra Bold
  • สไตล์: TT (ตัวพิมพ์ใหญ่)
• แสดงไอคอนปุ่มหนึ่ง: ไม่

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

• ขอบปุ่มหนึ่ง
  • ด้านบน: 200px
  • ด้านล่าง: 0px
• ปุ่มหนึ่งช่องว่างภายใน:
  • ด้านบน: 16px
  • ด้านล่าง: 16px
  • ซ้าย: 2em
  • ขวา: 50em
• Box Shadow: ดูการจับภาพ

ใช้การตั้งค่าที่ตอบสนองเพื่อตั้งค่าระยะขอบและช่องว่างภายในที่แตกต่างกันบนอุปกรณ์มือถือ

• ปุ่มหนึ่ง Margin-Top-Mobile: 25px
• ปุ่มหนึ่ง Padding-Right-Mobile: 10em

ปรับแต่งปุ่ม #2

ก่อนอื่นให้คลิกขวาที่ปุ่ม #1 แล้วคลิก คัดลอกปุ่มหนึ่งสไตล์.

ถัดไป คลิกขวาที่ปุ่มที่สอง และวางสไตล์จากปุ่ม # 1

ตอนนี้เราสามารถปรับแต่งปุ่มที่สองได้แล้ว เปลี่ยนสีข้อความ

• ปุ่มสองสีข้อความ: #121F60

ปรับแต่งการไล่ระดับสีพื้นหลังสำหรับปุ่มที่สอง

• 30%: rgba(0,229,198,0)
• 100%: #00e5c6

ใช้การตั้งค่าที่ตอบสนองเพื่อปรับการไล่ระดับสีพื้นหลังสำหรับอุปกรณ์เคลื่อนที่

• 0%: rgba (0,229,198,0)
• 100%: #00e5c6

ถัดไป ปรับระยะขอบและช่องว่างภายในสำหรับการออกแบบเดสก์ท็อป

• ปุ่มสองระยะขอบ:
  • ด้านบน: 0px
  • ด้านล่าง: 0px
  • ซ้าย: 30%
• ปุ่มที่สอง Padding:
  • ด้านบน: 16px
  • ด้านล่าง: 16px
  • ซ้าย: 48em
  • ขวา: 2em

ใช้การตั้งค่า responsifq เพื่อตั้งค่าระยะขอบและช่องว่างภายในที่แตกต่างกันสำหรับการออกแบบมือถือ

• ปุ่มที่สอง Margin-Left-Mobile: 5%
• ปุ่มที่สอง Padding:
  • ซ้ายมือถือ: 35%
  • ขวา-มือถือ: 5%

CSS ที่กำหนดเอง

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

อันดับแรก เริ่มต้นด้วย CSS สำหรับรูปภาพส่วนหัว CSS นี้ช่วยให้รูปภาพส่วนหัวแสดงเหนือปุ่มได้

z-index: 1;
position:relative;

ถัดไป CSS ที่กำหนดเองในชื่อ เราจะตั้งค่าต่างๆ สำหรับมุมมองเดสก์ท็อปและมือถือโดยใช้การตั้งค่าที่ตอบสนอง

สำหรับคอมพิวเตอร์เดสก์ท็อป:

padding-top:50px;
padding-bottom:30px;

สำหรับมือถือ:

padding-top:5px;
padding-bottom:10px;

สุดท้าย เพิ่ม CSS ต่อไปนี้ลงในปุ่มที่หนึ่งและปุ่มที่สอง

white-space: nowrap;

ผลสุดท้าย

นี่คือการออกแบบขั้นสุดท้ายสำหรับส่วนหัวฮีโร่แบบเต็มความกว้างของเรา

อ่าน: Divi: วิธีสร้างส่วนสมาชิกในทีมเป็นภาพหมุน

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

สรุป

โมดูล Fullwidth Header ช่วยให้คุณสร้างส่วน Hero ที่สวยงามได้อย่างง่ายดายเพื่อโฆษณาบริการของคุณและบอกข้อมูลของคุณ ผู้เข้าชม คุณกำลังพูดถึงอะไร เว็บไซต์เว็บ.

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

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

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

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

...