Divi: วิธีเพิ่มส่วนฮีโร่ในบล็อกโพสต์

คุณต้องการปรับปรุงบทความในบล็อกของคุณหรือไม่? Divi โดยการเพิ่มส่วน Hero เข้าไป?

ส่วน Hero แบบเต็มหน้าจอดูดีในทุกหน้าเว็บ แต่จะดีมากเป็นพิเศษในบล็อกโพสต์ 

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

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

ขอเริ่มต้น

การสำรวจ

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

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

ส่วน Hero พร้อมโมดูลเวอร์ชัน Post Title Desktop

ส่วนฮีโร่พร้อมโมดูลเวอร์ชันมือถือของ Post Title

เค้าโครงส่วน Hero สำรองพร้อมโมดูลเวอร์ชันเดสก์ท็อปของ Post Title

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

เค้าโครงส่วนฮีโร่สำรองพร้อมโมดูลชื่อเรื่องสำหรับมือถือ

ส่วนฮีโร่พร้อมข้อมูลเมตาเวอร์ชันเดสก์ท็อป

ส่วนฮีโร่พร้อมข้อมูลเมตาเวอร์ชันมือถือ

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

เทมเพลตบล็อกโพสต์สำหรับส่วนฮีโร่แบบเต็มหน้าจอของคุณ

คุณสามารถสร้างเทมเพลตบล็อกโพสต์ได้ใน Divi Theme Builder ตั้งแต่เริ่มต้นหรือดาวน์โหลดเทมเพลตจากบล็อก Elegant Themes หากต้องการค้นหา ให้ค้นหาในบล็อก “เทมเพลตโพสต์บล็อกฟรี”. หากคุณดาวน์โหลดเทมเพลต อย่าลืมคลายซิปแล้ว

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

ดาวน์โหลดหรือสร้างเทมเพลตบล็อกโพสต์สำหรับส่วน Hero แบบเต็มหน้าจอ

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

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

วิธีที่ 1: โมดูลชื่อเรื่องแบบเต็มหน้าจอ

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

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

เลือก ชื่อโพสต์แบบเต็มความกว้าง ในรายการโมดูลแบบเต็มความกว้าง

รายการทั้งหมดจะถูกเลือกตามค่าเริ่มต้น ปล่อยให้เปิดใช้งาน เลื่อนไปที่ ตำแหน่งรูปภาพเด่น และเลือก เหนือหัวเรื่อง.

• ตำแหน่งรูปภาพเด่น: เหนือชื่อเรื่อง

เลื่อนไปที่ สีพื้นหลัง และตั้งค่าสีเป็น #fff9f2

• พื้นหลัง: #fff9f2

ข้อความชื่อ

เลือกแท็บ ออกแบบ . สำหรับข้อความชื่อ ให้เก็บ H1 แล้วเลือก Playfair Display ตั้งค่าเป็นชิดซ้ายแล้วเลือก #34332e สำหรับสี

• หัวข้อ:
  • ระดับหัวเรื่อง: H1
  • แบบอักษร: Playfair Display
  • การจัดตำแหน่งข้อความ: ชิดซ้าย
  • สีข้อความ: #34332e

เพื่อ ขนาดข้อความ ตั้งค่าเวอร์ชันเดสก์ท็อปเป็น 65px เวอร์ชันมือถือเป็น 42px และความสูงของแถวเป็น 1,2em

• ขนาดข้อความชื่อเรื่อง (เดสก์ท็อป): 65px (เดสก์ท็อป), 42px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1,2 em

ข้อความเมตา

เลื่อนไปที่ ข้อความเมตา. เลือก Montserrat สำหรับแบบอักษรและตั้งค่าเป็นขนาดกลาง ตัวพิมพ์ใหญ่ การจัดตำแหน่งด้านขวาสำหรับรุ่นเดสก์ท็อป และการจัดตำแหน่งด้านซ้ายสำหรับรุ่นมือถือ เลือก #7b7975 สำหรับสี

• เมตาฟอนต์:
  • แบบอักษร: มอนต์เซอร์รัต
  • น้ำหนัก: ปานกลาง
  • สไตล์: TT
• ข้อความเมตา:
  • การจัดตำแหน่ง: ขวา (เดสก์ท็อป), ซ้าย (โทรศัพท์)
  • สี: #7b7975

ตั้งค่า ขนาดตัวอักษร สำหรับเวอร์ชันเดสก์ท็อปที่ 14 px สำหรับเวอร์ชันมือถือที่ 10 px ระยะห่างตัวอักษรที่ 1 px และความสูงของบรรทัดที่ 1,6 em ปิดการตั้งค่าและบันทึกแม่แบบของคุณ

• ข้อความเมตา:
  • ขนาด (เดสก์ท็อป): 14px
  • ขนาด (โทรศัพท์): 10px
• ระยะห่างระหว่างตัวอักษร: 1px
• ความสูงของสาย: 1,6 em

ชื่อเรื่องบนภาพพื้นหลัง

หากคุณตัดสินใจว่าต้องการให้ชื่อปรากฏบนรูปภาพเด่น ให้ใช้การตั้งค่าการออกแบบเดียวกันแล้วกลับไปที่แท็บ คอนเทนต์. 

เลือก ชื่อเรื่อง/ภาพพื้นหลังเมตา สำหรับ ตำแหน่งรูปภาพเด่น.

• ตำแหน่งรูปภาพเด่น: ชื่อเรื่อง/ภาพพื้นหลังเมตา

เลื่อนไปที่ พื้นหลัง และเลือก พื้นหลังไล่โทนสี. ตั้งค่าสีด้านซ้ายเป็น #fff9f2 สีด้านขวาเป็น rgba(255,255,255,0) ทิศทางเป็น 90 องศา ตำแหน่งเริ่มต้นเป็น 30% และเลือกใช่เพื่อวางการไล่ระดับสีเหนือภาพพื้นหลัง ปิดและบันทึกการตั้งค่าของคุณ

• ไล่ระดับหยุด:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• ทิศทางการไล่ระดับสี: 90 องศา
• สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่

วิธีที่ 2: ส่วนฮีโร่แบบเต็มหน้าจอพร้อมข้อมูลเมตา

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

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

การตั้งค่าส่วนฮีโร่แบบเต็มหน้าจอพร้อมข้อมูลเมตา

เปิดการตั้งค่าของ ส่วน และเลื่อนไปที่ ภาพพื้นหลัง. เลือก พื้นหลังไล่โทนสี และเปลี่ยนการตั้งค่าดังนี้:

• ไล่ระดับหยุด:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• ทิศทางการไล่ระดับสี: 90 องศา
• สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่

เลือก ภาพพื้นหลัง และเลือกตัวเลือก ใช้เนื้อหาแบบไดนามิก.

เลือก ภาพที่โดดเด่น ในตัวเลือก

เลือกแท็บ ออกแบบและเลื่อนไปที่ การกำหนดขนาด. เพิ่ม 100vh เป็นความสูงขั้นต่ำ ปิดการตั้งค่าส่วน

• ความสูงขั้นต่ำ: 100vh

การตั้งค่าส่วนฮีโร่แบบเต็มหน้าจอพร้อมข้อมูลเมตา

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

เพิ่ม โมดูลข้อความ ในคอลัมน์ด้านขวา

สำหรับเขา เนื้อหาเลือก ใช้เนื้อหาแบบไดนามิก.

เลือก ชื่อกระทู้/เอกสารสำคัญ ในรายการตัวเลือก

• เนื้อหาแบบไดนามิก: ชื่อโพสต์/ไฟล์เก็บถาวร

ไปที่แท็บ ออกแบบ

• หัวข้อ:
  • ข้อความ: H1
  • แบบอักษร: Playfair Display
  • การจัดตำแหน่งข้อความ: ชิดซ้าย
  • สีข้อความ: #34332e

สำหรับขนาดของ ตำรา ตั้งค่าสำหรับเวอร์ชันเดสก์ท็อปเป็น 65px สำหรับเวอร์ชันมือถือเป็น 42px และความสูงของแถวเป็น 1,2em

• หัวข้อ:
  • ขนาดข้อความ: 65px (เดสก์ท็อป), 42px (โทรศัพท์)
  • ความสูงของสาย: 1,2 em

เลื่อนไปที่ การเว้นวรรค และป้อน 50% สำหรับช่องว่างภายในด้านบน ปิดการตั้งค่า

• ช่องว่างภายใน: 50% (ด้านบน)

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

ส่วนฮีโร่พร้อมหมวดหมู่ข้อมูลเมตา

เพิ่มส่วนใหม่ ประจำในส่วนของฮีโร่

เปิดการตั้งค่าและตั้งค่า Couleur พื้นหลัง #fff9f2 ปิดการตั้งค่า

• สีพื้นหลัง: #fff9f2

แล้วเติม สาย จาก 4 คอลัมน์ไปยังส่วนใหม่

ฮีโร่แบบเต็มหน้าจอพร้อมข้อความหมวดหมู่ข้อมูลเมตา

เพิ่ม โมดูลข้อความ ในคอลัมน์ด้านซ้าย

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

เลือก หมวดหมู่ที่ผ่านมา ในรายการ

• เนื้อหาแบบไดนามิก: โพสต์หมวดหมู่

เลือกแท็บ ออกแบบ และเลื่อนลงไปที่ข้อความหัวเรื่อง เลือก H4 เลือกแบบอักษร Playfair Display และตั้งค่าเป็นตัวอักษรขนาดกลาง ตัวพิมพ์ใหญ่ การจัดตำแหน่งด้านขวาสำหรับรุ่นเดสก์ท็อป และการจัดตำแหน่งด้านซ้ายสำหรับรุ่นโทรศัพท์ เลือก #7b7975 สำหรับสี

• หัวข้อ:
  • แสดงข้อความ
  • แบบอักษร: Playfair Display
  • น้ำหนักตัวอักษร: ปานกลาง
  • สไตล์: TT
  • การจัดตำแหน่งข้อความ: กึ่งกลาง
  • สีข้อความ: #7b7975

กำหนดขนาดตัวอักษรสำหรับรุ่นเดสก์ท็อปเป็น 14 px สำหรับรุ่นมือถือเป็น 10 px ระยะห่างระหว่างตัวอักษรเป็น 1 px และความสูงของบรรทัดเป็น 1,6 em ปิดการตั้งค่าและบันทึกแม่แบบของคุณ

• หัวข้อที่ 4:
  • ขนาด (เดสก์ท็อป): 14px
  • ขนาด (โทรศัพท์): 10px
  • ระยะห่างระหว่างตัวอักษร: 1px
  • ความสูงของสาย: 1,6 em

เลื่อนไปที่ การเว้นวรรค และเพิ่ม 0px ที่ระยะขอบด้านล่าง ปิดการตั้งค่า

• มาร์จิ้น (ล่าง): 0px

ส่วนฮีโร่แบบเต็มหน้าจอพร้อมข้อมูลเมตา Meta Text

จากนั้น คัดลอกโมดูลหมวดหมู่แล้วลากไปยังคอลัมน์ถัดไป แต่ละโมดูล Meta มีการตั้งค่าเหมือนกัน เราจะแสดงวิธีการสร้างโมดูลแรก จากนั้นคัดลอกสองครั้งเพื่อสร้างโมดูลอื่นๆ

ผู้เขียน

เปิดการตั้งค่าและลบ เนื้อหา พลวัต.

คลิกที่ ใช้เนื้อหาแบบไดนามิก และเลือก โพสต์ผู้แต่ง.

• เนื้อหาแบบไดนามิก: ผู้เขียนโพสต์

ในแท็บ ออกแบบ, เปลี่ยนการตั้งค่าต่อไปนี้ 

• หัวข้อที่ 4:
• แบบอักษร: มอนต์เซอร์รัต
• น้ำหนักตัวอักษร: ปานกลาง
• สไตล์: TT
• การจัดตำแหน่งข้อความ (เดสก์ท็อป): กึ่งกลาง
• การจัดตำแหน่งข้อความ (โทรศัพท์): ซ้าย
• สี: #7b7975

พารามิเตอร์ของ ขนาดตัวอักษร รวม:

• ขนาดข้อความ: 14px (เดสก์ท็อป), 10px (โทรศัพท์)
• ระยะห่างระหว่างตัวอักษร: 1px
• ความสูงของสาย: 1,6 em

La ขอบล่าง ต้องมี 0px

• มาร์จิ้น (ล่าง): 0px

วันที่

สำเนา โมดูลผู้เขียน แล้วลากไปยังคอลัมน์ถัดไป

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

• เนื้อหาแบบไดนามิก: โพสต์วันที่เผยแพร่

ความเห็น

enfin, สำเนา โมดูล Post Publish Date แล้วลากไปยังคอลัมน์สุดท้าย

เช่นเดียวกับโมดูลอื่นๆ ให้ลบเนื้อหาไดนามิกและเลือก ใช้เนื้อหาแบบไดนามิก .

เลือก จำนวนความคิดเห็นโพสต์ จากตัวเลือกของคุณ

• เนื้อหาแบบไดนามิก: จำนวนความคิดเห็นของโพสต์

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

• หลังจาก: ความคิดเห็น

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

Résultats

ส่วน Hero พร้อมโมดูลเวอร์ชัน Post Title Desktop

ส่วนฮีโร่พร้อมโมดูลเวอร์ชันมือถือของ Post Title

เค้าโครงส่วน Hero สำรองพร้อมโมดูลเวอร์ชันเดสก์ท็อปของ Post Title

เค้าโครงส่วนฮีโร่สำรองพร้อมโมดูลชื่อเรื่องสำหรับมือถือ

ส่วนฮีโร่พร้อมข้อมูลเมตาเวอร์ชันเดสก์ท็อป

ส่วนฮีโร่พร้อมข้อมูลเมตาของเวอร์ชันมือถือ

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

สรุป

แค่นั้นแหละ! นี่คือแนวทางของเราในการเพิ่มส่วน Hero แบบเต็มหน้าจอในเทมเพลตโพสต์บล็อกของคุณ Divi. 

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

เมื่อใช้วิธีการเหล่านี้ คุณสามารถเพิ่มส่วน Hero แบบเต็มหน้าจอลงในเทมเพลตโพสต์บล็อก Divi ใดก็ได้

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

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

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

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

...