วิธีสร้างส่วน Showstopping Hero ด้วย Divi

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

ตัวอย่าง

ตัวอย่างที่เราจะแสดงวิธีการสร้างใหม่ด้วย Divi มีลักษณะดังนี้บนเดสก์ท็อป:

และแบบนี้บนมือถือ:

วิธีทำให้ส่วนฮีโร่ของคุณโดดเด่น

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

1. โลโก้ขนาดใหญ่ สื่อความหมาย และรวมศูนย์

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

2. เน้นเนื้อหาที่เขียน

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

3. เน้นข้อเสนอขายที่ไม่ซ้ำ

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

4. ภาพผลิตภัณฑ์สะอาด

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

วิธีสร้างส่วน Showstopping Hero ด้วย Divi

สมัครสมาชิกช่อง Youtube ของเรา

สร้างตัวอย่างใหม่ด้วย Divi

เมื่อได้ข้ามด้านทฤษฎีไปแล้ว ก็ถึงเวลาที่เราจะเริ่มสร้างมันขึ้นมาใหม่

รูปแบบส่วนหัว

สิ่งแรกที่คุณต้องทำคือเลือก 'Centered' เป็น Header Style โดยไปที่ WordPress Dashboard > ปรับแต่ง > Header & Navigation > Header Format > และเลือก 'Centered' เป็น Header Style'

การตั้งค่าแถบเมนูหลัก

จากนั้นกลับไปที่ Header & Navigation > Primary Menu Bard > และทำการปรับเปลี่ยนดังต่อไปนี้:

• ความสูงของเมนู: 211px
• โลโก้ความสูงสูงสุด: 100px
• ขนาดตัวอักษร: 16
• ระยะห่างระหว่างตัวอักษร: 2
• แบบอักษร: Lato Light
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่
• สีข้อความ: #FFFFFF
• สีของลิงค์ที่ใช้งาน: #FFFFFF
• สีพื้นหลัง: rgba(255,255,255,0)
• สีพื้นหลังของเมนูแบบเลื่อนลง: rgba(255,255,255,0)

เพิ่มมาตราใหม่

เมื่อเสร็จแล้ว เพิ่มหน้าใหม่ เปิดใช้งาน Divi Builder เปิดใช้งาน Visual Builder และเพิ่มส่วนมาตรฐานใหม่

พื้นหลังไล่โทนสี

ใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับส่วนนี้:

• สีแรก: #e2e2e2
• สีที่สอง: rgba(255,255,255,0)
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 180deg
• ตำแหน่งเริ่มต้น: 40%
• ตำแหน่งสุดท้าย: 40%

ภาพพื้นหลัง

ถัดไป อัปโหลดภาพพื้นหลังและเลือก 'คูณ' เป็นภาพพื้นหลังแบบผสมผสาน

เพิ่มแถวสองคอลัมน์

สีพื้นหลัง

เพิ่มแถวสองคอลัมน์ในส่วนที่คุณเพิ่งสร้างและใช้ '#b7afa1' เป็นสีพื้นหลัง

พื้นหลังไล่ระดับคอลัมน์ 1

เลื่อนลงและใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับคอลัมน์แรก:

• สีแรก: rgba(255,255,255,0.43)
• สีที่สอง: rgba(255,255,255,0)
• คอลัมน์ 1 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 1 ทิศทางการไล่ระดับสี: บนซ้าย
• คอลัมน์ 1 ตำแหน่งเริ่มต้น: 49%
• คอลัมน์ 1 ตำแหน่งสิ้นสุด: 49%

พื้นหลังไล่ระดับคอลัมน์ 2

และใช้พื้นหลังไล่ระดับสีต่อไปนี้สำหรับคอลัมน์ที่สอง:

• สีแรก: rgba(255,255,255,0.43)
• สีที่สอง: rgba(255,255,255,0)
• คอลัมน์ 2 ประเภทการไล่ระดับสี: เรเดียล
• คอลัมน์ 2 ทิศทางเรเดียล: ล่างขวา
• คอลัมน์ 2 ตำแหน่งเริ่มต้น: 49%
• คอลัมน์ 2 ตำแหน่งสิ้นสุด: 49%

ขนาด

ไปที่แท็บออกแบบ เปิดใช้งานตัวเลือก 'ใช้ความกว้างของรางน้ำแบบกำหนดเอง' และใช้ '1' สำหรับความกว้างของรางน้ำ

ระยะห่าง

เปิดหมวดหมู่ย่อย Spacing และใช้ช่องว่างภายในและระยะขอบต่อไปนี้:

• ช่องว่างภายในด้านบน: 0px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 25px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 25px
• ขอบล่าง: 200px

โมดูล Blurb แรก

เปิดใช้งานไอคอน

เพิ่มโมดูล Blurb ในคอลัมน์แรกของแถว เปิดใช้งานตัวเลือก 'ใช้ไอคอน' และเลือกไอคอน

การตั้งค่าไอคอน

จากนั้นไปที่การตั้งค่าการออกแบบและทำการเปลี่ยนแปลงต่อไปนี้ในหมวดหมู่ย่อยของรูปภาพและไอคอน:

• สีไอคอน: #FFFFFF
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 40px

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

จากนั้น ทำการตั้งค่าต่อไปนี้กับหมวดหมู่ย่อยข้อความส่วนหัว:

• แบบอักษรส่วนหัว: Roboto Light
• รูปแบบตัวอักษร: ตัวหนา
• ขนาดตัวอักษรของส่วนหัว: 25px
• สีข้อความส่วนหัว: #FFFFFF
• ความสูงของบรรทัดส่วนหัว: 1.5em

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

หมวดหมู่ย่อยของข้อความเนื้อหาจะต้องมีการเปลี่ยนแปลงต่อไปนี้:

• แบบอักษรของร่างกาย: Lato Light
• ขนาดตัวอักษรของร่างกาย: 13px
• สีข้อความ: #FFFFFF

ขนาด

ถัดไป ใช้ '300px' เป็นความกว้างของเนื้อหา

ระยะห่าง

สุดท้าย ใช้ระยะขอบและช่องว่างภายในต่อไปนี้สำหรับโมดูล Blurb:

• ขอบบน: -50px (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านขวา: 10px
• ช่องว่างภายใน: 30px
• ช่องว่างภายในด้านซ้าย: 10px

โคลนโมดูล Blurb & วางในคอลัมน์ที่สอง

ดำเนินการต่อโดยโคลนโมดูล Blurb ที่ทำไว้ก่อนหน้านี้แล้ววางไว้ในคอลัมน์อื่นด้วย

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

สิ่งแรกที่คุณจะต้องเปลี่ยนใน Blurb Module ที่ลอกแบบมานี้คือสีพื้นหลัง เปลี่ยนเป็น 'rgba(89,60,31,0.5)'

เปลี่ยนไอคอน

สิ่งต่อไปและสุดท้ายที่คุณต้องเปลี่ยนคือไอคอนภายในแท็บเนื้อหา

พิเศษ: เพิ่มตัวเลือก Box Shadow ใหม่ของ Divi ให้กับ Row

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

• ตำแหน่งแนวนอนของกล่องเงา: -3px
• ตำแหน่งแนวตั้งเงาของกล่อง: 31px
• Box Shadow Blur ความแรง: 79px
• ความแรงของการกระจายเงาของกล่อง: -4px
• สีเงา: #424242
• ตำแหน่งเงาของกล่อง: เงาด้านนอก

ผลลัพธ์

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

และบนมือถือ:

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

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

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

ภาพเด่นโดย Ellagrin / shutterstock.com