أثناء العمل مع Elementor ، ستلاحظ أنه من الصعب بعض الشيء تخصيص موضع أقسامك وأعمدتك. تحتاج إلى محاذاة الأعمدة والأقسام عموديًا وأفقيًا ، لتحقيق تنسيق "ممتد للتعبئة" سريع الاستجابة. بدون هذه المحاذاة ، ستفشل عناصر الأعمدة ذات الارتفاعات المتفاوتة في الضبط على الشاشة.
- لماذا نحتاج إلى المحاذاة؟
- كيف تعمل الأعمدة أو الأقسام من أجل تصميم سريع الاستجابة؟
- كيفية محاذاة أقسام وأعمدة العنصر؟
- لإصلاح مشاكل العرض المتجاوبة ، استخدم مخفي تجاوز السعة
- العناية بالتموضع
- الوحدات النسبية
- تحكم في عمق كل عنصر باستخدام مؤشر Z.
- الحيلة حول تكرار الوظائف
- إزاحة
- القاعدة الذهبية
- استنتاج
لماذا نحتاج إلى المحاذاة؟
في كل عمود أو قسم ، يمكن أن يكون المحتوى من فئات مختلفة. يمكن أن يكون في شكل صور ونصوص وتقييمات. للحصول على نظرة مجمعة ، يوصى بأن يكون هناك تجانس في مظهر المحتوى. لا ينبغي إلقاؤها هناك فقط - ملقاة - فقط من أجل هيك.
من خلال المحاذاة الجيدة ، يمكنك جعل موقع الويب يبدو أكثر أناقة وأنيقة - بحيث لا يبدو مشوشًا. باستخدام خيار المحاذاة ، يمكنك ضبط العديد من عناصر واجهة المستخدم ذات الأحجام المختلفة بجوار بعضها البعض في نفس العمود.
كيف تعمل الأعمدة أو الأقسام من أجل تصميم سريع الاستجابة؟
Elementor 2.5 من تخصيص موضع التصميم والمحتوى الخاصين بك. باستخدام ميزة تحديد المواقع المخصصة الجديدة ، يمكنك نقل عناصر واجهة المستخدم إلى أي مكان. لكن ، لا يمكنك فعل ذلك حقًا خارج قسم معين. هذه الأدوات مرتبطة بالعمود الموجود بداخلها. يمكن أن يسبب هذا مشكلة في استجابة التصميم.
افترض أن لديك تخطيطًا من ثلاثة أعمدة. بمساعدة تحديد المواقع المخصص ، يمكنك سحب وإسقاط عنصر واجهة مستخدم من العمود الأيمن إلى العمود الأوسط ، أو كيفما تريد ذلك.
لكن القيام بذلك لن يفيد سوى زوار سطح المكتب لأنه سيبدو مناسبًا لهم. ومع ذلك ، فإنه سوف يسبب مشكلة إذا تم الوصول إلى موقع الويب من الجوال لأن Elementor تكدس الأعمدة رأسيًا على الهاتف المحمول.
لذلك بدلاً من وجود ثلاثة أعمدة جنبًا إلى جنب ، قد تواجه الأعمدة الثلاثة مكدسة فوق بعضها البعض. لن يظهر العنصر بعد الآن في العمود الأوسط كما يظهر على أجهزة سطح المكتب.
على الرغم من أنه يمكنك تعديل عرض الهاتف المحمول بذكاء باستخدام إعداد مخفي ، ولكن لا يوجد ما يضمن أن غالبية الأشخاص يمكنهم العثور عليه. فلماذا تحبط المستخدمين؟ الحل الصحيح هو جعل التصميم مستجيبًا وقابلاً للتكيف. بحيث لا تتحطم في أي مكان.
لهذه المسألة ، تحتاج إلى الانتباه إلى علاقة الأداة بالعمود الموجود بداخلها.
كيفية محاذاة أقسام وأعمدة العنصر؟
لكل قسم / عمود ، انتقل إلى قسم التخطيط وقم بتعيين خيارات المحاذاة التالية وفقًا لمتطلباتك:
- المحاذاة العمودية: يمكنك اختيار إعدادات الأدوات من التالي. ولكن هناك شيء واحد يجب أن تضعه في الاعتبار وهو أن المحتوى الموجود في عمود لا يمكن محاذاته مع الخيارات الرأسية الثلاثة الأولى ، مثل أعلى ، وسط ، وأسفل.
- قمة
- وسط
- قاع
لهذه المسألة ، هناك * ثلاثة خيارات جديدة تجعل من الملائم حقًا محاذاة المحتوى حسب رغبتك.
- *المسافة بين - يحدد المسافة بين الأدوات في البداية والنهاية عند حافة العمود. الحاجيات متساوية التباعد ، أي أن هناك مسافة متساوية بينهما.
- *المسافة حول - المسافة بين الأدوات متساوية ، والحواف نصف حجم المسافة بين الأدوات.
- *المسافة بالتساوي - المسافة بين الأدوات متساوية - فهي متساوية بينها وقبلها وبعدها.
- المحاذاة الأفقية: باستخدام هذا الخيار ، يمكنك تنفيذ وضع مضمّن ومحاذاة عناصر واجهة المستخدم المضمّنة ، الموجودة في نفس الصف ، أفقيًا. يمكنك محاذاة محتوى الأعمدة أفقيًا باستخدام هذه الخيارات:
- بدء- محاذاة جميع الرموز إلى اليسار
- المركز: يضع الرموز في منتصف العمود
- النهاية- يحدد جميع الرموز على اليمين
- المسافة بين - المسافة بين الأدوات في البداية والنهاية عند حافة العمود. الحاجيات متساوية التباعد ، أي أن هناك مسافة متساوية بينهما
- المسافة حول - المسافة بين الأدوات متساوية ، والحواف نصف حجم المسافة بين الأدوات
- المسافة بالتساوي - المسافة بين الأدوات متساوية - فهي متساوية بينها وقبلها وبعدها
لإصلاح مشاكل العرض المتجاوبة ، استخدم مخفي تجاوز السعة
عندما يتعلق الأمر بمظهر موقع الويب على الهاتف المحمول ، فهناك احتمال كبير بأنك قد تواجه مشكلة حيث يتجاوز عنصر واجهة المستخدم مع تحديد المواقع عرض العمود.
هذا يسبب موقفًا محبطًا حقًا لزوار الجوّال ، حيث يمكنهم التمرير أفقيًا. وهذا ليس شيئًا كنت تريده لموقعك على الويب. يمكن إصلاح ذلك من خلال:
إعدادات التخطيط> اضبط خيار تجاوز السعة مخفي
من خلال القيام بذلك ، سيتم قطع المنطقة الزائدة ، ولن تكون هناك حاجة للتمرير أفقيًا
العناية بالتموضع
تحتاج أيضًا إلى الاهتمام بوضع الأعمدة. يمكنك تعيين تحديد المواقع باستخدام Elementor 2.5 - مطلق وثابت.
الوضع المطلق هو موضع العنصر بالنسبة إلى القسم أو العمود الذي أنت بداخله. لذلك ، إذا كنت تستخدم تحديد الموضع المطلق لعنصر أو قسم ، فلن يتحرك هذا القسم على طول نافذة الزائر.
يختلف الموضع الثابت عن الوضع المطلق لأنه يتيح للقسم / العنصر البقاء ثابتًا على وجهة نظر الزائر. لذلك ، إذا قام المستخدم بالتمرير عبر الصفحة ، فسيظل العنصر هناك.
الوحدات النسبية
أثناء تصميم صفحة الويب الخاصة بك ، ستجد أن هناك طرقًا متعددة يمكنك من خلالها وضع العناصر. من أجل تحديد الموضع المطلق ، من الجيد استخدام الوحدات النسبية لأنها ستجعل التصميم سريع الاستجابة أكثر فاعلية عندما يتعلق الأمر بحجم شاشة مختلف.
تقوم الوحدة النسبية بضبط نفسها بناءً على العرض والارتفاع النسبيين للشاشة ، وبالتالي السماح للعناصر أو الأقسام بتغيير حجمها وتصميم أفضل استجابة. إذا اخترت استخدام وحدات البكسل ، فأنت بحاجة إلى إنشاء أقسام متعددة سريعة الاستجابة لأحجام مختلفة للشاشة.
تحكم في عمق كل عنصر باستخدام مؤشر Z.
إذا كنت ستستخدم تحديد الموضع "المطلق" أو "الثابت" للأدوات ، فسيكون هناك الكثير من المواقف التي قد يتداخل فيها عنصران أو أكثر ، أي يتم تكديسهما "فوق" بعضهما البعض. يمكنك تجنب ذلك باستخدام إعداد مؤشر Z العادي. سيمكنك هذا من التحكم في العمق ويسمح لك باختيار الأدوات التي تظهر في المقدمة.
الحيلة حول تكرار الوظائف
إذا كنت تستخدم النقر بزر الماوس الأيمن لتكرار عنصر بموضع مخصص ، فقد يبدو أن النقر بزر الماوس الأيمن لم ينجح.
لكن ها. هذا ليس صحيحا. لقد عملت الوظيفة المكررة بشكل جيد وقد قامت بتكرار العنصر. كل ما في الأمر هو أنه نظرًا لأن كل عنصر له نفس الموضع المخصص بالضبط ، فإن العنصر المكرر مكدس تمامًا فوق العنصر الآخر (مما يعطي انطباعًا بأنه لم يتم إنشاء أي تكرار).
بعبارات بسيطة ، إذا قمت بإنشاء عمود واحد بنجاح ، يمكنك تكرار العمود كلما احتجت إلى ذلك. تأكد أيضًا من أن الأعمدة التي تقوم بإنشائها لا تستخدم المواضع المخصصة. إذا كان الأمر كذلك ، فلن يعمل التكرار مع خيار النقر بزر الماوس الأيمن. ومع ذلك ، يمكنك استخدام الوظيفة المكررة للتغلب على القيد ونسخ العمود.
اسحب العنصر العلوي قليلاً وسيظهر العنصر الآخر. كلا العنصرين موجودان كثيرًا هناك. أيضًا ، عند تكرار عمود واحد ، فسيتم تكديسه فوق العمود القديم. قد تشعر بالارتباك. لكن لا تقلق ، يمكنك ببساطة سحبها ثم استخدامها في تصميم صفحة الويب الخاصة بك.
إزاحة
هناك حالات تحتاج فيها إلى تعويض محتوى صفحة الويب الخاصة بك. مع Elementor ، يمكنك بسهولة تعويض. لذلك ، إذا قمت بتعيين إزاحة بمقدار 500 بكسل من اليسار ، فسيتم ترك مساحة حول المحتوى بناءً على إدخالك. وبالمثل ، يمكنك أيضًا ضبط الإزاحة على الجانب الأيمن. من الممارسات الجيدة تعيين كل من الإزاحة اليمنى واليسرى بقيمة مماثلة حيث سيتم محاذاة المحتوى بشكل صحيح على الشاشة.
هناك حالات تحتاج فيها إلى تعويض محتوى صفحة الويب الخاصة بك. مع Elementor ، يمكنك بسهولة تعويض. لذلك ، إذا قمت بتعيين إزاحة بمقدار 500 بكسل من اليسار ، فسيتم ترك مساحة حول المحتوى بناءً على إدخالك. وبالمثل ، يمكنك أيضًا ضبط الإزاحة على الجانب الأيمن. من الممارسات الجيدة تعيين كل من الإزاحة اليمنى واليسرى بقيمة مماثلة حيث سيتم محاذاة المحتوى بشكل صحيح على الشاشة.
القاعدة الذهبية
للحصول على تصميم أكثر استجابة ، استخدم الوحدات النسبية. هذا لأن تحديد المواقع المطلق يمكن أن يكون خادعًا عند الوصول إلى موقع الويب من نظام أساسي مختلف. سيؤدي استخدام الوحدات النسبية لتصميم الأقسام الخاصة بك إلى تصميم أكثر استجابة. يمكن التعامل مع التغيير في العرض بشكل مثالي بمساعدة الوحدات النسبية. نعني بكلمة "نسبي" وحدات مختلفة مثل النسبة المئوية أو عرض العرض (VW) ، بدلاً من إصلاح الوحدات مثل وحدات البكسل.
استنتاج
Elementor هو منشئ مواقع ويب سهل الاستخدام للغاية. في بعض الأحيان ، يمكن أن تشكل تحديات في عرض موقع الويب إذا تم الوصول إلى موقع الويب من الهاتف المحمول أو الجهاز اللوحي. بمساعدة محاذاة الأقسام والأعمدة ، يمكنك جعل مواقع الويب الخاصة بك مثالية بسهولة حقيقية.
أين تجد هذه الخيارات؟ لم تكن موجودة. هل هذا من أجل Premium Elementor؟ إذا كان الأمر كذلك ، يجب أن تذكرها في مقالتك حتى لا يضيع الناس وقتهم في قراءتها.
أولا،
Estoy maquetando con Elementor Pro.
لافتات Quiero poner dos ، uno pegado a la izquierda y otro pegado a la derecha de la pantalla. الفقرة ello he creado: - una seccion para cada banner.
- un encabezado con una frase، a la cual he puesto de fondo una imagen.
Una de ella deberia ir pegada a la derecha de la pantalla (margen izquierda 0 imagino). ألجون كونسيجو؟ موتشا جراسياس!
مرحبًا ، أول شيء أود النظر فيه هو إعداد المحاذاة الرأسية للعمود الموضح في الجزء الأول من هذا المنشور.
هتافات،
Buongiorno ، tutto chiaro ، grazie!
Ma mi stavo domandando se è الممكن inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa Colonna. Cerco di spiegarmi meglio: vorreiividere una sezione في القولون المناسب.
في غطاء quella di sinistra metterei la foto di una ، e nella Colonna di sinistra vorrei mettere tre pulsanti (uno sopra l'altro) ، equidistanti e centrati rispetto alla colna di sinistra ، che rimandano ai tre modelli di phone i quali è disponibile تغطية بالصور. Sto cercando ovunque، ma non trovo nulla che indichi che si si أجرة.
Sono aperta a tutti i suggerimenti
Grazie
Scusate ، ho appena capito تأتي الأجرة (l'ho capito per errore). scusate il disbro e grazie lo stesso
مرحبًا ، حسنًا ، رائع ، بالتأكيد هذا ممكن ، يمكنك حتى توسيط المحتوى عموديًا في كل عمود
يو تينغو أون problema con la alineación que no logro solventar. El contenido se queda a un lado، la imagen، titulo y texto. No logro centrarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar، ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar. ههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههه Alguien sabe que puede ser؟ He probado todo lo que pone en el artículo y parece que nada funciona 🤗
مرحبًا ، أعتقد أنه يجب عليك البدء بالتحقق من جميع المحاذاة في الأقسام ثم الأعمدة ثم كتلة المحتوى. من الممكن أيضًا أن يلعب CSS لموضوعك دورًا في هذه المحاذاة.
صباح الخير!
je m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale.
Sur le brouillon elles parissent toutes parfaitement alignées، mais lorsque je prévisualise les modifs، les Colonnes se retrouvent toutes imbriquées et de différentes tailles (largeurs et hauteur) sur le côté gauche de l'écran. je voudrais qu'elles fassent toutes la même taille et qu'elles soient parfaitement aligner. تعليق faire؟
أهلا،
هل مشكلة المحاذاة تأتي على رأس الأعمدة؟
Hola، tengo instalado element أو pro pero cuando apprgo una nueva sección no aparecen las opciones de alineaciónorizontal y alineación vertical.
Hay que instalar un plugo adicional؟ جراسياس
مرحبًا ، هل لديك إصدار Elementor مجاني أو إصدار Pro؟ ربما هذه هي المشكلة.
Hola، tengo la version pro de elementor y no figura ninguna de las opciones que indicas، que puede ser؟
مرحبًا ، ما هي الخيارات من Elementor pro التي لا يتم عرضها؟
مرحبا،
ich habe im الحاجيات verschiedene تذييل. 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 في قسمين. wo kann ich nun den abstand der wordpress أقسام zueinander verringern؟ es ist zwischen der headline und dem text einfach zu viel platz.
danke für eure hilfe
مرحبًا ، هناك العديد من الخيارات لتنسيق المسافة بين النصوص: يمكن أن يكون هامش القسم أو العمود أو عنصر واجهة المستخدم أو الحشو أو يمكن أن يكون خيار الخط مثل ارتفاع الخط.
صباح الخير.
l'ajustement de la taille des Colonnes avec la souris est bloqué، المستحيل de modifier leur taille. التعليق puis je solutionner ce problème. شكرا مسبقا.
مرحبًا ، من خلال النقر في الزاوية العلوية اليمنى من العمود ، يمكنك بعد ذلك تعديل الحجم في إعدادات Elementor.
Bonjour je souhaite créer un tableau de 4 lignes et 3 Colonnes، et souhaite fusionner les 4 case de la première Colonne pour y insérer une image… Un idée؟
ميرسي!
مرحبًا ، لا يمكن دمج الخلايا ، فأنت بحاجة إلى إنشاء سطر ونسخ المحتوى الخاص بك فيه
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 possible de superposer des éléments horizontaux / verticaux sur Elementor.
ميس ، المستحيل دي retrouver la manip. Et…. je m'arrache les cheveux du coup. Mon besoin (pour concre à notre maquette): Une section globale dans laquelle mon fond est une vidéo en continue، et par dessus، j'ai trois lignes de textes qui viennent se superposer (dont une qui aura du code pour une lecture en rotation تواصل. Mais ça ، c'est autre اختار).
C'est l'alignement qui me pose souci. Une idée…؟
Je désespère… Merciiiii
مرحبًا ، لما تحتاج إلى القيام به ، سأستخدم خلفية فيديو في قسم Elementor الرئيسي ، ثم أضف قسمًا داخليًا به أعمدة ونص
Bonsoir،
Est-il possible de modifier la position des éléments d'une page؟
J'ai un menu déroulant qui passe sous les éléments en dehors de son block ... تعليق الطالب aux autres blocs d'être en arrière؟ شكرا مسبقا!
مرحبًا ، نعم ، هذا ممكن ولكنك تحتاج إلى استخدام CSS مخصص. في Elementor يمكنك المحدد {z-index: 100}