كيفية استبدال الأنماط الثابتة بمتغيرات تصميم Divi 5

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

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

Divi 5 جاهز للاستخدام على مواقع الويب الجديدة.

ما هي "الأساليب الثابتة"؟

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

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

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

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

كيف يجعل Divi 5 استبدال الأساليب الساكنة سهلة

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

تتيح لك متغيرات التصميم تحديد أنماطك العالمية

مع Divi 5 ، يمكنك أخيرًا إنشاء إطار التصميم الخاص بك بصريًا واستخدامه لتعديل أنماط علامتك التجارية بسرعة.

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

داخل البناء المرئي ، يتيح لك المدير المتغير إنشاء وتنظيم المتغيرات في ستة أنواع مختلفة: الألوان والخطوط والأرقام (مثل التباعد أو الأحجام) والنص والصور والروابط.

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

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

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

لاحظ القيم المتغيرة في الوقت الفعلي في حقول الإعداد المطبقة؟ هذه هي قوة نظام التصميم العالمي.

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

تعلم كل شيء عن متغيرات التصميم

ابحث واستبداله يتيح لك التبديل من الأساليب الثابتة إلى العالمية

تتيح لك ميزة Divi 5's Find and Replive تحديث قيم النمط بسرعة عبر تخطيطك دون تحرير كل وحدة نمطية بشكل فردي. إنه مصمم لمساعدتك على تغيير القيم الثابتة مثل الألوان أو الخطوط أو التباعد أو أي إعداد آخر يتكرر عبر الأقسام من نقطة انطلاق واحدة بنقرات قليلة فقط.

لاستخدامه ، انقر بزر الماوس الأيمن على أي حقل نمط داخل البناء المرئي أو التحوم والنقر فوق النقاط الثلاثة. سترى خيار Find & Replace في القائمة المنسدلة.

هذا يفتح لوحة اكتشاف واستبدال جديدة. هنا ، يمكنك إجراء التغييرات المطلوبة وتطبيقها بكميات كبيرة.

• (1.) عنصر المصدر: الإعداد الذي تستهدفه (على سبيل المثال ، النص أو اللون أو التباعد). افتح القائمة المنسدلة ، وستلاحظ أنه في الواقع التسلسل الهرمي للطبقات.
• (2.) ابحث عن القيمة: القيمة الدقيقة التي تريد استبدالها ، مثل خط محدد أو رمز اللون.
• (3.) استبدال القيمة: القيمة الجديدة أو المتغير الذي تريد تطبيقه بدلاً من ذلك.
• (4.) ابحث واستبدالها في الموقع: اختر مكان تطبيق التغيير. هذه الوحدة أو القسم أو الصفحة بأكملها.
• (5.) ابحث واستبدالها في نوع العنصر: حدد ما إذا كان التغيير يجب أن ينطبق على جميع العناصر أو أنواع الوحدات النمطية المحددة فقط.
• (6.) استبدال الحقول المتطابقة فقط: عند تمكينها ، تحدث البدائل فقط إذا كان الإعداد والقيمة متطابقة تمامًا.

إليكم كيف يعمل. دعنا نقول أنك تريد تغيير خط العنوان المستخدم عبر الصفحة. بدلاً من الذهاب إلى الوحدة النمطية ، سنستخدم لوحة Find and Reliped.

عندما تفتحه من إعدادات العنوان ، يتم اختيار عنصر المصدر تلقائيًا ، لذلك لا يتعين عليك دائمًا اختياره يدويًا.

(يمكنك أيضًا النقر على عناصر مختلفة ، وسيتم ضبط خيارات اللوحة تلقائيًا.)

في قيمة البحث ، أدخل القيمة المراد استبدالها. على سبيل المثال ، إنه Medula One ، الخط المطبق الحالي. في استبدال القيمة ، اختر القيمة الجديدة التي تريد تطبيقها. دعنا نختار Aclonica.

ثم حدد ما إذا كنت تريد تحديث جميع الحالات في الصفحة بأكملها أو فقط العمود أو الصف أو القسم في البحث والاستبدال في الموقع. احتفظ بالبحث والاستبدال في نوع العناصر كجميع العناصر لأننا نريد استهداف جميع وحدات العنوان.

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

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

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

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

تعلم كل شيء عن البحث واستبدل

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

كيفية استبدال الأنماط الثابتة مع المتغيرات المحفوظة

الآن بعد أن عرفت الأدوات التي سنستخدمها ، فقد حان الوقت لرؤيتها في العمل.

للتجول في هذه العملية ، قمت باستيراد تخطيط صفحة Pie Shop Landing Page كمثال. تم تطبيق تفاصيل تصميم هذا التصميم ، مثل الخطوط والألوان والتباعد ، كأنماط ثابتة. تتطلب منك الطريقة التقليدية تخصيص وحدةه حسب الوحدة النمطية. ولكن في هذا البرنامج التعليمي ، سنستبدلها خطوة بخطوة باستخدام سير العمل الذي قمنا بتغطيته للتو.

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

1. احفظ متغيرات التصميم الخاصة بك

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

• عرض حدود الصف
• زر الحشو
• النص
• نص الجسم
• لون نص الجسم

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

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

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

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

2. استخدم البحث واستبدله لتبديل الأنماط الثابتة إلى المتغيرات

من خلال متغيرات التصميم الخاصة بنا جاهزة ، فإن الخطوة التالية هي استبدال القيم الثابتة عبر التخطيط باستخدام Find and Replace. لنبدأ بحشو الزر.

في الوقت الحالي ، يستخدم كل زر حشوة تم إدخالها يدويًا: 6 بكسل للأعلى والأسفل ، و 1 بكسل لليسار واليمين. لجلب الاتساق وجعل التحديثات أسهل ، قمت بإنشاء متغيرين:

• زر T = 12px للحشوة العلوية والسفلية.
• زر L = 32px للحشو الأيسر واليمين.

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

في لوحة Find and Replace ، سأستبدل القيمة الثابتة الموجودة بالمتغير المحفوظ من المدير المتغير.

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

يمكنك متابعة نفس الخطوات لأي أنماط ثابتة أخرى حددناها سابقًا. استخدم Find and Replace لمبادلة كل واحد بمتغيراتك المحفوظة ، وسوف ينتهي بك الأمر بتخطيط متصل بالكامل بنظام التصميم العالمي الخاص بك.

3. تحويل الأنماط المفضلة لديك إلى إعدادات مسبقة (اختيارية)

هذه الخطوة اختيارية لنطاق هذه المقالة ، لكنها طريقة قوية لتوسيع نظام التصميم الخاص بك.

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

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

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

يعد تحديث أنماط صفحتك أسهل من أي وقت مضى

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

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

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

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

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

هذه هي القيمة الحقيقية للتبديل إلى المتغيرات: يصبح التصميم بالكامل أسهل في إدارته. وعندما يسأل عميلك عن تغيير سريع للعلامة التجارية الشهر المقبل؟ ستتم القيام به قبل الانتهاء من القهوة.

اجعل التعديلات السائبة سهلة مع البحث والاستبدال

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

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

تم تصميم Divi 5 لدعم كيفية تصميم الأشخاص الحقيقيين. والآن ، يمكن أن يكون نظام التصميم الخاص بك مرنًا مثل أفكارك.