วิธีสร้างการเปลี่ยนแปลงการออกแบบพื้นหลังที่ไร้รอยต่อระหว่างองค์ประกอบ Divi

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

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

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

แอบมอง

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

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

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ทำดังต่อไปนี้:

1. ไปที่ห้องสมุด Divi
2. คลิกปุ่มนำเข้าที่ด้านบนของหน้า
3. ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้า
4. เลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ (อย่าลืมแตกไฟล์ก่อนแล้วจึงใช้ไฟล์ JSON)
5. จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปที่บทช่วยสอนกันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างการเปลี่ยนแปลงการออกแบบพื้นหลังแบบไม่มีรอยต่อระหว่างส่วน Divi และแถว

ส่วนที่ 1: การสร้างหัวเรื่องเป็นเนื้อหาจำลอง

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

จากนั้นเพิ่มโมดูลข้อความในแถว

เพิ่มหัวข้อ H1 ให้กับเนื้อหาเนื้อหา

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

2. การออกแบบพื้นหลังของส่วน

การเพิ่ม VW Padding ให้กับ Section

เมื่อส่วนหัวจำลองเข้าที่แล้ว ให้เปิดการตั้งค่าส่วนและอัปเดตการเว้นวรรคดังนี้:

• Padding: บน 15vw, 15vw ด้านล่าง

การเพิ่มการไล่ระดับสีพื้นหลังให้กับ Section

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

• Gradient Stop 1: #4f0f75 (ที่ 0%)
• Gradient Stop 2: #2843c9 (ที่ 25%)
• Gradient Stop 3: #4ae2e0 (ที่ 50%)
• Gradient Stop 4: #3881ff (ที่ 75%)
• Gradient Stop 5: #4f0f75 (ที่ 100%)

การเพิ่มรูปแบบพื้นหลังให้กับส่วน

ภายใต้แท็บรูปแบบ ให้อัปเดตสิ่งต่อไปนี้:

• รูปแบบ: เส้นทแยงมุม
• รูปแบบสี: rgba(79,15,117,0.23)
• การแปลงรูปแบบ: หมุน
• ขนาดรูปแบบ: ขนาดที่กำหนดเอง
• ความกว้างของรูปแบบ: 7vw
• ความสูงของรูปแบบ: 5vw
• รูปแบบการทำซ้ำแหล่งกำเนิด: Center

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

การเพิ่มมาสก์พื้นหลังในส่วน

ใต้แท็บมาสก์ ให้เพิ่มสิ่งต่อไปนี้:

• มาสก์พื้นหลัง: Layer Blob
• หน้ากากสี: rgba(0,0,0,0.7)
• ขนาดหน้ากาก: 100vw
• ตำแหน่งหน้ากาก: ตรงกลาง

หมายเหตุ: เช่นเดียวกับรูปแบบ เราต้องกำหนดขนาดหน้ากากโดยใช้หน่วยความยาว VW เราต้องให้หน้ากากอยู่ตรงกลางด้วย

3. การออกแบบพื้นหลังของแถว

คัดลอกและวางพื้นหลังของส่วนไปที่พื้นหลังของแถว

หากต้องการเร่งความเร็วในกระบวนการออกแบบพื้นหลังของแถว ให้คัดลอกการตั้งค่าพื้นหลังของส่วน

จากนั้นวางพื้นหลังลงในแถวที่มีอยู่

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

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

ต่อไป เราต้องกำหนดความกว้างที่กำหนดเองให้กับแถวของเราโดยใช้หน่วยความยาว VW อัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 75vw
• ความกว้างสูงสุด: 75vw
• Padding: บน 10vw, 10vw ล่าง, 10vw ซ้าย, 10vw ขวา

ภาพรวมของระยะห่างและการปรับขนาดในหน่วยความยาว VW

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

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

ปรับ Gradient Stops บน Row

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

• Gradient Stop 1: #2843c9 (ที่ 0%)
• Gradient Stop 2: #4ae2e0 (ที่ 50%)
• Gradient Stop 3: #3881ff (ที่ 100%)

เพิ่มกล่องเงาให้กับแถว

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

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งของกล่องเงา: 0px
• ความแรงของกล่องเงาเบลอ: 4vw
• กล่องเงาสี: rgba(0,0,0,0.5)

ปรับสีรูปแบบพื้นหลังของแถว

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

• รูปแบบสี: rgba(255,255,255,0.23)

ปรับสีมาสก์พื้นหลังของแถว

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

• สีหน้ากาก: #ffffff
• การแปลงหน้ากาก: Imverted

ผลสุดท้าย

มาดูผลสุดท้ายกัน

ความเป็นไปได้มากขึ้น

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

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

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

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

ไชโย!