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

ما أهمية التباعد بين الأسطر؟

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

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

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

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

كيفية ضبط تباعد الأسطر في ووردبريس

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

1 、 ضبط تباعد الأسطر في محرر Gutenberg

يوفِّر محرِّر المكوِّن الافتراضي في ووردبريس، Gutenberg، بعض التحكم الأساسي في تباعد الأسطر. إذا كنتَ تستخدم محرِّر غوتنبرغ، فاتبع هذه الخطوات لضبط ارتفاع السطر:

الخطوات:

• حدد الفقرة: افتح صفحة ووردبريس أو المقالة التي تريد تحريرها، وانقر على كتلة الفقرة التي تتطلب تعديل المسافات.

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

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

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

2 、تعديل تباعد الأسطر باستخدام HTML مخصص في Gutenberg

يمكنك إضافة مخصص CSS مضمنة في Gutenberg لتحكم أكثر دقة في الفقرات أو العناصر الفردية.

الخطوات:

• التبديل إلى وضع الرمز: حدد المكوِّن الذي تريد تحريره وانقر على قائمة النقاط الثلاث في شريط أدوات المكوِّن. اختر "التحرير بتنسيق HTML" للتبديل إلى عرض الرمز.

• إضافة رمز ارتفاع الخط: تعديل <mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-light-green-cyan-color"><p></mark> (أو أي علامة HTML تستخدمها) بإضافة خاصية ارتفاع السطر. على سبيل المثال:

<p style="line-height: 1.8em;">هذه فقرة مع زيادة المسافات بين الأسطر.</p>

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

يحتوي هذا المكوِّن على محتوى غير متوقع أو غير صالح. حدد تحويل إلى مكوِّن كلاسيكي.

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

3 、 ضبط تباعد الأسطر في المحرر الكلاسيكي

إذا كنتَ لا تزال تستخدم المحرِّر الكلاسيكي، يسمح لك ووردبريس بضبط تباعد الأسطر في كل من المحرِّر المرئي وكود HTML.

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

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

• استخدام محرر النصوص (طريقة عرض HTML):
  • انقر على "النص" في المُحرِّر التقليدي للتبديل إلى عرض HTML.
  • أضف CSS مضمنة مباشرة إلى HTML الخاص بالفقرة:

<p style=" line-height: 1.7;">سيكون ارتفاع السطر في هذه الفقرة 1.7.</p>

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

4 、 ضبط تباعد الأسطر من خلال أداة تخصيص القالب

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

الخطوات:

• افتح أداة تخصيص القالب: من لوحة تحكم ووردبريس، انتقل إلى المظهر > التخصيص.

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

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

مثال على ذلك: لنفترض أنك تستخدم قالبًا مثل Astra أو GeneratePress، الذي يوفر عناصر تحكم مفصلة في الطباعة. عيّن ارتفاع السطر العام للنص الأساسي إلى 1.6 وزد ارتفاع السطر للعناوين إلى 1.2. سيمنح هذا موقعك تخطيطًا متوازنًا وقابلًا للقراءة مع تباعد أكثر إحكامًا بين العناوين وتباعد أكثر استرخاءً للنص الأساسي.

بدلاً من ذلك، إذا لم يكن القالب الخاص بك يوفر عناصر التحكم هذه، يمكنك استخدام "CSS إضافية" لإضافة قواعد CSS عامة، مثل إضافة قواعد CSS يدويًا

p {

  ارتفاع الخط: 1.6;

}

يضمن ذلك أن تحافظ كل فقرة في موقعك على مسافات متناسقة ومقروءة بين الأسطر.

5 、 استخدام ملحقات ووردبريس لضبط تباعد الأسطر

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

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

الخطوات:

• تثبيت المكوّن الإضافي المباعد: من لوحة التحكم، انتقل إلى المكونات الإضافية > إضافة جديد المكوّن الإضافي، ابحث عن "فاصل،"، وتثبيته وتفعيله.

• إضافة كتل فاصلة في جوتنبرج: في محرر Gutenberg، انقر على "+" لإضافة مكوِّن، وابحث عن "فاصل"، واسحبه بين الفقرات أو الصور أو العناصر الأخرى.
• ضبط ارتفاع المباعد: بمجرد إضافة مكوِّن المباعد، استخدم مقابض السحب لضبط ارتفاعه أو أدخل قيمة محددة في إعدادات المكوِّن.

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

الخاتمة

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