ทำความเข้าใจกับสีสัมพัทธ์ในการออกแบบเว็บ

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

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

ปัญหาการจัดการสีทั่วไป

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

การจัดการรูปแบบสำหรับสีเดียว

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

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

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

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

ปัญหาความทึบ

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

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

ความพยายาม 1, 2 และ 3 แตกต่างกันไปในที่ร่มและความโปร่งใสเนื่องจากการมองดวงตาไม่ได้ให้ผลลัพธ์ที่แม่นยำแม้จะมีการควบคุมที่แม่นยำ

ผู้สร้างหน้าบางส่วนให้คุณประหยัดสีที่โปร่งใส คนอื่นไม่ คุณจบลงด้วยการมองดูที่ดูคล้ายกัน

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

การสร้างตัวแปรด้วยตนเอง

ผู้สร้างหน้าส่วนใหญ่เสนอการประหยัดสีบางรูปแบบ แต่มันจะไม่สามารถจัดการได้อย่างรวดเร็ว คุณบันทึกสีด้วยชื่อทั่วไปเช่น“ สีเหลือง 1,”“ เหลือง 2” และ“ แสงสีเหลือง”

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

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

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

นักพัฒนาบางคนพยายามแก้ปัญหานี้โดยการเขียนตัวแปร CSS ที่กำหนดเอง สิ่งนี้ทำให้พวกเขาควบคุมความสัมพันธ์สีได้ดีขึ้น

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

สีสัมพัทธ์คืออะไรใน CSS (และทำไมคุณถึงต้องการมัน)

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

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

เวิร์กโฟลว์แบบดั้งเดิมต้องใช้ความพยายามด้วยตนเองมากขึ้น นักออกแบบทำชุดสีใน Photoshop Coders ใช้เครื่องมือเช่น Sass ผู้สร้างเว็บไซต์ต้องเดาสีที่ตรงกัน ตอนนี้ CSS จัดการนี้โดยอัตโนมัติ

CSS สร้างสีจากสีอย่างไร

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

สีเริ่มต้นของคุณกลายเป็นฐาน CSS แยกออกเป็นส่วน ๆ ปริมาณสีแดงจำนวนเงินสีเขียวจำนวนเงินสีน้ำเงิน หรือ Hue ความสว่างและความอิ่มตัวหากคุณต้องการการควบคุมเหล่านั้น

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

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

แบ่งสีออกเป็นส่วน ๆ

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

นี่คือวิธีการทำงาน คุณเขียน RGB (จาก #FF4081 RGB) CSS ใช้รหัส Hex สีชมพูนั้นและแยกออกเป็นหมายเลขสีแดงสีเขียวและสีน้ำเงิน จากนั้นคุณสามารถใช้ตัวเลขเหล่านั้นตามที่คุณต้องการ รูปแบบยังคงเหมือนเดิม: ฟังก์ชั่นสี (จาก Channel1 Channel2 Channel2 Channel2 ของคุณ)

ดังนั้นแทนที่จะเขียนสีตั้งแต่เริ่มต้นคุณจะสร้างสีที่มีอยู่และเปลี่ยนเฉพาะชิ้นส่วนที่คุณต้องการเปลี่ยน

แต่ละส่วนได้รับการแปลงให้ตรงกับสิ่งที่คุณเลือก การแปลง Hex สีชมพูนั้นให้คุณ r = 255, g = 64, b = 129 ใช้พวกเขาตามที่เป็นอยู่หรือเปลี่ยนแปลงด้วย calc ()

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

การสนับสนุนเบราว์เซอร์และข้อควรพิจารณาอื่น ๆ

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

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

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

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

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

Divi 5 ทำให้สีสัมพัทธ์ง่ายอย่างไร

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

Divi คืออะไร?

Divi เป็นผู้สร้างหน้า WordPress ที่ได้รับความนิยมมากที่สุด มันจัดลำดับความสำคัญการออกแบบภาพและให้การควบคุมการออกแบบของคุณอย่างสมบูรณ์

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

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

ข้ามหน้าว่างบลูส์ด้วยไซต์ด่วน Divi

ไซต์ Divi Quick Fixes ที่น่ากลัวว่าผืนผ้าใบที่ว่างเปล่าที่ฆ่าโครงการก่อนที่จะเริ่ม คุณจะได้รับเว็บไซต์เริ่มต้นมืออาชีพที่มีการออกแบบที่แข็งแกร่งซึ่งทีมออกแบบของเราสร้างโดยใช้ภาพต้นฉบับและงานศิลปะที่คุณจะไม่พบที่อื่น

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

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

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

ควบคุมการออกแบบเว็บไซต์ของคุณได้อย่างสมบูรณ์ตอนนี้ด้วย AI

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

Divi AI ดังที่ได้กล่าวไว้ก่อนหน้านี้ทำให้ AI อยู่ในเวิร์กโฟลว์การออกแบบของคุณ สร้างหัวข้อข่าวที่คุณเขียนและคำอธิบายผลิตภัณฑ์ที่จับเสียงแบรนด์ของคุณ

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

ต้องการภาพสด? มันสร้างสิ่งเหล่านั้นด้วย

สมบูรณ์ส่วนหน้าที่เหมาะสมกับธุรกิจของคุณอย่างสมบูรณ์แบบ

รวมรหัสตัวอย่างเมื่อคุณต้องการ

Divi 5: วิวัฒนาการต่อไป

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

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

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

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

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

มีอะไรใหม่ใน Divi 5

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

นี่คือการอัปเดตที่สำคัญบางประการ:

• Codebase ที่ทันสมัย จะเพิ่มความเร็วโดยการโหลดเฉพาะโมดูลที่คุณต้องการจริงโดยลบรหัส bloat ที่ชะลอตัวลง Divi 4
• ระบบเลย์เอาต์ FlexBox ที่สมบูรณ์ ขณะนี้มีเทมเพลตแถวใหม่การจัดกึ่งกลางแนวตั้งอัตโนมัติการห่อเนื้อหาและการกระจายระยะห่างผ่านการควบคุมภาพ
• ตัวสร้างลูปใหม่เอี่ยม ที่ทำซ้ำโมดูลกลุ่มหรือส่วนที่มีเนื้อหาแบบไดนามิกและรองรับลูปซ้อนกันสำหรับโครงสร้างข้อมูลที่ซับซ้อน
• สีสัมพัทธ์ กับ HSL ให้การควบคุมสีแบบไดนามิกตามสีความอิ่มตัวและค่าแสง
• ระบบที่ใช้ HTML-5 แทนที่รหัสย่ออย่างสมบูรณ์ ซึ่งหมายถึงข้อบกพร่องที่น้อยลงและความเข้ากันได้ของ WordPress ที่ดีขึ้น
• อินเทอร์เฟซ Visual Builder ได้รับการปรับปรุงอย่างสมบูรณ์ พร้อมโหมดแสงและมืดแผงที่เชื่อมต่อได้หน้าต่างแบบแท็บคีย์บอร์ดทางลัดและมุมมองเลเยอร์ที่ได้รับการปรับปรุงด้วย breadcrumbs
• เบรกพอยต์ตอบสนองที่ปรับแต่งได้ แทนที่สามจุดคงที่ของ Divi 4 ทำให้คุณควบคุมการปรับขนาดผ้าใบได้มากขึ้นเพื่อดูว่าการออกแบบดูขนาดหน้าจอที่แตกต่างกันอย่างไร
• กลุ่มโมดูล ทำงานเหมือนคอนเทนเนอร์อเนกประสงค์ที่รวมองค์ประกอบที่เกี่ยวข้องเข้าด้วยกันเพื่อให้คุณสามารถจัดสไตล์เป็นหน่วยหรือย้ายพวกเขาโดยไม่สูญเสียความสัมพันธ์
• ตัวแปรการออกแบบ ให้คุณตั้งค่าสีตัวอักษรตัวเลขรูปภาพข้อความและ URL ทั่วโลกทั่วทั้งเว็บไซต์ของคุณ
• กลุ่มตัวเลือกที่ตั้งไว้ล่วงหน้า บันทึกคุณสมบัติการออกแบบเฉพาะเช่นการพิมพ์หรือเงาที่ทำงานในประเภทโมดูลที่แตกต่างกัน
• หน่วย CSS ขั้นสูง ตอนนี้รองรับแคลมป์ (), calc (), min () และ max () ฟังก์ชั่นผ่านอินเตอร์เฟสภาพโดยไม่ต้องเขียนโค้ด
• ระบบการโต้ตอบ สร้างป๊อปอัปสลับเอฟเฟกต์การเลื่อนและเอฟเฟกต์การเคลื่อนไหวของเมาส์โดยไม่มีปลั๊กอินภายนอก

เกิดอะไรขึ้น ...

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

การสร้างจานสีที่ขยายตัวเองด้วย Divi 5

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

1. การตั้งค่ารองพื้นสีหลักของคุณ

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

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

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

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

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

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

2. การสร้างเฉดสีสีด้วยตัวควบคุม HSL

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

ตอนนี้คุณเห็นตัวเลื่อนสามตัว: สีความอิ่มตัวและความสว่าง เหล่านี้ควบคุมว่าสีพื้นฐานของคุณเปลี่ยนไปอย่างไร

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

ความเบาเริ่มจาก 0% ถึง 100% ตัวเลื่อนนี้สร้างเฉดสีที่แท้จริงของคุณ ที่ 0 คุณจะได้รับรูปแบบที่บริสุทธิ์ของสีของคุณ เลื่อนขึ้นไปถึง 50% สำหรับเฉดสีที่เบากว่า วางลงที่ -20% สำหรับเฉดสีเข้ม

คุณสามารถผสมและจับคู่สี HSL เหล่านี้เพื่อสร้างสีและรูปแบบใหม่ตามต้องการ

มาสร้างสีหลักของเราสองแบบกันเถอะ เพิ่มตัวแปรและตั้งชื่อเงาใหม่ของคุณบางสิ่งที่ชัดเจนเช่น "แสงหลัก" หรือ "ความมืดหลัก" ทำซ้ำกระบวนการนี้เพื่อสร้างหลายเฉดสี การตั้งค่าทั่วไปใช้ฐานหลักของคุณที่ความสว่าง 30% สำหรับพื้นหลังและเช่นและมืดที่ความสว่าง -15%

คุณอาจเพิ่มเฉดสีที่เบาและเข้มขึ้นสำหรับสีรองของคุณ

3. ตัวแปรสีซ้อนกัน

คุณสร้างแสงหลักและความมืดหลักในขั้นตอนที่ 2 ตอนนี้คุณสามารถสร้างสีได้มากขึ้นจากเฉดสีเหล่านั้น

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

คุณสามารถสร้างสีที่กำหนดเองจากเฉดสีของคุณได้เช่นกัน ทำ“ เงาข้อความ” โดยการเลือกปุ่มโฮเวอร์ ตั้งค่าความทึบเป็น 15% ตอนนี้ Shadow Text ของคุณเชื่อมต่อกับปุ่ม Hover ซึ่งเชื่อมต่อกับ Primary Dark ซึ่งเชื่อมต่อกับ Primary

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

เพิ่มเฉดสีที่คล้ายกันสำหรับสีรองของคุณสำหรับการเลือกสีที่ดีในการเลือก

4. การใช้สีสัมพัทธ์กับไซต์ของคุณ

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

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

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

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

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

5. การอัปเดตสีเมื่อจำเป็น

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

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

เงาพื้นหลังการ์ดของคุณมีความทึบแสง 15% ของแสงหลัก มันกลายเป็นความทึบ 15% ของแสงสีเขียวปฐมภูมิใหม่โดยที่คุณไม่ได้สัมผัส Shadow Text ของคุณเชื่อมต่อกับปุ่ม Hover ซึ่งเชื่อมต่อกับ Primary Dark ซึ่งเชื่อมต่อกับ Primary

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

สีของคุณกฎของคุณ

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

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

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