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

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

• Γιατί πρέπει να ευθυγραμμιστούμε;
• Πώς λειτουργούν οι στήλες ή οι ενότητες για ένα Responsive Design;
• Πώς να ευθυγραμμίσετε τμήματα και στήλες Elementor;
• Για να διορθώσετε προβλήματα πλάτους απόκρισης, χρησιμοποιήστε την κρυφή υπερχείλιση
• Φροντίδα Τοποθέτησης
• Σχετικές Μονάδες
• Ελέγξτε το βάθος κάθε στοιχείου χρησιμοποιώντας το Z-Index
• Το κόλπο για τη διπλή λειτουργικότητα
• Μετατοπίσεις
• Ο χρυσός κανόνας
• Σύναψη

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

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

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

Πώς λειτουργούν οι στήλες ή οι ενότητες για ένα 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. Με τη βοήθεια της στοίχισης τομών και στηλών, μπορείτε να κάνετε τους ιστότοπούς σας τέλειους με πραγματική ευκολία.