เปลี่ยนสีแบรนด์ของลูกค้าของคุณให้เป็นระบบสี Divi 5

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

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

ทำความเข้าใจระบบสีของ Divi 5

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

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

นี่คือการอัพเกรดที่สำคัญสามครั้ง:

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

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

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

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

ยกตัวอย่างเช่นสีโฮเวอร์สามารถกำหนดให้มืดกว่า 20% หากสีหลักเปลี่ยนไปสถานะโฮเวอร์จะรักษาความสัมพันธ์โดยไม่จำเป็นต้องปรับเปลี่ยนด้วยตนเอง

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

เรียนรู้ทุกอย่างเกี่ยวกับระบบสีใหม่ของ Divi

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

เปลี่ยนสีแบรนด์ของลูกค้าของคุณให้เป็นระบบสี Divi 5

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

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

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

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

1. บันทึกสีหลักของลูกค้าของคุณเป็นตัวแปรการออกแบบ

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

การเพิ่มสีหลัก

ในการเริ่มต้นให้เปิด ตัวจัดการตัวแปร และเปลี่ยนไปใช้แท็บ สี

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

เพิ่มสีรอง

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

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

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

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

เลือก สิ่งนี้นำมาซึ่งสีพื้นฐานเป็นจุดเริ่มต้นของคุณ

ตอนนี้คลิกที่ Swatch อีกครั้งเพื่อเปิดหน้าต่างอีกครั้งจากนั้นเปิด ตัวกรองสี แบบเลื่อนลง สิ่งนี้เผยให้เห็นตัวเลื่อน HSL ที่คุณสามารถปรับเฉดสีความอิ่มตัวและความสว่าง

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

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

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

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

2. สร้างสีรองรับโดยใช้การปรับ HSL

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

ในการสร้างรูปแบบเหล่านี้ให้เปิดแผงควบคุม HSL และปรับสไลเดอร์:

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

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

ตอนนี้ตัวแปรจะถูกบันทึกแล้วเราสามารถนำไปใช้กับสถานะโฮเวอร์ของปุ่มเช่นสีอื่น ๆ

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

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

3. แทนที่สีคงที่ที่มีอยู่ด้วยตัวแปร

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

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

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

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

เริ่มต้นด้วยแอตทริบิวต์ขยาย

ใช้แอตทริบิวต์ขยาย

ในตัวอย่างนี้เราต้องการกำหนดสีรองใหม่ให้กับ H2 ทั้งหมดในเค้าโครง เราจะเริ่มต้นด้วยการสมัครกับหนึ่งในนั้น

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

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

ใช้ค้นหาและแทนที่

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

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

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

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

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

ทดสอบโทนสีใหม่ของคุณ

ทุกสิ่งที่คุณทำเกี่ยวกับการตั้งค่า ตอนนี้เมื่อการตั้งค่าทั้งหมดเริ่มแสดงค่า

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

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

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

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

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

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

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

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

Divi ทำให้การพิสูจน์สีของคุณเป็นไปในอนาคต

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

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

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