วิธีจัดรูปแบบรูปภาพในโมดูลส่วนหัว Divi Fullwidth

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

มาเริ่มกันเลย!

ดูตัวอย่าง

ตัวอย่างรูปภาพส่วนหัวแบบเต็มของเดสก์ท็อป One

ตัวอย่างรูปภาพส่วนหัวแบบเต็มของโทรศัพท์ One

ตัวอย่างรูปภาพส่วนหัวแบบเต็มความกว้างของเดสก์ท็อปสอง

รูปภาพส่วนหัวแบบเต็มของโทรศัพท์ ตัวอย่างที่สอง

ตัวอย่างรูปภาพส่วนหัวแบบเต็มความกว้างของเดสก์ท็อป Three

ตัวอย่างรูปภาพส่วนหัวแบบเต็มของโทรศัพท์ Three

เพิ่มรูปภาพในส่วนหัวแบบเต็มของคุณ

นี่คือส่วนหัวแบบเต็มความกว้างที่เราจะใช้ในตัวอย่างนี้ ก่อนอื่นเรามาดูวิธีการสร้างกันก่อน เรากำลังใช้รูปภาพและคิวการออกแบบจาก Flower Farm Layout Pack ฟรีที่มีอยู่ใน Divi

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

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

ถัดไป เพิ่มชื่อ คำบรรยาย ข้อความปุ่มหนึ่ง ข้อความปุ่มที่สอง และเนื้อหา

• ชื่อเรื่อง: ยินดีต้อนรับสู่ Divi Flower Farm
• คำบรรยาย: เกี่ยวกับเรา
• ปุ่มที่หนึ่ง: ข้อมูลเพิ่มเติม
• ปุ่มที่สอง: ร้านค้า
• เนื้อหา: ข้อความของคุณ

รูปภาพส่วนหัว

เลื่อนลงไปที่ รูปภาพ เลือกรูปภาพส่วนหัว แล้วเพิ่มรูปภาพของคุณ

พื้นหลัง

ถัดไป เลื่อนลงไปที่ พื้นหลัง เลือกแท็บ การไล่ระดับสี และเพิ่ม Gradient Stops สี่ตัว:

• หยุดไล่ระดับ 1: 0%, #000000
• หยุด 2: ​​25%, rgba(0,0,0,0.8)
• ไล่ระดับ 3: 75%, rgba(0,0,0,0.8)
• ไล่ระดับ 4: 100%, #000000

ถัดไป เปิดใช้งาน Place Gradient เหนือภาพพื้นหลัง ปล่อยให้การตั้งค่าอื่นๆ เป็นค่าเริ่มต้น

• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

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

ข้อความชื่อเรื่อง

เลือกแท็บ Design และเลื่อนลงไปที่ Title Text เลือก H1 และเลือก Italiana สำหรับแบบอักษร ตั้งค่า Alignment ไปทางซ้าย แล้วเลือกสีขาวสำหรับ Color

• ระดับหัวเรื่อง: H1
• แบบอักษร: Italiana
• การจัดตำแหน่ง: ซ้าย
• สี: #ffffff

ตั้งค่าขนาดเดสก์ท็อปเป็น 80px ขนาดแท็บเล็ตเป็น 40px และขนาดโทรศัพท์เป็น 32px

• ขนาด: เดสก์ท็อป 80px, แท็บเล็ต 40px, โทรศัพท์ 32px

เนื้อความ

จากนั้นเลื่อนลงไปที่ Body Text ตั้งค่าการจัดตำแหน่งไปทางซ้าย เลือก Roboto สำหรับแบบอักษร และเปลี่ยนสีเป็นสีขาว

• การจัดตำแหน่ง: ซ้าย
• แบบอักษร: Roboto
• สี: #ffffff

เปลี่ยนขนาดเดสก์ท็อปเป็น 18px ขนาดแท็บเล็ตเป็น 16px และขนาดโทรศัพท์เป็น 14px

• ขนาดข้อความ: เดสก์ท็อป 18px, แท็บเล็ต 16px, โทรศัพท์ 14px

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

จากนั้นเลื่อนลงไปที่ Subtitle Text เลือก Roboto สำหรับแบบอักษรและตั้งค่าน้ำหนักเป็นหนัก เลือก TT สำหรับสไตล์ ตั้งค่าการจัดแนวไปทางซ้าย และเปลี่ยนสีเป็น #b5a68f

• แบบอักษร: Roboto
• น้ำหนัก: หนัก
• สไตล์: TT
• การจัดตำแหน่ง: ซ้าย
• สี: #b5a68f

ถัดไป เปลี่ยน ระยะห่าง เป็น 0.2em และความสูงของเส้นเป็น 1.7em ปล่อยให้ขนาดแบบอักษรเป็นค่าเริ่มต้นคือ 18px

• ระยะห่าง: 0.2em
• ความสูงของสาย: 1.7em

ปุ่มหนึ่ง

เลื่อนลงไปที่ ปุ่มที่หนึ่ง แล้วเลือก ใช้รูปแบบที่กำหนดเองสำหรับปุ่มที่หนึ่ง ตั้งค่าขนาดแบบอักษรเป็น 14px สีข้อความเป็น #aa6a3c และสีพื้นหลังเป็น #f5f3ef

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

ตั้งค่าสีเส้นขอบเป็น #aa6a3c, ระยะห่างตัวอักษรเป็น 0.15em, แบบอักษรเป็น Roboto, น้ำหนักเป็นตัวหนา และรูปแบบเป็น TT

• สีเส้นขอบ: #aa6a3c
• ระยะห่างระหว่างตัวอักษร: 0.15em
• แบบอักษร: Roboto
• น้ำหนัก: หนา
• สไตล์: TT

เลื่อนลงไปที่ Button One Padding เปลี่ยน Padding ด้านบนและด้านล่างเป็น 20px และ Padding ซ้ายและขวาเป็น 30px

• Padding: บน, ล่าง 20px, ซ้าย, ขวา 30px

ปุ่มที่สอง

ถัดไป เลื่อนลงไปที่ ปุ่มที่สอง เลือก ใช้สไตล์ที่กำหนดเองสำหรับปุ่มที่สอง ตั้งค่าขนาดแบบอักษรเป็น 14px สีข้อความเป็นสีขาว และสีพื้นหลังเป็น rgba(255,255,255,0)

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

ตั้งค่าสีเส้นขอบเป็นสีขาว ระยะห่างระหว่างตัวอักษรเป็น 0.15em แบบอักษรเป็น Roboto น้ำหนักเป็นตัวหนา และรูปแบบเป็น TT

• สีเส้นขอบ: #ffffff
• ระยะห่างระหว่างตัวอักษร: 0.15em
• แบบอักษร: Roboto
• น้ำหนัก: หนา
• สไตล์: TT

เลื่อนลงไปที่ Button Two Padding และตั้งค่า Padding ด้านบนและด้านล่างเป็น 20px และ Padding ด้านซ้ายและขวาเป็น 30px นั่นคือทั้งหมดสำหรับการกำหนดสไตล์โมดูลส่วนหัวแบบเต็มความกว้าง ตอนนี้ เราจะเห็นสามวิธีในการจัดรูปแบบรูปภาพ

• Padding: บน, ล่าง 20px, ซ้าย, ขวา 30px

ตัวอย่างรูปแบบรูปภาพส่วนหัวแบบเต็มความกว้าง

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

ตัวอย่างรูปภาพส่วนหัวแบบเต็มความกว้าง One

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

• ขอบบนขวาและซ้าย: 400px
• ขอบล่างขวาและซ้าย: 0px

เปลี่ยนความกว้างของเส้นขอบเป็น 2px และสีเส้นขอบเป็นสีขาว

• ความกว้าง: 2px
• สี: #ffffff

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

ขั้นแรก ไปที่แท็บออกแบบ ภายใต้ Layout ให้ตั้งค่า Text Alignment ไปทางขวา และเปิดใช้งาน Make Fullscreen

• ทำให้เต็มหน้าจอ: ใช่

สุดท้าย เลื่อนลงไปที่ Text ตอนนี้คุณจะเห็นตัวเลือกที่มีข้อความว่า Text Vertical Alignment ตั้งไว้ที่ด้านล่าง ปิดโมดูลและบันทึกการตั้งค่าของคุณ

• การจัดแนวข้อความในแนวตั้ง: ด้านล่าง

ภาพส่วนหัวแบบเต็มความกว้าง ตัวอย่างที่สอง

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

• ปุ่มหนึ่งข้อความ: ข้อมูล

ถัดไป เลื่อนลงไปที่ พื้นหลัง แล้วเลือกรูปภาพอื่น ภาพนี้จะใช้ความกว้างประมาณ 1/3 ของความกว้างของหน้าจอ ฉันใช้ภาพเดียวกันกับพื้นหลัง

• รูปภาพส่วนหัว: ภาพใหญ่

จากนั้นไปที่ แท็บขั้นสูง แล้วเลื่อนลงไปที่ฟิลด์รูปภาพส่วนหัว เพิ่ม CSS เพื่อตั้งค่าความกว้างเป็น 150% และความสูงเป็นอัตโนมัติ ปิดโมดูลและบันทึกการตั้งค่าของคุณ

รูปภาพส่วนหัว CSS:

max-width: 150%;
height: auto;

เมื่อใส่รูปภาพและข้อความของปุ่มแล้ว เราจะทำการปรับเปลี่ยน เราสามารถปรับ Alignment ของข้อความและรูปภาพเพื่อปรับตำแหน่งบนหน้าจอได้ ขั้นแรก ไปที่แท็บ ออกแบบ ภายใต้ Layout ให้ปล่อย Text Alignment ไปทางซ้าย และเปิดใช้งาน Make Fullscreen

• ทำให้เต็มหน้าจอ: ใช่

จากนั้นเลื่อนไปที่ Title Text และตั้งค่า Alignment to Center

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

จากนั้นเลื่อนลงไปที่ Body Text เปลี่ยนการจัดแนวข้อความเป็นศูนย์

• การจัดตำแหน่ง: ศูนย์

จากนั้นเลื่อนไปที่ Subtitle Text และตั้งค่า Alignment to Center

• การจัดตำแหน่งข้อความคำบรรยาย: Center

เลื่อนลงไปที่ Button One Margin และเปลี่ยน Left Margin เป็น 29% สำหรับเดสก์ท็อป 18% สำหรับแท็บเล็ต และ 19% สำหรับโทรศัพท์

• ระยะขอบซ้ายปุ่มที่หนึ่ง: เดสก์ท็อป 29%, แท็บเล็ต 18%, โทรศัพท์ 19%

เลื่อนลงไปที่ Button Two Margin และเปลี่ยน Left Margin เป็น 30% สำหรับแท็บเล็ต และ 31% สำหรับโทรศัพท์

• ปุ่มสองขอบซ้าย: แท็บเล็ต 30% โทรศัพท์ 31%

เลื่อนลงไปที่ การปรับขนาด และตั้งค่าความกว้างเป็น 104% สำหรับโทรศัพท์ การจัดกึ่งกลางเนื้อหาให้ถูกต้องสำหรับหน้าจอที่แคบ

• ความกว้าง: 104% โทรศัพท์

ตัวอย่างรูปภาพส่วนหัวแบบเต็มความกว้าง Three

ขั้นแรก ไปที่แท็บ ออกแบบ ภายใต้ Layout ให้ตั้งค่า Text Alignment ไปทางขวา ในกรณีของฉัน ข้อความจะถูกจัดชิดซ้าย แต่ข้อความของคุณอาจอยู่กึ่งกลางหากคุณไม่ได้ระบุการจัดตำแหน่ง

• การจัดตำแหน่งข้อความและโลโก้: กึ่งกลาง

เลื่อนลงไปที่ รูปภาพ เปลี่ยนความกว้างของเส้นขอบเป็น 4px และสีของเส้นขอบเป็น #b5a68f

• ความกว้างของเส้นขอบ: 4px
• สีขอบ: #b5a68f

จากนั้นเลื่อนไปที่ Title Text และเปลี่ยน Alignment to Centered

• การจัดตำแหน่งข้อความชื่อเรื่อง: กึ่งกลาง

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

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

ถัดไป เลื่อนไปที่ ข้อความคำบรรยาย และเปลี่ยนการจัดตำแหน่งเป็นกึ่งกลาง

• การจัดตำแหน่งข้อความคำบรรยาย: กึ่งกลาง

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

• เนื้อหาปุ่มหนึ่งสำหรับโทรศัพท์: ข้อมูล

กลับไปที่แท็บ Design และเพิ่ม 5% Right Margin ไปยังแท็บโทรศัพท์ของปุ่มที่สอง

• ขอบขวา: 5% โทรศัพท์

สุดท้าย ให้เลื่อนลงมาที่ Sizing และตั้งค่า Content Width เป็น 52% สำหรับเดสก์ท็อป และ 100% สำหรับแท็บเล็ตและโทรศัพท์ ปิดโมดูลและบันทึกการตั้งค่าของคุณ

• ความกว้างของเนื้อหา: เดสก์ท็อป 52%, แท็บเล็ตและโทรศัพท์ 100%

ผลลัพธ์

ตัวอย่างรูปภาพส่วนหัวแบบเต็มของเดสก์ท็อป One

ตัวอย่างรูปภาพส่วนหัวแบบเต็มของโทรศัพท์ One

ตัวอย่างรูปภาพส่วนหัวแบบเต็มความกว้างของเดสก์ท็อปสอง

รูปภาพส่วนหัวแบบเต็มของโทรศัพท์ ตัวอย่างที่สอง

ตัวอย่างรูปภาพส่วนหัวแบบเต็มความกว้างของเดสก์ท็อป Three

ตัวอย่างรูปภาพส่วนหัวแบบเต็มของโทรศัพท์ Three

จบความคิด

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

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