كيفية التبديل إلى تخطيط مظلم في 5 خطوات باستخدام ميزات كفاءة Divi

عند تصميم موقع ويب ، فإن أحد القرارات الأولى التي تتخذها بوعي أو بغير وعي هو نمط اللون الذي ستعطيه لموقع الويب الخاص بك. يجرؤ الشجعان بيننا على اختيار لوحة ألوان كاملة نابضة بالحياة ، لكن لنكن صادقين ، من الصعب جدًا تحقيق ذلك. هذا هو السبب في أنه من الأكثر أمانًا استخدام التصميم الفاتح أو الداكن. في قسم Premade Layouts في مكتبة Divi ، يمكنك العثور على الكثير من التخطيطات الفاتحة والداكنة التي يمكنك استخدامها مجانًا عند إنشاء أي نوع من مواقع الويب. ولكن ماذا لو أعجبك التصميم ، ولكنك تفضل استخدام لوحة ألوان أغمق أو العكس؟

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

دعنا نذهب اليها!

معاينة

في 5 خطوات فقط ، سنقوم بتغيير الصفحة المقصودة الخفيفة لحزمة Web Freelancer Layout Pack إلى صفحة مظلمة.

تحميل الصفحة المقصودة على شبكة الإنترنت لحسابهم الخاص

أضف صفحة جديدة & قم بتمكين Visual Builder

ابدأ بإضافة صفحة جديدة ، مع إعطاء عنوان لصفحتك والانتقال إلى Visual Builder.

تحميل حزمة Web Freelancer Layout

من بين الخيارات الثلاثة التي تظهر على شاشتك ، اختر تحميل تخطيط معدة مسبقًا.

ابحث عن الصفحة المقصودة لحزمة Web Freelancer Layout Pack في قائمة حزم التخطيط المجانية وقم بتحميلها بالنقر فوق الزر الأخضر الذي يشير إلى "استخدام هذا التخطيط".

الخطوة 1: تغيير لون الخلفية العام

تغيير لون خلفية القسم للقسم الأول

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

تمديد النمط لجميع الأقسام

بمجرد إضافة لون الخلفية ، انقر بزر الماوس الأيمن فوقه وانقر فوق خيار "تمديد لون الخلفية".

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

الخطوة 2: تغيير ألوان النص

افتح وحدة الرأس ذات العرض الكامل وتغيير لون النص

الخطوة التالية التي يتعين عليك اتخاذها هي تغيير ألوان النص التي يتم استخدامها. كما قد تعرف أو لا تعرف ، هناك خيار افتراضي في Divi يسمح لك باختيار لوحة ألوان فاتحة أو داكنة للنص على صفحتك. بمجرد اختيار لون مخصص ، يتم استبدال هذا الخيار باللون المخصص الذي اخترته. بدلاً من التحقق من كل عنصر من العناصر لمعرفة ما إذا كان هناك لون مخصص هناك ، امض قدمًا واختر "Light" كلون للنص في Fullwidth Header Module.

تمديد النمط لجميع الوحدات

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

تمديد هذا اللون الجديد لجميع الوحدات في جميع أنحاء الصفحة بأكملها.

تغيير الألوان المخصصة باستخدام ميزة التحديد المتعدد

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

الآن ، يمكنك إجراء تغييرات تنطبق على كل وحدة من الوحدات المحددة في نفس الوقت. في هذه الحالة ، نقوم بتغيير لون نص العنوان إلى "# 848484".

الخطوة 3: تغيير الأزرار

افتح إعدادات الزر الأول الخاصة برأس العرض الكامل

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

توسيع نمط الزر إلى كافة الأزرار الموجودة في الصفحة

ثم ، انقر بزر الماوس الأيمن فوق إعدادات Button One وحدد خيار "Extend Button One Styles".

تمديد نمط الزر لجميع الأزرار في جميع أنحاء الصفحة بأكملها.

تغيير لون نص الزر 2 في قسم Hero

لا تصل ميزة التمديد إلى الزر الثاني لوحدة رأس Fullwidth لأنها ليست وحدة قائمة بذاتها. لهذا السبب سنقوم بفتح إعدادات Button Two وتغيير لون النص إلى "#ffffff".

قم بتوسيع الأنماط إلى كافة رؤوس Fullwidth في الصفحة

للتأكد من تطبيق لون النص هذا على جميع وحدات Fullwidth Header على الصفحة ، سنقوم بتوسيعه أيضًا.

بمجرد النقر بزر الماوس الأيمن فوق لون النص وتحديد خيار "Extend Button Two Text Color" ، امض قدمًا واجعله ينطبق على جميع رؤوس Fullwidth في جميع أنحاء الصفحة بأكملها.

الخطوة 4: إزالة الهامش المخصص واستبداله بالحشو المخصص

إزالة الهامش المخصص

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

استخدم حشوة مخصصة بدلاً من ذلك

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

الخطوة 5: البحث عن وتغيير إعدادات التصميم الخاصة

تحديد إعدادات التصميم الخاصة

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

• مربع الظلال
• خلفيات العمود
• ألوان الأيقونة
• ألوان المقسم
• ...

استخدم البحث والاستبدال على لون ظل مربع الصف

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

يعد استخدام ميزة Find & Replace هو أفضل طريقة للذهاب إذا كنت تريد تغيير رمز لون معين على الصفحة بأكملها. يمكنك استبداله بسهولة برمز لون آخر ، في هذه الحالة "# 33302f". سيضمن هذا أنك لست مضطرًا لاستكشاف جميع عناصر التصميم لمعرفة مكان استخدام اللون بالضبط.

قم بتغيير الإعدادات التي تحدث لمرة واحدة يدويًا

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

معاينة

دعنا نلقي نظرة أخيرة على النتيجة النهائية بعد استعراض الخطوات الخمس.

افكار اخيرة

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