تصميم الأقسام: الحركات والحواف وعرض المحتوى والخلفيات

عمحرّره عمران القيراطه

بواسطة عمران القيراطه

آخر تحديث 9 أغسطس 2026·مدة القراءة: 3 دقيقة

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

القاعدة العامة: افتراضي ثم تجاوز

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

حركات الظهور

تحدّد كيف يدخل القسم إلى الشاشة.

  • متى تبدأ: عند التمرير إلى القسم، أو عند فتح الصفحة. الأول أنسب للأقسام البعيدة عن أعلى الصفحة، والثاني لقسم البطل في الأعلى.

  • نوع الحركة: تلاشٍ، تكبير، ضبابية، قلب، أو كشف.

  • الاتجاه: لأعلى، لأسفل، من البداية، أو من النهاية. مع اتجاه الكتابة من اليمين إلى اليسار، «من البداية» تعني من جهة اليمين.

  • السرعة والمسافة: كم تستغرق الحركة، وكم يتحرّك العنصر قبل أن يستقر.

  • نمط الحركة: ناعم، أو متساوٍ، أو مرن.

تتابع العناصر

في الأقسام التي تحوي قائمة عناصر، مثل المميزات أو الشعارات أو آراء العملاء، يمكنك تشغيل التتابع ليظهر العنصر تلو الآخر بفارق زمني قصير بدل ظهورهم دفعة واحدة. هذا يمنح القسم إحساساً بالحياة دون مبالغة.

الضبط الدقيق

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

حركات التفاعل

مستقلة عن حركة الظهور، وتعمل عند مرور المؤشر: رفع، أو توهّج، أو تكبير تدريجي. مفيدة على البطاقات والأزرار لتوضيح أن العنصر قابل للنقر.

حواف الأقسام

الحافة شكل يفصل قسماً عن الذي يليه بدل الخط المستقيم المعتاد. لكل قسم حافة علوية وحافة سفلية مستقلتان.

  • الأشكال: خط، موجة، منحنى، ميل، مثلث، أو متعرّج.

  • لون الخط وسماكته: عند اختيار شكل الخط.

  • ارتفاع الشكل: كم تمتد الحافة رأسياً.

  • عكس الشكل: يقلب الحافة رأسياً، فتحصل من كل شكل على اتجاهين.

نصيحة: اختر حافة واحدة وكرّرها في موقعك بدل خلط أشكال متعددة. الحافة أداة إيقاع لا زينة.

عرض المحتوى

يحدّد كم تمتد أقسام صفحتك على الشاشات الكبيرة: ضيق أو واسع. الضيق أنسب للصفحات النصية لأن السطر القصير أسهل قراءة، والواسع أنسب لصفحات العرض والمعارض. تضبط قيمة عامة في إعدادات الموقع، ويمكن لكل صفحة تجاوزها.

خلفية القسم

كل قسم في باني الصفحات يستخدم اليوم محدّد الخلفية نفسه، بالخيارات ذاتها:

  • لون: لون واحد صريح.

  • تدرّج: خطي بزاوية تحدّدها، أو شعاعي بموضع تختاره من تسع نقاط، أو حرّ. لكل تدرّج لونان مع تحكم في موضع كل لون.

  • صورة: مع طبقة داكنة اختيارية تحسّن وضوح النص فوقها.

الأقسام التي لم تكن تملك خيار خلفية من قبل، مثل المعرض والصورة والنموذج والمقالات والترويسة والتذييل، صار لديها الآن الخيار نفسه. وصور الخلفية تُحتسب ضمن استخدام مكتبة الوسائط.

ترتيب عناصر القوائم بالسحب

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

نصائح

  • حركة واحدة تكفي. استخدم النوع نفسه في كل موقعك، ودع الاختلاف للاتجاه فقط.

  • لا تحرّك كل شيء. إذا تحرّك كل قسم، لم يعد شيء يلفت النظر.

  • اضبط العام أولاً. ابدأ من الإعداد الافتراضي لموقعك، ولا تنزل إلى مستوى القسم إلا لاستثناء حقيقي.

  • عاين على الجوال. الحركة التي تبدو أنيقة على الشاشة الكبيرة قد تبدو بطيئة على الجوال.

مقالات ذات صلة

الملخص

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

هل أجاب هذا عن سؤالك؟