إعدادات القسم العامة

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

لتكوين الإعدادات العامة لأي كتلة، مرّر المؤشر فوقها ثم اختر الإعدادات الزر الذي يظهر.

انقر على الإعدادات الزر لفتح قائمة إعدادات القسم العام على اليمين.

إعدادات الخطوط

يمكنك تغيير الإعدادات التالية:

  • الخط والأسلوب: عائلة الخط، والأسلوب (عادي أو مائل)، والوزن (السُمك).

  • التباعد: تباعد الأحرف، وارتفاع السطر، وحجم الخط.

بالنسبة إلى الكتل التي تحتوي على كلٍّ من حقل العنوان وحقل النص، لديك خياران للتنسيق:

  1. طبّق نمط خط واحد على الكتلة بأكملها لتحقيق التناسق.

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

كيفية إضافة خط مخصص

لإضافة خط مخصص، ابحث عن الزر الذي يحمل الاسم نفسه وانقر عليه:

سيتم نقلك إلى صفحة تحتوي على مجموعة كبيرة ومتنوعة من الخطوط المختلفة:

الخطوة 1. ابحث عن الخط المطلوب

أ) يمكن القيام بذلك باستخدام شريط البحث:

حدّد المعايير اللازمة للخط:

  • فئة الخط

  • sans-serif (أحرف بلا زوائد)

  • serif (أحرف ذات زوائد)

  • handwriting (خط يحاكي الكتابة اليدوية)

  • monospace (خط أحادي المسافة أو غير متناسب، وهو خط تكون فيه جميع الأحرف بنفس العرض)

  • display (خط عريض للعرض)

  • دعم اللغة

  • السيريلية

  • اللاتينية

ب) للعثور على خط يدويًا، مرّر عبر القائمة في شريط التنسيق.

الخطوة 2. انقر على الخط المحدد:

سترى نافذة منبثقة تحتوي على خيارات الخط:

الخطوة 3. اختر خيار خط بوضع علامة في المربع بجانب الخيار الذي تحتاجه:

الخطوة 4. انقر على "إضافة" الزر:

ستظهر إعدادات الخط المخصص هنا بمجرد حفظها.

الخطوة 6. انقر على "حفظ":

ستظهر الخطوط المضافة في القائمة نفسها التي تحتوي على الخطوط الافتراضية.

إعدادات الخلفية

خصّص خلفية القسم بلونٍ صلب أو تدرج أو صورة أو فيديو.

يمكنك وضع لون أو تدرج فوق صورة الخلفية.

يمكن إضافة الصورة كملف أو كرابط إلى الصورة:

يمكن إضافة فيديو من التخزين

أولًا، حمّل ملف الفيديو إلى مساحة التخزين.

إعدادات صورة الخلفية

عنصر التحكم في موضع الصورة

يتم تحديد موضع الصورة داخل القسم باستخدام معاملين مستقلين:

  1. المحاذاة الأفقية (المحور X)

  2. المحاذاة الرأسية (المحور Y)

حدّد الموضع باستخدام كلمة مفتاحية أو مجموعة منها:

الكلمة المفتاحية

التأثير

أعلى, أسفل, الوسط

المحاذاة الرأسية

اليسار, اليمين, الوسط

المحاذاة الأفقية

أسفل اليسار, أعلى اليمين, الوسط الوسط

موضع مركّب

لتحكم دقيق، يمكنك أيضًا استخدام قيم رقمية:

  • نِسَب مئوية (مثل، 30% 75%)

  • بكسلات (مثل، 20px 100px)

  • أو وحدات مختلطة

الموضع 100%؛ الحجم 100%؛ عدم التكرار

خيارات تحجيم الصورة

يمكنك التحكم في أبعاد الصورة باستخدام الطرق التالية:

1. تعيين أبعاد مخصصة

حدّد كلًّا من العرض والارتفاع باستخدام قيم مرنة.

  • الصيغة: [العرض] [الارتفاع]

  • مثال 1 (بالبكسل): 500px 300px

  • مثال 2 (النسبة المئوية): 15% 10%

2. استخدام كلمة مفتاحية مسبقة الإعداد

حدّد معاملًا واحدًا لتطبيق سلوك تحجيم معين:

  • contain — يغيّر حجم الصورة لتناسب ارتفاع القسم بالكامل مع الحفاظ على نسبة أبعادها (مثال 3).

  • cover — يعرض الصورة بأبعادها الأصلية بالبكسل (مثال 4: الحجم الأصلي 1268 × 1343 بكسل).

تكرار الصورة

هذا الخيار معطّل افتراضيًا. تتضمن الإعدادات المتاحة ما يلي:

كيفية تثبيت صورة

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

لون الخلفية والتدرج

يمكنك تخصيص خلفية القسم بلون صلب أو اختيار تدرج من الخيارات المتاحة.

إعدادات العرض

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

نصف قطر الحدود:

يُشار إلى نصف قطر الحدود بالبكسل - px.

ارتفاع القسم

يمكن تحديد ارتفاع القسم باستخدام الوحدات التالية:

  • px: بكسل (قيمة ثابتة)

  • vh: ارتفاع منطقة العرض (متجاوب مع حجم الشاشة)

عرض القسم

عرض عمود واحد = 106 بكسل

افتراضيًا، يتم ضبط عرض القسم على كامل الشاشة، ويتم عرض المحتوى ضمن تخطيط مكوّن من 8 أعمدة.

مثال 1: يتم توسيط المحتوى داخل القسم ويمتد عبر 5 أعمدة من التخطيط.

مثال 2. يمتد قسم عبر 8 أعمدة، مع تغطية المحتوى للعرض الكامل للقسم:

تأثير الظهور عند التمرير

فعّل هذا المفتاح لتمكين الرسوم المتحركة المرتبطة بالتمرير لمحتواك. يمكنك اختيار ظهور المحتوى من الأسفل أو الأعلى أو اليسار أو اليمين.

عرض المحتوى

يُعرض المحتوى أفقيًا ومتمركزًا افتراضيًا. ويمكن نقله إلى الحافة اليسرى أو اليمنى للصفحة.

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

لضبط النص ليتناسب مع الشاشات الضيقة وفقًا لأنماط Mavibot، يُرجى تفعيل هذا الشريط:

الهوامش (للقسم)

الهوامش الخارجية

يمكنك استخدام هذه الحقول لضبط المسافة بين الأقسام. افتراضيًا، يكون الحشو الداخلي (أعلى/أسفل/يسار/يمين) مضبوطًا على 0 بكسل.

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

لضمان الاتساق البصري، يجب تكوين الهوامش بشكل منفصل لكل قسم.

الهوامش الداخلية

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

نطاق الظهور حسب الجهاز

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

لماذا هذا مفيد وكيف يعمل؟

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

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

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

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

circle-info

افتراضيًا، يتم عرض القسم على الأجهزة من أي حجم.

مثال

تكوين القسم الأول للأجهزة المحمولة والأجهزة اللوحية

  • أنشئ قسمًا

  • اضبط نطاق ظهوره من 0 إلى 640 بكسل

  • حمّل صورة محسّنة للشاشات الصغيرة

القسم الثاني مخصص لأجهزة الكمبيوتر الشخصي (أجهزة اللابتوب). اضبط نطاق الظهور من 641 بكسل فما فوق.

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

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

حدّد الجهاز الذي تريد أن ترى كيف سيبدو عليه الموقع.

توقيت الظهور

يمكنك استخدام هذا الحقل لتحديد مدة التأخير قبل ظهور القسم، وتُحدَّد بالثواني (s) أو الدقائق (m).

Last updated