0.4البنية: الحاويات والودجات
الأساسي في 30 ثانية
- الحاوية = «الصندوق» الذي يبني الصفحة ويحتضن العناصر؛ الودجة = عنصر المحتوى (عنوان، نص، صورة…) الموضوع بداخلها.
- يمكن تداخل الحاويات (صندوق داخل صندوق) للتخطيطات الغنيّة.
- حاويات Flexbox (حديثة، مرنة، خفيفة) تحلّ محلّ النظام القديم للـ أقسام/أعمدة.
الخيط الناظم — نادية تبني الصفحة الرئيسية
تريد نادية صفحة رئيسية واضحة: شريط علوي، ثم صفّ من 3 أعمال جنبًا إلى جنب، ثم دعوة إلى فعل. إن أسقطت كل شيء «بلا ترتيب»، لا يصطفّ شيء. يُعلّمها هذا القسم التفكير بـ صناديق (حاويات) تحتضن عناصر (ودجات) — أساس أي تخطيط.
تكملة الحالة 0.3 — نادية تنتقل من «أين ماذا» إلى «كيف أُنظّم».
1. الحاويات والودجات
يُميّز Elementor بين طبيعتين من العناصر. الحاويات صناديق تبني وتُنظّم الصفحة؛ لا «تعرض» شيئًا بنفسها، بل تحتضن. أمّا الودجات فهي عناصر المحتوى الملموسة — عنوان، نص، صورة، زر، أيقونة — الموضوعة داخل حاوية. قاعدة بسيطة: الحاويات تبني، والودجات تعرض.
يمكن تداخل الحاويات: حاوية «صفّ» (أفقية) يمكنها احتضان ثلاث حاويات «عمود» (عمودية)، لكلٍّ ودجاتها. هكذا تحصل نادية على أعمالها الثلاثة مصطفّة جنبًا إلى جنب، لكلٍّ صورة + عنوان + زر.
2. Flexbox مقابل الأقسام/الأعمدة
تاريخيًا، كان Elementor يُنظّم الصفحات في أقسام تحتضن أعمدة. النموذج الحديث، حاويات Flexbox، يحلّ محلّ ذلك النظام: أكثر مرونة (اتجاه ومحاذاة وتباعد قابلة للضبط بدقّة) وأكثر خفّة (شيفرة أنظف، أفضل للأداء).
لموقع جديد كموقع النجّار، تذهب نادية مباشرة إلى الحاويات. ولن تمسّ الأقسام/الأعمدة إلا إن استلمت موقعًا قديمًا ما زال يحملها.
🔎 مثال ملموس — ثلاثة أعمال مصطفّة (حالة نادية)
حاوية «صفّ» (اتجاه أفقي)
├─ حاوية «عمود» → صورة + عنوان + زر (مطبخ)
├─ حاوية «عمود» → صورة + عنوان + زر (خزانة)
└─ حاوية «عمود» → صورة + عنوان + زر (درج)
→ النتيجة: 3 بطاقات مصطفّة، سهلة الجعل مستجيبة.النتيجة: بنية واضحة وقابلة لإعادة الاستخدام.
الدرس: فكّر بالصناديق قبل المحتوى.
مفردات القسم
- الحاوية
- صندوق يبني الصفحة ويحتضن عناصر أخرى (ودجات أو حاويات).
مثال بسيط: تنشئ نادية حاوية «صفّ» لاصطفاف 3 أعمال.
ما ليس كذلك: رؤيتها كعنصر محتوى ظاهر مثل عنوان.
رد فعل: الحاوية تحتضن؛ لا محتوى خاصًّا بها.
- الودجة
- عنصر محتوى ملموس موضوع في حاوية: عنوان، نص، صورة، زر، أيقونة.
مثال بسيط: في كل عمود، تضع نادية صورة + عنوان + زر.
ما ليس كذلك: خلط الودجة بالصندوق الذي يحتضنها.
رد فعل: إن عرضت محتوى، فهي ودجة.
- التداخل
- وضع حاوية داخل حاوية للتخطيطات المعقّدة.
مثال بسيط: صفّ يحتضن ثلاثة أعمدة، لكلٍّ ودجاته.
ما ليس كذلك: تكديس حاويات بلا داعٍ.
رد فعل: تداخلْ فقط حين يتطلّب التخطيط ذلك.
- حاويات Flexbox
- الطريقة الحديثة المرنة الخفيفة لبناء صفحات Elementor.
مثال بسيط: تضبط نادية اتجاه حاوية ومحاذاتها وتباعدها.
ما ليس كذلك: إعادة صنع ما يفعله Flexbox وحده يدويًا.
رد فعل: موقع جديد → حاويات Flexbox افتراضيًا.
- الأقسام / الأعمدة (قديم)
- النظام القديم (أقسام تحتضن أعمدة)، استُبدل بالحاويات.
مثال بسيط: لا تلتقيها نادية إلا في مواقع قديمة تستلمها.
ما ليس كذلك: بدء موقع جديد بأقسام/أعمدة.
رد فعل: موقع قديم → ربّما أقسام/أعمدة؛ جديد → حاويات.
في التطبيق — بناء صفحة بالحاويات
- ارسم الصفحة كـ «صناديق» على ورق: شريط، صفّ من 3، دعوة إلى فعل.
- في Elementor، أنشئ حاوية «صفّ» واضبط اتجاهها أفقيًا.
- أضف 3 حاويات «عمود» بداخلها (تداخل).
- أسقِط الودجات المختارة في كل عمود (صورة، عنوان، زر).
نصّ جاهز للقول — شرح البنية للزبون (30 ث)
«أبني صفحتك كصناديق مرتّبة بعناية: صندوق للشريط، صندوق يصفّ أعمالك الثلاثة، صندوق لزر التواصل. في كل صندوق أضع المحتوى — صورة، نص، زر. هذا الترتيب النظيف هو ما يجعل الصفحة واضحة ومتوافقة مع الجوّال.»
صورة «الصناديق» تُخاطب الجميع، حتى غير التقنيّين.
قالب للنسخ واللصق — خطّة بنية الصفحة
الصفحة: _______________
الصندوق 1 (حاوية): _______________ → ودجات: _______________
الصندوق 2 (حاوية): _______________ → ودجات: _______________
└─ مُتداخل؟ أعمدة: _______________
الصندوق 3 (حاوية): _______________ → ودجات: _______________
النموذج: حاويات (Flexbox)، لا أقسام/أعمدة (موقع جديد)موقع جديد
كل شيء في حاويات Flexbox: مرونة وشيفرة خفيفة منذ البداية.
موقع قديم مُستلَم
أقسام/أعمدة ما زالت موجودة: اتركها أو هاجر تدريجيًا إلى الحاويات.
تخطيط بسيط
تكفي حاوية عمودية تُكدّس الودجات: لا تُفرِط في التداخل.
تخطيط غنيّ
صفوف تحتضن أعمدة: تداخلْ بالقدر الكافي للاصطفاف.
✓ ممارسات جيدة
- فكّر بـ «الحاويات (بنية)» قبل «الودجات (محتوى)».
- تداخلْ فقط حين يتطلّب التخطيط ذلك.
- اختر حاويات Flexbox لأي موقع جديد.
✗ أخطاء شائعة
- خلط حاوية (صندوق) بودجة (محتوى).
- الإفراط في تداخل حاويات بلا داعٍ.
- بدء موقع جديد بأقسام/أعمدة.
النقاط الأساسية
- الحاوية = صندوق يبني؛ الودجة = محتوى معروض.
- الحاويات تتداخل (صفّ → أعمدة → ودجات).
- حاويات Flexbox تحلّ محلّ الأقسام/الأعمدة.
- البنية أولًا، ثم المحتوى.
تحدّي 48 ساعة — طبّق غدًا
أعِد إنتاج صفّ من 3 بطاقات (صورة + عنوان + زر) بحاوية «صفّ» تحتضن 3 حاويات «عمود». تحقّق من أن كل شيء يصطفّ. 20 دقيقة.
- أميّز حاوية (بنية) من ودجة (محتوى).
- أعرف تداخل صفّ وأعمدة.
- أختار حاويات Flexbox في موقع جديد.
أسئلة شائعة
هل أستخدم الأقسام/الأعمدة أم الحاويات؟
لأي موقع جديد، الحاويات (Flexbox): أكثر مرونة وأخفّ. ولا تُوجَد الأقسام/الأعمدة إلا في المواقع القديمة.
كم من تداخل الحاويات معقول؟
أقلّ ما يمكن للحصول على التخطيط الذي تريد. الإفراط في التداخل (صناديق داخل صناديق بلا داعٍ) يُعقّد الصيانة والاستجابة (انظر 5.2).
هل يمكن لودجة أن تحتضن ودجة أخرى؟
لا: الودجات تحتضن محتوى، لا عناصر أخرى. لتجميع العناصر، استخدم حاوية.
تريد نادية 3 أعمال جنبًا إلى جنب، لكلٍّ صورة + عنوان + زر. أي بنية تختار؟