เปรียบเทียบตัวเลือกสีของ Divi 4's และ Divi 5

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

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

เปรียบเทียบตัวเลือกสี

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

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

นอกเหนือจากรูปลักษณ์ตัวเลือกสีของ Divi 4 มีรากฐานที่ดี เครื่องมือ Magic Color นั้นค่อนข้างฉลาดดึงออกมาจากสีหน้าของคุณและตัวเลือกล่าสุดเพื่อแนะนำจานสีที่ทำงานร่วมกันได้จริง จังหวะนี้เริ่มต้นจากศูนย์ทุกครั้ง

โดยที่ Divi 4 มี จำกัด

อย่างไรก็ตามไม่ใช่ทั้งหมดที่สมบูรณ์แบบ ทุกอย่างใช้รหัส hex หรือ RGBA เท่านั้น การรับรุ่นที่เบากว่าสีน้ำเงินของคุณหมายถึงการคาดเดาหรือใช้แอพอื่นเพื่อคิดออก หากการสร้างแบรนด์ของคุณมักจะต้องการสีเข้มกว่า 20% หรือสีอ่อนกว่า 40% กว่าสีแบรนด์หลัก Divi 4 ไม่สามารถทำสิ่งนี้ให้คุณได้

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

การเปลี่ยนแปลงทางสายตา 5 ของ Divi คืออะไร

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

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

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

อินเทอร์เฟซต้องเปลี่ยนแปลงเพราะสิ่งที่เปลี่ยนแปลง

ตัวเลือกสีใหม่ของ Divi 5

ทีมของเราสร้างระบบสีขึ้นมาใหม่เพราะวิธีการเก่าไม่สามารถจัดการกับเวิร์กโฟลว์การออกแบบที่ทันสมัย ตัวเลือกใหม่นี้อยู่รอบ ๆ สีความอิ่มตัวและความสว่าง (HSL) ความสัมพันธ์สีสัมพัทธ์และการรวมเข้ากับระบบตัวแปรของ Divi 5

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

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

ระบบใหม่ทำงานอย่างไร

สีสัมพัทธ์เริ่มต้นด้วยตัวแปรสีพื้นฐานและช่วยให้คุณสามารถใช้การเปลี่ยนแปลงได้ เลือกตัวแปรสีน้ำเงินหลักของคุณลดความสว่าง 20%และบันทึกเป็นตัวแปร“ Royal Deep Blue”

ตัวเลือกสี HSL ของ Divi 5 VS Divi 4 ตัวเลือกสี

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

สีทั่วโลกของ Divi 4 ทำงานอย่างไร

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

คนส่วนใหญ่ตั้งค่าแบรนด์หลักสามหรือสี่สีด้วยวิธีนี้ มันเต้นการล่าสัตว์ผ่านรหัสหกเหลี่ยมหรือพยายามจำไว้ว่าคุณใช้ #2E86C1 หรือ #3498DB สำหรับลิงก์ของคุณ

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

ทำไม Divi 5 ย้ายไปที่การออกแบบตัวแปร

ตอนนี้การออกแบบตัวแปรจัดการมากกว่าแค่สี แบบอักษรตัวเลขระยะห่างรูปภาพและสตริงข้อความล้วนได้รับการรักษาแบบเดียวกัน ทุกอย่างอาศัยอยู่ในตัวแปรตัวแปรเดียวแทนที่จะลอยไปรอบ ๆ แผงที่แตกต่างกัน

ตัวแปรแต่ละตัวจะได้รับชื่อและคำอธิบายที่เหมาะสม แทนที่จะเป็น“ Global Color 3” คุณสามารถเรียกมันว่า“ ส่วนหัวข้อความสีเทา” หรือ“ ซ้อนทับพื้นหลังที่ละเอียดอ่อน” หกเดือนต่อมาคุณจะรู้ว่ามันมีไว้เพื่ออะไร

แต่นี่คือสิ่งที่น่าสนใจ ตัวแปรสามารถอ้างอิงซึ่งกันและกันและสร้างความสัมพันธ์ในรูปแบบ ตั้งค่าสีเขียวหลักของคุณเป็นรากฐาน สร้าง“ มอสที่ถูกไฟไหม้” ที่ใช้สีเขียวนั้นและลดความสว่าง จากนั้นสร้าง“ Shadow (Burnt Moss)” ที่นำสีมอสที่ถูกเผาไหม้นี้และลดความทึบลงไปที่ 15%

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

ความแตกต่างที่สำคัญในการปฏิบัติ

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

การตั้งค่าระบบสีของคุณใน Divi 4 vs Divi 5

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

การตั้งค่าสีใน Divi 4

ตัวเลือกสีของคุณกำหนดวิธีที่ผู้เข้าชมสัมผัสกับเว็บไซต์ของคุณ ดูวิธีการจัดการสี Divi 4 ใช้:

1. เพิ่มสีทั่วโลกของคุณ

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

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

คำแนะนำสีวิเศษ

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

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

2. การใช้สีทั่วโลกของคุณ

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

คลิกที่ทั่วโลกเพื่อดูจานสีทั่วโลกของคุณ คลิกที่ Global Color Swatch ใด ๆ และใช้กับโมดูลของคุณทันที

3. การปรับเปลี่ยนสีทั่วโลกของคุณ

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

ตั้งค่าสีของคุณใน Divi 5

การสร้างระบบสีที่เหมาะสมใน Divi 5 ใช้เวลาสี่ขั้นตอน การทำตามวิธีนี้จะชนะวิธีการคาดเดารหัสสีเมื่อใดก็ตามที่คุณต้องการเฉดสีที่แตกต่างกันเล็กน้อย:

1. สร้างตัวแปรสีพื้นฐานของคุณ

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

2. สร้างสีสัมพัทธ์จากฐานของคุณ

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

ใช้ตัวเลื่อน HSL เพื่อปรับ: ความสว่างต่ำลง 25% สำหรับข้อความหัวเรื่อง, 20% สำหรับข้อความร่างกาย; เพิ่มความสว่าง 20% สำหรับสถานะโฮเวอร์หรือเปลี่ยนความอิ่มตัวของพื้นหลังที่ปิดเสียง ให้ชื่อที่ชัดเจนเหล่านี้ชัดเจนเช่น“ สีส้มลึก” และ“ สีแดงเข้มสดใส” หรือ“ สถานะโฮเวอร์ (สีปฐมภูมิ),”“ พื้นหลังที่ปิดเสียง (สีรอง)”

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

หากคุณเปลี่ยนสีฐานของคุณในภายหลังสีที่เกี่ยวข้องเหล่านี้จะอัปเดตโดยอัตโนมัติโดยรักษาความสัมพันธ์ที่สมบูรณ์

3. ใช้ตัวแปรกับองค์ประกอบของคุณ

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

เลือกจากระบบสีที่เป็นระเบียบของคุณแทนที่จะสร้างสีแบบสุ่มแบบครั้งเดียวที่ทำลายความสอดคล้อง

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

4. อาคารที่ตั้งค่าล่วงหน้าที่อ้างอิงตัวแปรสี HSL

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

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

ใช้ที่ตั้งไว้ล่วงหน้านี้ในคอลัมน์ส่วนแถวและโมดูล

สร้างกลุ่มตัวเลือกแยกต่างหากที่ตั้งไว้ล่วงหน้าสำหรับสีที่แตกต่างกัน: หนึ่งสำหรับเส้นขอบที่มีสีสำเนียงของคุณอีกอันสำหรับข้อความที่มีสีรองของคุณ ฯลฯ ผสมที่ตั้งค่าไว้ล่วงหน้าเหล่านี้กับองค์ประกอบโดยไม่เปลี่ยนสไตล์อื่น ๆ

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

5. กลิ้งสีทั่วไซต์ของคุณ

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

สิ่งนี้ยังคงรักษาความสัมพันธ์สีของคุณในขณะที่กระจายสไตล์ที่สอดคล้องกันโดยไม่ต้องทำงานด้วยตนเอง

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

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

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

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

ตัวเลือกสีใหม่จะพอดีกับเวิร์กโฟลว์ของคุณ

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

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

ลองใช้ระบบสีใหม่ใน Divi 5 วันนี้!