يعمل المصممون أعلى شبكة الأعمدة. إنها الطريقة التي تنتهي بها العناوين والبطاقات والأزرار في الاصطفاف بدلاً من الانجراف ببضع بكسلات. لا يُظهر لك Elementor واحدًا، لذا تتم المحاذاة عادةً بالعين المجردة. تمديد خط الشبكة في ماستر أدونز برو يصلح ذلك باستخدام تراكب شبكة الأعمدة، حيث يمكنك تشغيله مباشرة داخل المحرر.
يمكنك التحكم في عدد الأعمدة، والمزراب، والحد الأقصى للعرض، والإزاحة، ولون التراكب، مباشرة من إعدادات صفحة Elementor. إليك كيفية تمكينه وما يفعله كل خيار.
ما يفعله امتداد خط الشبكة #
يرسم Grid Line مجموعة من الأعمدة الرأسية المتباعدة بشكل متساوٍ فوق صفحتك داخل محرر Elementor. يوجد التراكب أعلى التصميم الخاص بك في المحرر فقط، لذلك لا يراه الزوار أبدًا، ويمكنك التحقق مما إذا كانت الأقسام والأدوات الخاصة بك تصطف بالفعل على الشبكة التي سيستخدمها المصمم في Figma أو Photoshop.
الافتراضي هو شبكة مكونة من 12 عمودًا بعرض أقصى 1140 بكسل مع مزراب 15 بكسل، ويضيق إلى 1025 بكسل و10 بكسل على الجهاز اللوحي و768 بكسل و8 بكسل على الهاتف المحمول. كل قيمة قابلة للتعديل لكل جهاز، ويتم تشغيل وإيقاف التراكب بالكامل بتبديل واحد.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- أ ماستر أدونز برو الترخيص، لأن Grid Line هو امتداد احترافي.
كيفية تمكين امتداد خط الشبكة #
الخطوة 1: قم بتشغيله في علامة التبويب "الامتدادات" #
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. خط الشبكة يعيش في عرض الحاجيات مجموعة تحمل شارة شعبية، بجانب Glassmorphism والأنماط. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني.
الخطوة 2: احفظ التغييرات #
انتقل إلى الأعلى وانقر حفظ التغييرات. يؤكد إشعار “Settings الأخضر الذي تم حفظه بنجاح أن الامتداد نشط. إذا كان محرر Elementor مفتوحًا، فأعد تحميله مرة واحدة.
كيفية إظهار الشبكة في محرر Elementor #
افتح أي صفحة باستخدام Elementor وانقر فوق إعدادات الصفحة أيقونة في الشريط العلوي. تحت إعدادات علامة التبويب سوف تجد جديدة خط الشبكة القسم المميز بشارة MA الأرجوانية. الوجه تمكين إلى On، ويظهر تراكب العمود عبر اللوحة القماشية على الفور.
نظرًا لأن الإعداد موجود في إعدادات الصفحة، فإن الشبكة موجودة في كل صفحة: عليك أن تقرر مكان عرضها، ولا تتبعك في كل مستند.
شرح إعدادات خط الشبكة #
- تمكين: يقوم بتشغيل وإيقاف التراكب لهذه الصفحة.
- لون الشبكة: لون الأعمدة. اختر العينة العامة أو قم بتعيين لون مخصص باستخدام المنتقي. تحافظ قيمة العتامة المنخفضة على المحتوى الخاص بك قابلاً للقراءة أسفل التراكب.
- الأعمدة: كم عدد الأعمدة التي يجب رسمها، من 1 إلى 12. 12 هو المعيار، ولكن يمكنك مطابقة أي شبكة يستخدمها تصميمك.
- العرض الأقصى: العرض الإجمالي للشبكة، 1140 بكسل بشكل افتراضي. قم بمطابقته مع عرض محتوى موقعك بحيث تتماشى الأعمدة مع تخطيطك الفعلي.
- إزاحة: يدفع الشبكة للداخل من الحواف عندما يحتاجها تخطيطك.
- مزراب: المسافة بين الأعمدة، 15 بكسل بشكل افتراضي.
- مؤشر Z: ترتيب التراص للتراكب، 999 افتراضيًا، بحيث تظل الشبكة مرئية فوق المحتوى الخاص بك.
تعد الأعمدة والعرض الأقصى والإزاحة والمزراب عناصر تحكم سريعة الاستجابة: انقر فوق أيقونة الجهاز بجوار كل منها لتعيين قيم مختلفة لسطح المكتب والكمبيوتر اللوحي والهاتف المحمول.
تغيير لون الشبكة #
انقر فوق العينة المخصصة بجوار لون الشبكة لفتح منتقي الألوان. تعمل أي قيمة HEXA، وقناة ألفا هي الأكثر أهمية: ما يقرب من 50 بالمائة من العتامة تمنحك أعمدة مرئية دون إخفاء التصميم تحتها.
ضبط الأعمدة والمزراب #
اسحب أشرطة التمرير وتحديثات التراكب مباشرة. في المثال أدناه، يصل حجم الحضيض إلى 58 بكسل وتحمل الشبكة لونًا مخصصًا، بحيث يُقرأ بوضوح على خلفية الإضاءة بينما تظل بطاقات التسعير مقروءة.
عندما تتم محاذاة التخطيط، يمكنك الوجه تمكين التراجع للحصول على لوحة قماشية نظيفة. إن تركها دون أي ضرر، لأن الشبكة لا تظهر أبدًا على الصفحة المنشورة.
عندما يوفر لك Grid Line الوقت #
- مطابقة ملف التصميم. أعد بناء تخطيط Figma أو XD على نفس الشبكة المكونة من 12 عمودًا التي تم تصميمه عليها، بدلاً من المسافات المذهلة.
- محاذاة الأقسام. تأكد من أن العناصر عبر الأقسام المختلفة تبدأ وتنتهي في نفس العمود.
- سلسلة صفحات متسقة. احتفظ بالصفحات المقصودة التي أنشأها أعضاء الفريق المختلفون على شبكة واحدة مشتركة.
- تلميع القوالب المستوردة. قم بإسقاط التراكب على صفحة من أ مجموعة القالب واكتشف العناصر التي تجلس خارج الشبكة.
- قرارات التباعد. استخدم خطوط الميزاب كمسطرة سريعة عند ضبط عرض العمود والحشو.
فيديو تعليمي #
تفضل مشاهدته وهو يتحرك؟ يمر هذا الفيديو عبر تمكين Grid Line وضبط التراكب في محرر Elementor.
الأسئلة المتداولة #
ما هو امتداد Grid Line في الإضافات الرئيسية؟
إنه امتداد Master Addons Pro الذي يرسم تراكب شبكة الأعمدة في محرر Elementor. يمكنك تعيين عدد الأعمدة والمزراب والحد الأقصى للعرض والإزاحة واللون من إعدادات الصفحة، ثم استخدام الأعمدة لمحاذاة الأقسام والأدوات بالطريقة التي يفعلها المصممون في Figma.
أين أجد إعدادات خط الشبكة؟
في محرر Elementor، افتح إعدادات الصفحة من الشريط العلوي وابق في علامة التبويب الإعدادات. بعد تمكين الامتداد في لوحة معلومات Master Addons، يظهر هناك قسم Grid Line بشارة MA، يحمل مفتاح تمكين التبديل وجميع خيارات الشبكة.
هل يمكنني تغيير عدد الأعمدة والمزراب؟
نعم. يستغرق حقل الأعمدة من 1 إلى 12، مع 12 كإعداد افتراضي، ويتحكم شريط تمرير Gutter في المسافة بين الأعمدة. يشكل العرض الأقصى والإزاحة بصمة الشبكة. كل منها سريع الاستجابة، لذلك يمكن لسطح المكتب والكمبيوتر اللوحي والهاتف المحمول استخدام قيم مختلفة.
هل يظهر تراكب الشبكة في كل صفحة؟
No. Grid Line هو إعداد لكل صفحة داخل إعدادات الصفحة، لذا يمكنك تمكينه فقط على الصفحات التي تريد التراكب فيها. قم بإيقاف تشغيل تمكين التبديل عند الانتهاء من المحاذاة، وتعود تلك الصفحة إلى لوحة قماشية نظيفة. لا تظهر الشبكة أبدًا على الصفحة المنشورة في أي من الاتجاهين.
هل امتداد خط الشبكة مجاني؟
No. Grid Line هو امتداد Pro في Master Addons، وهو مدرج في مجموعة Display Widgets في علامة التبويب Extensions. انظر صفحة التسعير للخطط.
إلتحاق بالركب #
ال تمديد خط الشبكة يمنح Elementor الشيء الوحيد الذي تمتلكه كل أداة تصميم بالفعل: شبكة أعمدة حقيقية للبناء عليها. قم بتمكينه مرة واحدة في لوحة المعلومات، وقلبه من إعدادات الصفحة عندما تحتاج إليه، وقم بضبط الأعمدة والمزراب واللون ليتناسب مع نظام التصميم الخاص بك. تصفح بقية عناصر واجهة المستخدم والإضافات الرئيسية لمزيد من الأدوات مثل هذه، بما في ذلك أي عنصر تحوم التسميات للمحرر.
