يعد تباعد الأسطر، أو ارتفاع السطر، أمرًا بالغ الأهمية في تصميم الويب، خاصةً في المواقع الإلكترونية ذات النصوص الكثيرة. على الرغم من أنها قد تبدو تفاصيل صغيرة، إلا أن تباعد الأسطر المناسب يعزز بشكل كبير من سهولة قراءة المحتوى الخاص بك ويحسن تجربة المستخدم بشكل عام. سيشرح هذا الدليل سبب أهمية تباعد الأسطر ويرشدك إلى الطرق المختلفة لضبطه في ووردبريس، مع تقديم أمثلة لضمان حصولك على أفضل النتائج.
ما أهمية التباعد بين الأسطر؟
Line spacing directly affects the visual presentation of your website’s text and, in turn, your users’ experience. Here are a few reasons why it’s essential:
- تحسين سهولة القراءة: إذا كان النص الخاص بك متباعدًا بإحكام، فإن القراء يحتاجون إلى المساعدة في المتابعة، مما يؤدي إلى إجهاد العين والإحباط. من ناحية أخرى، يمكن أن تسهل المسافات المفرطة على المستخدمين الحفاظ على التركيز. يعمل التوازن الصحيح على تحسين تدفق المحتوى الخاص بك، مما يسهل قراءته واستيعابه.
- جماليات أفضل: يبدو الموقع الإلكتروني ذو المسافات الجيدة أنظف وأكثر احترافية. على سبيل المثال، تبدو المدونة ذات المسافات المناسبة بين الأسطر والأقسام أكثر جاذبية وتنظيماً من كتل النصوص المشوشة التي يصعب قراءتها.
- التأثير على تفاعل المستخدمين: User engagement is often linked to readability. If visitors find your content difficult to follow, they are likely to bounce off your site quickly. Proper line spacing increases users’ chances of staying longer, consuming more of your content, and interacting with your website.
Example: In an ideal world, users read content carefully, reflecting before clicking links. In reality, they skim for something clickable, often hitting the back button if it’s not what they want. Clear, well-spaced content helps users find what they need, while cluttered text leads to frustration and higher bounce rates.
Suppose you want to learn more about optimizing your website’s user experience through line spacing. In that case, it is recommended that you read some materials on web readability and user experience design, such as Don’t Make Me Thinkكتاب يقدم العديد من النصائح المفيدة في التصميم.
كيفية ضبط تباعد الأسطر في ووردبريس
اعتمادًا على احتياجاتك وتفضيلاتك، يوفر ووردبريس عدة طرق لضبط تباعد الأسطر، بدءًا من المحررين المدمجين إلى الترميز المخصص والإضافات. فيما يلي الطرق الأكثر شيوعاً، مع أمثلة لإرشادك.
1 、 ضبط تباعد الأسطر في محرر Gutenberg
WordPress’s default block editor, Gutenberg, provides some essential control over line spacing. If you’re using the Gutenberg editor, follow these steps to adjust line-height:
الخطوات:
- حدد الفقرة: افتح صفحة ووردبريس أو المقالة التي تريد تحريرها، وانقر على كتلة الفقرة التي تتطلب تعديل المسافات.
- البحث عن إعدادات الطباعة: In the right-hand settings panel, locate the “الطباعة” section.
- ضبط ارتفاع الخط: Under the typography settings, you will find an option for “Line Height.” You can increase or decrease the spacing by adjusting the numeric value or entering a custom number.
مثال على ذلك: لنفترض أن لديك كتلة نصية متباعدة بشكل ضيق للغاية، مما يجعل من الصعب قراءتها. إذا كان الارتفاع الافتراضي للسطر هو 1.4، فإن زيادته إلى 1.8 أو 2.0 سيوفر مساحة أكبر بين الأسطر، مما يحسن من إمكانية القراءة.
هذه طريقة سهلة لضبط تباعد الأسطر للفقرات الفردية أو الكتل النصية. ومع ذلك, CSS مخصص قد يكون أكثر فعالية إذا كنت تحتاج إلى تحكم أكثر دقة أو تحتاج إلى ضبط المسافات على مستوى الموقع.
2 、تعديل تباعد الأسطر باستخدام HTML مخصص في Gutenberg
يمكنك إضافة مخصص CSS مضمنة في Gutenberg لتحكم أكثر دقة في الفقرات أو العناصر الفردية.
الخطوات:
- التبديل إلى وضع الرمز: Select the block you want to edit and click on the three-dot menu in the block toolbar. Select “التحرير بتنسيق HTML” to switch to code view.
- إضافة رمز ارتفاع الخط: تعديل
<mark class="has-inline-color has-light-green-cyan-color amp-wp-cefb454" data-amp-original-style="background-color:rgba(0, 0, 0, 0)"><p></mark>(أو أي علامة HTML تستخدمها) بإضافة خاصية ارتفاع السطر. على سبيل المثال:
<p style="line-height: 1.8em;">هذه فقرة مع زيادة المسافات بين الأسطر.</p>مثال على ذلك: Let’s say your website uses a formal tone, and you want each paragraph in an article to have a slightly wider spacing for readability. Using the above method, you can set the line spacing for individual paragraphs to 1.8 em, which makes it easier for users to digest long pieces of text.
يحتوي هذا المكوِّن على محتوى غير متوقع أو غير صالح. حدد تحويل إلى مكوِّن كلاسيكي.
توفر هذه الطريقة مرونة، مما يسمح لك بضبط ارتفاع السطر لكتل أو عناصر نصية محددة.
3 、 ضبط تباعد الأسطر في المحرر الكلاسيكي
If you’re still using the Classic Editor, WordPress allows you to adjust line spacing in both the visual editor and HTML code.
- استخدام القائمة المنسدلة للتنسيق:
- قم بتمييز الفقرة التي تريد تغييرها.
- In the toolbar, look for a dropdown menu labelled “Format.” Depending on your theme, there may be preset line heights like 1.5, 2.0, etc.
مثال على ذلك: إذا كان قالبك يسمح بذلك، فيمكنك تعيين النص الأساسي للنص بأكمله ليكون ارتفاع السطر موحدًا بمقدار 1.6 أو 1.8. هذا مفيد للمدونات أو المحتوى الطويل، مما يضمن أن يكون لكل مقالة مسافات متناسقة.
- استخدام محرر النصوص (طريقة عرض HTML):
- Click the “النص” tab in the Classic Editor to switch to HTML view.
- أضف CSS مضمنة مباشرة إلى HTML الخاص بالفقرة:
<p style=" line-height: 1.7;">سيكون ارتفاع السطر في هذه الفقرة 1.7.</p>
مثال على ذلك: بالنسبة لأولئك الذين يبحثون عن مزيد من التحكم في الأقسام ذات الفقرات الطويلة أو النقاط النقطية، يتيح لك ضبط تباعد الأسطر يدويًا باستخدام HTML تخصيص أجزاء محددة من صفحتك مع ترك العناصر الأخرى دون تغيير.
4 、 ضبط تباعد الأسطر من خلال أداة تخصيص القالب
توفر العديد من قوالب ووردبريس عناصر تحكم في تباعد الأسطر مباشرةً من خلال أداة تخصيص القالب. تُعد هذه الطريقة مثالية لتطبيق تباعد أسطر متسق عبر موقعك بالكامل دون تعديل المقالات أو الصفحات الفردية.
الخطوات:
- افتح أداة تخصيص القالب: من لوحة تحكم ووردبريس، انتقل إلى المظهر > التخصيص.
- البحث عن إعدادات الطباعة: Depending on your theme, a section will be labelled “الطباعة" أو "الأنماط العالمية.” In this section, look for an option to adjust the line height.
- ضبط ارتفاع الخط على مستوى العالم: توفر بعض القوالب شريط تمرير أو مربع إدخال حيث يمكنك تعيين ارتفاع السطر لعناصر النص المختلفة، مثل النص الأساسي والعناوين وحتى الاقتباسات المكوِّنة.
مثال على ذلك: Let’s say you use a theme like Astra or GeneratePress, which offers detailed typography controls. Set the global line height for body text to 1.6 and increase the line height for headings to 1.2. This would give your site a balanced, readable layout with tighter heading spacing and more relaxed body text spacing.
Alternatively, if your theme does not provide these controls, you can use the “CSS إضافية” section to add global CSS rules, such as manually
p {
line-height: 1.6;
}
يضمن ذلك أن تحافظ كل فقرة في موقعك على مسافات متناسقة ومقروءة بين الأسطر.
5 、 استخدام ملحقات ووردبريس لضبط تباعد الأسطر
إذا كنت تفضل طريقة مرئية أكثر وتريد تجنب الترميز المخصص، يمكن أن تساعدك إضافات ووردبريس على إدارة تباعد الأسطر وعناصر التخطيط الأخرى بسهولة.
أحد هذه المكونات الإضافية هو فاصلوالتي تسمح لك بالتحكم في المسافة بين العناصر عن طريق إضافة كتل فارغة.
الخطوات:
- تثبيت المكوّن الإضافي المباعد: من لوحة التحكم، انتقل إلى المكونات الإضافية > إضافة جديد المكوّن الإضافي, search for “فاصل,” install, and activate it.
- إضافة كتل فاصلة في جوتنبرج: In the Gutenberg editor, click the “+” icon to add a block, search for “Spacer,” and drag it between paragraphs, images, or other elements.
- ضبط ارتفاع المباعد: بمجرد إضافة مكوِّن المباعد، استخدم مقابض السحب لضبط ارتفاعه أو أدخل قيمة محددة في إعدادات المكوِّن.
مثال على ذلك: Suppose you’re designing a landing page and want more breathing room between sections like headlines, images, and text. Inserting Spacer blocks allows you to visually adjust the spacing without touching any code.
الخاتمة
يعد ضبط التباعد بين الأسطر في ووردبريس أمرًا بالغ الأهمية لتعزيز سهولة القراءة والجماليات ومشاركة المستخدم. يضمن التباعد المناسب بين الأسطر سهولة قراءة النص الخاص بك وجعله جذابًا بصريًا. يقدِّم ووردبريس طرقًا متعددة لضبط تباعد الأسطر، بما في ذلك استخدام محرِّر Gutenberg، وHTML المخصص، والمحرِّر الكلاسيكي، ومخصص القالب، والإضافات مثل Spacer. توفر كل تقنية مرونة بناءً على احتياجاتك، بدءًا من ضبط كتل النص الفردية إلى تطبيق تعديلات على مستوى الموقع بأكمله. من خلال تحسين تباعد الأسطر، يمكنك إنشاء تجربة قراءة أكثر متعة وجاذبية لزوار موقعك على الويب.