คุณต้องการสร้างพื้นหลังที่ไม่ซ้ำใครและน่าทึ่งด้วยมาสก์และรูปแบบพื้นหลังจาก Divi ?
คุณสมบัติมาสก์และรูปแบบพื้นหลังใหม่ของ Divi มักใช้สำหรับส่วนต่างๆ ของหน้า แต่เราสามารถเพิ่มมันในส่วนหัวได้เช่นกัน!
ในบทช่วยสอนนี้ เราจะแสดงวิธีเพิ่มมาสก์และรูปแบบพื้นหลังให้กับเทมเพลตส่วนหัว Divi โดยใช้ตัวสร้าง ธีม.
เป็นวิธีที่ยอดเยี่ยมในการสร้างการออกแบบส่วนหัวที่ไม่เหมือนใครสำหรับคุณ เว็บไซต์เว็บ.
ขอเริ่มต้น
การสำรวจ
ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้
ไปที่ตัวสร้างธีมของ Divi และเริ่มสร้างส่วนหัวส่วนกลาง
จากแดชบอร์ด WordPress ให้ไปที่ Divi > ตัวสร้างธีม
คลิกที่ “เพิ่มส่วนหัวทั่วโลก”
เลือก “สร้างส่วนหัวระดับโลก”.
หลังจากนั้น คุณสามารถเริ่มออกแบบส่วนหัวใหม่โดยใช้ Divi Builder
วิธีเพิ่มมาสก์พื้นหลังและรูปแบบให้กับส่วนหัว Divi
การสร้างพื้นหลังของส่วนด้วยสีพื้นหลังและรูปแบบ
ในการเริ่มต้น ให้เปิดการตั้งค่าของส่วนที่มีอยู่
ภายใต้แท็บ คอนเทนต์อัปเดตตัวเลือกพื้นหลังด้วยการตั้งค่าต่อไปนี้:
สีพื้นหลัง:
- พื้นหลัง: #262d3f
รูปแบบพื้นหลัง:
- รุ่น: Pills
- รูปแบบสี: rgba(255,255,255,0.1)
- ขนาดรูปแบบ: ขนาดที่กำหนดเอง
- ความกว้างของรูปแบบ: 1px
การขยายความ
ภายใต้แท็บ ออกแบบอัปเดตการเติมส่วนดังนี้:
- ช่องว่างภายใน (บนและล่าง): 0px
สิ่งนี้จะลดพื้นที่แนวตั้งของส่วนหัวเล็กน้อย
เพิ่มแถวที่มีเค้าโครงคอลัมน์ต่อไปนี้
เพิ่มเนื้อหาส่วนหัวของตัวยึดตำแหน่ง (เมนูและปุ่ม)
ในคอลัมน์ด้านซ้ายของแถว ให้เพิ่มเมนูใหม่
เลือกเมนู
จากนั้นเพิ่มโลโก้และใช้การตั้งค่าเพื่อปรับแต่งเมนูและโลโก้ตามต้องการ
ในคอลัมน์ด้านขวา เพิ่มโมดูลปุ่มและปรับแต่งตามความชอบของคุณ
การสร้างพื้นหลังเส้นด้วยการไล่ระดับสี มาสก์ และรูปแบบ
การไล่ระดับสี
เปิดการตั้งค่าแถวที่มีเมนูและปุ่มของคุณ จากนั้นอัปเดตตัวเลือกพื้นหลังด้วยการตั้งค่าพื้นหลังต่อไปนี้
การไล่ระดับสีพื้นหลัง:
- Gradient Stops 1 (50%): ล้าง
- หยุดไล่ระดับ 2 (75%): #ff4c00
- การบังคับเลี้ยว: 90 องศา
แบบแผน
- รุ่น: Pills
- รูปแบบสี: rgba(38,45,63,0.48)
- ขนาดรูปแบบ: 1 พิกเซล
- ออฟเซ็ตแนวตั้ง: 20px
หมายเหตุ: ออฟเซ็ตแนวตั้งของรูปแบบถูกตั้งค่าเป็น 20px เนื่องจากมีช่องว่างภายในด้านบน 20px ในส่วนเหนือเส้น เพื่อให้แน่ใจว่ารูปแบบส่วนสอดคล้องกับรูปแบบแถว
หน้ากากพื้นหลัง
- หน้ากาก: ก้างปลา
- หน้ากากสี: #262d3f
หมายเหตุ: สำหรับส่วนหัว จะเป็นการดีที่สุดที่จะตั้งค่าขนาดมาสก์เป็น "ขยายเพื่อเติม" เพื่อให้ครอบคลุมพื้นที่ในแนวนอนโดยไม่กระทบต่อการออกแบบของมาสก์
สัมผัสเส้นสุดท้าย
ดูสิ่งนี้ด้วย: Divi: วิธีใช้ "Gradient Builder" เพื่อตกแต่งภาพของคุณ
เพื่อให้การออกแบบสมบูรณ์ เราจะเพิ่มรัศมีเส้นขอบและแก้ไขเพิ่มเติมสองสามรายการในบรรทัด
รัศมี ระยะขอบ และระยะขอบ
ภายใต้แท็บ ออกแบบ, อัพเดต padding ดังนี้:
- ช่องว่างภายใน (บนและล่าง): 5px
จากนั้นให้แถวมีมุมโค้งมนที่สวยงามสำหรับองค์ประกอบการออกแบบเพิ่มเติม
- มุมโค้งมน: 50px
- ความกว้างของเส้นขอบด้านซ้าย: 50px
- สีขอบซ้าย: #262d3f
เราจำเป็นต้องกำหนดเส้นขอบทางด้านซ้ายของแถว เนื่องจากขอบสี่เหลี่ยมของมาสก์จะล้นแถวทั้งๆ ที่มุมมน
ผลสุดท้าย
เรามาดูผลสุดท้ายกัน
การไล่ระดับสีมีความละเอียดอ่อนเล็กน้อย ดังนั้นนี่คือสิ่งที่ดูเหมือน
และนี่คือการออกแบบส่วนหัวของเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ดาวน์โหลด DIVI ทันที!!!
สรุป
การออกแบบพื้นหลังส่วนหัวเป็นเพียงส่วนเล็กๆ ของภูเขาน้ำแข็ง มีการสำรวจมากมายเกี่ยวกับตัวเลือกพื้นหลังที่มีใน Divi
เราหวังว่าบทช่วยสอนนี้จะช่วยให้คุณเข้าใจว่ามาสก์พื้นหลังและรูปแบบของ Divi สามารถทำงานร่วมกันเพื่อสร้างการออกแบบพื้นหลังที่เป็นเอกลักษณ์สำหรับส่วนหัวของคุณได้อย่างไร
อย่าลังเลที่จะทดลองกับการผสมผสานการออกแบบพื้นหลังเพิ่มเติมเพื่อให้เข้ากับการออกแบบของคุณเอง เว็บไซต์เว็บ หรือโครงการที่จะเกิดขึ้นของคุณ
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ
อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
