10 เคล็ดลับการออกแบบพื้นหลังที่เป็นไปได้ด้วยการตั้งค่าพื้นหลังใหม่ของ Divi

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

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

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

สนุก.

นี่คือตัวอย่างเคล็ดลับการออกแบบ

วิธีติดตามโพสต์นี้

แทนที่จะต้องเริ่มต้นจากศูนย์ทุกครั้งที่ฉันอธิบายเคล็ดลับการออกแบบใหม่ ฉันใช้การออกแบบตัวอย่างเดียวกันสำหรับพวกเขาส่วนใหญ่ และเพิ่มลูกเล่นต่างๆ ให้กับการออกแบบนั้น ซึ่งหมายความว่าตัวอย่างส่วนใหญ่ต้องการให้คุณมีเคล็ดลับการออกแบบก่อนหน้านี้ให้เสร็จสิ้นก่อนจึงจะสามารถใช้เคล็ดลับใหม่ได้ เคล็ดลับ #1-9 ทั้งหมดเป็นไปตามการตั้งค่าพื้นฐานเดียวกัน และต้องใช้เคล็ดลับ #1 เป็นข้อกำหนดเบื้องต้น ดังนั้น หากคุณกำลังทดสอบคุณสมบัติต่างๆ ผมขอแนะนำให้เริ่มต้นด้วย Trick #1

10 เคล็ดลับการออกแบบพื้นหลังด้วย Divi

สมัครสมาชิกช่อง Youtube ของเรา

เคล็ดลับ #1: การวางซ้อนในแนวทแยง

เพิ่มส่วนเต็มความกว้างแล้วแทรกโมดูลส่วนหัวแบบเต็มความกว้าง

จากนั้นอัปเดตการตั้งค่าโมดูลส่วนหัวดังนี้:

ตัวเลือกเนื้อหา

ชื่อเรื่อง: [ป้อนชื่อ]
หัวข้อย่อย: [ป้อนหัวข้อย่อย]
URL รูปภาพโลโก้: [ป้อนโลโก้]
สีไล่ระดับพื้นหลัง: rgba(12,113,195,0.55), rgba(255,255,255,0)
ประเภทการไล่ระดับสี: เชิงเส้น
ทิศทางการไล่ระดับสี: 135deg
ตำแหน่งเริ่มต้น: 60%
ตำแหน่งสุดท้าย: 60% (อะไรก็ได้ 60% หรือต่ำกว่าจะทำงาน)

เนื่องจากการไล่ระดับสีคือจุดเริ่มต้นและจุดสิ้นสุดที่จุดเดียวกัน โดยพื้นฐานแล้วไม่มีเอฟเฟกต์การไล่ระดับสีเกิดขึ้นเลย ผลที่ได้คือสองสีในแต่ละด้านของเครื่องหมาย 60% ที่รวมกับมุมของทิศทางการไล่ระดับสีจะสร้างเอฟเฟกต์

ตัวเลือกการออกแบบ

สีข้อความ: เบา
แบบอักษรของชื่อเรื่อง: ค่าเริ่มต้น ตัวหนา (B) ตัวพิมพ์ใหญ่ (TT)
ขนาดตัวอักษรของชื่อเรื่อง: 40px
ขนาดตัวอักษรของหัวเรื่องย่อย: 24px

ตัวเลือกขั้นสูง

ภายใต้ CSS ที่กำหนดเองในกล่ององค์ประกอบหลัก ให้เพิ่ม CSS ต่อไปนี้:

Padding: 150px 0;

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

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

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

จากนั้นอัปเดตตัวเลือกเนื้อหาการตั้งค่าส่วนดังนี้:

ภาพพื้นหลัง: [ป้อนภาพพื้นหลังที่นี่ ควรมีความกว้างอย่างน้อย 1960px ฉันเลือกภาพนี้จาก unsplash.com และครอบตัดเพื่อให้ส่วนที่โดดเด่นของรูปภาพอยู่ทางด้านขวา]
ใช้เอฟเฟกต์พารัลแลกซ์: ใช่ (เป็นทางเลือก แต่ฉันคิดว่ามันใช้ได้ดีกับการวางซ้อนในแนวทแยง)
วิธีพารัลแลกซ์: ทรูพารัลแลกซ์

แค่นั้นแหละ! รู้สึกอิสระที่จะปรับความทึบของสีการไล่ระดับสีและระดับของทิศทางการไล่ระดับสีตามที่คุณต้องการ

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

เคล็ดลับ #2 : การวางซ้อนภาพซ้อนทับในแนวทแยง

เคล็ดลับการออกแบบนี้เป็นความต่อเนื่องจาก Trick #1 ดังนั้นตรวจสอบให้แน่ใจว่าคุณมีเคล็ดลับ #1 เสร็จสมบูรณ์ก่อนที่จะดำเนินการต่อ

ในเคล็ดลับ # 1 เราเหลือการซ้อนทับในแนวทแยงโดยใช้ตัวเลือกการไล่ระดับสีพื้นหลังในโมดูลส่วนหัวแบบเต็มความกว้าง

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

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

สีไล่ระดับพื้นหลัง: rgba(131,0,233,0.38), rgba(255,255,255,0)
ประเภทการไล่ระดับสี: เชิงเส้น
ทิศทางการไล่ระดับสี: 135deg (เหมือนกับทิศทางการไล่ระดับสีอื่นๆ ในโมดูลส่วนหัวของคุณ)
ตำแหน่งเริ่มต้น: 38%
ตำแหน่งสุดท้าย: 38%

ตอนนี้คลิก ไอคอนภาพพื้นหลัง และเปลี่ยนสิ่งต่อไปนี้:

ใช้เอฟเฟกต์พารัลแลกซ์: ไม่
การผสมผสานภาพพื้นหลัง: ทวีคูณ

ตอนนี้คุณมีภาพซ้อนทับแนวทแยง 2 ภาพซึ่งสามารถปรับแต่งได้อย่างง่ายดายสำหรับการออกแบบพื้นหลังที่ไม่ซ้ำใคร

เคล็ดลับ #3: การซ้อนทับแบบวงกลม

เคล็ดลับการออกแบบนี้เป็นความต่อเนื่องจาก Trick #1 ดังนั้นตรวจสอบให้แน่ใจว่าคุณมีเคล็ดลับ #1 เสร็จสมบูรณ์ก่อนที่จะดำเนินการต่อ

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

ตัวเลือกเนื้อหา

ประเภทการไล่ระดับสีพื้นหลัง: เรเดียล
ทิศทางเรเดียล: ศูนย์กลาง
ตำแหน่งเริ่มต้น: 30%
ตำแหน่งสุดท้าย: 30%

ตัวเลือกการออกแบบ

การวางแนวข้อความและโลโก้: ศูนย์

ตรวจสอบพื้นหลังส่วนหัวใหม่

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

ต่อไปนี้คือตัวอย่างลักษณะที่ไม่มีภาพพื้นหลังและสีข้อความที่เข้มกว่า

เคล็ดลับ #4 : Layering Circle Overlays เพื่อสร้างเส้นขอบวงกลม

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

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

ตัวเลือกเนื้อหา

ใต้แท็บภาพพื้นหลัง:

ใช้เอฟเฟกต์พารัลแลกซ์: ไม่ใช่
การผสมผสานภาพพื้นหลัง: ทวีคูณ

ใต้แท็บการไล่ระดับสีพื้นหลัง:

พื้นหลังไล่ระดับสี: rgba(0,0,0,0.45), rgba(255,255,255,0)
ประเภทการไล่ระดับสีพื้นหลัง: เรเดียล
ทิศทางเรเดียล: ศูนย์กลาง
ตำแหน่งเริ่มต้น: 34%
ตำแหน่งสุดท้าย: 34%

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

แค่นั้นแหละ.

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

เคล็ดลับ #5: การวางซ้อนวงกลมผกผัน

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

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

ตัวเลือกเนื้อหา

สีไล่ระดับพื้นหลัง: rgba(255,255,255,0), rgba(12,113,195,0.79)

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

ตรวจสอบออก…

เคล็ดลับ #6: การวางซ้อนวงกลมผกผันกับพื้นหลังวิดีโอ

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

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

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

ตัวเลือกเนื้อหา

สีไล่ระดับพื้นหลัง: rgba(12,113,195,0.67), #333333

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

เคล็ดลับ #7: การวางซ้อนวงกลมผกผันนอกศูนย์กลาง

นี่คือความต่อเนื่องของ Trick #5 ซึ่งทำให้เรามีการซ้อนทับวงกลมผกผัน หากคุณกลับไปที่การตั้งค่าส่วนหัวแบบเต็มความกว้าง คุณสามารถปรับ Radial Direction เป็นการตั้งค่าต่างๆ เพื่อสร้างรูปลักษณ์ที่แตกต่างกันสำหรับส่วนหัวของคุณ

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

ตัวเลือกเนื้อหา

ทิศทางเรเดียล: ขวา

ตัวเลือกการออกแบบ

การวางแนวข้อความและโลโก้: ซ้าย

นี่คือผลลัพธ์สุดท้ายและตัวอย่างบางส่วนของทิศทางในแนวรัศมีที่ต่างกัน:

ตัวอย่างเหล่านี้จำเป็นต้องมีการทำงานบางอย่าง แต่คุณก็เข้าใจแล้ว

เคล็ดลับ #8: การใช้การไล่ระดับสีสำหรับเอฟเฟกต์เงา

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

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

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

ตัวเลือกเนื้อหา

พื้นหลังไล่ระดับสี: rgba(0,0,0,0.55), rgba(0,0,0,0)
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 38%
ตำแหน่งสุดท้าย: 85%

นี่คือผลลัพธ์

เคล็ดลับ #9: การผสมผสานภาพพื้นหลัง

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

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

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

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

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

ตัวเลือกเนื้อหา

สีไล่ระดับพื้นหลัง: rgba(0,0,0,0.76), #0c71c3
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 50%

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

ใช้เอฟเฟกต์พารัลแลกซ์: ไม่ใช่
การผสมผสานภาพพื้นหลัง: ฮาร์ดไลท์

แค่นั้นแหละ. ตรวจสอบผลลัพธ์

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

เคล็ดลับ #10: เลเยอร์เพื่อเพิ่มสีสันให้กับพื้นหลังไล่ระดับสีของคุณ

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

นี่คือวิธีที่คุณทำ ขั้นแรก ให้เพิ่ม Regular Section ด้วยแถวโครงสร้าง 1 คอลัมน์ จากนั้นในแถว ให้เพิ่ม Blurb Module

อัปเดตการตั้งค่า Blurb Module ดังนี้:

ตัวเลือกเนื้อหา

ชื่อเรื่อง: [ป้อนชื่อ]
เนื้อหา: [ป้อนเนื้อหา]

ตัวเลือกการออกแบบ

สีข้อความ: เบา
การวางแนวข้อความ: ศูนย์
แบบอักษรส่วนหัว: ค่าเริ่มต้น ตัวหนา (B)
ขนาดตัวอักษรของส่วนหัว: 56px
ขนาดตัวอักษรของร่างกาย: 22px
ช่องว่างภายในที่กำหนดเอง: บน 100px, ด้านล่าง 100px

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

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

ตัวเลือกเนื้อหา

สีไล่ระดับพื้นหลัง: #ff0077, #0c71c3
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 0%
ตำแหน่งสุดท้าย: 30%

ตัวเลือกการออกแบบ

ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

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

ตัวเลือกเนื้อหา

สีไล่ระดับพื้นหลัง: rgba(255,255,255,0), #8300e9
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 25%
ตำแหน่งสุดท้าย: 50%
คอลัมน์ 1 พื้นหลังไล่ระดับสี: rgba(255,255,255,0), #e02b20
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 50%
ตำแหน่งสุดท้าย: 75%

ตัวเลือกการออกแบบ
ทำให้แถวนี้เต็มความกว้าง: ใช่
ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
ความกว้างของรางน้ำ: 1
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

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

ตอนนี้สำหรับเลเยอร์สุดท้ายของการไล่ระดับสี เราต้องไปที่ Blurb Module และอัปเดตสิ่งต่อไปนี้:

ตัวเลือกเนื้อหา
สีไล่ระดับพื้นหลัง: rgba(255,255,255,0), #edf000
ทิศทางการไล่ระดับสี: 90deg
ตำแหน่งเริ่มต้น: 75%
ตำแหน่งสุดท้าย: 100%

ตัวเลือกการออกแบบ

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

แค่นั้นแหละ. ตอนนี้คุณมีสีไล่ระดับห้าสีผสมกันเพื่อสร้างพื้นหลังที่มีสีสันทีเดียว

อย่าลืมว่าคุณยังสามารถเปลี่ยนประเภทการไล่ระดับสีเป็นรัศมี (วงกลม) และเปลี่ยนการออกแบบทั้งหมดได้ (ใช้เวลาประมาณ 20 วินาที)

หากคุณเปลี่ยน Gradient Type เป็น Radial สำหรับเลเยอร์ทั้งหมด (ส่วน แถว คอลัมน์ และโมดูลการนำเสนอ) คุณจะได้สิ่งนี้

เคล็ดลับโบนัส

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

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

อีกสองสามตัวอย่าง

ฉันจะปิดท้ายด้วยตัวอย่างการออกแบบที่ฉันสร้างขึ้นขณะทดสอบลูกเล่นเดียวกันที่กล่าวถึงในโพสต์นี้

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

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

รอคอยที่จะได้ยินจากคุณในความคิดเห็น