إدارة الخطوط وأحجام الخطوط مع Divi 5

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

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

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

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

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

• قابلية القراءة : اختر خطوط واضحة ، خاصة لنص الجسم.
• الاتساق : الحد من خطوطك - يعمل اثنان أو ثلاثة أفضل ، مع واحد على الأقل للعناوين وواحدة لنص الجسم.
• الاستجابة : تأكد من أن الخطوط تتكيف مع أحجام الشاشة المختلفة (من الناحية المثالية من 320 بكسل إلى 1440 بكسل).
• التوافق : اختر الخطوط الآمنة على الويب أو الخطوط الشائعة لتجنب مشكلات العرض.

كيفية إدارة الخطوط وأحجام الخطوط في Divi 5

دعنا نستخدم تخطيطًا مسبقًا من مكتبة Divi. سنختار تخطيط الصفحة المقصودة من حزمة "Business CV" وتجديد الطباعة باستخدام ميزات Divi 5 الجديدة. إذا كان لديك موقع Divi 5 موجود ولكنك ترغب في تحسين طباعته ، فيمكنك اتباع هذه الخطوات نفسها دون استخدام هذا التصميم.

الخطوة 1: اختيار أزواج الخطوط

مزج الزوجين الخطوط الجيدة النمط وقابلية القراءة. تعتبر خطوط Google أيضًا رهانًا آمنًا لأنها مدمجة في Divi وسهلة الاستخدام.

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

الخطوة 2: تعيين الخطوط للرأس والجسم الأساسي

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

هناك نوعان من المتغيرات الافتراضية للخطوط الأساسية لخطوط العنوان والجسم. انتقل إلى قسم الخطوط ، وقم بتعيين " Poppins " كخط العنوان و " Roboto " كخط الجسم.

اضبط خطوطك على أي شيء يتطابق مع متطلبات التصميم والعلامة التجارية

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

تأكد من حفظ المتغيرات الخاصة بك عند الانتهاء من إدخالها

الخطوة 3: إنشاء أحجام الخطوط

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

إن كيفية بناء تحجيم الخط الخاص بك لكل مستوى العنوان ونص الجسم وحالات النص الأخرى متروك لك تمامًا.

typogrphy السائل مع المشبك ()

Clamp () يتيح لك تعيين قيمة الحد الأدنى ، والقيمة المفضلة ، والقيمة القصوى. في منشور آخر ، نذهب بعمق حول المشبك () ونوفر طريقة سهلة لمعرفة تلك القيم. ولكن هنا مثال:

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

يمكنك اختبار تحجيم الخط في مستند HTML بسيط لرؤية الأشياء بمعزل عن ذلك (يمكن أيضًا القيام بذلك داخل Divi). إليك ما يبدو عليه تحجيم الخط أعلاه مع إقران الخط.

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

وحدات ثابتة مع نقاط التوقف

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

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

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

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

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

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

تعيين قيم ثابتة لنقاط التوقف

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

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

تعيين وظائف المشبك () (أسهل)

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

ستقوم بتعيين كل مستوى عناوين H1-H6 كجماعة جديدة مخصصة للمجموعة .

قم بتطبيق هذه الإعدادات المسبقة على عناوين التخطيط باستخدام إعدادات مجموعة الخيارات التي قمت بإنشائها. إن Beauty of Option Group Presets هو أنها تعمل عبر وحدات مجموعة الخيارات هذه ، مثل وحدات النص ، والضوء ، ووحدات الرأس.

أفضل الممارسات للخطوط في Divi 5

لتعظيم الطباعة الخاصة بك ، ضع هذه النصائح في الاعتبار:

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

الطباعة في Divi 5 هي نفس من الهواء النقي

أنت الآن تمتلك نظام طباعة كامل بفضل أحدث ميزات Divi.

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

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

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