كيفية تغيير أنماط حزمة التصميم بسرعة باستخدام Find & Reliver

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

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

ما هو البحث والاستبدال في Divi 5

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

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

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

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

كيف تجد واستبدال أنماط تخطيط أسرع

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

باستخدام البحث والاستبدال في Divi 5

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

قل أنك تريد زيادة حجم الخط لجميع عناوين صفحتك. ابدأ بالنقر فوق أي وحدة عنوان داخل البناء المرئي. انتقل إلى الإعدادات> التصميم> نص العنوان> نص خط الخط H1. انقر بزر الماوس الأيمن فوق أو تحوم للعثور على خيار Find & Relive من بين أمور أخرى.

هذا يفتح لوحة Find واستبدالها بالعديد من الخيارات:

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

على سبيل المثال ، نقوم باستبدال حجم الخط من 30 بكسل إلى مشبك السوائل (20 بكسل ، 4VW ، 50 بكسل). لقد اخترنا صفحة كاملة وجميع العناصر لأننا نريد تحديث جميع العناوين على الصفحة.

انقر فوق الزر "العثور على واستبدال" ، وشاهد ما يحدث. جميع العناوين مع حجم خط 30 بكسل الآن لها قيمة المشبك السائل ().

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

تعلم كل شيء عن اكتشاف Divi واستبداله

باستخدام متغيرات التصميم في البحث والاستبدال

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

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

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

هذا يجعل المتغير متاحًا عبر جميع حقول حجم الخط. الآن يأتي السحر: يمكنك استخدامه مباشرة في لوحة Find واستبدالها لتعيين المتغير المحفوظ لجميع أحجام الخطوط في وقت واحد.

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

انقر فوق البحث واستبدل لتطبيق التغيير. ستشير جميع العناوين التي تستخدم 30 بكسل الآن إلى متغير حجم خط H3 بدلاً من رقم ثابت.

هنا حيث يصبح الأمر مثيرًا للاهتمام. هل تحتاج إلى ضبط حجم الخط لاحقًا؟ انتقل إلى متغير المدير ، وافتح متغير حجم خط H3 ، وقم بتغيير القيمة. قم بتحديث المشبك إلى المشبك (24px ، 5vw ، 60px) ، وكل عنوان باستخدام هذا التحديثات المتغيرة تلقائيًا.

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

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

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

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

كيفية استبدال الأنماط عبر حزمة التخطيط

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

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

1. قم بتدقيق أنماط تصميم التصميم الخاصة بك

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

• أحجام الخط: يتم استخدام 30 بكسل لجميع عناوين H3 ، و 48 بكسل لـ H2S عبر صفحات متعددة
• الخطوط: يتم استخدام Poppins باستمرار لجميع العناوين
• الزر الأساسي: لون الخلفية هو #4449e0 مع نص أبيض
• الحشو: تستخدم معظم الأقسام 60 بكسل أعلى وأسفل
• أيقونات Blurb: تم ضبط حجم الرمز على 24 بكسل
• حدود الضرب: لا يتم تطبيق حدود على وحدات Blurb
• خلفيات القسم: يظهر اللون الأخضر #47BE68 في قسم تذييل في كل صفحة تقريبًا

يتم إدخالها يدويًا كقيم ثابتة داخل كل وحدة. على سبيل المثال ، تستخدم وحدة Blurb #4449E0 للون الأيقوني وعرض 24 بكسل.

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

تخلق خطوة التدقيق هذه الأساس لكل ما يلي. يساعدك على بناء نهج منهجي يبقي تخطيطك متسقًا ويمكن صيانته.

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

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

إنشاء متغير لون

في المثال السابق ، وجدت أن أيقونات Blurb تستخدم اللون #4449e0 ، لكنني أريد تبديل ذلك إلى لون علامتي التجارية الأساسية ، #6C012A. للقيام بذلك ، سأقوم بإنشاء متغير لون.

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

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

إنشاء متغير رقم

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

إنشاء متغير خط

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

لقد تم. سيتم الآن اختيار هذا الخط في جميع حقول النصوص في جميع أنحاء التصميم.

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

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

3. استخدم البحث واستبدل لتطبيق المتغيرات

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

تغيير ألوان الرموز

أولاً ، دعنا نغير لون الرموز إلى متغير لون العلامة التجارية الأساسي المحفوظ. انتقل إلى إعدادات Blurb> Design> Image & Icon. الآن ، تحوم فوق خيار لون الأيقونة وانقر على النقاط الثلاثة. اختر البحث والاستبدال .

على لوحة Find and Relive ، كل ما عليك فعله هو التحول لتحديد موقع أيقونة Manager المتغير وحدد المتغير الخاص بك.

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

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

تغيير خط العناوين

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

تحديث عرض الحدود لجميع وحدات Blurb

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

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

خطوة المكافأة: إنشاء وحفظ الإعدادات المسبقة (اختيارية)

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

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

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

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

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

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

تعلم كل شيء عن إعدادات مجموعة خيارات Divi

بعد تطبيق جميع متغيرات التصميم المحفوظة ، إليك كيف تبدو الإصدارات قبل وبعد:

4. تطبيق نفس العملية على صفحات أخرى

بمجرد إعداد متغيرات التصميم والإعدادات المسبقة ، يصبح تحديث بقية حزمة التخطيط أسرع بكثير.

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

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

الصفحة المقصودة المحدثة في الدورة التدريبية باستخدام متغيرات العثور على Divi واستبدالها وتصميمها

قم بإجراء تعديلات على مستوى التصميم بالثواني مع Find and Replace

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

قمنا بتحويل حزمة تخطيط كاملة من قيم ثابتة متناثرة إلى نظام تصميم متصل. ما استغرقنا دقائق مع Find & Relation كان سيستغرق ساعات القيام بذلك بالطريقة القديمة ، الوحدة النمطية بواسطة الوحدة ، صفحة حسب الصفحة.

هذا لا يتعلق فقط بتوفير الوقت في هذا المشروع. أنت تقوم ببناء نظام تصميم سيجعل كل مشروع Divi مستقبلي أسرع وأكثر اتساقًا.