الأقسام والعناصر

كل صفحة في موقعك عبارة عن مجموعة من الأقسام المتتالية: واجهة في الأعلى، ثم الخدمات، والأسعار، ونموذج التواصل، وهكذا. ويحتوي قسم خاص اسمه الحاوية على عناصر أصغر (عناوين، ونصوص، وأزرار، وصور…) ترتّبها بحرية في أعمدة.

أنواع الأقسام

تظهر الترويسة (القائمة) والتذييل دائمًا في كل صفحة ولا يمكن نقلهما. اضغطهما في قائمة الهيكل لتعديل الشعار، وروابط القائمة، وزر القائمة، ونصوص التذييل، والروابط، وشبكات التواصل.

إعدادات مشتركة بين جميع الأقسام

حدّد قسمًا وافتح المظهر:

• خلفية القسم: بلا خلفية، أو بطاقة (أفتح قليلًا)، أو توهج، أو لون التمييز.
• المسافة أعلى/أسفل: مضغوطة، أو عادية، أو واسعة.
• محاذاة العنوان: افتراضية، أو إلى الجانب، أو في المنتصف.
• صورة خلفية القسم وتعتيم صورة الخلفية.
• الحجم والمسافات: عرض القسم وارتفاعه وهامشه الخارجي وحشوته الداخلية (انظر الحجم والمسافات أدناه).
• معرّف القسم: الاسم المستخدم في الروابط، مثل #contact. رابط في القائمة يشير إلى #contact ينقل الزائر إلى هذا القسم. إذا غيّرت المعرّف، تُحدَّث الروابط التي كانت تشير إليه تلقائيًا.

لكثير من الأقسام أيضًا خيارات تنسيق خاصة بها (الأعمدة، وشكل البطاقات، وشكل الصور وغيرها) في التبويب نفسه.

إضافة قسم

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

يأتي القسم الجديد بمحتوى نموذجي حتى لا يبدو فارغًا أبدًا، ويكون محددًا لتبدأ التعديل فورًا.

إدارة الأقسام

في قائمة الهيكل، يحتوي كل صف قسم على:

• مقبض السحب على الجانب: اسحبه لأعلى أو لأسفل لتغيير الترتيب؛
• أيقونة العين: إخفاء من الموقع / إظهار في الموقع. تبقى الأقسام المخفية في المحرر (باهتة) لكن الزوار لا يرونها؛
• القائمة ⋯: تكرار، ونقل لأعلى، ونقل لأسفل، وحذف القسم.

يطلب الحذف تأكيدًا، ويمكنك دائمًا استعادة القسم بـ Ctrl+Z.

العناصر: ابنِ تخطيطك الخاص

يتيح لك قسم حاوية (محتوى حر) بناء أي تخطيط. اختر تخطيط الأعمدة (عمود واحد، أو 2 أو 3 أو 4 أعمدة، أو 2/3 + 1/3 و1/3 + 2/3)، ثم املأ الأعمدة بالعناصر.

أنواع العناصر

إضافة العناصر

افتح تبويب إضافة. تحت العناصر يمكنك:

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

تعديل العناصر ونقلها وتكرارها وإخفاؤها

اضغط عنصرًا في المعاينة لتحديده. يعرض تبويب تعديل حقوله وشريط أدوات:

• نقل لأعلى / نقل لأسفل (الأسهم)؛
• نقل إلى العمود السابق / نقل إلى العمود التالي (يظهران عندما يحتوي الحاوي على أكثر من عمود): ينتقل العنصر إلى نهاية ذلك العمود ويبقى محددًا؛
• إظهار / إخفاء (العين) لإخفائه عن الزوار دون حذفه؛
• تكرار؛
• حذف؛
• ✦ AI (العناصر التي فيها نص): يفتح حقل الذكاء الاصطناعي لنص العنصر. انظر المحرر.
• سهم الرجوع يعيدك إلى القسم كاملًا.

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

الحجم والمسافات

لكل عنصر ولكل قسم ولكل عمود في الحاوية لوحة الحجم والمسافات: تجدها في إعدادات العنصر وفي تبويب المظهر للقسم. تحافظ الحقول الفارغة على شكل القالب، فلا يتغير شيء حتى تكتب قيمة.

• العرض وأقصى عرض والارتفاع: اكتب رقمًا واختر الوحدة بجانبه: px أو rem أو em أو % أو vw أو vh أو auto. للنصوص والأزرار والحاويات يكون الارتفاع حدًا أدنى (المحتوى الأطول يتسع رغم ذلك)؛ أما الصور والفيديوهات فتأخذ هذا الارتفاع بالضبط وتملؤه الصورة.
• الهامش الخارجي (الحلقة الخارجية) هو المساحة حول العنصر؛ والحشوة الداخلية (الحلقة الداخلية) هي المساحة داخله بين حافته ومحتواه. لكل حلقة أربعة حقول: أعلى وأسفل والجانبان. اكتب 24 (بكسل) أو 2rem أو 5% أو auto (للهامش الخارجي فقط: auto على الجانبين يضع العنصر الذي له عرض في المنتصف).
• زر السلسلة في الحلقة يضع القيمة نفسها على الجوانب الأربعة دفعة واحدة.
• في أي حقل، يغيّر ↑ و**↓** القيمة بمقدار 1 (Shift + سهم: بمقدار 10؛ وفي rem وem بمقدار 0.1 و1).
• أثناء وضع المؤشر على اللوحة تعرض المعاينة الهامش الخارجي (برتقالي) والحشوة الداخلية (أخضر) للعنصر المحدد.
• إعادة تعيين يمسح قيم الجهاز الذي تعدّله.

الأجهزة. الأيقونات الثلاث أعلى اللوحة (سطح المكتب وجهاز لوحي والهاتف) تعمل مثل أزرار المعاينة: اختر واحدة فتنتقل المعاينة إلى ذلك الحجم. القيم التي تكتبها بعدها تنطبق على ذلك الجهاز فقط. يستخدم الجهاز اللوحي قيم سطح المكتب ما لم تعطه قيمه الخاصة، ويستخدم الهاتف قيم الجهاز اللوحي (أو سطح المكتب)؛ تظهر القيم الموروثة بالرمادي في الحقول الفارغة، وتدل نقطة على الأيقونة على الأجهزة التي لها قيم خاصة. الجهاز اللوحي يعني الشاشات حتى عرض 1023 px، والهاتف حتى 640 px.

الأعمدة. في تبويب المظهر للحاوية، يحتوي حجم الأعمدة ومسافاتها على زر لكل عمود (ع1 وع2…): اختر واحدًا واضبط حجمه ومسافاته.

من المفيد معرفة:

• العنصر لا يكون أبدًا أعرض من المساحة التي هو فيها، لذلك لا يسبب عرض كبير بالبكسل تمريرًا جانبيًا على الهاتف.
• الجوانب هي "البداية" و"النهاية" لا اليسار واليمين: في العربية واللغات الأخرى التي تُكتب من اليمين تنعكس المسافات تلقائيًا.
• عرض الزر وارتفاعه وحشوته الداخلية تغيّر الزر نفسه؛ أما الهامش الخارجي فيحرّكه.

عنصر الصندوق / الشبكة

استخدم صندوق / شبكة لتجميع العناصر، مثلًا ثلاث بطاقات متجاورة داخل عمود واحد.

1. أضف عنصر صندوق / شبكة.
2. في إعداداته اختر الترتيب: فوق بعضها، أو في صف، أو شبكة من 2 أو 3 أو 4 أعمدة.
3. اختر شكل الصندوق: بلا إطار، أو بطاقة، أو زجاجي، أو لون التمييز. واضبط المسافة الداخلية والمسافة بين العناصر.
4. أضف العناصر إلى الصندوق: اسحبها إليه في المعاينة، أو أضفها تحت العناصر داخل الصندوق.

لا يمكن أن يحتوي الصندوق على صندوق آخر (مستوى واحد فقط).

الصور والصور المجانية

كل حقل صورة (صورة الواجهة، خلفية القسم، المعرض، صورة البطاقة…) يفتح أداة اختيار الصور عند النقر على اختيار. وفيها تبويبان:

• صوري: الصور التي رفعتها (اسحبها إلى النافذة أو انقر رفع؛ JPG أو PNG أو WebP أو AVIF أو GIF حتى 10 ميغابايت)، والصور المجانية التي استخدمتها من قبل.
• صور مجانية: ملايين الصور المجانية المرخّصة من Unsplash أو Pexels. يمكنك استخدامها على موقعك دون أي تكلفة.

لاستخدام صورة مجانية:

1. انقر اختيار في حقل صورة وافتح تبويب صور مجانية.
2. صِف الصورة ببضع كلمات بالإنجليزية، مثل bakery counter أو yoga studio أو mountain lake. اختر شكلًا (أفقي أو عمودي أو مربع) إذا كان المكان يحتاج إلى ذلك.
3. انقر على صورة. تُضاف إلى صورك وتوضع في الحقل فورًا.

البحث نفسه موجود في لوحة التحكم تحت الصور → صور مجانية.

معلومات مفيدة:

• يظهر اسم المصوّر تحت كل نتيجة، ويذكر تذييل موقعك المصوّرين الذين يعرض صورهم (مثل الصور: Jane Doe على Unsplash). هذا ما تطلبه خدمات الصور، فأبقِه.
• تبقى صور Unsplash على خوادم Unsplash السريعة وتُعرض منها؛ أما صور Pexels فتُنسخ إلى صورك.
• قد تبدأ المواقع المنشأة من قالب أو بواسطة منشئ المواقع بالذكاء الاصطناعي بصور مجانية مختارة لنشاطك. استبدلها بصورك متى شئت.
• صورك الخاصة (فريقك، منتجاتك، مكانك) عادةً ما تحقق نتائج أفضل من الصور الجاهزة. استخدم الصور المجانية للأجواء والخلفيات والأماكن.

لا يظهر تبويب صور مجانية إلا إذا كانت خدمة الصور مفعّلة على المنصة.

نصائح

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