كيفية محاذاة أقسام وأعمدة Elementor

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

• لماذا نحتاج إلى المواءمة؟
• كيف تعمل الأعمدة أو الأقسام للتصميم سريع الاستجابة؟
• كيفية محاذاة أقسام وأعمدة Elementor؟
• لإصلاح مشكلات العرض المستجيب، استخدم "مخفي السعة".
• رعاية تحديد المواقع
• الوحدات النسبية
• التحكم في عمق كل عنصر باستخدام مؤشر Z
• الحيلة حول الوظائف المكررة
• الإزاحات
• القاعدة الذهبية
• خاتمة

لماذا نحتاج إلى المواءمة؟

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

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

كيف تعمل الأعمدة أو الأقسام للتصميم سريع الاستجابة؟

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

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

لكن القيام بذلك لن يفيد سوى زوار سطح المكتب لأنه سيبدو مناسبًا لهم. ومع ذلك، سيؤدي ذلك إلى حدوث مشكلة إذا تم الوصول إلى موقع الويب من الهاتف المحمول لأن Elementor يكدس الأعمدة عموديًا على الهاتف المحمول.

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

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

في هذا الصدد، يتعين عليك الانتباه إلى علاقة الأداة بالعمود الموجود بداخلها.

كيفية محاذاة أقسام وأعمدة Elementor؟

بالنسبة لكل قسم/عمود، انتقل إلى قسم التخطيط وقم بتعيين خيارات المحاذاة التالية وفقًا لمتطلباتك:

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

وفي هذا الصدد، هناك ^* ثلاثة خيارات جديدة تجعل من السهل جدًا مواءمة المحتوى حسب رغبتك.

• ^*المسافة بين - لتعيين المسافة بين عناصر واجهة المستخدم في البداية وفي النهاية عند حافة العمود. الحاجيات متساوية التباعد، أي أن هناك مساحة متساوية بينهما.
• ^*المساحة المحيطة – المسافة بين عناصر واجهة المستخدم متساوية، وتكون الحواف نصف حجم المسافة بين عناصر واجهة المستخدم.
• ^*المسافة بالتساوي - المسافة بين عناصر واجهة المستخدم موحدة - فهي متساوية بينها وقبلها وبعدها.

• المحاذاة الأفقية: باستخدام هذا الخيار، يمكنك إجراء تحديد موضع سطري ومحاذاة عناصر واجهة المستخدم المضمنة، الموجودة في نفس الصف، أفقيًا. يمكنك محاذاة محتوى الأعمدة أفقيًا باستخدام هذه الخيارات:
• ابدأ- يقوم بمحاذاة كافة الرموز إلى اليسار
• المركز: يضع الرموز في منتصف العمود
• النهاية لتعيين كافة الرموز على اليمين
• المسافة بين – المسافة بين عناصر واجهة المستخدم في البداية وفي النهاية عند حافة العمود. الحاجيات متساوية التباعد، أي أن هناك مساحة متساوية بينهما
• المساحة حول – المسافة بين عناصر واجهة المستخدم متساوية، والحواف هي نصف حجم المسافة بين عناصر واجهة المستخدم
• المسافة بالتساوي - المسافة بين عناصر واجهة المستخدم موحدة - فهي متساوية بينها وقبلها وبعدها

لإصلاح مشكلات العرض المستجيب، استخدم "مخفي السعة".

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

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

إعدادات التخطيط > اضبط التجاوز على مخفي

من خلال القيام بذلك، سيتم قطع المساحة الزائدة، ولن تكون هناك حاجة للتمرير أفقيًا

رعاية تحديد المواقع

تحتاج أيضًا إلى الاهتمام بوضع الأعمدة. يمكنك تعيين موضع مخصص باستخدام Elementor 2.5 — المطلق والثابت.

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

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

الوحدات النسبية

أثناء قيامك بتصميم صفحة الويب الخاصة بك، ستجد أن هناك طرقًا متعددة يمكنك من خلالها تحديد موضع العناصر. لتحديد المواقع بشكل مطلق، من الجيد استخدام الوحدات النسبية لأنها ستجعل التصميم سريع الاستجابة أكثر فاعلية عندما يتعلق الأمر بأحجام مختلفة للشاشة.

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

التحكم في عمق كل عنصر باستخدام مؤشر Z

إذا كنت ستستخدم الموضع "المطلق" أو "الثابت" لعناصر واجهة المستخدم، فسيكون هناك الكثير من المواقف التي قد تتداخل فيها عنصرين أو أكثر من عناصر واجهة المستخدم، أي أنها مكدسة "فوق" بعضها البعض. يمكنك تجنب ذلك باستخدام إعداد Z-index العادي. سيمكنك هذا من التحكم في العمق ويسمح لك باختيار الأدوات التي تظهر في المقدمة.

الحيلة حول الوظائف المكررة

إذا كنت تستخدم النقر بزر الماوس الأيمن لتكرار عنصر بموضع مخصص، فقد يبدو أن النقر بزر الماوس الأيمن لم يعمل.

لكن انتظر. هذا ليس صحيحا. لقد عملت الوظيفة المكررة بشكل جيد تمامًا وقامت بتكرار العنصر. إنه فقط نظرًا لأن كل عنصر له نفس الموضع المخصص تمامًا، فإن العنصر المكرر يتم تكديسه تمامًا فوق العنصر الآخر (مما يعطي انطباعًا بأنه لم يتم إنشاء أي تكرار).

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

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

الإزاحات

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

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

القاعدة الذهبية

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

خاتمة

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