مكوّن شبكة التخطيط

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

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

• 12 من خطوط شبكة الأجهزة المكتبية.
• 8 من خطوط شبكة الأجهزة اللوحية.
• 4 من خطوط شبكة الأجهزة المحمولة.

في مكوّن شبكة التخطيط، يتم تجميع خطوط الشبكة سويًا لتشكل أعمدة (1-4)، ويمكنك وضع محتواك داخل كل عمود من تلك الأعمدة.

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

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

لإضافة مكوّن شبكة التخطيط، انقر فوق أيقونة + أداة إدراج المكوّن وابحث عن «شبكة التخطيط». انقر لإضافة المكوّن إلى المقالة أو الصفحة.

إذا كان لديك موقع يدعم الإضافات، فتأكَّد من تفعيل إضافة شبكة التخطيط في الإضافات ← الإضافات المُثبَّتة.

يمكن العثور على الإرشادات التفصيلية حول إضافة المكوِّنات هنا.

عند إضافة مكوّن شبكة التخطيط للمرة الأولى، سيُطلب منك اختيار عدد الأعمدة:

يمكنك تغيير هذا لاحقًا من إعدادات المكوّن.

يمكن أن يحتوي كل عمود من الأعمدة في الشبكة على مكوّنات أخرى. انقر فوق أيقونة + أداة إدراج المكوّن لكل عمود، ثم ابحث عن المكوّن الذي تود إضافته.

عندما تنقر فوق المكوّن، سيظهر شريط أدوات الخيارات:

يحتوي مكوّن شبكة التخطيط على الخيارات الآتية في شريط أدواته:

• تغيير نوع المكوّن أو نمطه.
• سحب المكوّن.
• نقل المكوّن إلى الأعلى أو الأسفل.
• تغيير المحاذاة الأفقية أو العرض للمكوّن.
• نقاط التوقف المستجيبة للأجهزة المكتبية واللوحية والمحمولة.
• تغيير المحاذاة العمودية للمكوّن.
• الخيارات الإضافية.

عندما تنقر فوق المكوّن، ستعثر على إعدادات المكوّن الإضافية في الشريط الجانبي الأيمن. إذا لم ترَ الشريط الجانبي، فقد تحتاج إلى النقر فوق أيقونة ⚙️ (الترس) الموجودة في الزاوية العلوية اليمنى لعرض الإعدادات.

تسمح لك علامة التبويب “مُتقدِّم” بإضافة فئة CSS إلى مكوّنك، ما يتيح لك كتابة CSS مخصصة وتنسيق مكوِّنك بالشكل الذي تراه مناسبًا.

يتوفر لكل عمود ضمن مكوّن شبكة التخطيط الإعدادات الخاصة به حيث يمكنك تغيير لون الخلفية والهوامش الداخلية. ولن يؤثر هذا إلا في العمود الفردي المحدد.

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

على سبيل المثال، في أحد الأجهزة المكتبية (12 من خطوط الشبكة)، يمكن أن تمتد الأعمدة الفردية ذات تخطيط مكون من ثلاثة أعمدة إلى 4 خطوط شبكة من دون أي إزاحات، أو يمتد إلى 3 خطوط شبكة مع إزاحة واحدة لكل عمود، أو يمكن أن يمتد العمود الواحد إلى 10 خطوط شبكة والعمودان الآخران إلى خط شبكة لكل منهما.

سيضمن ذلك عدم تراكب الأعمدة وقد يعني في بعض الأحيان أنك غير قادر على زيادة قيمة الإزاحة أو الامتداد في مكان واحد دون تقليل القيم في الآخر أولاً.

يضم كل عمود في الشبكة خيار التلوين في الجوانب. هذه هي مقابض السحب، وإذا قمت بالنقر والسحب إلى اليسار أو اليمين، فسيتغيَّر حجم المكوّن.

يمكنك أيضًا تغيير حجم الأعمدة في شبكة التخطيط بتغيير قيم الإزاحة والامتداد مباشرةً داخل إعدادات المكوّن في الشريط الجانبي.

يتم ضبطها تلقائيًا عند استخدام مقابض السحب.

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

في الأمثلة التالية، عيّنا الأعمدة لتكون قيمة الامتداد 2 وقيمة الإزاحة 0 لعرض عمودي على الأجهزة المحمولة و4 أعمدة على الأجهزة اللوحية على التوالي.