วิธีสร้างการออกแบบส่วนหัวที่ทันสมัยด้วยสี่เหลี่ยมด้านขนานใน Divi

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

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

แอบมอง

มาดูการออกแบบที่เราจะสร้างกัน

สิ่งที่คุณต้องการ

ในการสร้างการออกแบบนี้ คุณจะต้องมีสิ่งหลัก:

1. ธีม Divi
2. บริษัท ออกแบบตกแต่งภายในเกี่ยวกับเค้าโครงหน้า (หาได้จากภายใน Divi Builder)

ตั้งค่าเพจ

สำหรับบทช่วยสอนนี้ ฉันจะใช้ Interior Design Company About Page Layout ในหน้าใหม่ ไปที่แดชบอร์ด WordPress ของคุณและไปที่หน้า > เพิ่มใหม่ จากนั้นตั้งชื่อเพจของคุณและคลิกเพื่อใช้ Divi Builder จากนั้นคลิกปุ่มเพื่อปรับใช้ตัวสร้างภาพ เลือกตัวเลือกเพื่อ "เลือกเค้าโครงที่สร้างไว้ล่วงหน้า" จากนั้นค้นหาและเลือก Interior Design Layout Pack เลือกเค้าโครงหน้าเกี่ยวกับ จากนั้นคลิก "ใช้เค้าโครงนี้"

เมื่อโหลดเพจแล้ว คุณก็พร้อมที่จะเริ่มแก้ไข

นำส่วนเสริมด้านบนออกและแทนที่ภาพพื้นหลัง

นี่เป็นขั้นตอนแรกที่ง่าย สิ่งที่คุณต้องทำคือวางเมาส์เหนือส่วนบนสุดของส่วนหัวด้านบนของหน้า คุณจะเห็นว่าการเติมด้านบนปัจจุบันถูกตั้งค่าเป็น 10% เพียงลาก padding ลงไปที่ 0% หรือคุณสามารถเข้าไปที่การตั้งค่าเพจและตั้งค่าการเติมด้านบนแบบกำหนดเองเป็น 0% ได้เช่นกัน

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

ปรับขนาดแถวและช่องว่างภายใน

ถัดไป ไปที่การตั้งค่าแถวและใต้แท็บ ออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

ใช้ความกว้างที่กำหนดเอง: ใช่
ความกว้างที่กำหนดเอง: 100%
ช่องว่างภายในที่กำหนดเอง: 0px ด้านบน, 10vw ด้านล่าง

เพิ่มพื้นหลังไล่ระดับให้กับแถวและคอลัมน์

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

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

พื้นหลังไล่ระดับสีซ้าย: #1a1a1a
พื้นหลังไล่ระดับสีขวาสี: rgba(255,255,255,0)
ทิศทางการไล่ระดับสี: 45deg
ตำแหน่งเริ่มต้น: 60%
ตำแหน่งสุดท้าย: 0%

คอลัมน์ 1 พื้นหลังไล่ระดับสีซ้าย: rgba(244,88,63,0.83)
คอลัมน์ 1 พื้นหลังไล่ระดับสีขวา: rgba(255,255,255,0)
ทิศทางการไล่ระดับสีของคอลัมน์: 45deg
ตำแหน่งเริ่มต้นของคอลัมน์: 66%
ตำแหน่งสิ้นสุดคอลัมน์: 0%

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

การปรับขนาดข้อความและระยะห่างของโมดูลการเรียกร้องให้ดำเนินการ

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

ไปที่การตั้งค่าโมดูลการเรียกร้องให้ดำเนินการและอัปเดตสิ่งต่อไปนี้ภายใต้แท็บออกแบบ:

การวางแนวข้อความ: ซ้าย
สีข้อความ: เบา
ขนาดข้อความชื่อเรื่อง: 4.5vw (เดสก์ท็อป), 42px (แท็บเล็ต)
สีข้อความของปุ่ม: #1a1a1a
สีพื้นหลังของปุ่ม: #ffffff
ความกว้าง: 100%
รีเซ็ตระยะขอบ
Custom Padding (เดสก์ท็อป): 10vw บน, 5% ซ้าย, 45% ขวา
Custom Padding (แท็บเล็ต): 38% ถูกต้อง
Custom Padding (สมาร์ทโฟน): 5% right

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

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

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

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

การสร้างสี่เหลี่ยมด้านขนานเพิ่มเติมโดยใช้โมดูลข้อความว่าง

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

เพิ่มแถวหนึ่งคอลัมน์โดยตรงภายใต้ส่วนที่มีโมดูลการเรียกร้องให้ดำเนินการของเราภายในส่วนเดียวกัน

จากนั้นเพิ่มโมดูลข้อความในคอลัมน์ด้านซ้ายและอัปเดตโมดูลข้อความดังนี้:

ลบเนื้อหาทั้งหมดในกล่องเนื้อหา (เราจะใช้โมดูลข้อความเปล่า)
พื้นหลังไล่ระดับสีซ้าย: rgba(255,255,255,0)
พื้นหลังไล่ระดับสีขวา: rgba(58,80,107,0.83)
ทิศทางการไล่ระดับสี: 45deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 0%

ข้ามไปที่แท็บการออกแบบแล้วอัปเดตสิ่งต่อไปนี้:

ความสูงของบรรทัดข้อความ: 0em (การดำเนินการนี้จะลบการเว้นวรรคที่ไม่ต้องการออก)
ความกว้าง: 50%
มาร์จิ้นที่กำหนดเอง: -8vw บน, 0px ล่าง
แพ็ดดิ้งที่กำหนดเอง: 8vw ด้านบน, 8vw ด้านล่าง

บันทึกการตั้งค่า.

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

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

การจัดตำแหน่งโมดูล: ขวา
มาร์จิ้นที่กำหนดเอง: -16vw บน, 0px ล่าง

บันทึกการตั้งค่า.

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

การจัดแนวแถว: ซ้าย
ใช้ความกว้างที่กำหนดเอง: ใช่
ความกว้างที่กำหนดเอง: 45%
มาร์จิ้นที่กำหนดเอง: เหลือ 30%
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

เกี่ยวกับมันไม่! ตรวจสอบผลลัพธ์สุดท้าย

นี่มันบนแท็บเล็ตและสมาร์ทโฟน

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!