تراكب خط شبكة Elementor (Pro): شبكة تصميم للتخطيطات المحاذاة
Grid Line هو امتداد Master Addons Pro الذي يرسم شبكة أعمدة فوق صفحتك داخل محرر Elementor. تقوم بتعيين عدد الأعمدة والمزراب والحد الأقصى للعرض والإزاحة في إعدادات الصفحة، ثم تصطف الأقسام والأدوات مقابل الأعمدة، وهي الطريقة التي يعمل بها المصممون في Figma. تظهر الشبكة فقط أثناء التحرير، ولا يراها الزوار أبدًا على الصفحة المنشورة.
كيفية استخدام خط الشبكة في العنصر
Grid Line هو إعداد لكل صفحة، لذا يمكنك تشغيله فقط في المكان الذي تحتاج إليه.
- مع Master Addons Pro active، انتقل إلى الإضافات الرئيسية > الامتدادات وتشغيل خط الشبكة.
- افتح صفحة في Elementor وانقر فوق إعدادات الصفحة أيقونة في الشريط العلوي.
- على ال إعدادات علامة التبويب، توسيع خط الشبكة ومجموعة تمكين إلى على.
- تعيين الأعمدة, العرض الأقصى و مزراب لتتناسب مع التصميم الخاص بك، وإضافة إزاحة إذا كان تخطيطك يحتوي على هوامش جانبية.
- قم بالتبديل إلى عرض الأجهزة اللوحية والمحمولة لتعيين قيم لتلك الشاشات.
- قم بمحاذاة الأقسام والأدوات الخاصة بك مع الأعمدة. لا تظهر الشبكة في الصفحة المنشورة.
الأعمدة والمزراب والعرض والإزاحة
يحتوي قسم خط الشبكة في إعدادات الصفحة على تمكين يُحوّل، لون الشبكة (رمادي فاتح شفاف افتراضيًا)، الأعمدة من 1 إلى 12، العرض الأقصى, إزاحة, مزراب و مؤشر Z. يمكن أن تأخذ الأعمدة والعرض الأقصى والإزاحة والمزراب قيمًا مختلفة على سطح المكتب والكمبيوتر اللوحي والهاتف المحمول.
- الافتراضي: 12 عمودًا، عرض بحد أقصى 1140 بكسل ومزراب 15 بكسل على سطح المكتب، 1025 بكسل و10 بكسل على الكمبيوتر اللوحي، 768 بكسل و8 بكسل على الهاتف المحمول.
- مطابقة الموضوع الخاص بك: قم بتعيين الحد الأقصى للعرض على عرض محتوى موقعك بحيث تتماشى الأعمدة مع التخطيط الحقيقي.
- الرؤية: اختر لونًا بشفافية حتى يظل المحتوى الخاص بك قابلاً للقراءة، واحتفظ بمؤشر Z عند 999 بحيث تكون الشبكة أعلى من التصميم.
طرق التحقق من التخطيط مقابل الشبكة في العنصر
ليس لدى Elementor تراكب شبكي تصميمي خاص به. هذه هي الخيارات المعتادة.
| ميزة | العنصر وحده | متصفح DevTools مفتش الشبكة | خط شبكة الإضافات الرئيسية |
|---|---|---|---|
| سعر | حر | حر | ماستر أدونز برو |
| تصميم شبكة الأعمدة فوق الصفحة | لا | فقط على العناصر التي تستخدم شبكة CSS | نعم، عبر الصفحة بأكملها |
| تم الإعداد داخل محرر Elementor | لا | لا، يمكنك فحص إطار المعاينة | نعم، في إعدادات الصفحة |
| الأعمدة والمزراب والعرض لكل جهاز | لا | يتبع الشبكة الخاصة بالعنصر | نعم |
| مرئية للزوار | لا | لا | لا |
إذا كان تخطيطك يستخدم بالفعل حاوية Elementor's Grid، فيمكن لمفتش شبكة المتصفح إظهار هذه المسارات مجانًا. Grid Line مخصص للتحقق من أي تخطيط، بما في ذلك حاويات flexbox، مقابل شبكة تصميم ثابتة مثل تلك الموجودة في ملف Figma الخاص بك.
مساعدو المحرر الآخرون: أي عنصر (مجاني) و تحديد المواقع (مجاني).
الأسئلة المتداولة لخط الشبكة
هل تؤثر الشبكة على شكل موقعي في الواجهة الأمامية؟
لا، تظهر الشبكة فقط داخل محرر Elementor. يرى الزوار الصفحة المنشورة بدونها، حتى لو تركت Enable on.
ما الفرق بين الحضيض والأوفست؟
الحضيض هو المسافة بين الأعمدة. الإزاحة هي المسافة بين حافة الشاشة ومكان بدء الشبكة. جنبًا إلى جنب مع الحد الأقصى للعرض، يتيحون لك نسخ عرض محتوى السمة وتباعد الأعمدة.
هل يمكنني استخدام هذا مع نظام حاوية Flexbox الخاص بـ Elementor؟
نعم. يتم رسم الشبكة على المعاينة بأكملها، لذا فهي تعمل مع حاويات flexbox وحاويات الشبكة والأقسام القديمة على حدٍ سواء. لا يقوم بتثبيت العناصر على الأعمدة، لذا يمكنك ترتيبها بنفسك.
هل خط الشبكة مجاني؟
يعد No. Grid Line جزءًا من Master Addons Pro.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
