كيفية استبدال الخطوط بمتغيرات تصميم خطوط Divi 5

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

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

لماذا يمكن للخطوط الثابتة أن تخلق مشاكل

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

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

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

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

ما يجب استخدامه بدلاً من ذلك: متغيرات تصميم Divi 5

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

يقدم Divi ستة أنواع متغيرة: الأرقام والنص والصور والروابط والألوان والخطوط. متغيران للخطوط الافتراضية جاهزة للاستخدام: واحد للعناوين وواحد لنص الجسم. يوجد المدير المتغير في الشريط الجانبي الأيسر تحت أيقونة قاعدة البيانات.

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

ما هو خيار مجموعة الإعدادات المسبقة

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

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

دليل خطوة بخطوة لإنشاء نظام خط ديناميكي مع Divi 5

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

1. إنشاء متغيرات الخط لنظامك الجديد

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

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

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

2. إضافة متغيرات الأرقام لأحجام الخطوط

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

ابدأ بأحجام العنوان. قم بإنشاء متغيرات تدعى H1 و H2 و H3 وما إلى ذلك. اضبط كل واحد على حجم مختلف أمر منطقي لتصميمك. يمكنك استخدام قيم البكسل العادية مثل 32 بكسل أو وحدات استجابة مثل Clamp () للأحجام التي تتكيف مع الشاشات الأخرى.

نص الجسم يحتاج إلى متغير حجمه أيضًا. نسميها شيئًا مثل "حجم الجسم" وقم بتعيينه على حجم قراءة مريح ، وعادة ما يكون حوالي 16 بكسل إلى 18 بكسل.

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

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

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

3. استخدم Find and Relappt to Swap Static Fonts

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

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

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

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

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

اضبط حدود الاستبدال الخاصة بك

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

يمكنك أيضًا استهداف الحاويات الأم أو مناطق صفحات محددة.

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

تجنب البدائل العرضية

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

هذا يحافظ على دائرة نصف قطرها الحدودية عند 10 بكسل حتى عندما تحل محل الخط الذي يطلق عليه "10px" أو شيء مشابه.

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

4. العمل من خلال نظام الخط الخاص بك

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

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

5. قم بإنشاء مسبقات مع متغيراتك

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

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

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

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

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

6. تمديد متغيراتك الجديدة عبر جميع العناصر

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

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

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

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

يحدد هذا النهج المنهجي تعارضات التنسيق مبكرًا ويتحكم في عملية التحديث.

Divi 5 يجعل الطباعة أسهل

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

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

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