Κατά την κατασκευή ενός ιστότοπου χρησιμοποιώντας το Divi, η επιλογή για κάθετη στοίχιση περιεχομένου μπορεί να είναι μια πολύτιμη προσθήκη στην εργαλειοθήκη σχεδιασμού σας. Ανάλογα με τη διάταξη, το περιεχόμενο μπορεί να χρειαστεί να ευθυγραμμιστεί κάθετα με διάφορους τρόπους (στο κέντρο, κάτω, πάνω). Η πιο συνηθισμένη ανάγκη είναι το υλικό σας να είναι κάθετα ευθυγραμμισμένο. Προσθέτει μια υπέροχη πινελιά συμμετρικού διαστήματος στο περιεχόμενό σας, κάτι που είναι πολύ χρήσιμο όταν χρησιμοποιείτε διατάξεις πολλαπλών στηλών. Επιπλέον, το περιεχόμενο με κατακόρυφο κέντρο παραμένει κεντραρισμένο στα πλάτη του προγράμματος περιήγησης, εξαλείφοντας την ανάγκη για προσαρμοσμένη συμπλήρωση ή περιθώρια για την επίτευξη παρόμοιας ανταπόκρισης.
Σε αυτό το μάθημα, θα σας διδάξω πώς να στοιχίζετε κάθετα περιεχόμενο σε οποιαδήποτε στήλη χρησιμοποιώντας μερικές απλές γραμμές CSS. Για λόγους επίδειξης, θα χρησιμοποιήσω αρκετές από τις προκατασκευασμένες διατάξεις του Divi. Δεν χρειάζεται να ανησυχείτε εάν δεν είστε εξοικειωμένοι με το CSS. Σε λίγα δευτερόλεπτα, θα μπορείτε να το εφαρμόσετε στο σχέδιό σας.
Το χαρακτηριστικό Flex (ή Flexbox) CSS είναι απλώς ένα μέσο για την τακτοποίηση στοιχείων σε οριζόντιες και κάθετες στοίβες (κάπως σαν πίνακας). Σε αντίθεση με τους τυπικούς πίνακες, ωστόσο, η δυνατότητα flex σάς επιτρέπει να δημιουργήσετε κουτιά που "ευελιχθούν" στο μέγεθος του περιεχομένου που περιέχουν.
Το Divi χρησιμοποιεί το χαρακτηριστικό flex όταν επιλέγετε "Equalize Column Heights" ως ρύθμιση σειράς. Με απλά λόγια, αυτό διασφαλίζει ότι το μέγεθος όλων των στηλών σας προσαρμόζεται στο μέγεθος της στήλης με τις περισσότερες πληροφορίες. Επειδή το "Equalize Column Heights" ενεργοποιεί το flex για το κοντέινερ γραμμής, μπορείτε να το χρησιμοποιήσετε προσθέτοντας CSS στις στήλες σας για να αλλάξετε τα περιεχόμενα κάθε στήλης (ή πλαισίου).
Εάν προσθέσετε "margin: auto" σε οποιαδήποτε στήλη στη σειρά, για amp , το περιεχόμενο αυτής της στήλης (είτε πρόκειται για μία είτε για περισσότερες ενότητες) θα είναι κατακόρυφα στο κέντρο.
Όλες οι στήλες σας (και το περιεχόμενό τους) θα είναι κάθετα κεντραρισμένες αν προσθέσετε "στοιχεία στοίχισης: στο κέντρο" στη σειρά σας.
Φυσικά, η ιδιότητα flex έχει πολλές περισσότερες εφαρμογές στο σχεδιασμό ιστοσελίδων και πιο προηγμένο CSS που μπορείτε να χρησιμοποιήσετε στο θέμα σας. Ωστόσο, ήθελα να κρατήσω τα πράγματα απλά για αυτό το σεμινάριο.
Από τεχνική άποψη, όχι. Μπορείτε να χρησιμοποιήσετε προσαρμοσμένο διάστημα για να τοποθετήσετε το περιεχόμενο/τις μονάδες σας κατακόρυφα μέσα σε μια στήλη (επένδυση και περιθώριο). Για amp , μπορείτε να χρησιμοποιήσετε τις επιλογές διαστήματος του Divi για να κεντράρετε τις λειτουργικές μονάδες κατακόρυφα μέσα στην ουρά για να δώσετε μια στήλη ίση με την επάνω και την κάτω επένδυση. Μπορείτε επίσης να κάνετε το περιεχόμενο ευθυγραμμισμένο προς τα κάτω προσθέτοντας επάνω συμπλήρωμα σε μια στήλη. Όταν προσθέτετε περισσότερο περιεχόμενο στη σελίδα σας, ίσως χρειαστεί να τροποποιήσετε τα κενά. Επιπλέον, η διατήρηση αυτής της ευθυγράμμισης σε πολλά μεγέθη προγράμματος περιήγησης μπορεί να είναι προβληματική.
Έτσι, αν ψάχνετε για έναν τρόπο να ευθυγραμμίσετε τις πληροφορίες κάθετα χωρίς να χρειάζεται να ανησυχείτε για συγκεκριμένες αποστάσεις, νομίζω ότι θα το βρείτε ωφέλιμο.
Ας ξεκινήσουμε αυτό το πάρτι!
Θα ξεκινήσω με τη Διάταξη σελίδας χαρτοφυλακίου εταιρείας εσωτερικού σχεδιασμού. Δημιουργήστε μια νέα σελίδα για να έχετε αυτήν τη διάταξη στη σελίδα σας. Μετά από αυτό, δώστε ένα όνομα στη σελίδα σας. Επιλέξτε "Use Divi Builder" και, στη συνέχεια, "Use Visual Builder" από το αναπτυσσόμενο μενού. Στη συνέχεια, επιλέξτε "Επιλέξτε μια προκατασκευασμένη διάταξη" από το αναπτυσσόμενο μενού. Στη συνέχεια, επιλέξτε το πακέτο διάταξης Εσωτερικού σχεδιασμού εταιρείας από το παράθυρο Φόρτωση από βιβλιοθήκη. Τέλος, από την επιλογή διατάξεων, επιλέξτε τη σελίδα Χαρτοφυλακίου και κάντε κλικ στο «Χρήση αυτής της διάταξης».
Είστε έτοιμοι να ξεκινήσετε μετά τη φόρτωση της διάταξης στη σελίδα σας.
Ανοίξτε τις ρυθμίσεις σειράς για τη δεύτερη σειρά (αυτή που βρίσκεται ακριβώς κάτω από τη σειρά με τον τίτλο της σελίδας). Ανοίξτε με εναλλαγή της ομάδας επιλογών Sizing στις επιλογές σχεδίασης και σημειώστε ότι το "Equalize Column Heights" είναι ήδη ενεργό. Αυτό σημαίνει ότι η ιδιότητα flex ("display: flex;") έχει προστεθεί στη σειρά.
Κάτω από το πλαίσιο εισαγωγής Βασικού στοιχείου Στήλη 2, μεταβείτε στις ρυθμίσεις καρτέλας Για προχωρημένους για την ίδια σειρά και προσθέστε το ακόλουθο απόσπασμα CSS.
Το περιεχόμενο της δεύτερης στήλης έχει πλέον μεταφερθεί για να είναι κατακόρυφα στο κέντρο.
| 01 | περιθώριο: αυτόματο; |
Μπορείτε να αλλάξετε την τιμή του περιθωρίου ως εξής, για να κάνετε το περιεχόμενό σας ευθυγραμμισμένο προς τα κάτω, έτσι ώστε όλες οι λειτουργικές μονάδες να στοιβάζονται στο κάτω μέρος της στήλης σας:
| 01 | περιθώριο: auto 0; |
Μπορείτε να κεντράρετε κάθετα το περιεχόμενο όλων των στηλών στη σειρά σας προσθέτοντας το ακόλουθο απόσπασμα στο κύριο στοιχείο των ρυθμίσεων της σειράς σας, αντί να προσθέσετε το "margin: auto" σε κάθε στήλη ξεχωριστά.
| 01 | στοίχιση-στοιχεία: κέντρο; |
Μπορείτε επίσης να χρησιμοποιήσετε αυτό το απόσπασμα εάν θέλετε όλες οι πληροφορίες στις στήλες σας να είναι ευθυγραμμισμένες στο κάτω μέρος:
| 01 | align-item: flex-end; |
Θυμηθείτε ότι μπορείτε να χρησιμοποιήσετε τη δυνατότητα Επέκτασης Στυλ του Divi κάνοντας δεξί κλικ στο κύριο στοιχείο με το απόσπασμα CSS και επιλέγοντας "Επέκταση Κύριου Στοιχείου".
Στη συνέχεια, για να κεντράρετε κάθετα όλο το περιεχόμενο κάθε στήλης στη σελίδα, εφαρμόστε το κύριο στοιχείο CSS σε όλες τις σειρές σε όλη τη σελίδα (ή την ενότητα).
Όλα είναι πλέον κάθετα ισορροπημένα.
Ωστόσο, μπορεί να έχετε παρατηρήσει ότι το λευκό χρώμα φόντου στήλης δεν καλύπτει πλέον ολόκληρη τη σειρά λόγω της προσθήκης στη στήλη "περιθώριο: αυτόματο". Μπορείτε να το διορθώσετε αλλάζοντας το χρώμα φόντου της σειράς σε λευκό και αφαιρώντας το γέμισμα της σειράς. Αντίθετα, θα σας μάθω πώς να κεντράρετε το περιεχόμενο της στήλης σας χωρίς να χρειάζεται να αλλάξετε το περιθώριο.
Χρησιμοποιήσαμε την ιδιότητα flex που προστέθηκε αρχικά στη σειρά. Ως αποτέλεσμα, κάθε στήλη μας έγινε ένα "flex box" που μπορούσε να ευθυγραμμιστεί κάθετα αλλάζοντας το περιθώριο.
Ωστόσο, μπορούμε να χρησιμοποιήσουμε την ευέλικτη κατεύθυνση για να ευθυγραμμίσουμε το κείμενο της στήλης μας χωρίς να θυσιάσουμε το εφέ "Equalize Column Height", το οποίο διατηρεί τις στήλες μας (και το φόντο των στηλών) στο ίδιο μέγεθος. Για να το πετύχουμε αυτό, θα προσθέσουμε μερικές γραμμές CSS στην ουρά μας, προκαλώντας τη στοίβαξη όλων των λειτουργικών μονάδων μέσα σε αυτό κατακόρυφα και στη συνέχεια στο κέντρο.
Ας επιστρέψουμε στην προηγούμενη σειρά ex amp le’s. Κάνοντας δεξί κλικ στο Προσαρμοσμένο CSS και επιλέγοντας "Επαναφορά προσαρμοσμένων στυλ CSS", μπορείτε να αφαιρέσετε τυχόν προσαρμοσμένο CSS που μπορεί να έχετε στις Ρυθμίσεις γραμμής.
Στη συνέχεια, στη στήλη 2 Κύριο στοιχείο, εφαρμόστε το ακόλουθο CSS:
| 010203 | εμφάνιση: flex;flex-direction: στήλη;justify-content: center; |
Αλλάξτε το "justify-content: center" σε "justify-content: flex-end" για να ευθυγραμμίσετε το περιεχόμενο στο κάτω μέρος.
Μου αρέσει αυτή η διαμόρφωση γιατί αν τοποθετήσω το περιεχόμενό μου κάθετα και κάνω τη σειρά σε πλήρες πλάτος, το περιεχόμενο παραμένει στο κέντρο.
Δημιουργία κάθετα ευθυγραμμισμένων θαμπών με διάφορες ποσότητες κειμένου
Το να κάνετε το περιεχόμενο των στηλών σας κατακόρυφα κεντραρισμένο μπορεί επίσης να βοηθήσει με τις θαμπές. Όπως ίσως γνωρίζετε, δεν θα έχει κάθε βλέμμα την ίδια ποσότητα κειμένου για να περιγράψει μια δυνατότητα ή υπηρεσία. Κάνοντας αυτές τις θαμπές κάθετα στο κέντρο μπορεί να βοηθήσει τη διάταξή σας να φαίνεται όμορφη.
Για τη διάταξη της αρχικής σελίδας των ψηφιακών πληρωμών, θα ευθυγραμμίσω κατακόρυφα τα σημεία ενδιαφέροντος για αυτό το amp
Για να δημιουργήσω μια πιο ρεαλιστική απεικόνιση της εμφάνισης ενός ιστότοπου, θα προσθέσω πρώτα ποικίλες ποσότητες περιεχομένου σώματος στα blurb.
Τώρα πρέπει να κάνω "Equalize Column Heights" στις ρυθμίσεις της σειράς.
Τώρα μπορώ να ευθυγραμμίσω το κείμενό μου και να προσαρμόσω τη σχεδίαση χρησιμοποιώντας αποσπάσματα CSS.
Μπορούμε να κεντράρουμε κάθετα το περιεχόμενο των στηλών μας προσθέτοντας τα ακόλουθα στην ενότητα Κύριο στοιχείο της καρτέλας Για προχωρημένους στις Ρυθμίσεις σειράς:
| 01 | στοίχιση-στοιχεία: κέντρο; |
Αλλάξτε το στα παρακάτω για να τα ευθυγραμμίσετε στο κάτω μέρος.
| 01 | align-item: flex-end; |
Μπορείτε επίσης να κάνετε την πρώτη στήλη με στοίχιση προς τα κάτω και την τρίτη στήλη με την επάνω στοίχιση, επαναφέροντας τα προσαρμοσμένα στυλ CSS και προσθέτοντας τα ακόλουθα προσαρμοσμένα περιθώρια.
Στήλη 1 Κύριο στοιχείο CSS:
| 01 | περιθώριο: auto auto 0; |
Στήλη 3 Κύριο στοιχείο CSS:
| 01 | περιθώριο: 0 auto auto; |
Δεν χρειάζεστε ένα απόσπασμα CSS ή ένα flex για να κεντράρετε το περιεχόμενο μιας στήλης κατακόρυφα. Το μόνο που έχετε να κάνετε είναι να βεβαιωθείτε ότι το κείμενό σας έχει ίσες αποστάσεις πάνω και κάτω (ή ενότητες). Οι περισσότεροι καταναλωτές απαιτούν περιεχόμενο με κατακόρυφο κέντρο σε διατάξεις με πολλές στήλες, επειδή θέλουν το παρακείμενο υλικό να ευθυγραμμιστεί σωστά.
Παρόλο που αυτή η λύση βασίζεται σε μερικά μικρά αποσπάσματα προσαρμοσμένου CSS, πιστεύω ότι μπορεί να είναι χρήσιμη για άτομα που αναζητούν μια γρήγορη θεραπεία σε μια χρονοβόρα διαδικασία. Μη διστάσετε να μοιραστείτε τις απόψεις σας σχετικά με αυτήν την προσέγγιση, καθώς και για amp πώς σας εξοικονομούσε χρόνο και προσπάθεια στο παρελθόν.
Οι κεφαλίδες και τα υποσέλιδα ενός ιστότοπου είναι απαραίτητα στοιχεία. Στις περισσότερες περιπτώσεις, η Κεφαλίδα παρέχει πλοήγηση…
Δύο από τα πιο δημοφιλή θέματα WordPress στην αγορά είναι το Astra και το OceanWP. Επαγγελματίας…
Η δημιουργία μιας εξαιρετικής ιστοσελίδας ειδήσεων δεν απαιτεί να γίνετε σχεδιαστής ιστοσελίδων. Εμείς…
Το θέμα εφημερίδας είναι ένα από τα πιο σημαντικά θέματα WordPress που σχεδιάστηκε από την tagDiv, μια…
Όταν πρόκειται για τη δημιουργία ενός ηλεκτρονικού καταστήματος, το WooCommerce είναι η πιο δημοφιλής plugin . Το…
Μια κεφαλίδα είναι γενικά το πρώτο πράγμα που βλέπει ένα άτομο όταν επισκέπτεται τον ιστότοπό σας,…
Προβολή σχολίων
Bedankt voor de duidelijke uitleg. Bij een Blog module werkt dit echter niet. Ο Dan είναι er in de row maar 1 kolom. Τα νέα ιστολόγια σας είναι ένα δομικό στοιχείο της πόρτας (προεπιλογή 3). Zijn hier de kolommen ook gelijk te maken;
Γεια, Όχι, λυπάμαι που προορίζεται μόνο για κλασικές στήλες DIVI, η ενότητα ιστολογίου DIVI έχει εντελώς διαφορετικό κώδικα για τη στοίχιση των στηλών.
Τι γίνεται αν θέλετε η μονάδα να είναι ευθυγραμμισμένη 2/3 προς τα κάτω ή 1/3 από πάνω - και όχι τέλεια στη μέση πάνω ή κάτω;
Γεια, φοβάμαι ότι θα χρειαστεί να κάνετε κάποιο προσαρμοσμένο CSS, από προεπιλογή δεν υπάρχει τέτοια επιλογή.
Ίσως μπορείτε να προσπαθήσετε να ευθυγραμμίσετε το περιεχόμενο στη μέση και να προσθέσετε κάποια συμπλήρωση στο περιεχόμενό σας, αλλά ελέγξτε προσεκτικά την απόδοση σε όλες τις συσκευές.