วิธีสร้างระบบสีด้วย Divi 5

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

โพสต์นี้จะแสดงวิธีการตั้งค่าระบบสีที่ยืดหยุ่นและปรับขนาดได้ใน Divi 5

ระบบสีคืออะไร?

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

• สีหลัก : สีหลักของแบรนด์
• สีรอง : รองรับและเปรียบเทียบกับหลัก
• สีข้อความ : ชัดเจนและอ่านได้สำหรับส่วนหัวและย่อหน้า
• เน้น : สีอื่น ๆ สำหรับการแจ้งเตือนประกาศและสิ่งสำคัญอื่น ๆ (ไม่บังคับ)
• สีพื้นหลัง : โดยทั่วไปแล้วเป็นกลางหรือโทนสีที่บอบบาง

กฎ 60-30-10 ใช้กับสีในการออกแบบเว็บ โดยทั่วไปสีที่เป็นกลาง (เช่นพื้นหลังส่วนและพื้นที่เชิงลบ) จะใช้สำหรับ 60%ของการออกแบบสีหลักสำหรับ 30%และสีรอง/สำเนียงสำหรับ 10%ที่เหลือ

วิธีเลือกสีของเว็บไซต์

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

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

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

สร้างระบบสีของคุณใน Divi 5

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

1. สีหลัก
2. สีรอง
3. หัวเรื่องสี
4. สีของข้อความร่างกาย

ขั้นตอนที่ 1: กำหนดสีพื้นฐานของคุณเป็นตัวแปร

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

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

ตัวแปรเหล่านี้มีให้บริการทันทีทุกที่ใน Builder Visual Builder ของ Divi ซึ่งมีประโยชน์มาก แต่ให้แน่ใจว่าได้บันทึกไว้!

ขั้นตอนที่ 2: สร้างเฉดสีและสีด้วยสี HSL

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

ขั้นตอนแรกที่นี่คือการสร้างสีทั่วโลกอื่น อย่างไรก็ตามแทนที่จะวางค่า hex ให้เลือกสีที่มีอยู่เพื่อสร้างรูปแบบ (เฉดสีและสี)

ตอนนี้เราต้องใช้ตัวกรองกับสีฐานนั้นเพื่อสร้างรูปแบบ คลิกที่ชิปสีจากนั้นเลือก“ สีตัวกรอง” หรือคลิกที่ Swatch สีสำหรับตัวแปรสีสัมพัทธ์ใหม่ของคุณ

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

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

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

ใช้สีของคุณในการออกแบบด้วย divi

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

ขั้นตอนที่ 1. สร้างโครงลวดของหน้าของคุณ

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

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

ขั้นตอนที่ 2. การพิมพ์และสี

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

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

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

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

ขั้นตอนที่ 3. ปุ่มจัดแต่งทรงผม

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

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

สร้างสถานะโฮเวอร์ด้วยโทนสีและ/หรือเฉดสี

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

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

ขั้นตอนที่ 4. การสร้างส่วนที่มีค่าที่ตั้งไว้ล่วงหน้าและการไล่ระดับสี

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

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

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

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

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

ปิดระบบสี Divi 5 ของคุณ

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

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

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