تستخدم جميع الكتل نفس الإعدادات العامة للخطوط والخلفيات والعرض، مما يضمن نمطًا بصريًا متسقًا عبر موقعك مع السماح باختلاف محتوى الكتلة.
لتكوين الإعدادات العامة لأي كتلة، مرر مؤشر الماوس فوقها وحدد زر الإعدادات الذي يظهر.
انقر على زر الإعدادات لفتح قائمة إعدادات القسم العامة على اليمين.
إعدادات الخط
يمكنك تغيير الإعدادات التالية:
- الخط والنمط: عائلة الخط، النمط (عادي أو مائل)، والوزن (السمك).
- التباعد: تباعد الأحرف، ارتفاع السطر، وحجم الخط.
بالنسبة للكتل التي تحتوي على حقل عنوان ونص، لديك خياران للتنسيق:
- تطبيق نمط خط واحد على الكتلة بأكملها للتوحيد.
- تفعيل خيار الخط الإضافي لتحديد أنماط منفصلة للعنوان والنص، مما يخلق أدوارًا بصرية متميزة داخل نفس الكتلة.
كيفية إضافة خط مخصص
لإضافة خط مخصص، ابحث عن الزر الذي يحمل نفس الاسم وانقر عليه:
سيتم نقلك إلى صفحة تحتوي على مجموعة كبيرة ومتنوعة من الخطوط:
الخطوة 1. ابحث عن الخط المطلوب
a) يمكن القيام بذلك باستخدام شريط البحث:
حدد المعايير اللازمة للخط:
- فئة الخط
- sans-serif (خطوط sans-serif)
- serif (خطوط serif)
- handwriting (خط يحاكي الكتابة اليدوية)
- monospace (خط أحادي المسافة أو غير متناسب، خط تكون فيه جميع الأحرف بنفس العرض)
- display (خط عريض للعرض)
- دعم اللغة
- السيريلية
- اللاتينية
b) للعثور على خط يدويًا، قم بالتمرير عبر القائمة في شريط التنسيق.
الخطوة 2. انقر على الخط المحدد:
ستظهر نافذة منبثقة مع خيارات الخط:
الخطوة 3. حدد خيار الخط عن طريق تحديد المربع بجانب الخيار الذي تحتاجه:
الخطوة 4. انقر على زر "إضافة":
سيتم عرض إعدادات الخط المخصص هنا بمجرد حفظها.
الخطوة 6. انقر على "حفظ":
سيتم عرض الخطوط المضافة في نفس قائمة الخطوط الافتراضية.
إعدادات الخلفية
قم بتخصيص خلفية القسم بلون ثابت، أو تدرج، أو صورة، أو فيديو.
يمكنك وضع لون أو تدرج فوق صورة الخلفية.
يمكن إضافة الصورة كملف أو كرابط للصورة:
يمكن إضافة فيديو من التخزين
أولاً، قم بتحميل ملف الفيديو الخاص بك إلى تخزين الملفات.
إعدادات صورة الخلفية
التحكم في موضع الصورة
يتم وضع الصورة داخل القسم باستخدام معلمتين مستقلتين:
- المحاذاة الأفقية (المحور X)
- المحاذاة الرأسية (المحور Y)
حدد الموضع باستخدام كلمة رئيسية أو مجموعة:
| الكلمة الرئيسية | التأثير |
|---|---|
top, bottom, center
|
المحاذاة الرأسية |
left, right, center
|
المحاذاة الأفقية |
bottom left, top right, center center
|
الموضع المدمج |
للتحكم الدقيق، يمكنك أيضًا استخدام قيم رقمية:
- النسب المئوية (مثل
30% 75%) - البكسل (مثل
20px 100px) - أو وحدات مختلطة
خيارات تحجيم الصورة
يمكنك التحكم في أبعاد الصورة باستخدام الطرق التالية:
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 بكسل. ستكون هذه هي نسخة الجوال من الكتلة.
ونتيجة لذلك، سيتم عرض نسخة سطح المكتب على أجهزة الكمبيوتر، بينما سيتم عرض نسخة الجوال على الهواتف الذكية والأجهزة اللوحية.
نطاق الرؤية (قيم المعلمات المختلفة) ضروري لتتمكن من تخصيص مظهر الوحدة لجهاز معين عن طريق اختيار الدقة. على سبيل المثال، إذا كانت الكتلة لا تظهر بشكل جيد على جهاز لوحي أو على طراز هاتف معين، يمكنك تخصيص مظهرها بناءً على دقة هذه الأجهزة.
افتراضيًا، يتم عرض القسم على الأجهزة من أي حجم.
مثال
قم بتكوين القسم الأول لأجهزة الجوال والأجهزة اللوحية
- أنشئ قسمًا
- اضبط نطاق الرؤية من 0 إلى 640 بكسل
- قم بتحميل صورة محسنة للشاشات الصغيرة
القسم الثاني لأجهزة الكمبيوتر (أجهزة الكمبيوتر المحمولة). اضبط نطاق الرؤية من 641 بكسل فما فوق.
- احفظ تغييراتك وانتقل إلى صفحة التحرير. لراحتك، سيتم عرض إعدادات رؤية القسم هناك.
لاختبار كيفية ظهور الأقسام على جهاز معين، انتقل إلى صفحة معاينة الموقع. انقر بزر الماوس الأيمن وانقر على "عرض الكود".
حدد الجهاز الذي تريد رؤية شكل الموقع عليه.
توقيت الظهور
يمكنك استخدام هذا الحقل لتحديد التأخير قبل ظهور القسم، محددًا بالثواني (s) أو الدقائق (m).