نظرة عامة
تظهر ثلاثة مكونات تخطيط قابلة لإعادة الاستخدام في معظم أقسام أداة البناء: المجموعة، النص، والفاصل. تتيح لك هذه المكونات بناء أي تخطيط دون الحاجة لكتابة CSS. اختر كتلة لفتح إعداداتها.
المجموعة
المجموعة هي حاوية تخطيط مرنة. يمكنك إضافة كتل فرعية بداخلها (نصوص، أزرار، صور، حقول نشرة بريدية، وحتى مجموعات متداخلة) والتحكم في كيفية ترتيبها.
الاتجاه
- عمودي: تتكدس العناصر الفرعية من الأعلى إلى الأسفل.
- أفقي: توضع العناصر الفرعية جنبًا إلى جنب في صف واحد.
يظهر مفتاح التكديس عموديًا على الجوال فقط عندما يكون الاتجاه أفقيًا. فعّل هذا الخيار لتحويل الصف الأفقي إلى تكديس عمودي على الشاشات الصغيرة.
الموضع والمحاذاة
توزع هذه الخيارات العناصر الفرعية على المحورين الأساسي والمتقاطع. يتغير معناها حسب الاتجاه، وخيار بين (مسافة متساوية بين العناصر) يوجد فقط على المحور الأساسي:
- الاتجاه العمودي: الموضع هو المحور الأساسي (عمودي): أعلى، وسط، أسفل، أو بين. المحاذاة هي المحور المتقاطع (أفقي): يسار، وسط، أو يمين.
- الاتجاه الأفقي: المحاذاة هي المحور الأساسي (أفقي): يسار، وسط، يمين، أو بين. الموضع هو المحور المتقاطع (عمودي): أعلى، وسط، أو أسفل.
العرض
- تعبئة: يتمدد ليأخذ كل المساحة المتاحة في الحاوية الأم. استخدم هذا للمجموعات التي يجب أن تتقاسم المساحة بالتساوي داخل حاوية أفقية.
- احتواء: يتقلص ليأخذ الحجم الطبيعي لمحتواه.
- مخصص: يظهر شريط تمرير العرض المخصص كنسبة مئوية (من 0 إلى 100%). تحتفظ المجموعة بهذا الحجم دون تمدد أو تقلص.
الفجوة
المسافة بين العناصر الفرعية بوحدة البكسل (من 0 إلى 100 بكسل، الافتراضي 20 بكسل).
نظام الألوان
يكون خيار استخدام نظام ألوان الحاوية الأم مفعلاً افتراضيًا، بحيث ترث المجموعة نظام الألوان من الحاوية الأم. عند إيقافه يظهر منتقي نظام الألوان لتختار أحد أنظمة الألوان العالمية الخاصة بك. يتيح لك ذلك إنشاء مناطق لونية مميزة داخل القسم.
الحد
الحد إما بدون أو صلب. عند اختيار صلب تظهر شريطان: سماكة الحد (من 1 إلى 20 بكسل، الافتراضي 1) وشفافية الحد (من 0 إلى 100%، الافتراضي 100). لون الحد يأتي من لون الحد في النظام النشط.
نصف القطر للحواف
تدوير الحواف بوحدة البكسل (من 0 إلى 100)، مستقل عن الحد. استخدمه للحاويات الشبيهة بالبطاقات.
تراكب الخلفية
يضيف مفتاح تراكب الخلفية طبقة ملونة فوق خلفية المجموعة. عند تفعيله، يمكنك ضبط لون التراكب (بما في ذلك الشفافية عبر شريط الشفافية في المنتقي)، نمط التراكب (صلب أو تدرج يتلاشى للشفافية)، وللتدرج يمكنك تحديد اتجاه التدرج (أعلى أو أسفل). يُستخدم غالبًا لتلوين خلفية وسائط.
الحشو
المسافة الداخلية من كل جانب بوحدة البكسل، من 0 إلى 100 بكسل لكل جانب. الحشو يكون داخل الحد، بينه وبين العناصر الفرعية.
النص
كتلة النص تعرض العناوين والفقرات والنصوص المنسقة. يدعم محرر النصوص الغني التنسيقات الغامقة والمائلة والتسطير والشطب وتلوين النص.
النمط الجاهز
يضبط النمط الجاهز للطباعة عائلة الخط، الوزن الافتراضي، وعلامة HTML الدلالية (دورها في الصفحة):
- افتراضي: يرث تنسيق النص الأساسي للقسم.
- فقرة: نمط نص الجسم.
- عنوان 1 حتى عنوان 6: أنماط العناوين باستخدام خطوط العناوين والعناوين الفرعية الخاصة بك.
الحجم
حجم خط مخصص بوحدة البكسل (من 10 إلى 30 بكسل، الافتراضي 16). هذا هو الحجم الفعلي للنص عند العرض.
العرض والمحاذاة
- احتواء: تكون الكتلة بعرض محتواها فقط.
- تعبئة: تتمدد الكتلة لتملأ 100% من عرض الحاوية.
تظهر المحاذاة (يسار، وسط، يمين) فقط عند ضبط العرض على تعبئة، لأن المحاذاة تكون ذات معنى فقط عندما تملأ الكتلة الحاوية.
ارتفاع السطر وتباعد الحروف
ارتفاع السطر يضبط الإيقاع الرأسي: عادي (افتراضي)، ضيق، أو واسع. تباعد الحروف يضبط تباعد الحروف بنفس الخيارات الثلاثة.
نظام الألوان
داخل المجموعة، يكون خيار استخدام نظام ألوان الحاوية الأم مفعلاً افتراضيًا. عند إيقافه يظهر منتقي نظام الألوان. تستخدم أنماط العناوين لون العنوان من النظام، بينما تستخدم الفقرة والافتراضي لون نص الجسم. إذا كانت الكتلة قسمًا مستقلًا، يظهر المنتقي فقط دون خيار الوراثة.
الحشو
المسافة الداخلية من كل جانب بوحدة البكسل، من 0 إلى 100 بكسل لكل جانب.
الفاصل
خط فاصل يتكيف مع الحاوية الأم. في التخطيط العمودي (عمود) يكون خطًا أفقيًا، أما داخل مجموعة أفقية فيصبح خطًا عموديًا.
العرض
- احتواء: الحاوية بعرض الخط فقط.
- تعبئة: الحاوية تتمدد لتملأ المساحة المتاحة.
السماكة
سماكة الخط بوحدة البكسل (من 1 إلى 10 بكسل، الافتراضي 1). للفاصل الأفقي هذا هو الارتفاع، وللفاصل العمودي هو العرض.
الطول
امتداد الخط كنسبة مئوية من الحاوية (من 5 إلى 100%، الافتراضي 100). اضبطه أقل من 100% لإنشاء خط جزئي أو داخلي.
المحاذاة
يحدد موضع الخط عندما يكون طوله أقل من 100%: بداية، وسط (افتراضي)، أو نهاية. يختفي هذا الخيار عندما يكون الطول 100%.
نصف القطر للحواف
- حاد: نهايات مستطيلة.
- مستدير: نهايات بيضاوية.
نظام الألوان
يمكنك اختيار نظام ألوان اختياريًا. يستخدم الفاصل لون الحد من النظام المختار. إذا لم يتم تعيينه، يرث اللون من القسم أو المجموعة الأم.
الحشو
المسافة من كل جانب بوحدة البكسل. ككتلة النطاق من 0 إلى 100 بكسل. عند إضافة الفاصل كقسم رئيسي، يصل الحشو حتى 200 بكسل (الافتراضي 20) لمزيد من المساحة الرأسية.
أخطاء شائعة
- وجود مجموعتين بتعبئة داخل حاوية أفقية: كل واحدة تأخذ 50% من المساحة، وهذا غالبًا ما تريده. لجعل أحد الجانبين أعرض، اضبط عرض تلك المجموعة على مخصص.
- عدم ظهور الفاصل العمودي: يتحول الفاصل إلى عمودي فقط عندما يكون عنصرًا مباشرًا داخل مجموعة ذات اتجاه أفقي. تحقق من اتجاه المجموعة الأم.
- خيار بين غير ظاهر: يظهر بين فقط على المحور الذي تتدفق عليه العناصر، لذا يكون في الموضع للمجموعات العمودية وفي المحاذاة للمجموعات الأفقية.
- النص بلون غير صحيح: غالبًا ما يرث من مجموعة أم بنظام ألوان مختلف. أوقف استخدام نظام ألوان الحاوية الأم في كتلة النص واختر النظام يدويًا.
لمعرفة أماكن وضع هذه المكونات، راجع الأقسام والكتل.