كيفية تطبيق النص البديل الذي يؤكد الأنماط في Divi

لطالما كانت أنماط تسطير النص محدودة للغاية. الطريقة الأكثر شيوعًا لتسطير النص على الويب هي استخدام خاصية CSS "زخرفة النص: تسطير". تسمح لك Divi حتى بنشر هذا النوع من التسطير وتصميمه داخل إعدادات Divi Builder Module. لكن هذه الطريقة القياسية للتسطير تأتي مع قيود عندما يتعلق الأمر بالأسلوب ودعم المتصفحات.

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

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

هيا بنا نبدأ.

تسطير النص بزخرفة النص (طريقة شائعة)

الطريقة الأكثر شيوعًا والمباشرة لتسطير النص هي استخدام خاصية زخرفة النص CSS. في الواقع ، تسمح لك Divi بتصميم النص باستخدام هذه الطريقة بسهولة ضمن الخيارات المضمنة في الوحدة النمطية. ما عليك سوى البحث عن خيار Text Font Style وتحديد رمز " U " لنشر زخرفة النص المسطر. بمجرد تحديد نمط خط التسطير ، سيكون لديك أيضًا خيار تخصيص لون ونمط التسطير.

يتيح لك ذلك الحصول على لون تسطير مختلف عن لون النص الفعلي.

ويمكنك الاختيار من بين أنماط التسطير التالية:

• صلب
• مزدوج
• منقط
• متقطع
• تموجي

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

زخرفة النص تسطير قيود النمط

يفتقر إلى القدرة على ضبط عرض وموضع الخط

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

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

يفتقر إلى دعم المتصفح

لا يدعم Internet Explorer نمط زخرفة النص أو خاصية لون زخرفة النص ، لذلك لا يمكن تخصيص نمط التسطير (مزدوج ، منقط ، متقطع ، إلخ ...) ولون التسطير. لا يدعم Safari خاصية نمط زخرفة النص ولكن يمكنك تغيير لون التسطير.

لا يقتصر هذا النقص في الدعم على Divi. حتى CSS المخصص لن يساعدك.

تسطير النص باستخدام حد سفلي

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

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

قيود استخدام الحدود السفلية للتسطير

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

فهم الفرق بين العناصر المضمنة والكتلة

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

عناصر الكتلة

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

تتضمن بعض أمثلة عناصر الكتلة الشائعة ما يلي:

• أقسام Divi ، صفوف ، وحدات (div)
• نص أساسي أو فقرات (ص)
• العناوين (h1، h2، h3، h4، h5، h6)
• القوائم (ol ، ul)

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

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

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

العناصر المضمنة

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

فيما يلي مثال على بعض الروابط (التي تكون عناصر مضمنة بشكل افتراضي) التي تحتوي على تسطير حد سفلي.

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

كيفية إضافة تسطير الحد السفلي إلى سطر نص واحد (عنصر كتلة)

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

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

Underlining Typography

ثم قم بتحديث إعدادات وحدة النص على النحو التالي:

• حجم نص النص: 46 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 26 بكسل (هاتف)
• ارتفاع خط النص: 1.8em
• العرض: 517 بكسل (سطح المكتب) ، 450 بكسل (الجهاز اللوحي) ، 293 بكسل (الهاتف)
• عرض الحد السفلي: 2 بكسل
• لون الحد السفلي: # 0c71c3
• نمط الحد السفلي: منقط

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

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

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

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

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

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

نظرًا لأننا سنضيف تسطير حد سفلي ، فلنزيد ارتفاع سطر العنوان h1 على النحو التالي:

بعد ذلك ، أضف معرف CSS المخصص التالي ضمن علامة التبويب المتقدمة:

معرف CSS: تسطير الحدود

بعد ذلك ، افتح صيغة إعدادات الصفحة وأضف CSS المخصص التالي:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

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

يمكن تخصيص خاصية border-bottom كيفما تشاء. تحدد القيمة الأولى (2 بكسل) سمك (أو عرض) الحد. تحدد القيمة الثانية (متقطع) نمط الحد. لا تنس ، يمكنك أيضًا استخدام أنماط الحدود التالية: متقطع ، ومنقط ، ومزدوج ، وأخدود ، وحافة ، وإدراج ، وبداية. والقيمة الثالثة (# 0c71c3) تحدد لون الحد. يمكنك أيضًا تعديل مساحة الحشو المخصصة بالتزامن مع قيمة ارتفاع سطر النص في الخيارات المضمنة في وحدة النص للحصول على التباعد بشكل صحيح أيضًا.

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

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

لاحظ أن ملف css هذا يستهدف علامة h1. بالإضافة إلى الحدود السفلية وأنماط الحشو ، فإن "display: inline" تقوم بتغيير علامة h1 إلى عنصر مضمن يسمح لنص h1 بأن يكون تحته خط على عدة أسطر.

إضافة تسطير حد سفلي إلى روابط مضمنة في Divi

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

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

ثم أضف فئة CSS مخصصة ضمن علامة التبويب خيارات متقدمة على النحو التالي:

فئة CSS: تسطير الحدود

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

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

يمكن تخصيص خاصية الحد السفلي كما تريد. تحدد القيمة الأولى (1 بكسل) سمك (أو عرض) الحد. تحدد القيمة الثانية (صلبة) نمط الحد. لا تنس ، يمكنك أيضًا استخدام أنماط الحدود التالية: متقطع ، ومنقط ، ومزدوج ، وأخدود ، وحافة ، وإدراج ، وبداية. والقيمة الثالثة (# 333333) تحدد لون الحد.

لذلك إذا كنت تريد تسطير حد سفلي بعرض 2 بكسل بنمط متقطع ولون مختلف ، فيمكنك استبدال هذه القيم بشيء مثل هذا:

border-bottom: 2px dashed #0c71c3;

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

padding: 0.3em 0;

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

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

ماذا عن المقسمات؟

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

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

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

• خلفية متدرجة اللون الأيسر: # 2b87da
• تدرج الخلفية اللون الصحيح: # 29c4a9
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• اللون: #ffffff
• وزن الحاجز: 2 بكسل
• الارتفاع: 2 بكسل
• العرض: 400 بكسل (سيحتاج هذا إلى تعديله وفقًا لعرض النص أعلاه)
• الحشو المخصص: 5 بكسل للأعلى ، 5 بكسل للأسفل

افكار اخيرة

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

كما هو الحال دائمًا ، أتطلع إلى الاستماع منك في التعليقات.

هتافات!