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