Ενώ εργάζεστε με το Elementor , θα παρατηρήσετε ότι είναι λίγο δύσκολο να προσαρμόσετε τις ενότητες και τις στήλες σας. Πρέπει να ευθυγραμμίσετε τις στήλες και τα τμήματα κάθετα και οριζόντια, για να επιτύχετε μια ανταποκρινόμενη διάταξη "stretch-to-fill". Χωρίς αυτήν την ευθυγράμμιση, τα στοιχεία των στηλών με διαφορετικά ύψη δεν θα προσαρμοστούν στην οθόνη.
- Γιατί πρέπει να ευθυγραμμίσουμε;
- Πώς λειτουργούν οι στήλες ή οι ενότητες για ένα ανταποκρινόμενο σχέδιο;
- Πώς να ευθυγραμμίσετε τις ενότητες και τις στήλες του Elementor;
- Για να επιδιορθώσετε προβλήματα απόκρισης πλάτους Χρησιμοποιήστε κρυφή υπερχείλιση
- Φροντίδα θέσης
- Σχετικές μονάδες
- Ελέγξτε το βάθος κάθε στοιχείου χρησιμοποιώντας Z-Index
- Το κόλπο για τη διπλή λειτουργικότητα
- Όφσετ
- Ο χρυσός κανόνας
- συμπέρασμα
Γιατί πρέπει να ευθυγραμμίσουμε;
Σε κάθε στήλη ή ενότητα, το περιεχόμενο μπορεί να είναι διαφορετικών κατηγοριών. Μπορεί να έχει τη μορφή εικόνων, κειμένου και αξιολογήσεων. Για μια μαζική εμφάνιση, συνιστάται να υπάρχει ομοιομορφία στην εμφάνιση περιεχομένου. Δεν πρέπει απλώς να πεταχτεί εκεί - να πετάξει - μόνο για το καλό του.
Με καλή ευθυγράμμιση, μπορείτε να κάνετε τον ιστότοπο να φαίνεται πιο τακτοποιημένος και κομψός, έτσι ώστε να μην φαίνεται γεμάτος. Με την επιλογή ευθυγράμμισης, μπορείτε να προσαρμόσετε πολλά widget διαφορετικών μεγεθών το ένα δίπλα στο άλλο στην ίδια στήλη.
Πώς λειτουργούν οι στήλες ή οι ενότητες για ένα ανταποκρινόμενο σχέδιο;
Το Elementor 2.5 σάς δίνει τη δυνατότητα να προσαρμόσετε το σχεδιασμό και το περιεχόμενό σας. Με τη νέα δυνατότητα προσαρμοσμένης τοποθέτησης, μπορείτε να μετακινήσετε τα γραφικά στοιχεία σε οποιαδήποτε τοποθεσία. Αλλά, δεν μπορείτε πραγματικά να το κάνετε πέρα από ένα συγκεκριμένο τμήμα. Αυτά τα γραφικά στοιχεία σχετίζονται με τη στήλη στην οποία βρίσκονται. Αυτό μπορεί να προκαλέσει πρόβλημα στην απόκριση του σχεδίου.
Ας υποθέσουμε ότι έχετε διάταξη τριών στηλών. Με τη βοήθεια της προσαρμοσμένης τοποθέτησης, μπορείτε να μεταφέρετε και να αποθέσετε ένα γραφικό στοιχείο από τη δεξιά στήλη στην κεντρική στήλη ή, ωστόσο, σας αρέσει.
Αλλά αυτό θα ωφελήσει μόνο τους επισκέπτες της επιφάνειας εργασίας, επειδή θα φαίνεται εντάξει σε αυτούς. Ωστόσο, θα προκαλέσει πρόβλημα εάν η πρόσβαση στον ιστότοπο γίνεται από κινητό, επειδή το Elementor στοιβάζει τις στήλες κάθετα στο κινητό.
Έτσι, αντί να έχετε τρεις στήλες δίπλα-δίπλα, ενδέχεται να αντιμετωπίσετε και τις τρεις στήλες στοιβασμένες μεταξύ τους. Το στοιχείο δεν θα εμφανίζεται πλέον στη μεσαία στήλη όπως εμφανίζεται στους επιτραπέζιους υπολογιστές.
Παρόλο που μπορείτε να προσαρμόσετε έξυπνα την προβολή του κινητού με μια κρυφή ρύθμιση, αλλά δεν υπάρχει καμία εγγύηση ότι η πλειονότητα των ατόμων μπορεί να την βρει. Λοιπόν, γιατί απογοητεύουν τους χρήστες; Το να ανταποκρίνεται και να προσαρμόζεται ο σχεδιασμός είναι η σωστή λύση. Για να μην συντριβεί πουθενά.
Για αυτό το θέμα, πρέπει να δώσετε προσοχή στη σχέση του widget με τη στήλη που βρίσκεται μέσα.
Πώς να ευθυγραμμίσετε τις ενότητες και τις στήλες του Elementor;
Για κάθε ενότητα / στήλη, μεταβείτε στην ενότητα διάταξης και ορίστε τις ακόλουθες επιλογές ευθυγράμμισης σύμφωνα με τις απαιτήσεις σας:
- Vertical Align: μπορείτε να επιλέξετε ρυθμίσεις από τα ακόλουθα. Αλλά ένα πράγμα που πρέπει να θυμάστε είναι ότι το περιεχόμενο σε μια στήλη δεν μπορεί να ευθυγραμμιστεί με τις τρεις πρώτες κάθετες επιλογές στηλών, δηλαδή πάνω, μεσαία και κάτω.
- Μπλουζα
- Μεσαία
- Κάτω μέρος
Για αυτό το θέμα, υπάρχουν * τρεις νέες επιλογές που καθιστούν πραγματικά βολικό να ευθυγραμμίσετε το περιεχόμενο σύμφωνα με τις προτιμήσεις σας.
- *Space Between - ορίζει το διάστημα μεταξύ widgets στην αρχή και στο τέλος στην άκρη της στήλης. Τα widgets έχουν ίσες αποστάσεις, δηλαδή υπάρχει ίσος χώρος μεταξύ τους.
- *Space Around - ο χώρος μεταξύ των widget είναι ίσος και οι άκρες είναι το μισό του διαστήματος μεταξύ των widget.
- *Space Evenly - ο χώρος μεταξύ των widget είναι ομοιόμορφος - είναι ίσος μεταξύ, πριν και μετά από αυτά.
- Οριζόντια ευθυγράμμιση: με αυτήν την επιλογή μπορείτε να εκτελέσετε ενσωματωμένη τοποθέτηση και να ευθυγραμμίσετε τα ενσωματωμένα γραφικά στοιχεία, τα οποία βρίσκονται στην ίδια σειρά, οριζόντια. Μπορείτε να ευθυγραμμίσετε το περιεχόμενο των στηλών οριζόντια χρησιμοποιώντας αυτές τις επιλογές:
- Έναρξη - ευθυγραμμίζει όλα τα εικονίδια προς τα αριστερά
- Κέντρο: τοποθετεί τα εικονίδια στο μέσο της στήλης
- Τέλος - ορίζει όλα τα εικονίδια προς τα δεξιά
- Διάστημα μεταξύ - το διάστημα μεταξύ γραφικών στοιχείων στην αρχή και στο τέλος στην άκρη της στήλης. Τα widgets έχουν ίσες αποστάσεις, δηλαδή υπάρχει ίσος χώρος μεταξύ τους
- Space Around - ο χώρος μεταξύ των widget είναι ίσος και οι άκρες είναι το μισό του διαστήματος μεταξύ των widget
- Space Evenly - ο χώρος μεταξύ των widget είναι ομοιόμορφος - είναι ίσος μεταξύ, πριν και μετά από αυτά
Για να επιδιορθώσετε προβλήματα απόκρισης πλάτους Χρησιμοποιήστε κρυφή υπερχείλιση
Όσον αφορά την εμφάνιση ενός ιστότοπου σε κινητά, υπάρχει μεγάλη πιθανότητα να αντιμετωπίσετε ένα πρόβλημα όπου ένα widget με προσαρμοσμένη θέση υπερχειλίζει το πλάτος μιας στήλης.
Αυτό προκαλεί μια πραγματικά απογοητευτική κατάσταση για επισκέπτες από κινητές συσκευές, όπου μπορούν να κάνουν κύλιση οριζόντια. Και αυτό δεν ήταν κάτι που θα θέλατε για τον ιστότοπό σας. Αυτό μπορεί να διορθωθεί με:
Ρυθμίσεις διάταξης > Ορίστε την επιλογή υπερχείλισης Κρυφό
Με αυτόν τον τρόπο, η υπέρβαση της περιοχής θα αποκοπεί και δεν θα χρειαστεί οριζόντια κύλιση
Φροντίδα θέσης
Πρέπει επίσης να φροντίσετε για την τοποθέτηση των στηλών. Μπορείτε να ορίσετε προσαρμοσμένη τοποθέτηση με το Elementor 2.5 — απόλυτη και σταθερή.
Η απόλυτη τοποθέτηση είναι η τοποθέτηση του στοιχείου σε σχέση με την ενότητα ή τη στήλη στην οποία βρίσκεστε. Έτσι, εάν χρησιμοποιείτε απόλυτη τοποθέτηση σε ένα στοιχείο ή μια ενότητα τότε αυτή η ενότητα δεν θα μετακινηθεί κατά μήκος του παραθύρου του επισκέπτη.
Η σταθερή θέση είναι διαφορετική από την απόλυτη καθώς επιτρέπει στο τμήμα / στοιχείο να παραμείνει σταθερό στην άποψη του επισκέπτη. Έτσι, εάν ο χρήστης κάνει κύλιση στη σελίδα, το στοιχείο θα παραμείνει εκεί.
Σχετικές μονάδες
Καθώς σχεδιάζετε την ιστοσελίδα σας, θα διαπιστώσετε ότι υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να τοποθετήσετε τα στοιχεία. Για απόλυτη τοποθέτηση, είναι καλή ιδέα να χρησιμοποιήσετε σχετικές μονάδες, καθώς θα κάνει το σχεδιασμό απόκρισης πιο λειτουργικό όταν πρόκειται για διαφορετικό μέγεθος οθόνης.
Η σχετική μονάδα προσαρμόζεται βάσει του σχετικού πλάτους και ύψους της οθόνης, επιτρέποντας έτσι στα στοιχεία ή τις ενότητες να αλλάξουν το μέγεθος τους και έναν καλύτερο σχεδιασμό απόκρισης. Εάν επιλέξετε να χρησιμοποιήσετε εικονοστοιχεία, τότε πρέπει να δημιουργήσετε πολλές ενότητες απόκρισης για διαφορετικά μεγέθη οθόνης.
Ελέγξτε το βάθος κάθε στοιχείου χρησιμοποιώντας Z-Index
Εάν πρόκειται να χρησιμοποιήσετε την «απόλυτη» ή «σταθερή» θέση για τα widget, θα υπάρξουν πολλές καταστάσεις όπου δύο ή περισσότερα widget μπορεί να αλληλεπικαλύπτονται, δηλαδή στοιβάζονται «το ένα πάνω στο άλλο». Μπορείτε να το αποφύγετε χρησιμοποιώντας την κανονική ρύθμιση ευρετηρίου Z. Αυτό θα σας επιτρέψει να ελέγξετε το βάθος και να σας επιτρέψει να επιλέξετε ποια widget εμφανίζονται στο προσκήνιο.
Το κόλπο για τη διπλή λειτουργικότητα
Εάν χρησιμοποιείτε δεξί κλικ για να αντιγράψετε ένα στοιχείο με προσαρμοσμένη τοποθέτηση, μπορεί να φαίνεται ότι το δεξί κλικ δεν λειτούργησε.
Αλλά, κοίτα. Αυτό δεν είναι αλήθεια. Η διπλότυπη λειτουργικότητα λειτούργησε πολύ καλά και διπλασίασε το στοιχείο. Είναι ακριβώς επειδή κάθε στοιχείο έχει την ίδια ακριβώς προσαρμοσμένη θέση, το διπλό στοιχείο στοιβάζεται ΑΚΡΙΒΩΣ πάνω από το άλλο στοιχείο (δίνοντας την εντύπωση ότι δεν έχει δημιουργηθεί αντίγραφο.).
Με απλούς όρους, εάν δημιουργήσετε μια στήλη με επιτυχία, μπορείτε να αντιγράψετε τη στήλη όποτε χρειαστεί. Επίσης, βεβαιωθείτε ότι οι στήλες που δημιουργείτε δεν χρησιμοποιούν προσαρμοσμένη τοποθέτηση. Εάν συμβαίνει αυτό, η αναπαραγωγή δεν θα λειτουργήσει με την επιλογή δεξιού κλικ. Ωστόσο, μπορείτε να χρησιμοποιήσετε τη διπλή λειτουργία για να ξεπεράσετε τον περιορισμό και να αντιγράψετε τη στήλη.
Σύρετε το επάνω στοιχείο λίγο και θα αποκαλύψει το άλλο. Και τα δύο στοιχεία είναι πολύ εκεί. Επίσης, όταν αντιγράφετε μια στήλη, τότε θα στοιβάζεται πάνω από την παλιά. Μπορεί να μπερδευτείτε. Αλλά μην ανησυχείτε, μπορείτε απλά να το σύρετε και να το χρησιμοποιήσετε στη σχεδίαση της ιστοσελίδας σας.
Όφσετ
Υπάρχουν περιπτώσεις στις οποίες πρέπει να ορίσετε αντισταθμίσεις στο περιεχόμενο της ιστοσελίδας σας. Με το Elementor, μπορείτε εύκολα να ρυθμίσετε την αντιστάθμιση. Επομένως, εάν ορίσετε μια μετατόπιση 500 εικονοστοιχείων από τα αριστερά, τότε ο χώρος θα παραμείνει γύρω από το περιεχόμενο βάσει της εισόδου σας. Ομοίως, μπορείτε επίσης να ρυθμίσετε το όφσετ στη δεξιά πλευρά. Είναι καλή πρακτική να ρυθμίζετε την αριστερή και τη δεξιά όφσετ σε παρόμοια τιμή, καθώς το περιεχόμενο θα ευθυγραμμιστεί σωστά στην οθόνη.
Υπάρχουν περιπτώσεις στις οποίες πρέπει να ορίσετε αντισταθμίσεις στο περιεχόμενο της ιστοσελίδας σας. Με το Elementor, μπορείτε εύκολα να ρυθμίσετε την αντιστάθμιση. Επομένως, εάν ορίσετε μια μετατόπιση 500 εικονοστοιχείων από τα αριστερά, τότε ο χώρος θα παραμείνει γύρω από το περιεχόμενο βάσει της εισόδου σας. Ομοίως, μπορείτε επίσης να ρυθμίσετε το όφσετ στη δεξιά πλευρά. Είναι καλή πρακτική να ρυθμίζετε την αριστερή και τη δεξιά όφσετ σε παρόμοια τιμή, καθώς το περιεχόμενο θα ευθυγραμμιστεί σωστά στην οθόνη.
Ο χρυσός κανόνας
Για καλύτερο σχεδιασμό απόκρισης, χρησιμοποιήστε σχετικές μονάδες. Αυτό συμβαίνει επειδή η απόλυτη τοποθέτηση μπορεί να είναι δύσκολη όταν η πρόσβαση στον ιστότοπο γίνεται από διαφορετική πλατφόρμα. Η χρήση σχετικών μονάδων, για το σχεδιασμό των ενοτήτων σας θα έχει ως αποτέλεσμα μια πιο ανταποκριτική σχεδίαση. Η αλλαγή στο πλάτος μπορεί να αντιμετωπιστεί τέλεια με τη βοήθεια σχετικών μονάδων. Με τον όρο «σχετικός», εννοούμε ποικίλες μονάδες όπως το ποσοστό ή το πλάτος προβολής (VW), αντί να καθορίζουμε μονάδες όπως pixel
συμπέρασμα
Το Elementor είναι ένα εξαιρετικά φιλικό προς το χρήστη πρόγραμμα δημιουργίας ιστότοπων. Μερικές φορές, μπορεί να θέσει προκλήσεις στην προβολή ιστότοπου εάν η πρόσβαση στον ιστότοπο γίνεται από κινητό ή tablet. Με τη βοήθεια της ευθυγράμμισης ενοτήτων και στηλών, μπορείτε να κάνετε τους ιστότοπούς σας τέλειους με πραγματική ευκολία.
Πού θα βρείτε αυτές τις επιλογές; Δεν υπάρχουν. Είναι αυτό για το Premium Elementor; Εάν ναι, θα πρέπει να το αναφέρετε στο άρθρο σας, ώστε οι άνθρωποι να μην χάνουν το χρόνο τους να το διαβάσουν.
Χόλα,
Estoy maquetando con Elementor Pro.
Quiero poner dos banners, uno pegado a la izquierda y otro pegado a la derecha de la pantalla. Para 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). Algun consejo; Μούχας Γκράσιας!
Γεια, το πρώτο πράγμα που θα εξέταζα θα ήταν η ρύθμιση κάθετης ευθυγράμμισης στηλών που περιγράφεται στο πρώτο μέρος αυτής της ανάρτησης.
Στην υγειά σας,
Buongiorno, tutto chiaro, grazie!
Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna. Cerco di spiegarmi meglio: vorrei dividere una sezione in due colonne.
In quella di sinistra metterei la foto di una cover, e nella colonna di sinistra vorrei mettere tre pulsanti (uno sopra l'altro), equidistanti e centrati rispetto alla colonna di sinistra, che rimandano ai tre modelli di smartphone per i quali è disponibile la εξώφυλλο στη φωτογραφία. Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
Sono aperta a tutti and suggerimenti
Grazie
Scusate, ho appena capito come fare (l'ho capito ανά λάθος). Scusate il disturbo e grazie lo stesso
Γεια, Εντάξει, σίγουρα αυτό είναι δυνατό, μπορείτε ακόμη και να κεντράρετε κάθετα το περιεχόμενο σε κάθε στήλη
Μπορείτε να αντιμετωπίσετε ένα πρόβλημα με τη διανομή χωρίς λογότυπο. 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. Ha sido al editar para tamaño móvil, se ha quedado así a un lado todo cuando cambio a escritorio! 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 paraissent toutes parfaitement alignées, mais lorsque je prévisualise les modifs, les colonnes se retrouvent toutes imbriquees et de différentes tailles (largeurs et hauteur) sur le côté gauche de l'é. je voudrais qu'elles fassent toutes la même taille et qu'elles soient parfaitement aligner. Σχόλιο δίκαιο;
Γεια,
Το πρόβλημα ευθυγράμμισης έρχεται πάνω από τις στήλες;
Hola, tengo installado elementor pro pero cuando agrego una nueva sección no aparecen las opciones de alineación οριζόντια και alineación κάθετη.
Hay que installar un complemento adicional; Gracias
Γεια, έχετε την έκδοση 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 footer verschiedene widgets. das oberste ist immer eine τίτλος, darunter stichpunkte. da ich nicht zwei unterschiedliche textarten in einen kasten schreiben kann (h4 und p) muss ich das σε 2 ενότητες machen. 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 problem. Merci d' avance.
Γεια, κάνοντας κλικ στην επάνω δεξιά γωνία της στήλης, μπορείτε στη συνέχεια να επεξεργαστείτε το μέγεθος στις ρυθμίσεις του 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 δυνατό de superposer des éléments horizontaux.verticaux
Mais, αδύνατο de retrouver la manip'. Et…. je m'arrache les cheveux du coup. Mon besoin (pourorrespondre à notre maquette) : Une section globale dans laquelle mon fond est une vidéo en continu, et par dessus, j'ai trois lignes de textes qui viennent se superposer (dont une qui aura du code pour une lecture enrotation συνεχίζει. Mais ça, c'est autre chose).
C'est l'alignement qui me pose souci. Une idée…?
Je désespère … Merciiiii
Γεια, για ό,τι πρέπει να κάνετε, θα χρησιμοποιούσα ένα φόντο βίντεο στην κύρια ενότητα του Elementor και, στη συνέχεια, θα προσθέσω μια εσωτερική ενότητα με στήλες και κείμενο
Bonsoir,
Est-il πιθανή τροποποίηση της θέσης των στοιχείων της σελίδας;
J'ai un menu déroulant qui passe sous les éléments en dehors de son bloc… Comment demander aux autres blocs d'être en arrière; Merci d' avance!
Γεια, ναι αυτό είναι δυνατό, αλλά πρέπει να χρησιμοποιήσετε προσαρμοσμένο CSS. Στο Elementor μπορείτε να επιλέξετε {z-index: 100}