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

คุณต้องการสร้างส่วน Hero Divi ด้วยโมดูล Fullwidth Header หรือออกแบบด้วยตัวเอง

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

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

Let 's go!

ความสำคัญของส่วนเว็บไซต์ฮีโร่

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

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

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

สร้างส่วนฮีโร่ตั้งแต่เริ่มต้น

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

ลองมาดูข้อดีข้อเสียของวิธีนี้กัน

ประโยชน์ของแนวทางนี้

อันดับแรก มาดูประโยชน์ของการสร้างส่วนฮีโร่ของเว็บไซต์ตั้งแต่เริ่มต้นโดยใช้ Divi

• การควบคุมการออกแบบเต็มรูปแบบ
• ใช้โมดูล Divi ใด ๆ

ข้อเสียของแนวทางนี้

ตอนนี้เรามาดูข้อเสียของการสร้างส่วนฮีโร่ตั้งแต่เริ่มต้น

• คุณต้องสร้างจากศูนย์
• ต้องใช้ mods หลายตัว

สร้างส่วนฮีโร่ด้วยโมดูล Divi Fullwidth Header

การสร้างส่วนฮีโร่โดยใช้โมดูล Divi Fullwidth Header ทำให้ง่ายต่อการสร้างการออกแบบที่ตอบสนองบนมือถือที่สะดุดตาในเวลาเพียงไม่กี่นาที 

ลองมาดูข้อดีข้อเสียของวิธีนี้กัน

ประโยชน์ของแนวทางนี้

มาดูประโยชน์ของการสร้างส่วนฮีโร่ด้วยโมดูล Divi Fullwidth Header

• ทั้งหมดของคุณ เนื้อหา อยู่ในโมดูลเดียว
• การออกแบบที่เหมาะสมที่สุดแล้ว

ข้อเสียของแนวทางนี้

ตอนนี้ มาประเมินข้อเสียของการออกแบบส่วนฮีโร่ด้วยโมดูล Divi Fullwidth Header

• ความยืดหยุ่นน้อยลงด้วยการออกแบบ

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

การสร้างสองส่วนฮีโร่ทีละขั้นตอน

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

สร้างหน้าใหม่ด้วย Divi Builder

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

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

สร้างส่วนฮีโร่ของคุณตั้งแต่เริ่มต้น

เมื่อหน้าของเราได้รับการตั้งค่าแล้ว มาเริ่มสร้างส่วนฮีโร่กันตั้งแต่เริ่มต้น

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

เปิดใช้งาน "ตัวสร้าง Divi"

เพื่อที่จะใช้ตัวสร้างการลากและวางของ Divi เราจะต้องเปิดใช้งาน Visual Builder โดยคลิกที่ปุ่ม “ใช้ DiviBuilder”. การดำเนินการนี้จะโหลดหน้าซ้ำโดยใช้ Divi Visual Builder

เลือก: สร้างตั้งแต่เริ่มต้น

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

เพิ่มแถวและกำหนดค่าคอลัมน์

สร้างแถวที่มีโครงสร้างคอลัมน์ต่อไปนี้

เพิ่ม mods

ตอนนี้มาเพิ่มโมดูลเนื้อหาที่เราต้องการ

• 2 โมดูลข้อความ ตัวแบ่ง ปุ่มในคอลัมน์ด้านซ้าย
• 1 Image Module ในคอลัมน์กลาง
• 1 Image Module ในคอลัมน์ด้านขวา

ส่วนสไตล์

ตอนนี้ มากำหนดการตั้งค่าส่วนกัน

เพิ่มส่วน แล้วกำหนดการตั้งค่าต่อไปนี้:

• พื้นหลัง: #1d1d25

รูปแบบข้อความส่วนหัว

ปรับแต่งข้อความส่วนหัว:

• หัวข้อที่ 1:
  • น้ำหนักแบบอักษร: กึ่งหนา
  • สีข้อความ: #ffffff
  • ขนาดตัวอักษร: 90px
  • ความสูงของสาย: 1,1 em

เครื่องสกัด

กำหนดการตั้งค่าตัวแบ่ง:

• สีเส้น: rgba(255,255,255,0.3)
• น้ำหนักตัวแบ่ง: 10px
• ความกว้างสูงสุด: 260px

เนื้อความ

ปรับแต่งข้อความเนื้อหา:

• สีข้อความ: rgba(255,255,255,0.7)
• ขนาดตัวอักษร: 13px
• ความสูงของสาย: 1,8 em

ปุ่ม

ตอนนี้มาปรับแต่งปุ่มกัน

ในแท็บปุ่ม:

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

ในแท็บการเว้นวรรค:

• บนและล่าง: 40px
• ซ้ายและขวา: 20px

เพิ่มรูปภาพ

เพิ่มรูปภาพลงในโมดูลรูปภาพ

ปรับการตั้งค่าสาย

ในพารามิเตอร์บรรทัด:

• มาร์จิ้น (ซ้าย): 15vw

ปรับคอลัมน์ที่ 2

ในคอลัมน์ที่สอง กำหนดการตั้งค่าเหล่านี้:

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

วางรหัสต่อไปนี้ลงในส่วนรหัสขององค์ประกอบหลัก:

argin-right: -15vw!important;
z-index: 100!important;

การเว้นวรรค

เพิ่มช่องว่างภายในด้านบน 100 พิกเซล

นั่นไง ! ตอนนี้คุณมีส่วนฮีโร่แบบกำหนดเองที่ออกแบบอย่างสมบูรณ์แล้ว

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

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

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

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

เพิ่มหน้าและเลือกสร้างตั้งแต่เริ่มต้น

เพิ่มหน้าใหม่ ตั้งชื่อ จากนั้นคลิกที่ “ใช้ Divi Builder” จากนั้นเลือก Build From Scratch

แทรกส่วนความกว้างเต็มและส่วนหัวเต็มความกว้าง

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

เนื้อหา

เพิ่มเนื้อหาที่เป็นข้อความลงในโมดูลในแท็บข้อความ

ภาพ

เพิ่มรูปภาพในแท็บรูปภาพ

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

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

• พื้นหลัง: #1D1D25

ข้อความส่วนหัว

กำหนดการตั้งค่าข้อความส่วนหัว:

• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดตัวอักษร: 90px

เนื้อความ

กำหนดการตั้งค่าข้อความเนื้อหา:

• สีข้อความ: rgba(255,255,255,0.55)

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

กำหนดการตั้งค่าข้อความคำอธิบายภาพ:

• คำบรรยาย น้ำหนักแบบอักษร: ตัวหนา
• สีข้อความ: #4C594C
• ระยะห่างตัวอักษร: 3px

ปุ่ม

ตอนนี้ มาปรับแต่งปุ่มทั้งสองกัน

ปุ่มหนึ่ง

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่หนึ่ง: ใช่
• ปุ่มหนึ่ง
  • พื้นหลัง: #4c594c
  • ความกว้างของเส้นขอบ: 0 พิกเซล
  • รัศมีเส้นขอบ: 0px
  • แสดงไอคอน : ใช่
  • แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือ: ไม่
  • ช่องว่างภายใน: 25 พิกเซล (บนและล่าง); 25px (ซ้าย), 50px (ขวา)

ปุ่มที่สอง

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่สอง: ใช่
• ปุ่มสองขอบกว้าง: 0 พิกเซล
• รัศมีเส้นขอบ: 0px
• ช่องว่างภายใน: 25px (บน ล่าง ซ้ายและขวา)
• ปุ่มกล่องเงา: เลือกที่4
• ตำแหน่งแนวนอนของกล่องเงา: 0px
• ตำแหน่งแนวตั้งเงาของกล่อง: 2px
• สีเงา: #ffffff

นั่นไง ! ตอนนี้คุณมีส่วนฮีโร่ที่ออกแบบอย่างสมบูรณ์โดยใช้โมดูล Divi Fullwidth Header

ดูสิ่งนี้ด้วย: Divi: วิธีสร้างการเปลี่ยนพื้นหลังระหว่างองค์ประกอบ

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

สรุป

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

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

หลังจากอ่านข้อดีและข้อเสียของทั้งสองแล้ว คุณจะออกแบบส่วนฮีโร่ของคุณอย่างไร

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

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

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

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

...