Κατά την κατασκευή ενός ιστότοπου χρησιμοποιώντας το Divi, η επιλογή για κάθετη στοίχιση περιεχομένου μπορεί να είναι μια πολύτιμη προσθήκη στην εργαλειοθήκη σχεδιασμού σας. Ανάλογα με τη διάταξη, το περιεχόμενο μπορεί να χρειαστεί να ευθυγραμμιστεί κάθετα με διάφορους τρόπους (στο κέντρο, κάτω, πάνω). Η πιο συνηθισμένη ανάγκη είναι το υλικό σας να είναι κάθετα ευθυγραμμισμένο. Προσθέτει μια υπέροχη πινελιά συμμετρικού διαστήματος στο περιεχόμενό σας, κάτι που είναι πολύ χρήσιμο όταν χρησιμοποιείτε διατάξεις πολλαπλών στηλών. Επιπλέον, το περιεχόμενο με κατακόρυφο κέντρο παραμένει κεντραρισμένο στα πλάτη του προγράμματος περιήγησης, εξαλείφοντας την ανάγκη για προσαρμοσμένη συμπλήρωση ή περιθώρια για την επίτευξη παρόμοιας ανταπόκρισης.
Σε αυτό το μάθημα, θα σας διδάξω πώς να στοιχίζετε κάθετα περιεχόμενο σε οποιαδήποτε στήλη χρησιμοποιώντας μερικές απλές γραμμές CSS. Για λόγους επίδειξης, θα χρησιμοποιήσω αρκετές από τις προκατασκευασμένες διατάξεις του Divi. Δεν χρειάζεται να ανησυχείτε εάν δεν είστε εξοικειωμένοι με το CSS. Σε λίγα δευτερόλεπτα, θα μπορείτε να το εφαρμόσετε στο σχέδιό σας.
- Κατανόηση της διαφοράς μεταξύ Flex και Divi
- Απαιτείται αυτό;
- Προσθέστε την προ-ρυθμισμένη διάταξη στη σελίδα σας.
- Μέθοδος 1: Κάθετη ευθυγράμμιση περιεχομένου με Flex και Auto Margin
- Ευθυγράμμιση του περιεχομένου στο κάτω μέρος
- Κάθετη στοίχιση περιεχομένου για τις στήλες της σειράς σας
- Μέθοδος 2: Κατακόρυφη ευθυγράμμιση περιεχομένου χρησιμοποιώντας κατεύθυνση κάμψης στήλης
- Τι γίνεται με τις διατάξεις με μόνο μία στήλη;
- Τελικές σκέψεις για την κάθετη και οριζόντια ευθυγράμμιση του DIVI
Κατανόηση της διαφοράς μεταξύ Flex και Divi
Το χαρακτηριστικό 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" από το αναπτυσσόμενο μενού. Στη συνέχεια, επιλέξτε "Επιλέξτε μια προκατασκευασμένη διάταξη" από το αναπτυσσόμενο μενού. Στη συνέχεια, επιλέξτε το πακέτο διάταξης Εσωτερικού σχεδιασμού εταιρείας από το παράθυρο Φόρτωση από βιβλιοθήκη. Τέλος, από την επιλογή διατάξεων, επιλέξτε τη σελίδα Χαρτοφυλακίου και κάντε κλικ στο «Χρήση αυτής της διάταξης».
Είστε έτοιμοι να ξεκινήσετε μετά τη φόρτωση της διάταξης στη σελίδα σας.
Μέθοδος 1: Κάθετη ευθυγράμμιση περιεχομένου με Flex και Auto Margin
Ανοίξτε τις ρυθμίσεις σειράς για τη δεύτερη σειρά (αυτή που βρίσκεται ακριβώς κάτω από τη σειρά με τον τίτλο της σελίδας). Ανοίξτε με εναλλαγή της ομάδας επιλογών Sizing στις επιλογές σχεδίασης και σημειώστε ότι το "Equalize Column Heights" είναι ήδη ενεργό. Αυτό σημαίνει ότι η ιδιότητα flex ("display: flex;") έχει προστεθεί στη σειρά.
Κάτω από το πλαίσιο εισαγωγής Βασικού στοιχείου Στήλη 2, μεταβείτε στις ρυθμίσεις καρτέλας Για προχωρημένους για την ίδια σειρά και προσθέστε το ακόλουθο απόσπασμα CSS.
Το περιεχόμενο της δεύτερης στήλης έχει πλέον μεταφερθεί για να είναι κατακόρυφα στο κέντρο.
| 01 | περιθώριο: αυτόματο; |
Ευθυγράμμιση του περιεχομένου στο κάτω μέρος
Μπορείτε να αλλάξετε την τιμή του περιθωρίου ως εξής, για να κάνετε το περιεχόμενό σας ευθυγραμμισμένο προς τα κάτω, έτσι ώστε όλες οι λειτουργικές μονάδες να στοιβάζονται στο κάτω μέρος της στήλης σας:
| 01 | περιθώριο: auto 0; |
Κάθετη στοίχιση περιεχομένου για τις στήλες της σειράς σας
Μπορείτε να κεντράρετε κάθετα το περιεχόμενο όλων των στηλών στη σειρά σας προσθέτοντας το ακόλουθο απόσπασμα στο κύριο στοιχείο των ρυθμίσεων της σειράς σας, αντί να προσθέσετε το "margin: auto" σε κάθε στήλη ξεχωριστά.
| 01 | στοίχιση-στοιχεία: κέντρο; |
Μπορείτε επίσης να χρησιμοποιήσετε αυτό το απόσπασμα εάν θέλετε όλες οι πληροφορίες στις στήλες σας να είναι ευθυγραμμισμένες στο κάτω μέρος:
| 01 | align-item: flex-end; |
Θυμηθείτε ότι μπορείτε να χρησιμοποιήσετε τη δυνατότητα Επέκτασης Στυλ του Divi κάνοντας δεξί κλικ στο κύριο στοιχείο με το απόσπασμα CSS και επιλέγοντας "Επέκταση Κύριου Στοιχείου".
Στη συνέχεια, για να κεντράρετε κάθετα όλο το περιεχόμενο κάθε στήλης στη σελίδα, εφαρμόστε το κύριο στοιχείο CSS σε όλες τις σειρές σε όλη τη σελίδα (ή την ενότητα).
Όλα είναι πλέον κάθετα ισορροπημένα.
Ωστόσο, μπορεί να έχετε παρατηρήσει ότι το λευκό χρώμα φόντου στήλης δεν καλύπτει πλέον ολόκληρη τη σειρά λόγω της προσθήκης στη στήλη "περιθώριο: αυτόματο". Μπορείτε να το διορθώσετε αλλάζοντας το χρώμα φόντου της σειράς σε λευκό και αφαιρώντας το γέμισμα της σειράς. Αντίθετα, θα σας μάθω πώς να κεντράρετε το περιεχόμενο της στήλης σας χωρίς να χρειάζεται να αλλάξετε το περιθώριο.
Μέθοδος 2: Κατακόρυφη ευθυγράμμιση περιεχομένου χρησιμοποιώντας κατεύθυνση κάμψης στήλης
Χρησιμοποιήσαμε την ιδιότητα 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 για να κεντράρετε κάθετα το περιεχόμενο μιας στήλης. Το μόνο που έχετε να κάνετε είναι να βεβαιωθείτε ότι το κείμενό σας έχει ίσες αποστάσεις πάνω και κάτω (ή ενότητες). Οι περισσότεροι καταναλωτές απαιτούν περιεχόμενο με κατακόρυφο κέντρο σε διατάξεις με πολλές στήλες, επειδή θέλουν το παρακείμενο υλικό να ευθυγραμμιστεί σωστά.
Τελικές σκέψεις για την κάθετη και οριζόντια ευθυγράμμιση του DIVI
Παρόλο που αυτή η λύση βασίζεται σε μερικά μικρά αποσπάσματα προσαρμοσμένου CSS, πιστεύω ότι μπορεί να είναι χρήσιμη για άτομα που αναζητούν μια γρήγορη θεραπεία σε μια χρονοβόρα διαδικασία. Μη διστάσετε να μοιραστείτε τις απόψεις σας σχετικά με αυτήν την προσέγγιση, καθώς και amp μαθήματα για το πώς σας εξοικονομούσε χρόνο και προσπάθεια στο παρελθόν.
Ευχαριστώ για τη σαφή εξήγηση. Ωστόσο, αυτό δεν λειτουργεί με μια λειτουργική μονάδα Blog. Τότε υπάρχει μόνο 1 στήλη στη σειρά. Ο αριθμός των ιστολογίων το ένα δίπλα στο άλλο καθορίζεται από την ενότητα (προεπιλογή 3). Μπορούν και οι στήλες εδώ να γίνουν το ίδιο;
Γεια, Όχι, λυπάμαι που προορίζεται μόνο για κλασικές στήλες DIVI, η ενότητα ιστολογίου DIVI έχει εντελώς διαφορετικό κώδικα για τη στοίχιση των στηλών.
Τι γίνεται αν θέλετε η μονάδα να είναι ευθυγραμμισμένη κατά τα 2/3 προς τα κάτω ή κατά το 1/3 από πάνω – και όχι τέλεια στη μέση πάνω ή κάτω;
Γεια, φοβάμαι ότι θα χρειαστεί να κάνετε κάποιο προσαρμοσμένο CSS, από προεπιλογή δεν υπάρχει τέτοια επιλογή.
Ίσως μπορείτε να προσπαθήσετε να ευθυγραμμίσετε το περιεχόμενο στη μέση και να προσθέσετε κάποια συμπλήρωση στο περιεχόμενό σας, αλλά ελέγξτε προσεκτικά την απόδοση σε όλες τις συσκευές.