Πώς να ευθυγραμμίσετε κατακόρυφα και οριζόντια τμήματα, σειρές, στήλες και ενότητες στο DIVI Builder

Όταν κατασκευάζετε έναν ιστότοπο χρησιμοποιώντας το 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 στις στήλες σας για να αλλάξετε τα περιεχόμενα κάθε στήλης (ή πλαισίου).

Αν προσθέσετε το «περιθώριο: auto» σε κάθε στήλη σε μια σειρά, για την εκ amp le, το περιεχόμενο της στήλης (αν κάποιος είναι ή διάφορες ενότητες) θα κάθετα στο κέντρο.

Όλες οι στήλες σας (και το περιεχόμενό τους) θα είναι κάθετα κεντραρισμένες αν προσθέσετε "στοιχεία στοίχισης: στο κέντρο" στη σειρά σας.

Φυσικά, η ιδιότητα flex έχει πολλές περισσότερες εφαρμογές στο σχεδιασμό ιστοσελίδων και πιο προηγμένο CSS που μπορείτε να χρησιμοποιήσετε στο θέμα σας. Ωστόσο, ήθελα να κρατήσω τα πράγματα απλά για αυτό το σεμινάριο.

Απαιτείται αυτό;

Από τεχνική άποψη, όχι. Μπορείτε να χρησιμοποιήσετε προσαρμοσμένο διάστημα για να τοποθετήσετε το περιεχόμενο/τις ενότητες σας κάθετα μέσα σε μια στήλη (επένδυση και περιθώριο). Για ex amp le, μπορείτε να χρησιμοποιήσετε απόσταση επιλογές Divi να επικεντρωθεί στις μονάδα (-ες) κατακόρυφα μέσα στην ουρά για να δώσει μια στήλη ίσα πάνω και κάτω γεμίσει. Μπορείτε επίσης να κάνετε το περιεχόμενο ευθυγραμμισμένο προς τα κάτω προσθέτοντας επάνω συμπλήρωμα σε μια στήλη. Όταν προσθέτετε περισσότερο περιεχόμενο στη σελίδα σας, ίσως χρειαστεί να τροποποιήσετε τα κενά. Επιπλέον, η διατήρηση αυτής της ευθυγράμμισης σε πολλά μεγέθη προγράμματος περιήγησης μπορεί να είναι προβληματική.

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

Ας ξεκινήσουμε αυτό το πάρτι!

Προσθέστε την προ-ρυθμισμένη διάταξη στη σελίδα σας.

Θα ξεκινήσω με τη Διάταξη σελίδας χαρτοφυλακίου εταιρείας εσωτερικού σχεδιασμού. Δημιουργήστε μια νέα σελίδα για να έχετε αυτήν τη διάταξη στη σελίδα σας. Μετά από αυτό, δώστε ένα όνομα στη σελίδα σας. Επιλέξτε «Use Divi Builder» και μετά «Use Visual Builder» από το αναπτυσσόμενο μενού. Στη συνέχεια, επιλέξτε "Επιλέξτε μια προκατασκευασμένη διάταξη" από το αναπτυσσόμενο μενού. Στη συνέχεια, επιλέξτε το πακέτο διάταξης Εσωτερικού σχεδιασμού εταιρείας από το παράθυρο Φόρτωση από βιβλιοθήκη. Τέλος, από την επιλογή διατάξεων, επιλέξτε τη σελίδα Χαρτοφυλακίου και κάντε κλικ στο «Χρήση αυτής της διάταξης».

Είστε έτοιμοι να ξεκινήσετε μετά τη φόρτωση της διάταξης στη σελίδα σας.

Μέθοδος 1: Κάθετη ευθυγράμμιση περιεχομένου με Flex και Auto Margin

Ανοίξτε τις ρυθμίσεις σειράς για τη δεύτερη σειρά (αυτή που βρίσκεται ακριβώς κάτω από τη σειρά με τον τίτλο της σελίδας). Ανοίξτε με εναλλαγή της ομάδας επιλογών Sizing στις επιλογές σχεδίασης και σημειώστε ότι το "Equalize Column Heights" είναι ήδη ενεργό. Αυτό σημαίνει ότι η ιδιότητα flex ("display: flex;") έχει προστεθεί στη σειρά.

Κάτω από το πλαίσιο εισαγωγής Βασικού στοιχείου Στήλη 2, μεταβείτε στις ρυθμίσεις καρτέλας Για προχωρημένους για την ίδια σειρά και προσθέστε το ακόλουθο απόσπασμα CSS.

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

Ευθυγράμμιση του περιεχομένου στο κάτω μέρος

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

Κάθετη στοίχιση περιεχομένου για τις στήλες της σειράς σας

Μπορείτε να κεντράρετε κατακόρυφα το περιεχόμενο όλων των στηλών στη σειρά σας προσθέτοντας το ακόλουθο απόσπασμα στο κύριο στοιχείο των ρυθμίσεων της σειράς σας, αντί να προσθέσετε το "margin: auto" σε κάθε στήλη ξεχωριστά.

Μπορείτε επίσης να χρησιμοποιήσετε αυτό το απόσπασμα εάν θέλετε όλες οι πληροφορίες στις στήλες σας να ευθυγραμμίζονται στο κάτω μέρος:

Να θυμάστε ότι μπορείτε να χρησιμοποιήσετε τη δυνατότητα Επέκτασης Στυλ του Divi κάνοντας δεξί κλικ στο κύριο στοιχείο με το απόσπασμα CSS και επιλέγοντας "Επέκταση Κύριου Στοιχείου".

Στη συνέχεια, για να κεντράρετε κάθετα όλο το περιεχόμενο κάθε στήλης στη σελίδα, εφαρμόστε το κύριο στοιχείο CSS σε όλες τις σειρές σε όλη τη σελίδα (ή την ενότητα).

Όλα είναι πλέον κάθετα ισορροπημένα.

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

Μέθοδος 2: Κατακόρυφη ευθυγράμμιση περιεχομένου χρησιμοποιώντας κατεύθυνση κάμψης στήλης

Χρησιμοποιήσαμε την ιδιότητα flex που προστέθηκε αρχικά στη σειρά. Ως αποτέλεσμα, κάθε στήλη μας έγινε ένα "flex box" που μπορούσε να ευθυγραμμιστεί κάθετα αλλάζοντας το περιθώριο.

Ωστόσο, μπορούμε να χρησιμοποιήσουμε την ευέλικτη κατεύθυνση για να ευθυγραμμίσουμε το κείμενο της στήλης μας χωρίς να θυσιάσουμε το εφέ "Equalize Column Height", το οποίο διατηρεί τις στήλες μας (και το φόντο των στηλών) στο ίδιο μέγεθος. Για να το πετύχουμε αυτό, θα προσθέσουμε μερικές γραμμές CSS στην ουρά μας, προκαλώντας τη στοίβαξη όλων των λειτουργικών μονάδων μέσα σε αυτό κατακόρυφα και στη συνέχεια στο κέντρο.

Ας επιστρέψουμε στην προηγούμενη σειρά ex amp le’s. Κάνοντας δεξί κλικ στο Προσαρμοσμένο CSS και επιλέγοντας "Επαναφορά προσαρμοσμένων στυλ CSS", μπορείτε να αφαιρέσετε τυχόν προσαρμοσμένο CSS που μπορεί να έχετε στις Ρυθμίσεις σειράς.

Στη συνέχεια, στη στήλη 2 Κύριο στοιχείο, εφαρμόστε το ακόλουθο CSS:

Αλλάξτε το "justify-content: center" σε "justify-content: flex-end" για να ευθυγραμμίσετε το περιεχόμενο στο κάτω μέρος.

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

Δημιουργία κάθετα ευθυγραμμισμένων θαμπών με διάφορες ποσότητες κειμένου

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

Για την Ψηφιακή Πληρωμών Αρχική Σελίδα Διάταξη, θα ευθυγραμμιστούν κάθετα τις blurbs για αυτό το πρώην amp le.

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

Τώρα πρέπει να κάνω "Equalize Column Heights" στις ρυθμίσεις της σειράς.

Τώρα μπορώ να ευθυγραμμίσω το κείμενό μου και να προσαρμόσω τη σχεδίαση χρησιμοποιώντας αποσπάσματα CSS.

Μπορούμε να κεντράρουμε κάθετα το περιεχόμενο των στηλών μας προσθέτοντας τα ακόλουθα στην ενότητα Κύριο στοιχείο της καρτέλας Για προχωρημένους στις Ρυθμίσεις σειράς:

Αλλάξτε το στο παρακάτω για να τα ευθυγραμμίσετε στο κάτω μέρος.

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

 Στήλη 1 Κύριο στοιχείο CSS:

 Στήλη 3 Κύριο στοιχείο CSS:

Τι γίνεται με τις διατάξεις με μία μόνο στήλη;

Δεν χρειάζεστε απόσπασμα CSS ή flex για να κεντράρετε κάθετα το περιεχόμενο μιας στήλης. Το μόνο που έχετε να κάνετε είναι να βεβαιωθείτε ότι το κείμενό σας έχει ίσες αποστάσεις πάνω και κάτω (ή ενότητες). Οι περισσότεροι καταναλωτές απαιτούν περιεχόμενο με κατακόρυφο κέντρο σε διατάξεις με πολλές στήλες, επειδή θέλουν το παρακείμενο υλικό να ευθυγραμμιστεί σωστά.

Τελικές σκέψεις για την κάθετη και οριζόντια ευθυγράμμιση του DIVI

Παρόλο που αυτή η λύση βασίζεται σε μερικά μικρά αποσπάσματα προσαρμοσμένου CSS, πιστεύω ότι μπορεί να είναι χρήσιμη για άτομα που αναζητούν μια γρήγορη θεραπεία σε μια χρονοβόρα διαδικασία. Μη διστάσετε να μοιραστείτε τις απόψεις σας σχετικά με αυτήν την προσέγγιση, καθώς και πρώην amp les το πώς θα έχει σώσει χρόνο και προσπάθεια στο παρελθόν.