أثناء العمل مع Elementor ، ستلاحظ أنه من الصعب بعض الشيء تحديد موضع الأقسام والأعمدة بشكل مخصص. تحتاج إلى محاذاة الأعمدة والأقسام رأسيًا وأفقيًا لتحقيق تخطيط سريع الاستجابة "قابل للتمدد للملء". بدون هذه المحاذاة، ستفشل عناصر الأعمدة ذات الارتفاعات المختلفة في الضبط على الشاشة.
- لماذا نحتاج إلى المواءمة؟
- كيف تعمل الأعمدة أو الأقسام للتصميم سريع الاستجابة؟
- كيفية محاذاة أقسام وأعمدة Elementor؟
- لإصلاح مشكلات العرض المستجيب، استخدم "مخفي السعة".
- رعاية تحديد المواقع
- الوحدات النسبية
- التحكم في عمق كل عنصر باستخدام مؤشر Z
- الحيلة حول الوظائف المكررة
- الإزاحات
- القاعدة الذهبية
- خاتمة
لماذا نحتاج إلى المواءمة؟
في كل عمود أو قسم، يمكن أن يكون المحتوى من فئات مختلفة. يمكن أن يكون في شكل صور ونصوص وتقييمات. للحصول على مظهر متكامل، يوصى بأن يكون هناك توحيد في مظهر المحتوى. لا ينبغي أن يتم إلقاؤها هناك فقط - ملقاة - فقط من أجل ذلك.
من خلال المحاذاة الجيدة، يمكنك جعل موقع الويب يبدو أكثر ترتيبًا وراقيًا - بحيث لا يبدو مزدحمًا. باستخدام خيار المحاذاة، يمكنك ضبط عدة عناصر واجهة مستخدم بأحجام مختلفة بجوار بعضها البعض في نفس العمود.
كيف تعمل الأعمدة أو الأقسام للتصميم سريع الاستجابة؟
Elementor 2.5 من تحديد موضع التصميم والمحتوى الخاص بك بشكل مخصص. باستخدام ميزة تحديد المواقع المخصصة الجديدة، يمكنك نقل الأدوات إلى أي مكان. لكن لا يمكنك فعل ذلك خارج نطاق قسم معين. ترتبط هذه الأدوات بالعمود الموجود بداخلها. يمكن أن يسبب هذا مشكلة في استجابة التصميم.
لنفترض أن لديك تخطيطًا مكونًا من ثلاثة أعمدة. بمساعدة تحديد المواقع المخصص، يمكنك سحب وإفلات عنصر واجهة المستخدم من العمود الأيمن إلى العمود الأوسط، أو كيفما تشاء.
لكن القيام بذلك لن يفيد سوى زوار سطح المكتب لأنه سيبدو مناسبًا لهم. ومع ذلك، سيؤدي ذلك إلى حدوث مشكلة إذا تم الوصول إلى موقع الويب من الهاتف المحمول لأن Elementor يكدس الأعمدة عموديًا على الهاتف المحمول.
لذا، بدلًا من وجود ثلاثة أعمدة جنبًا إلى جنب، قد تجد الأعمدة الثلاثة مكدسة فوق بعضها البعض. لن يظهر العنصر بعد الآن في العمود الأوسط كما هو الحال على أجهزة سطح المكتب.
على الرغم من أنه يمكنك تعديل عرض الهاتف المحمول بذكاء باستخدام إعداد مخفي، ولكن ليس هناك ما يضمن أن غالبية الأشخاص يمكنهم العثور عليه. فلماذا يحبط المستخدمين؟ إن جعل التصميم سريع الاستجابة وقابلاً للتكيف هو الحل الصحيح. حتى لا يتعطل في أي مكان.
في هذا الصدد، يتعين عليك الانتباه إلى علاقة الأداة بالعمود الموجود بداخلها.
كيفية محاذاة أقسام وأعمدة Elementor؟
بالنسبة لكل قسم/عمود، انتقل إلى قسم التخطيط وقم بتعيين خيارات المحاذاة التالية وفقًا لمتطلباتك:
- محاذاة رأسية: يمكنك اختيار إعدادات الأدوات من التالي. ولكن هناك شيء واحد يجب أن تضعه في الاعتبار وهو أن المحتوى الموجود في العمود لا يمكن محاذاته مع الخيارات الرأسية الثلاثة الأولى للأعمدة، أي الأعلى والوسط والأسفل.
- قمة
- وسط
- قاع
وفي هذا الصدد، هناك * ثلاثة خيارات جديدة تجعل من السهل جدًا مواءمة المحتوى حسب رغبتك.
- *المسافة بين - لتعيين المسافة بين عناصر واجهة المستخدم في البداية وفي النهاية عند حافة العمود. الحاجيات متساوية التباعد، أي أن هناك مساحة متساوية بينهما.
- *المساحة المحيطة – المسافة بين عناصر واجهة المستخدم متساوية، وتكون الحواف نصف حجم المسافة بين عناصر واجهة المستخدم.
- *المسافة بالتساوي - المسافة بين عناصر واجهة المستخدم موحدة - فهي متساوية بينها وقبلها وبعدها.
- المحاذاة الأفقية: باستخدام هذا الخيار، يمكنك إجراء تحديد موضع سطري ومحاذاة عناصر واجهة المستخدم المضمنة، الموجودة في نفس الصف، أفقيًا. يمكنك محاذاة محتوى الأعمدة أفقيًا باستخدام هذه الخيارات:
- ابدأ- يقوم بمحاذاة كافة الرموز إلى اليسار
- المركز: يضع الرموز في منتصف العمود
- End- يضبط كافة الرموز على اليمين
- المسافة بين – المسافة بين عناصر واجهة المستخدم في البداية وفي النهاية عند حافة العمود. الحاجيات متساوية التباعد، أي أن هناك مساحة متساوية بينهما
- المساحة حول – المسافة بين عناصر واجهة المستخدم متساوية، والحواف هي نصف حجم المسافة بين عناصر واجهة المستخدم
- المسافة بالتساوي - المسافة بين عناصر واجهة المستخدم موحدة - فهي متساوية بينها وقبلها وبعدها
لإصلاح مشكلات العرض المستجيب، استخدم "مخفي السعة".
عندما يتعلق الأمر بمظهر موقع ويب على الهاتف المحمول، هناك احتمال كبير أنك قد تواجه مشكلة عندما تتجاوز أداة ذات موضع مخصص عرض العمود.
وهذا يسبب موقفًا محبطًا للغاية لزوار الهاتف المحمول، حيث يمكنهم التمرير أفقيًا. وهذا ليس الشيء الذي كنت تريده لموقع الويب الخاص بك. يمكن إصلاح ذلك عن طريق:
إعدادات التخطيط > اضبط التجاوز على مخفي
من خلال القيام بذلك، سيتم قطع المساحة الزائدة، ولن تكون هناك حاجة للتمرير أفقيًا
رعاية تحديد المواقع
تحتاج أيضًا إلى الاهتمام بوضع الأعمدة. يمكنك تعيين موضع مخصص باستخدام Elementor 2.5 — المطلق والثابت.
الوضع المطلق هو موضع العنصر بالنسبة للقسم أو العمود الذي أنت بداخله. لذلك، إذا استخدمت الموضع المطلق لعنصر أو قسم، فلن يتحرك هذا القسم على طول نافذة الزائر.
يختلف الموضع الثابت عن الموضع المطلق لأنه يسمح للقسم/العنصر بالبقاء ثابتًا في وجهة نظر الزائر. لذلك، إذا قام المستخدم بالتمرير خلال الصفحة، فسيبقى العنصر هناك.
الوحدات النسبية
أثناء قيامك بتصميم صفحة الويب الخاصة بك، ستجد أن هناك طرقًا متعددة يمكنك من خلالها تحديد موضع العناصر. لتحديد المواقع بشكل مطلق، من الجيد استخدام الوحدات النسبية لأنها ستجعل التصميم سريع الاستجابة أكثر فاعلية عندما يتعلق الأمر بأحجام مختلفة للشاشة.
تقوم الوحدة النسبية بضبط نفسها بناءً على العرض والارتفاع النسبيين للشاشة، وبالتالي السماح للعناصر أو الأقسام بتغيير حجمها وتصميم أفضل استجابة. إذا اخترت استخدام وحدات البكسل، فستحتاج إلى إنشاء أقسام متعددة سريعة الاستجابة لأحجام شاشات مختلفة.
التحكم في عمق كل عنصر باستخدام مؤشر Z
إذا كنت ستستخدم الموضع "المطلق" أو "الثابت" لعناصر واجهة المستخدم، فسيكون هناك الكثير من المواقف التي قد تتداخل فيها عنصرين أو أكثر من عناصر واجهة المستخدم، أي أنها مكدسة "فوق" بعضها البعض. يمكنك تجنب ذلك باستخدام إعداد Z-index العادي. سيمكنك هذا من التحكم في العمق ويسمح لك باختيار الأدوات التي تظهر في المقدمة.
الحيلة حول الوظائف المكررة
إذا كنت تستخدم النقر بزر الماوس الأيمن لتكرار عنصر بموضع مخصص، فقد يبدو أن النقر بزر الماوس الأيمن لم يعمل.
ولكن انظر. هذا ليس صحيحا. لقد عملت الوظيفة المكررة بشكل جيد تمامًا وقامت بتكرار العنصر. إنه فقط نظرًا لأن كل عنصر له نفس الموضع المخصص تمامًا، فإن العنصر المكرر يتم تكديسه تمامًا فوق العنصر الآخر (مما يعطي انطباعًا بأنه لم يتم إنشاء أي تكرار).
بعبارات بسيطة، إذا قمت بإنشاء عمود واحد بنجاح، فيمكنك تكرار العمود عند الحاجة. تأكد أيضًا من أن الأعمدة التي تقوم بإنشائها لا تستخدم موضعًا مخصصًا. إذا حدث ذلك، فلن يعمل التكرار مع خيار النقر بزر الماوس الأيمن. ومع ذلك، يمكنك استخدام الدالة المكررة للتغلب على القيود ونسخ العمود.
اسحب العنصر العلوي قليلاً وسيكشف عن العنصر الآخر. كلا العنصرين موجودان إلى حد كبير. أيضًا، عند تكرار عمود واحد، فإنه سيتم تكديسه فوق العمود القديم. قد تشعر بالارتباك. ولكن لا تقلق، يمكنك ببساطة سحبه ثم استخدامه في تصميم صفحة الويب الخاصة بك.
الإزاحات
هناك حالات تحتاج فيها إلى تعيين إزاحات لمحتوى صفحة الويب الخاصة بك. مع Elementor، يمكنك بسهولة ضبط الإزاحة. لذا، إذا قمت بتعيين إزاحة قدرها 500 بكسل من اليسار، فسيتم ترك مساحة حول المحتوى بناءً على مدخلاتك. وبالمثل، يمكنك أيضًا ضبط الإزاحة على الجانب الأيمن. من الممارسات الجيدة تعيين كل من الإزاحة اليسرى واليمنى بقيمة مماثلة حيث سيتم محاذاة المحتوى بشكل صحيح على الشاشة.
هناك حالات تحتاج فيها إلى تعيين إزاحات لمحتوى صفحة الويب الخاصة بك. مع Elementor، يمكنك بسهولة ضبط الإزاحة. لذا، إذا قمت بتعيين إزاحة قدرها 500 بكسل من اليسار، فسيتم ترك مساحة حول المحتوى بناءً على مدخلاتك. وبالمثل، يمكنك أيضًا ضبط الإزاحة على الجانب الأيمن. من الممارسات الجيدة تعيين كل من الإزاحة اليسرى واليمنى بقيمة مماثلة حيث سيتم محاذاة المحتوى بشكل صحيح على الشاشة.
القاعدة الذهبية
للحصول على تصميم أفضل استجابة، استخدم الوحدات النسبية. وذلك لأن تحديد الموقع المطلق قد يكون أمرًا صعبًا عند الوصول إلى موقع الويب من منصة مختلفة. سيؤدي استخدام الوحدات النسبية لتصميم الأقسام الخاصة بك إلى تصميم أكثر استجابة. يمكن التعامل مع التغيير في العرض بشكل مثالي بمساعدة الوحدات النسبية. نعني بكلمة "نسبي" وحدات مختلفة مثل النسبة المئوية أو عرض العرض (VW)، بدلاً من تثبيت الوحدات مثل وحدات البكسل.
خاتمة
Elementor هو منشئ مواقع ويب سهل الاستخدام للغاية. في بعض الأحيان، يمكن أن يشكل ذلك تحديات في عرض موقع الويب إذا تم الوصول إلى موقع الويب من الهاتف المحمول أو الجهاز اللوحي. بمساعدة محاذاة الأقسام والأعمدة، يمكنك جعل مواقع الويب الخاصة بك مثالية بسهولة حقيقية.
أين تجد هذه الخيارات؟ انهم غير موجودين. هل هذا مخصص لـ Premium Elementor؟ إذا كان الأمر كذلك، فيجب عليك ذكر ذلك في مقالتك حتى لا يضيع الأشخاص وقتهم في قراءته.
مرحبا،
استمتع باللعب مع Elementor Pro. Quiero poner dos Banners, uno pegado to la izquierda وأخرى مثبتة على يمين الشاشة. من أجل إنشائه:
– قسم لكل لافتة.
– كلمة مضمنة بعبارة حتى تتمكن من إنشاء صورة.
يجب أن يتم لصقها على حق الشاشة (الهامش المتبقي 0 صورة). هل هناك نصيحة؟ الكثير من الشكر!
مرحبًا، أول شيء سأفكر فيه هو إعداد المحاذاة العمودية للعمود الموصوف في الجزء الأول من هذا المنشور.
هتافات،
Buongiorno، tutto chiaro، grazie! Ma stavo domandando se è possibile inserire tre right (مع ثلاثة نبض واحد تحت العمود الآخر).
دائرة التجسس الأفضل: ستقسم قسمًا في عمودين. من خلال مسح صورة الغلاف، وعلى طول العمود الخطي، يتم استخدام ثلاثة نبضات (واحدة فوق الأخرى)، متساوية البعد ومركزية على طول العمود المتجه، والتي يتم حفظها بثلاثة نماذج من الهواتف الذكية لكل نوع ومتوفرة تغطية في الصورة.
إذا كنت تبحث عن شخص ما، فلن تجد أي دليل على ما يمكنك فعله.
هذا مفتوح للجميع واقتراحات
Grazie
Scusate، ho appena capito يأتي الأجرة (l'ho capito per errore). اسكت الإزعاج واضغط على الإصبع
مرحبًا، حسنًا، رائع، بالتأكيد هذا ممكن، يمكنك أيضًا توسيط المحتوى عموديًا في كل عمود
لديك مشكلة في التخصيص لا يوجد بها سجل مذيب. يصبح المحتوى عنوانًا وصورة ونصًا. لا يوجد شعار مركزي (فقط يوجد عمود ولكن كما لو كان الطول أو أكثر لا يمكن استخدامه، ولا أفكر في مربع نص آخر) لم أتوقف أبدًا ولن أتحقق أكثر. لقد قمت بتحرير حجم الهاتف المحمول، لقد كنت أتطلع إلى القيام بكل شيء عند تغيير المكتب! هل تعرف ماذا يمكن أن يكون؟ لقد أثبت كل ما يمكنك فعله في المقالة ويبدو أنه لا يعمل 🤗
مرحبًا، أعتقد أنه يتعين عليك البدء بالتحقق من جميع المحاذاة في الأقسام ثم الأعمدة ثم كتلة المحتوى. من الممكن أيضًا أن يلعب CSS الخاص بموضوعك دورًا في هذه المحاذاة.
صباح الخير!
je m'arrache les cheveux car je n'arrive pas à aligner 3coles à l'horizontale. Sur le broillon les parissent toutes parfaitement alignés, mais while je prise les modifs, les colons se retrouvent toutes imbriquées et de différentes tailles (largeurs and hauteur) sur la coté gauche de l'écran.
je voudrais qu'elles fassent toutes la même taille qu'elles soient parfaitement aligner. تعليق عادل؟
أهلاً،
هل تأتي مشكلة المحاذاة أعلى الأعمدة؟
مرحبًا، لقد قمت بتثبيت العنصر ولكن عندما تضيف قسمًا جديدًا لا تظهر خيارات التوزيع الأفقي والرأسي. هل تريد تثبيت ملحق إضافي؟
شكرا
مرحبًا، هل لديك الإصدار المجاني أو Pro من Elementor؟ ربما هذه هي المشكلة.
مرحبًا، هل لديك الإصدار الاحترافي للعنصر ولا تمثل أي خيارات تشير إلى أنه يمكنك ذلك؟
مرحبا، ما هي الخيارات من Elementor pro التي لا يتم عرضها؟
مرحبا،
أريد أن أقوم بتخصيص عناصر واجهة المستخدم للتذييل. das oberste ist immer eine headline, darunter stichpunkte. da ich nicht zwei unterschiedliche textarten in einen kasten schreiben kann (h4 und p) muss ich das in 2 sections machen. هل يمكن أن أتمكن من الابتعاد عن أقسام ووردبريس؟ هذا هو العنوان الرئيسي والنص سهل الاستخدام إلى حد كبير.
شكرا لمساعدتك
مرحبًا، هناك العديد من الخيارات لتعديل المسافة بين النصوص: يمكن أن تكون قسمًا أو عمودًا أو هامشًا أو حشوة لعنصر واجهة المستخدم أو يمكن أن تكون خيار خط مثل ارتفاع الخط.
صباح الخير.
ضبط حجم الأعمدة بالشاشة محظور، ومن المستحيل تعديل حجمها. التعليق هو الحل لهذه المشكلة. رحمة للتقدم.
مرحبًا، من خلال النقر في الزاوية العلوية اليمنى من العمود، يمكنك بعد ذلك تعديل الحجم في إعدادات Elementor.
أتمنى لك إنشاء لوحة من 4 خطوط و3 أعمدة، ودمج الأربع حالات من العمود الأول وإدراج صورة... فكرة؟
ميرسي!
مرحبًا، ليس من الممكن دمج الخلايا، فأنت بحاجة إلى إنشاء سطر ونسخ المحتوى الخاص بك فيه
Bonjour Tristan،
Avant tout، merci pour le temps que vous consacrez à nous (qui nous arrachons les cheveux … sur des coquilles qui … 🙂 )
Voilà، je sais qu'il est الممكنة لتراكب العناصر الأفقية / الرأسية على Elementor. لكن من المستحيل استرجاع التلاعب. وآخرون…. je m'arrache les cheveux du الانقلاب.
Mon besoin (pour matchre à notre maquette): قسم عالمي في laquelle mon fond هو فيديو متواصل، وعلى أساس ذلك، هناك ثلاث خطوط من النصوص التي تظهر بشكل متراكب (لا تحتوي على هالة من الكود لمحاضرة بالتناوب) استمر، ولكن هذا هو الاختيار). C'est l'alignement qui mepose souci.
فكرة واحدة...؟ Je désespère …
Merciiiii
مرحبًا، بالنسبة لما يتعين عليك فعله، سأستخدم خلفية فيديو في قسم Elementor الرئيسي، ثم أضف قسمًا داخليًا يحتوي على أعمدة ونص
مرحبًا،
هل من الممكن تعديل موضع عناصر الصفحة؟ J'ai un Menu déroulant qui passe sous les éléments en dehors de son bloc... Comment requester aux autres blocs d'être en arrière?
رحمة للتقدم!
مرحبًا، نعم هذا ممكن ولكن عليك استخدام CSS مخصص. في Elementor يمكنك تحديد {z-index: 100}