Πώς να ευθυγραμμίσετε ενότητες και στήλες Elementor

Ενώ εργάζεστε με το Elementor , θα παρατηρήσετε ότι είναι λίγο δύσκολο να προσαρμόσετε τις ενότητες και τις στήλες σας. Πρέπει να ευθυγραμμίσετε τις στήλες και τα τμήματα κάθετα και οριζόντια, για να επιτύχετε μια ανταποκρινόμενη διάταξη "stretch-to-fill". Χωρίς αυτήν την ευθυγράμμιση, τα στοιχεία των στηλών με διαφορετικά ύψη δεν θα προσαρμοστούν στην οθόνη.

Γιατί πρέπει να ευθυγραμμιστούμε;

Σε κάθε στήλη ή ενότητα, το περιεχόμενο μπορεί να είναι διαφορετικών κατηγοριών. Μπορεί να έχει τη μορφή εικόνων, κειμένου και αξιολογήσεων. Για μια ολοκληρωμένη εμφάνιση, συνιστάται να υπάρχει ομοιομορφία στην εμφάνιση του περιεχομένου. Δεν πρέπει απλώς να πεταχτεί εκεί - να πεταχτεί - μόνο για το καλό.

Με την καλή ευθυγράμμιση, μπορείτε να κάνετε τον ιστότοπο να φαίνεται πιο προσεγμένος και αριστοκρατικός - έτσι ώστε να μην φαίνεται ακατάστατος. Με την επιλογή στοίχισης, μπορείτε να προσαρμόσετε πολλά γραφικά στοιχεία διαφορετικών μεγεθών το ένα δίπλα στο άλλο στην ίδια στήλη.

Πώς λειτουργούν οι στήλες ή οι ενότητες για ένα Responsive Design;

Το Elementor 2.5 σάς δίνει τη δυνατότητα να προσαρμόσετε το σχεδιασμό και το περιεχόμενό σας. Με τη νέα δυνατότητα προσαρμοσμένης τοποθέτησης, μπορείτε να μετακινήσετε τα γραφικά στοιχεία σε οποιαδήποτε τοποθεσία. Αλλά, δεν μπορείτε πραγματικά να το κάνετε πέρα ​​από ένα συγκεκριμένο τμήμα. Αυτά τα γραφικά στοιχεία σχετίζονται με τη στήλη στην οποία βρίσκονται. Αυτό μπορεί να προκαλέσει πρόβλημα στην απόκριση του σχεδίου.

Ας υποθέσουμε ότι έχετε μια διάταξη τριών στηλών. Με τη βοήθεια της προσαρμοσμένης τοποθέτησης, μπορείτε να σύρετε και να αποθέσετε ένα γραφικό στοιχείο από τη δεξιά στήλη στην κεντρική στήλη ή όπως σας αρέσει.

Αλλά κάτι τέτοιο θα ωφελήσει μόνο τους επισκέπτες επιτραπέζιου υπολογιστή, επειδή θα τους φαίνεται εντάξει. Ωστόσο, θα προκαλέσει πρόβλημα εάν η πρόσβαση στον ιστότοπο γίνεται από κινητά, επειδή το Elementor στοιβάζει τις στήλες κάθετα στο κινητό.

Έτσι, αντί να έχετε τρεις στήλες δίπλα-δίπλα, μπορεί να βιώσετε και τις τρεις στήλες στοιβαγμένες η μία πάνω στην άλλη. Το στοιχείο δεν θα εμφανίζεται πλέον στη μεσαία στήλη όπως συμβαίνει σε επιτραπέζιους υπολογιστές.

Παρόλο που μπορείτε να τροποποιήσετε έξυπνα την προβολή του κινητού με μια κρυφή ρύθμιση, αλλά δεν υπάρχει καμία εγγύηση ότι η πλειονότητα των ανθρώπων μπορεί να τη βρει. Λοιπόν, γιατί να απογοητεύσουμε τους χρήστες; Το να κάνετε το σχέδιο να ανταποκρίνεται και να προσαρμόζεται είναι η σωστή λύση. Για να μην κολλάει πουθενά.

Για αυτό το θέμα, πρέπει να δώσετε προσοχή στη σχέση του γραφικού στοιχείου με τη στήλη που βρίσκεται μέσα.

Πώς να ευθυγραμμίσετε τμήματα και στήλες Elementor;

Για κάθε ενότητα/στήλη, προσγειωθείτε στην ενότητα διάταξης και ορίστε τις ακόλουθες επιλογές στοίχισης σύμφωνα με τις απαιτήσεις σας:

  • Κάθετη στοίχιση: μπορείτε να επιλέξετε ρυθμίσεις για τα γραφικά στοιχεία από τα ακόλουθα. Αλλά ένα πράγμα που πρέπει να έχετε κατά νου είναι ότι το περιεχόμενο σε μια στήλη δεν μπορεί να ευθυγραμμιστεί με τις τρεις πρώτες κάθετες επιλογές στηλών, δηλαδή πάνω, μέση και κάτω.
  • Μπλουζα
  • Μέση
  • Κάτω μέρος

Για αυτό το θέμα, υπάρχουν * τρεις νέες επιλογές που καθιστούν πολύ βολικό την ευθυγράμμιση του περιεχομένου σύμφωνα με τις προτιμήσεις σας.

  • *Space Between – ορίζει το διάστημα μεταξύ των γραφικών στοιχείων στην αρχή και στο τέλος στην άκρη της στήλης. Τα widget έχουν ισοδιάστημα, δηλαδή υπάρχει ίσος χώρος μεταξύ τους.
  • *Space Around – ο χώρος μεταξύ των widget είναι ίσος και οι άκρες είναι το μισό του διαστήματος μεταξύ των widget.
  • *Ομοιόμορφο διάστημα – το διάστημα μεταξύ των γραφικών στοιχείων είναι ομοιόμορφο – είναι ίσο μεταξύ, πριν και μετά από αυτά.
  • Οριζόντια στοίχιση: με αυτήν την επιλογή μπορείτε να πραγματοποιήσετε ενσωματωμένη τοποθέτηση και να ευθυγραμμίσετε τα ενσωματωμένα γραφικά στοιχεία, τα οποία βρίσκονται στην ίδια σειρά, οριζόντια. Μπορείτε να στοιχίσετε το περιεχόμενο των στηλών οριζόντια χρησιμοποιώντας αυτές τις επιλογές:
  • Έναρξη- ευθυγραμμίζει όλα τα εικονίδια προς τα αριστερά
  • Κέντρο: τοποθετεί τα εικονίδια στη μέση της στήλης
  • Τέλος ορίζει όλα τα εικονίδια στα δεξιά
  • Space Between – ο χώρος μεταξύ των γραφικών στοιχείων στην αρχή και στο τέλος στην άκρη της στήλης. Τα widget έχουν ισοδιάστημα, δηλαδή υπάρχει ίσος χώρος μεταξύ τους
  • Space Around – ο χώρος μεταξύ των widget είναι ίσος και οι άκρες είναι το μισό του διαστήματος μεταξύ των widget
  • Ομοιόμορφο διάστημα – το διάστημα μεταξύ των γραφικών στοιχείων είναι ομοιόμορφο – είναι ίσο μεταξύ, πριν και μετά από αυτά

Για να διορθώσετε προβλήματα πλάτους απόκρισης, χρησιμοποιήστε την κρυφή υπερχείλιση

Όταν πρόκειται για την εμφάνιση ενός ιστότοπου σε κινητά, υπάρχει μεγάλη πιθανότητα να αντιμετωπίσετε πρόβλημα όπου ένα γραφικό στοιχείο με προσαρμοσμένη τοποθέτηση ξεχειλίζει το πλάτος μιας στήλης.  

Αυτό προκαλεί μια πραγματικά απογοητευτική κατάσταση για τους μετακινούμενους επισκέπτες, όπου μπορούν να κάνουν κύλιση οριζόντια. Και αυτό δεν είναι κάτι που θέλατε για τον ιστότοπό σας. Αυτό μπορεί να διορθωθεί με:

Ρυθμίσεις διάταξης > Ορίστε την υπερχείλισης σε Κρυφό

Με αυτόν τον τρόπο, η περιοχή που υπερβαίνει θα αποκοπεί και δεν θα χρειάζεται να κάνετε οριζόντια κύλιση

Φροντίδα Τοποθέτησης

Πρέπει επίσης να φροντίσετε για την τοποθέτηση των στηλών. Μπορείτε να ορίσετε προσαρμοσμένη τοποθέτηση με το Elementor 2.5 — απόλυτη και σταθερή.

Η απόλυτη τοποθέτηση είναι η τοποθέτηση του στοιχείου σε σχέση με το τμήμα ή τη στήλη που βρίσκεστε μέσα. Έτσι, εάν χρησιμοποιείτε απόλυτη τοποθέτηση σε ένα στοιχείο ή ένα τμήμα, τότε αυτό το τμήμα δεν θα μετακινηθεί κατά μήκος του παραθύρου του επισκέπτη.

Η σταθερή θέση είναι διαφορετική από την απόλυτη, καθώς επιτρέπει στο τμήμα/στοιχείο να παραμένει σταθερό στην οπτική γωνία του επισκέπτη. Έτσι, εάν ο χρήστης κάνει κύλιση στη σελίδα, το στοιχείο θα παραμείνει εκεί.

Σχετικές Μονάδες

Καθώς σχεδιάζετε την ιστοσελίδα σας, θα διαπιστώσετε ότι υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να τοποθετήσετε τα στοιχεία. Για απόλυτο εντοπισμό θέσης, είναι καλή ιδέα να χρησιμοποιείτε σχετικές μονάδες, καθώς θα κάνει την απόκριση σχεδίαση πιο λειτουργική όταν πρόκειται για διαφορετικό μέγεθος οθόνης.

Η σχετική μονάδα προσαρμόζεται με βάση το σχετικό πλάτος και ύψος της οθόνης, επιτρέποντας έτσι στα στοιχεία ή τα τμήματα να αλλάζουν το μέγεθος τους και να έχουν καλύτερη απόκριση σχεδίασης. Εάν επιλέξετε να χρησιμοποιήσετε pixel, τότε θα πρέπει να δημιουργήσετε πολλαπλές ενότητες που αποκρίνονται για διαφορετικά μεγέθη οθόνης.

Ελέγξτε το βάθος κάθε στοιχείου χρησιμοποιώντας το Z-Index

Εάν πρόκειται να χρησιμοποιήσετε «απόλυτη» ή «σταθερή» τοποθέτηση για τα γραφικά στοιχεία, θα υπάρξουν πολλές περιπτώσεις όπου δύο ή περισσότερα γραφικά στοιχεία ενδέχεται να επικαλύπτονται, π.χ. στοιβάζονται το ένα πάνω στο άλλο. Μπορείτε να το αποφύγετε αυτό χρησιμοποιώντας την κανονική ρύθμιση του δείκτη Z. Αυτό θα σας επιτρέψει να ελέγξετε το βάθος και θα σας επιτρέψει να επιλέξετε ποια γραφικά στοιχεία εμφανίζονται στο προσκήνιο.

Το κόλπο για τη διπλή λειτουργικότητα

Εάν χρησιμοποιείτε δεξί κλικ για να αντιγράψετε ένα στοιχείο με προσαρμοσμένη τοποθέτηση, μπορεί να φαίνεται ότι το δεξί κλικ δεν λειτούργησε.

Αλλά, υπομονή. Αυτό δεν είναι αλήθεια. Η διπλότυπη λειτουργικότητα έχει λειτουργήσει τέλεια και έχει αντιγράψει το στοιχείο. Απλώς, δεδομένου ότι κάθε στοιχείο έχει την ίδια ακριβώς προσαρμοσμένη τοποθέτηση, το διπλότυπο στοιχείο στοιβάζεται ΑΚΡΙΒΩΣ πάνω από το άλλο στοιχείο (δίνοντας την εντύπωση ότι δεν έχει δημιουργηθεί αντίγραφο.).

Με απλά λόγια, εάν δημιουργήσετε μια στήλη με επιτυχία, μπορείτε να αντιγράψετε τη στήλη όποτε χρειάζεται. Επίσης, βεβαιωθείτε ότι οι στήλες που δημιουργείτε δεν χρησιμοποιούν προσαρμοσμένη τοποθέτηση. Εάν το κάνει, τότε η αντιγραφή δεν θα λειτουργήσει με την επιλογή δεξί κλικ. Ωστόσο, μπορείτε να χρησιμοποιήσετε τη συνάρτηση διπλότυπου για να ξεπεράσετε τον περιορισμό και να αντιγράψετε τη στήλη.

Σύρετε λίγο το επάνω στοιχείο και θα αποκαλύψει το άλλο. Και τα δύο στοιχεία είναι πολύ εκεί. Επίσης, όταν αντιγράφετε μια στήλη, τότε θα στοιβάζεται πάνω από την παλιά. Μπορεί να μπερδευτείτε. Αλλά μην ανησυχείτε, μπορείτε απλά να το σύρετε και στη συνέχεια να το χρησιμοποιήσετε στο σχεδιασμό της ιστοσελίδας σας.

Μετατοπίσεις

Υπάρχουν περιπτώσεις όπου πρέπει να ορίσετε μετατοπίσεις στο περιεχόμενο της ιστοσελίδας σας. Με το Elementor, μπορείτε εύκολα να ορίσετε τη μετατόπιση. Έτσι, εάν ορίσετε μια μετατόπιση 500 εικονοστοιχείων από τα αριστερά, τότε θα μείνει χώρος γύρω από το περιεχόμενο με βάση την εισαγωγή σας. Ομοίως, μπορείτε επίσης να ορίσετε τη μετατόπιση στη δεξιά πλευρά. Είναι καλή πρακτική να ρυθμίζετε τόσο την αριστερή όσο και τη δεξιά μετατόπιση σε παρόμοια τιμή, καθώς το περιεχόμενο θα είναι σωστά ευθυγραμμισμένο στην οθόνη.

Υπάρχουν περιπτώσεις όπου πρέπει να ορίσετε μετατοπίσεις στο περιεχόμενο της ιστοσελίδας σας. Με το Elementor, μπορείτε εύκολα να ορίσετε τη μετατόπιση. Έτσι, εάν ορίσετε μια μετατόπιση 500 εικονοστοιχείων από τα αριστερά, τότε θα μείνει χώρος γύρω από το περιεχόμενο με βάση την εισαγωγή σας. Ομοίως, μπορείτε επίσης να ορίσετε τη μετατόπιση στη δεξιά πλευρά. Είναι καλή πρακτική να ρυθμίζετε τόσο την αριστερή όσο και τη δεξιά μετατόπιση σε παρόμοια τιμή, καθώς το περιεχόμενο θα είναι σωστά ευθυγραμμισμένο στην οθόνη.

Ο χρυσός κανόνας

Για καλύτερη απόκριση σχεδίασης, χρησιμοποιήστε σχετικές μονάδες. Αυτό συμβαίνει επειδή η απόλυτη τοποθέτηση μπορεί να είναι δύσκολη όταν η πρόσβαση στον ιστότοπο γίνεται από διαφορετική πλατφόρμα. Η χρήση σχετικών μονάδων, για το σχεδιασμό των τμημάτων σας θα έχει ως αποτέλεσμα έναν πιο ανταποκρινόμενο σχεδιασμό. Η αλλαγή στο πλάτος μπορεί να αντιμετωπιστεί τέλεια με τη βοήθεια σχετικών μονάδων. Με τον όρο "σχετικό", εννοούμε ποικίλες μονάδες όπως το ποσοστό ή το πλάτος προβολής (VW), αντί για τη στερέωση μονάδων όπως τα εικονοστοιχεία.

συμπέρασμα

Το Elementor είναι ένα εξαιρετικά φιλικό προς το χρήστη πρόγραμμα δημιουργίας ιστοτόπων. Κατά καιρούς, μπορεί να δημιουργήσει προκλήσεις στην εμφάνιση του ιστότοπου εάν η πρόσβαση στον ιστότοπο γίνεται από κινητό ή tablet. Με τη βοήθεια της στοίχισης τομών και στηλών, μπορείτε να κάνετε τους ιστότοπούς σας τέλειους με πραγματική ευκολία.

Ο Αχμάντ

Προβολή σχολίων

  • Πού βρίσκετε αυτές τις επιλογές; Δεν υπάρχουν. Είναι αυτό για το Premium Elementor; Αν ναι, θα πρέπει να το αναφέρετε στο άρθρο σας, ώστε οι άνθρωποι να μην σπαταλούν το χρόνο τους διαβάζοντάς το.

  • Γειά σου,

    Estoy maquetando με 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 un frase, a la cual he puesto de fondo una imagen.

    Una de ella deberia ir pegada a la derecha de la pantalla (περιθώρια 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 un sezione in due colonne.
    Στην περίπτωση φωτογραφίας με κάλυμμα και άνω και κάτω στήλης sinistra με συνεχή παλμό (unsopra l'altro), σε ίση απόσταση και κεντρική θέση της στήλης του sinistra, το rimandano με το μοντέλο του smartphone σύμφωνα με την ποιότητα και διαθεσιμότητα του καλύμματος smartphone στη φωτογραφία. Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
    Οπότε όχι aperta a tutti i προτείνω
    Grazie

    • Γεια, Ωραία, σίγουρα αυτό είναι δυνατό, μπορείτε ακόμη και να κεντράρετε κάθετα το περιεχόμενο σε κάθε στήλη

  • Υπάρχει πρόβλημα με την παράγραφο χωρίς διαλύτη λογότυπου. El contenido se queda a lado, la imagen, titulo y texto. No logro centarlo (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. Έχει ήδη υποβληθεί σε επεξεργασία από τον tamaño móvil, επομένως είναι ένα quedado καθώς και ένα lado todo cuando cambio a escritorio! Alguien sabe que puede ser; Προσπάθησε να κάνει τη δουλειά του και articulo and parece que nada funciona 🤗

    • Γεια σας, νομίζω ότι πρέπει να ξεκινήσετε ελέγχοντας όλες τις ευθυγραμμίσεις σας σε ενότητες και στη συνέχεια σε στήλες και μετά σε μπλοκ περιεχομένου. Είναι επίσης πιθανό το CSS του θέματός σας να παίζει ρόλο σε αυτήν την ευθυγράμμιση.

  • Καλημέρα!
    You m'arrache les cheveux car je n'arrive pas à aligner 3 colones à l'horizontale.
    Γύρω από ολόκληρη την επιφάνεια της κατασκευής, μπορείτε να οραματιστείτε τις τροποποιήσεις, τις στήλες με μεταγενέστερα τοποθετημένα στολίδια και τις διαφορετικές γραμμές της μέσης (μεγαλύτερες και hauthors) στο côté gauge de l'écran. Η επιλογή σας είναι το σχήμα του σώματος και το σχήμα του ευθυγραμμιστή. Σχόλιο δίκαιο;

  • Hola, tengo installado elementor pero cuando agrego une nueva sección no parecen las opciones de paragraphción οριζόντια και paragraphción κάθετη.
    Πώς εγκαταστήσατε ένα complemento adicional; Gracias

  • Γειά σου,

    Έχω πολλά γραφικά στοιχεία στο υποσέλιδο. Αυτό είναι πάντα ένας τίτλος, ένα πιο τολμηρό σημείο. Με αυτόν τον τρόπο δεν χρειάζεται να γράφω άγραφα κείμενα σε ένα πλαίσιο (h4 και p), εκτός αν το γράψω σε 2 ενότητες. Πώς μπορώ τώρα να βρω τις επόμενες ενότητες wordpress; Υπάρχει ακόμη χώρος για να εμφανιστεί η επικεφαλίδα και το κείμενο.

    Σας ευχαριστώ για τη βοήθειά σας

    • Γεια, υπάρχουν πολλές επιλογές για τον περιορισμό του διαστήματος μεταξύ των κειμένων: θα μπορούσε να είναι περιθώριο ενότητας, στήλης ή γραφικού στοιχείου ή συμπλήρωμα Ή θα μπορούσε να είναι επιλογή γραμματοσειράς όπως ύψος γραμμής.

Πρόσφατες δημοσιεύσεις

Πώς να χρησιμοποιήσετε κεφαλίδες και υποσέλιδα με το Elementor

Οι κεφαλίδες και τα υποσέλιδα ενός ιστότοπου είναι απαραίτητα στοιχεία. Στις περισσότερες περιπτώσεις, η κεφαλίδα παρέχει πλοήγηση…

6 Ιανουαρίου 2022

Σύγκριση θεμάτων WordPress: Astra vs OceanWP

Δύο από τα πιο δημοφιλή θέματα WordPress στην αγορά είναι το Astra και το OceanWP. Επαγγελματίας…

2 Ιανουαρίου 2022

Σύγκριση θεμάτων ειδήσεων WordPress: Εφημερίδα vs. Astra

Η δημιουργία μιας εξαιρετικής ιστοσελίδας ειδήσεων δεν απαιτεί να γίνετε σχεδιαστής ιστοσελίδων. Εμείς…

25 Οκτωβρίου 2021

Δημιουργήστε έναν ιστότοπο που σχετίζεται με ειδήσεις με Θέμα εφημερίδας

Το θέμα εφημερίδας είναι ένα από τα πιο σημαντικά θέματα WordPress που σχεδιάστηκε από την tagDiv, μια…

18 Οκτωβρίου 2021

Πώς να δημιουργήσετε ένα ηλεκτρονικό εμπόριο με το Avada WooCommerce builder

Όταν πρόκειται για τη δημιουργία ενός ηλεκτρονικού καταστήματος, το WooCommerce είναι η πιο δημοφιλής plugin . Το…

4 Οκτωβρίου 2021

Πώς να χρησιμοποιήσετε εφέ κολλητικής κεφαλίδας και κύλισης με το Elementor

Μια κεφαλίδα είναι γενικά το πρώτο πράγμα που βλέπει ένα άτομο όταν επισκέπτεται τον ιστότοπό σας,…

21 Σεπτεμβρίου 2021