วิธีใช้ตัวสร้างการไล่ระดับสี Divi เพื่อผสมผสานการไล่สีหลาย ๆ สีได้อย่างง่ายดาย

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

ดูตัวอย่างการไล่ระดับสีหลายแบบ

ก่อนอื่น มาดูสิ่งที่เราจะสร้างในบทช่วยสอนนี้กัน เราจะสร้างการไล่ระดับสีที่แตกต่างกันสี่แบบโดยใช้เลย์เอาต์เดียวกัน

ผลลัพธ์ตัวอย่างแรก

ผลลัพธ์ตัวอย่างที่สอง

ผลลัพธ์ตัวอย่างที่สาม

ผลลัพธ์ตัวอย่างที่สี่

แนวทางปฏิบัติที่ดีที่สุดสำหรับการรวมการไล่ระดับสีหลายแบบ

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

มุ่งเน้นไปที่ครอบครัวสี

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

ลองใช้สีที่กระชับลง

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

จัดลำดับความสำคัญความชัดเจน

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

ใช้การไล่ระดับสีแบบตัดกันและแบบผสม

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

ใช้ประเภทการไล่ระดับสีที่แตกต่างกัน

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

อย่าใช้สีมากเกินไป

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

อย่าสุ่มสี

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

จำUX

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

ทดสอบการไล่ระดับสีของคุณ

ลองใช้การไล่ระดับสีหลายประเภทและหลายสีด้วยการทดสอบ a/b เพื่อดูว่าสิ่งใดให้ผลลัพธ์ที่ดีที่สุด

ตัวอย่างการไล่ระดับสีหลายแบบ

ตอนนี้ มาดูตัวอย่างตัวสร้างการไล่ระดับสีบางส่วนกัน สำหรับตัวอย่างเหล่านี้ ฉันได้ปรับแต่งฮีโร่จากหน้าเกี่ยวกับจาก Flooring Layout Pack ฟรีที่มีอยู่ใน Divi ฉันใส่สีพื้นหลังใหม่ #6294d1 และสีปุ่มใหม่ #c1fff4

• สีพื้นหลัง: #6294d1
• สีของปุ่ม: #c1fff4

วิธีสร้างการไล่ระดับสีหลายสีด้วย Divi Gradient Builder

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

ถัดไป เลื่อนลงไปที่ พื้นหลัง เลือกแท็บ Background Gradient แล้วคลิก Add Background Gradient

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

ปรับ Type , Direction , Repeat , Unit และคุณต้องการให้ ทับภาพพื้นหลัง เพื่อให้ได้ดีไซน์ที่คุณต้องการหรือไม่

สำหรับภาพรวมโดยละเอียดของ Divi Gradient Builder โปรดดูบทความเรื่อง Introducing The Advanced Gradient Builder For Divi

ตัวอย่างการไล่ระดับสีหลายสี One

สำหรับตัวอย่างแรก เราจะสร้างเกรเดียนต์สต็อปสี่จุด เปิดแท็บการ ไล่ระดับสีพื้นหลัง แล้วเลือกการ ไล่ระดับสีแรก ปล่อยตำแหน่งการไล่ระดับสีไว้ที่ 0% และเปลี่ยนสีการไล่ระดับสีเป็น #6294d1

• ไล่ระดับหยุดตำแหน่งจุดแรก: 0%
• สี: #6294d1

ถัดไป เพิ่มจุด สีใหม่ โดยคลิกที่แถบไล่ระดับ ย้ายตำแหน่งการไล่ระดับสีไปที่ 29% และเปลี่ยนสีเป็น #b5bfd1

• ไล่ระดับหยุดตำแหน่งจุดที่สอง: 29%
• สี: #b5bfd1

ถัดไป เพิ่ม Gradient Stop ที่สาม และย้าย ตำแหน่ง ไปที่ 84% เปลี่ยนสีเป็น #8eacd1

• ไล่ระดับหยุดตำแหน่งจุดที่สาม: 84%
• สี: #8eacd1

สุดท้าย เปลี่ยนสีของ Gradient Stop ที่สี่ เป็น #b5bfd1 เราจะปล่อยให้ตำแหน่งไล่ระดับนี้อยู่ที่ 100%

• ไล่ระดับหยุดตำแหน่งจุดที่สี่: 100%
• สี: #b5bfd1

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

• ชนิด: เชิงเส้น
• ทิศทาง: 225deg
• ทำซ้ำไล่ระดับ: ไม่
• หน่วยไล่ระดับ: เปอร์เซ็นต์
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ไม่

ตัวอย่างการไล่ระดับสีหลายแบบสอง

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

• ตำแหน่งหยุดการไล่ระดับสีแรก: 0%
• สี: #bffffc

เพิ่มจุด หยุดการไล่ระดับสีใหม่ และย้ายตำแหน่งไปที่ 42% เปลี่ยนสีเป็น #bbc7f9

• ตำแหน่งหยุดไล่ระดับที่สอง: 42%
• สี: #bbc7f9

ถัดไป เปลี่ยนสีของการ หยุดการไล่ระดับสีที่สาม เป็น #adbdd1 เราจะปล่อยให้ตำแหน่งไล่ระดับอยู่ที่ 100%

• ตำแหน่งหยุดการไล่ระดับสีที่สาม: 100%
• สี: #adbdd1

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

• ประเภทการไล่ระดับสี: วงกลม

ตัวอย่างการไล่ระดับสีหลายสี Three

สำหรับตัวอย่างที่สาม เราจะใช้การไล่ระดับสีสามสต็อปเพื่อสร้างการไล่ระดับสีของเรา ย้ายตำแหน่งสำหรับการ ไล่ระดับสีแรก เป็น 15% และเปลี่ยนสีเป็น #afc3ed

• ตำแหน่งหยุดการไล่สีครั้งแรก: 15%
• สี: #afc3ed

ถัดไป ย้าย จุดหยุดการไล่ระดับสีที่สอง ไปที่ 33% และเปลี่ยนสีเป็น #adbdd1

• ตำแหน่งหยุดไล่ระดับที่สอง: 33%
• สี: #bffffc

ถัดไป ย้ายการ ไล่ระดับสีที่สาม ไปที่ 33% เหนือจุดหยุดการไล่ระดับสีที่สองโดยตรง และเปลี่ยนสีเป็น #adbdd1 จะดูเหมือนว่าคุณมี 2 ระดับบนแถบ Gradient Stop

• ตำแหน่งหยุดการไล่ระดับสีที่สาม: 33%
• สี: #adbdd1

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

• ประเภท: วงกลม
• ตำแหน่ง: ขวา

ตัวอย่างการไล่ระดับสีหลายสี Four

ตัวอย่างที่สี่ของเราประกอบด้วยการไล่ระดับสีห้าสต็อป สำหรับการ หยุดการไล่ระดับสีแรก ให้เปลี่ยนสีเป็น #878ebc ปล่อยให้อันนี้อยู่ที่ 0% สำหรับตำแหน่ง

• ตำแหน่งหยุดการไล่ระดับสีแรก: 0%
• สี: #878ebc

เพิ่มการ ไล่ระดับสีที่สอง ที่ตำแหน่ง 22% เปลี่ยนสีเป็น #a0c1d6

• ตำแหน่งหยุดการไล่ระดับที่สอง: 22%
• สี: #a0c1d6

ถัดไป เพิ่มการ ไล่ระดับสีที่สาม ที่ตำแหน่ง 48% เปลี่ยนสีเป็น #bffffc

• ตำแหน่งหยุดการไล่ระดับสีที่สาม: 48%
• สี: #bffffc

สำหรับ การไล่ระดับสีที่สี่ ให้วางไว้ที่ตำแหน่ง 73% และเปลี่ยนสีเป็น #d3d8ff

• ตำแหน่งหยุดการไล่ระดับสีที่สี่: 73%
• สี: #d3d8ff

สำหรับการ ไล่ระดับสีที่ห้า ให้ย้ายไปที่ตำแหน่ง 77% และเปลี่ยนสีเป็น #c6dfff

• ตำแหน่งหยุดการไล่ระดับสีที่ห้า: 77%
• สี: #c6dfff

สุดท้าย เปลี่ยน Gradient Type เป็น Conical และเปลี่ยน Gradient Direction เป็น 233deg ปิดการตั้งค่าและบันทึกงานของคุณ

• ประเภท: ทรงกรวย
• ทิศทาง: 233deg

ผลลัพธ์การไล่ระดับสีที่หลากหลาย

ผลลัพธ์ตัวอย่างแรก

ผลลัพธ์ตัวอย่างที่สอง

ผลลัพธ์ตัวอย่างที่สาม

ผลลัพธ์ตัวอย่างที่สี่

จบความคิดเกี่ยวกับการไล่โทนสีหลายแบบ

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

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