كيفية استخدام Divi لإنشاء نماذج مخططات ألوان مختلفة لصفحاتك

يعد إنشاء نماذج بالأحجام الطبيعية لأنظمة الألوان لعملائك خطوة مهمة في عملية تصميم الويب. في بعض الأحيان ، قد يكون لدى العميل لوحة ألوان للعلامة التجارية للشركة بالفعل يمكنك استخدامها للموقع. ولكن في كثير من الأحيان ، ستحتاج إلى تقديم بعض مخططات الألوان المقترحة التي تعتقد أنها ستناسب العلامة التجارية للشركة وتبدو رائعة على موقع الويب الخاص بها.

باستخدام Divi ، يمكنك بسهولة تغيير نظام الألوان لأي تخطيط صفحة معين باستخدام ميزات التصميم مثل Find & Replace واقتراحات الألوان داخل المنشئ المرئي. ويمكنك أيضًا إنشاء إصدارات متعددة من الصفحة (بأنظمة ألوان مختلفة) لعميلك.

في هذا البرنامج التعليمي ، سأقوم بإرشادك خلال عملية استخدام Divi لإنشاء نماذج بالأحجام الطبيعية لأنظمة ألوان جديدة لصفحة رئيسية. نأمل أن تتعلم بعض الحيل على طول الطريق.

هيا بنا نبدأ!

قم بإعداد صفحتك الجديدة

سأستخدم تخطيط الصفحة الرئيسية لـ Business Coach لهذا البرنامج التعليمي. لذلك ، إذا لم تكن قد قمت بذلك بالفعل ، فقم بإنشاء صفحة جديدة ونشر المنشئ المرئي. ثم حدد "اختيار تخطيط Premade". من النافذة المنبثقة Add From Library ، حدد تخطيط الصفحة الرئيسية لـ Business Coach.

بمجرد تحميل التخطيط على الصفحة ، لا تنس نشره.

سنستخدم تخطيط الصفحة الرئيسية هذا لإنشاء نماذج مختلفة من أنظمة الألوان. لكن في الوقت الحالي ، نحتاج إلى اختيار نظام ألوان جديد.

اختيار نظام الألوان الخاص بك

قد يكون لديك بالفعل نظام ألوان في الاعتبار ، ولكن إذا لم يكن الأمر كذلك ، فيمكنك إما استخدام اقتراحات ألوان Divi أو منشئ مخطط ألوان تابع لجهة خارجية. لمزيد من الإلهام ، يمكنك تصفح الويب بحثًا عن مخططات الألوان التي تناسب صناعتك.

استخدام مولدات أنظمة الألوان الخاصة بطرف ثالث لإنشاء نظام الألوان الخاص بك

هناك بعض مولدات أنظمة الألوان الرائعة التابعة لجهات خارجية (والمجانية) على الويب لمساعدتك في اختيار نظام الألوان المثالي لموقعك. بعض مولدات لوحة الألوان المفضلة لدي هي من Coolers.co و Canva و Adobe.

ستنتج معظم مولدات أنظمة الألوان هذه خمسة ألوان على الأقل. تأكد من حفظ كل الألوان التي تحتاجها لتشكيل نظام الألوان الجديد.

إنشاء مخطط ألوان باستخدام اقتراحات الألوان المضمنة في Divi

منذ إطلاق مدير الألوان الجديد من Divi واقتراحات الألوان السحرية ، يتتبع Divi تلقائيًا الألوان المحفوظة والمستخدمة مؤخرًا والتي يمكن الوصول إليها عند تغيير خيار اللون في Divi Builder. يمكنك عرض كل لوحة من خلال النقر فوق علامة التبويب "المحفوظة" أو "الأخيرة".

يحتوي Divi أيضًا على أداة اقتراح ألوان بسيطة وذكية مدمجة مباشرة في المنشئ المرئي. لن أخوض في جميع تفاصيل الخوارزمية المستخدمة (لست متأكدًا من قدرتي على أي حال) ، ولكن بشكل عام ، ستنشئ Divi لوحة من الألوان التكميلية (والمماثلة) بناءً على اللون الأساسي الحالي (اللون المحدد في الخيار). سيساعدك هذا على اختيار مجموعات ألوان متناغمة لتصميمك.

لعرض اقتراحات الألوان (أو مشهد الألوان) ، ما عليك سوى النقر فوق رمز color-scape (الذي يحتوي على ثلاث نقاط) مباشرةً أسفل خيار اللون المحدد. ستجد هناك لوحات تم إنشاؤها من الألوان التكميلية والمماثلة للألوان المحفوظة والمستخدمة مؤخرًا ولكل صف نظام ألوان جديد موسع لكل لون في لوحة الألوان الحديثة أو المحفوظة.

على الرغم من أن أداة اقتراح الألوان هذه مصممة للمساعدة في تحديد اللون على مستوى القسم والصف والوحدة ، يمكنك بسهولة استخدام لوحة الألوان المقترحة كنظام ألوان جديد لكل صفحة.

إنشاء مخطط ألوان لتخطيط الصفحة الرئيسية لـ Business Coach

لنبدأ الآن في إنشاء نماذج بالأحجام الطبيعية لأنظمة ألوان جديدة لتخطيط الصفحة الرئيسية لبرنامج Business Coach الذي أضفناه إلى صفحتنا الجديدة سابقًا. يحتوي هذا التصميم الجاهز حاليًا على نظام ألوان أساسي. من الواضح أن اللون الرئيسي هو اللون الأزرق الداكن المستخدم في جميع الأنحاء. كما أن لديها بعض الظلال المختلفة من الرمادي كلون مميزة أيضًا. هم أيضًا لون أبيض قياسي لخلفيات المحتوى ولون أسود يستخدم للنص. لذا يمكنك أن تتخيل أنك إذا استبدلت كل مثيل من اللون الأزرق الداكن الأساسي بلون آخر ، فسيكون لديك نظام ألوان جديد تمامًا.

من المنشئ المرئي ، افتح إعداد رأس العرض الكامل في القسم العلوي من التخطيط وابحث عن Button One Text Color. هذا هو اللون الأزرق الأساسي الذي يستخدمه هذا التخطيط. انقر الآن على أيقونة color-scape لعرض اقتراحات الألوان لهذا اللون الأزرق الحالي. سيتم العثور عليها في لوحة الألوان للصف العلوي.

في هذه المرحلة ، يمكنك تحديد أي لون من اللوحة لمشاهدة مخططات ألوان جديدة ، ولكن في هذا المثال ، سألتزم بأول لون تم إنشاؤه.

حفظ نظام الألوان الخاص بك في لوحة الألوان الافتراضية

من أجل جعل الأمور أكثر ملاءمة على الطريق ، ستحتاج إلى تحديث ألوان لوحة الألوان الجديدة لتحل محل لوحة الألوان الافتراضية لمنتقي الألوان في خيارات السمات. بهذه الطريقة ستكون ألوانك متاحة ضمن لوحة الألوان المحفوظة داخل Visual Builder طوال بقية تغييرات الألوان.

في علامة تبويب جديدة ، انتقل إلى Divi> Theme Options. سترى خيار لوحة الألوان الافتراضية ضمن علامة التبويب "عام". لا توجد طريقة سهلة حقيقية لنسخ لوحة الألوان الناتجة عن اقتراحات الألوان للون الأزرق. أقترح فتح صفحتك مع المنشئ المرئي النشط في نافذة واحدة وخيارات Divi Theme في نافذة أخرى. ثم انسخ كل رمز لون إلى لوحة الألوان الافتراضية.

احفظ التغييرات.

نصيحة: قد لا ترغب في استبدال أول لونين افتراضيين (أبيض وأسود) لتسهيل تحرير النصوص والخلفيات لاحقًا ، ولكن إذا كنت بحاجة إلى كل فتحات الألوان ، فلا تتردد في استخدامها.

لن يتم تحديث لوحة الألوان الافتراضية في صفحتك الحالية لأنها قد ورثت بالفعل لوحة الألوان الافتراضية السابقة. ستحتاج إلى إنشاء صفحة جديدة مع التخطيط مرة أخرى لرؤية لوحة الألوان المحفوظة الجديدة في إعداداتك.

إذا كان هذا يمثل إزعاجًا كبيرًا ، فيمكنك اختيار تحديث لوحة الألوان الافتراضية لصفحتك الحالية فقط. للقيام بذلك ، افتح قائمة الإعدادات وانقر فوق رمز إعدادات الصفحة. ثم قم بتحديث اللوحة تحت علامة تبويب التصميم.

سيؤدي هذا إلى تحديث لوحة الألوان للصفحة بأكملها دون الحاجة إلى إنشاء صفحة أخرى.

كان السبب في أنني اخترت تحديث لوحة الألوان الافتراضية للموضوع (بدلاً من الصفحة فقط) هو تجنب الاضطرار إلى إضافة لوحات ألوان جديدة إلى كل نموذج بالحجم الطبيعي للصفحة الجديدة الذي سأقوم بإنشائه.

استخدام البحث والاستبدال لتحديث ألوان صفحتك

عد الآن إلى تخطيط الصفحة الرئيسية مع نشاط المنشئ المرئي الخاص بك وانتقل إلى خيار Button One Text Color ضمن إعدادات Fullwidth Header (نفس المكان الذي كنت فيه من قبل). الآن لا يظهر التخطيط المحفوظ بعد ولكن لا بأس بذلك. تأكد من تحديد اللون الأزرق الداكن الأصلي ، ثم انقر فوق رمز color-scape لتوسيع نطاق اقتراحات الألوان. سيظهر هذا نظام الألوان نفسه في الصف العلوي.

حدد اللون البني الغامق (# 54381c).

ثم افتح منتقي الألوان لعرض رمز اللون وانسخ رمز اللون إلى الحافظة الخاصة بك عن طريق تمييزه والضغط على ctrl + C (أو Cmd + C).

نظرًا لأننا لا نريد إجراء التغيير بالفعل بعد ، فانقر فوق زر التراجع الأرجواني في الجزء السفلي من صيغة الإعدادات لإعادة اللون الأزرق الأصلي الذي نحتاج إلى استبداله.

الآن انقر بزر الماوس الأيمن على اللون الأزرق الأصلي وانقر فوق خيار البحث والاستبدال.

في نافذة البحث والاستبدال المنبثقة ، الصق اللون البني أسفل "استبدال بـ". نظرًا لأننا نريد استبدال اللون على الصفحة بأكملها ، يمكنك الاحتفاظ بخيار "ضمن" باسم "هذه الصفحة". تأكد من تحديد خيار "استبدال الكل" وحدده بحيث لا يقتصر نطاق تغيير اللون على ألوان نص الزر واحد فقط. ثم انقر فوق استبدال.

لا تنس حفظ الإعدادات الخاصة بك.

تحقق الآن من نظام الألوان الجديد.

انتقل الآن واحفظ التخطيط في مكتبة Divi الخاصة بك عن طريق فتح قائمة الإعدادات والنقر فوق أيقونة Save to Library. امنح التخطيط اسمًا مثل "بني" ثم انقر فوق "حفظ في المكتبة".

سيسمح لك ذلك بنشر هذا الإصدار من التخطيط الخاص بك على صفحة جديدة.

أضف مخطط نظام الألوان الجديد إلى صفحة جديدة

لإضافة التخطيط المحفوظ باستخدام نظام الألوان البني الجديد إلى صفحة جديدة ، ستحتاج أولاً إلى إنشاء صفحة جديدة. ثم امنح صفحتك عنوانًا (شيء مثل "بني") وانشر المنشئ المرئي. ثم حدد اختيار تخطيط مسبق الصنع. في النافذة المنبثقة Load from Library ، انقر فوق علامة التبويب "Your Saved Layouts" وحدد التنسيق الجديد الذي حفظته للتو في مكتبتك.

لا تنسى نشر صفحتك.

كرر الآن نفس العملية لإنشاء صفحة جديدة وإضافة التخطيط المحفوظ إلى الصفحة. هذه المرة قم بتسمية صفحتك "بنفسجي".

بمجرد إضافة التخطيط إلى الصفحة ، تأكد من نشره. ثم افتح المنشئ المرئي وافتح إعدادات Fullwidth Header وابحث عن Button One Text Color (تمامًا كما كان من قبل). الآن يجب أن ترى أنه تم تحديث لوحة ألوان النسق المحفوظة بألوانك الجديدة. هذا وسوف تأتي في متناول اليدين. انقر بزر الماوس الأيمن على خيار اللون (حاليًا باللون البني الغامق) ثم انقر فوق "بحث واستبدال". افتح منتقي الألوان ضمن "استبدال بـ" لتحديد لون جديد من لوحة الألوان المحفوظة. هذه المرة حدد اللون الأرجواني (# 5a5ae2). ثم حدد خيار استبدال الكل. ولا تنس حفظ إعداداتك.

ومثل السحر ، لديك نظام ألوان أرجواني لصفحتك!

إنشاء نموذج صفحة مخطط ألوان متقدم

مع توفر نظام الألوان الجديد الخاص بك ، قد ترغب في تجربة ألوان متعددة على صفحتك. على سبيل المثال ، قد تختار أن يكون لديك لون مختلف لكل قسم من صفحتك. يمكن القيام بذلك بسهولة باستخدام ميزة "البحث والاستبدال" أيضًا.

بالنسبة لهذا النموذج التالي ، قم بإنشاء صفحة جديدة وقم بتسمية صفحتك بشيء مثل "متعدد الألوان". ثم انشر المنشئ المرئي ، وحدد "اختيار تخطيط مسبق الصنع" واستورد نفس التخطيط المحفوظ (البني) إلى الصفحة (تمامًا كما فعلت من قبل). في المنشئ المرئي ، افتح إعدادات Fullwidth Header وابحث عن Button One Text Color (تمامًا كما كان من قبل). انقر بزر الماوس الأيمن على الزر "لون نص واحد" وحدد "بحث واستبدال". ثم قم بتحديث ما يلي:

ضمن: هذا القسم
استبدل بـ: # 0f1f2e
حدد استبدال الكل

ثم انقر فوق الزر "استبدال".

لا تنس حفظ الإعدادات.

يتم تحديث هذا في قسم الرأس العلوي باستخدام نظام الألوان الأزرق الداكن.

الآن تخطي القسم الثاني (يمكنه الحفاظ على نظام اللون البني) وانتقل إلى القسم الثالث. ابحث عن الزر الموجود أسفل القسم بعنوان "هل ما زلت غير متأكد؟ ابقى على تواصل". افتح إعدادات الزر ، وانقر بزر الماوس الأيمن على لون خلفية الزر ، وحدد "بحث واستبدال".

ثم قم بتحديث Find & Replace كما يلي:

ضمن: هذا القسم
استبدل بـ: # 366ba2
حدد استبدال الكل

ثم انقر فوق زر الاستبدال. ولا تنس حفظ الإعدادات.

تخطي القسم الخامس. ثم كرر نفس العملية لاستبدال اللون البني في القسم السادس (القسم "الشركات والأشخاص الذين عملت معهم") بنفس اللون الأزرق الداكن في القسم الأول. يمكنك القيام بذلك عن طريق فتح وحدة النص بنص الاقتباس الكبير تحت خيار لون النص.

في القسم الأخير ، ابحث عن وحدة النص في العمود الأيمن وافتح إعدادات وحدة النص. انقر بزر الماوس الأيمن على لون الخلفية وحدد خيار البحث والاستبدال. قم بتحديث ما يلي:

ضمن: هذا القسم
استبدل بـ: # 5a5ae2 (اللون الأرجواني)
حدد استبدال الكل

ثم انقر فوق الزر "استبدال" وحفظ الإعدادات.

الآن لديك نموذج بالحجم الطبيعي للصفحة الرئيسية بألوان متعددة في كل قسم.

إنشاء قائمة لمعاينة كل نموذج بالحجم الطبيعي لمخطط الألوان

تتمثل الخطوة الأخيرة في إنشاء قائمة أساسية جديدة لتسهيل معاينة كل نموذج لمخطط الألوان على العملاء. من لوحة معلومات WordPress الخاصة بك ، انتقل إلى المظهر> القوائم. ثم قم بإعطاء عنوان للقائمة ، وانقر فوق إنشاء قائمة ، وأضف الصفحات التي قمت بإنشائها إلى قائمتك الجديدة. ثم تأكد من تحديد القائمة الأساسية كموقع العرض الخاص بك. وانقر فوق حفظ القائمة.

الآن لديك موقع جاهز لعرض نماذج مخطط الألوان الخاص بك.

افكار اخيرة

باستخدام خيارات تصميم Divi ، يمكنك بسهولة نشر مخططات ألوان جديدة تمامًا لتخطيطات صفحتك باستخدام اقتراحات الألوان المضمنة وخيار "البحث والاستبدال" باستخدام Visual Builder. سيجعل هذا الأمر مناسبًا لعرض نماذج أنظمة ألوان مختلفة لعملائك. آمل أن يساعدك هذا البرنامج التعليمي في العثور على مخطط الألوان المثالي لمشروعك التالي. أتطلع إلى الاستماع منك في التعليقات.

هتافات!