مكوِّنات المجموعة تُساعدك على تنظيم المحتوى في حاوية حيث يمكنك تنسيق المحتوى ومعاملته كوحدة واحدة. سيعرض لك هذا الدليل كيفية استخدام إعدادات التخطيط لإنشاء أقسام صفحات متجاوبة ومنسقة بشكل جيد من خلال مكوِّن مجموعة.
بشكل افتراضي، يعمل مكوِّن المجموعة على تنظيم المكونات المضمنة لعرضها فوق بعضها البعض. يتيح لك تغيير طريقة ترتيب المكوِّنات داخل أي مجموعة إمكانية التحكم في ما إذا كان المحتوى سيظهر جنبًا إلى جنب (أفقيًا) أم متراصًا (عموديًا)، مما يمنحك مزيدًا من المرونة عند تخطيط تصميمك. يمكنك تخصيص محاذاة المحتوى في المجموعة عن طريق اتباع الخطوات التالية:
- حدد عرض القائمة في الجزء العلوي من شاشة التحرير.
- حدد مكوِّن المجموعة.
- في الشريط الجانبي لإعدادات المكوِّن الموجود على الجانب الأيمن، اختر خيارًا واحدًا من بين الخيارات التالية:
- مجموعة: الترتيب الافتراضي لمكوِّنات المجموعة.
- تكديس: ترتيب المكوِّنات عموديًا، واحد فوق الآخر. طريقة العرض هذه مثالية لإنشاء محتوى واضح ومتسلسل، مثل الخطوات أو العناصر المميزة.
- ضمن القسم “محاذاة”، يمكنك تغيير المحاذاة العمودية باستخدام خيارات مثل “أعلى” أو “وسط” أو “أسفل”.
- صف: وضع المكوِّنات جنبًا إلى جنب بشكل أفقي. طريقة العرض هذه مثالية لإنشاء مقارنات بين الميزات أو معارض الصور.
- ضمن القسم “محاذاة”، يمكنك ضبط المحاذاة الأفقية باستخدام خيارات مثل “يسار” أو “وسط” أو “يمين” أو “توزيع المسافات بشكل متساوٍ”.
- شبكة: تنظيم المكوِّنات في مخطط شبكي قابل للتخصيص. طريقة العرض هذه مفيدة لعمليات عرض المنتجات، أو لعرض ملفات أعضاء الفريق.
- انقر على “حفظ” أو “نشر” لحفظ التغييرات التي أجريتها.
يساعدك التحكم في العرض الكلي لمكوِّن المجموعة الخاص بك على إنشاء تسلسل هرمي مرئي على صفحتك وضبط طريقة تجاوب محتواك مع أحجام الشاشات المختلفة. ويمكنك تغيير مقدار المساحة التي يشغلها مكوِّن المجموعة من “عرض محتوى” إلى “عرض واسع” إلى “عرض كامل” من خلال اتباع الخطوات التالية:
- حدد عرض القائمة في الجزء العلوي من شاشة التحرير.
- حدد مكوِّن المجموعة.
- في شريط الأدوات الذي يظهر، حدد أيقونة “محاذاة” واختر من:
- محتوى (أو “لا شيء”): تعيين عرض المكوِّنات على العرض الافتراضي لمنطقة المحتوى. طريقة العرض هذه هي الأفضل لعرض أقسام المحتوى العادية.
- عرض واسع: تعيين عرض المكوِّنات على عرض أوسع (لكن ليس كاملاً). طريقة العرض هذه مناسبة لجذب الانتباه إلى محتوى مهم دون شغل الشاشة بالكامل.
- عرض كامل: تعيين المكوِّن على ملء عرض المنطقة المتاحة بالكامل. طريقة العرض هذه مثالية لإنشاء أقسام محتوى شاملة، مثل اللافتات أو معارض الصور الكبيرة.
- انقر على “حفظ” أو “نشر” لحفظ التغييرات التي أجريتها.
تعرّف على المزيد حول تغيير عرض محتواك.
يمكنك التحكم في مقدار المساحة التي يشغلها محتواك داخل مجموعة، وهو أمر مفيد عند إنشاء تصميمات متجاوبة تعمل بكفاءة على شاشتي الهاتف المحمول وسطح المكتب على حد سواء. اتبع الخطوات التالية لتغيير إعدادات عرض المحتوى داخل مكوِّن المجموعة الخاص بك:
- حدد عرض القائمة في الجزء العلوي من شاشة التحرير.
- حدد مكوِّن المجموعة.
- في الشريط الجانبي لإعدادات المكوِّن، ابحث عن القسم “المكوِّنات الداخلية“. وبدِّل بين قيم الإعداد “مكوِّنات داخلية تستخدم عرض محتوى” :
- تشغيل: سيتبع المحتوى إعدادات عرض محتوى الموقع أو يمكنك ضبط قيم العرض المحددة باستخدام عناصر التحكم في العرض.
- إيقاف التشغيل: سيمتد المحتوى لملء عرض مكوِّن المجموعة بالكامل.
- انقر على “حفظ” أو “نشر” لحفظ التغييرات التي أجريتها.
يتحكم الإعداد “مكوِّنات داخلية تستخدم عرض محتوى” في مدى العرض الذي سيظهر به المحتوى داخل مكوِّن المجموعة الخاص بك:
عند تحديد “تشغيل”: سيُعرَض المحتوى داخل مكوِّن المجموعة الخاص بك وفقًا لإعداد عرض المحتوى العالمي لموقعك (عادةً ما يتراوح بين 700 و800 بكسل). يؤدي هذا إلى إنشاء عمود مُخصص، ومتمركز من المحتوى حتى إذا كان مكوِّن المجموعة يغطي عرض الصفحة بالكامل. وهذا يُعزز قابلية القراءة على الشاشات الكبيرة مع الحفاظ على تخطيط جذاب.
عند تحديد “إيقاف تشغيل”: المحتوى داخل مكوّن المجموعة الخاص بك سيتم التوسيع لملء العرض الكامل لمكوّن المجموعة نفسه. إذا كان لمكوّن المجموعة بعرض كامل، سيتم أيضًا توسيع محتواك عبر العرض الكامل. يعد هذا مُفيدًا لإنشاء تصميمات تمتد من الحافة إلى الحافة، مثل: معارض الصور ذات العرض الكامل أو عندما ترغب في أن يتطابق المحتوى مع عرض خلفية مكوِّن المجموعة الخاص بك.
مثال عملي: إذا كان لديك مكوّن مجموعة مع خلفية ملونة تمتد على عرض الصفحة بالكامل، سيؤدي تشغيل “مكوِّنات داخلية تستخدم عرض المحتوى” إلى إنشاء عمود مركزي للمحتوى مع خلفية ملونة تمتد من الحافة إلى الحافة – مما يُعد مثاليًا لإبراز المعلومات المهمة مع الحفاظ على الاهتمام البصري.
يسمح لك ضبط الأبعاد بالتحكم في الارتفاع، والعرض، والتباعد في مكوِّن المجموعة الخاص بك ليناسب محتواك واحتياجات التخطيط لديك بشكل أفضل. يُساعدك هذا على إنشاء أقسام متوازنة بصريًا ويمنح محتواك مساحة كافية لعرضه. يمكنك تعيين تباعد دقيق حول محتوى مكوِّن المجموعة الخاص بك من خلال اتّباع هذه الخطوات:
- حدد عرض القائمة في أعلى شاشة التحرير.
- حدد مكوِّن المجموعة.
- في الشريط الجانبي لإعدادات المكوِّن، ستجد القسم الخاص بالأبعاد.
- تعيين قيم لـ:
- المساحات المتروكة: المسافة بين المحتوى وحدود مكوِّن المجموعة. تخلق المساحات المتروكة الإضافية مساحة كافية لعرض محتواك.
- الهامش: المسافة حول مكوِّن المجموعة الخارجي. يُساعد على فصل هذا القسم عن المحتوى الآخر.
- أستخدم أيقونة الرابط للتبديل بين عمليات الضبط الجانبية المنتظمة أو الفردية.
تعرّف على المزيد حول تخصيص أبعاد المكوِّن.
يسمح لك ضبط هذا التباعد بالتحكم في كيفية ظهور المحتوى القريب أو البعيد داخل مكوِّن المجموعة الخاص بك، وإنشاء العلاقة البصرية المُناسبة فيما بين العناصر. يُساعد هذا الزائرين على التمييز بين المحتوى ذي الصلة مع الحفاظ على قسم متكامل. التحكم في التباعد بين المكوِّنات داخل مجموعتك:
- حدد عرض القائمة في أعلى شاشة التحرير.
- حدد مكوِّن المجموعة.
- في الشريط الجانبي لإعدادات المكوِّن، ستجد القسم الخاص بالتباعد في المكوِّن.
- أستخدم عناصر التحكم لتعيين:
- التباعد في المكوِّن: المسافة بين المكوِّنات الفردية. تؤدي زيادة التباعد إلى حدوث فصل واضح، في حين أن تقليل التباعد يجعل المحتوى أكثر ترابطًا.
- أدنى ارتفاع: طول مكوِّن المجموعة الذي ينبغي أن يكون عند الحد الأدنى. مُفيد لإنشاء أقسام مُتناسقة أو لإضافة مسافة فارغة لتحقيق التوازن البصري.
تعرَّف على المزيد حول ضبط المسافة بين المكوِّنات.
الدعم 