Επισκόπηση
Τρία επαναχρησιμοποιήσιμα στοιχεία διάταξης εμφανίζονται σχεδόν σε κάθε τμήμα του builder: Ομάδα, Κείμενο και Διαχωριστικό. Η κατανόησή τους σάς επιτρέπει να δημιουργείτε οποιαδήποτε διάταξη χρειάζεστε χωρίς να γράφετε CSS.
Ομάδα
Η Ομάδα είναι ένα ευέλικτο κοντέινερ διάταξης. Προσθέστε εντός της θυγατρικά μπλοκ (κείμενο, κουμπιά, εικόνες, εισαγωγές ενημερωτικού δελτίου και ακόμα και φωλιασμένες ομάδες) και ελέγξτε ακριβώς πώς είναι διευθετημένα.
Κατεύθυνση
- Κατακόρυφη: τα θυγατρικά στοιχεία στοιβάζονται από πάνω προς τα κάτω (η προεπιλογή για τα περισσότερα τμήματα).
- Οριζόντια: τα θυγατρικά στοιχεία τοποθετούνται πλάι πλάι σε μια γραμμή.
Ενεργοποιήστε το Στοίβαξη σε κινητά για αυτόματη εναλλαγή μιας οριζόντιας ομάδας σε κατακόρυφη στοίβα σε μικρές οθόνες.
Ευθυγράμμιση και θέση
Αυτές οι δύο ρυθμίσεις ελέγχουν πώς κατανέμονται τα θυγατρικά στοιχεία κατά μήκος του κύριου και του δευτερεύοντος άξονα. Η σημασία τους εναλλάσσεται ανάλογα με την κατεύθυνση της ομάδας:
- Κατακόρυφη κατεύθυνση: η Θέση ελέγχει την κατακόρυφη κατανομή (πάνω, κέντρο, κάτω ή ανάμεσα). Η Ευθυγράμμιση ελέγχει την οριζόντια τοποθέτηση (αριστερά, κέντρο, δεξιά ή ανάμεσα).
- Οριζόντια κατεύθυνση: η Ευθυγράμμιση ελέγχει την οριζόντια κατανομή (αριστερά, κέντρο, δεξιά ή ανάμεσα). Η Θέση ελέγχει την κατακόρυφη τοποθέτηση (πάνω, κέντρο, κάτω ή ανάμεσα).
Το Ανάμεσα κατανέμει τα θυγατρικά στοιχεία ομοιόμορφα με ίσο χώρο μεταξύ τους, κάτι χρήσιμο για τέντωμα στοιχείων σε μια γραμμή πλήρους πλάτους.
Απόσταση
Η απόσταση σε pixels μεταξύ θυγατρικών στοιχείων (0-100 px, προεπιλογή 20 px).
Πλάτος
- Γέμισμα: επεκτείνεται για να καταλάβει όλο τον διαθέσιμο χώρο στον γονέα. Χρησιμοποιήστε το για ομάδες που πρέπει να μοιράζονται χώρο ισάξια μέσα σε οριζόντιο γονέα.
- Προσαρμογή: συρρικνώνεται στο φυσικό μέγεθος του περιεχομένου του. Χρησιμοποιήστε το για ομάδες που πρέπει να έχουν μόνο το πλάτος που έχει αυτό που βρίσκεται μέσα τους.
- Προσαρμοσμένο: ορίστε ένα συγκεκριμένο ποσοστό (0-100%). Η ομάδα θα διατηρεί αυτό το μέγεθος χωρίς να μεγαλώνει ή να συρρικνώνεται.
Χρωματικό σχήμα και κληρονομικότητα
Από προεπιλογή μια ομάδα κληρονομεί το χρωματικό σχήμα του γονικού της τμήματος. Απενεργοποιήστε το Κληρονόμηση σχήματος για να αναθέσετε ένα ρητό χρωματικό σχήμα (1-9) από τις καθολικές ρυθμίσεις χρωμάτων. Αυτό σας επιτρέπει να δημιουργείτε ξεχωριστές ζώνες χρώματος φόντου ή κειμένου εντός ενός τμήματος χωρίς να προσθέτετε νέο τμήμα.
Περίγραμμα
Προσθέστε περίγραμμα γύρω από την ομάδα. Επιλογές: Κανένα ή Συμπαγές. Όταν επιλεγεί συμπαγές, ορίστε το πάχος περιγράμματος (1-20 px). Το χρώμα προέρχεται από το χρώμα περιγράμματος του ενεργού σχήματος.
Ακτίνα
Στρογγυλοποίηση γωνιών σε pixels (0-100). Χρησιμοποιήστε αυτό για να δημιουργήσετε κοντέινερ ομάδων που μοιάζουν με κάρτες.
Αδιαφάνεια
Συνολική αδιαφάνεια της ομάδας (0-100%, προεπιλογή 100%).
Επικάλυψη
Προσθέτει ένα χρωματιστό επίπεδο εντός της ομάδας. Όταν είναι ενεργοποιημένο, ορίστε το Χρώμα επικάλυψης (συμπεριλαμβανομένης διαφάνειας χρησιμοποιώντας το ρυθμιστικό αδιαφάνειας του επιλογέα χρωμάτων), το Στυλ (επίπεδο συμπαγές γέμισμα ή ντεγκραντέ που ξεθωριάζει σε διαφανές) και για ντεγκραντέ την Κατεύθυνση (πάνω ή κάτω). Χρησιμοποιείται συνήθως για τη δημιουργία ημιδιαφανούς χρωματισμένου επιπέδου πάνω από μέσα φόντου σε τμήμα hero.
Εσωτερική απόσταση
Απόσταση σε κάθε πλευρά σε pixels (πάνω, αριστερά, δεξιά και κάτω), καθεμία από 0 έως 100 px. Η εσωτερική απόσταση εφαρμόζεται εντός του περιγράμματος ομάδας, δημιουργώντας αναπνοή μεταξύ του περιγράμματος και των θυγατρικών στοιχείων της ομάδας.
Κείμενο
Ένα μπλοκ κειμένου αποδίδει περιεχόμενο εμπλουτισμένου κειμένου (επικεφαλίδες, παραγράφους και μορφοποιημένο κείμενο) εντός ενός τμήματος ή ομάδας. Ο επεξεργαστής υποστηρίζει έντονα, πλάγια, υπογράμμιση, διαγραφή και χρωματισμένο κείμενο.
Προρύθμιση
Η προρύθμιση τυπογραφίας ελέγχει το μέγεθος γραμματοσειράς, το βάρος γραμματοσειράς και τον σημασιολογικό ρόλο του κειμένου. Διαθέσιμες προρυθμίσεις:
- Προεπιλογή: κληρονομεί το βασικό στυλ κειμένου του τμήματος.
- Παράγραφος: στυλ κειμένου σώματος.
- Επικεφαλίδα 1 έως Επικεφαλίδα 6: φθίνοντα μεγέθη από μεγαλύτερο σε μικρότερο, χρησιμοποιώντας τη γραμματοσειρά επικεφαλίδας που ορίζεται στις ρυθμίσεις τυπογραφίας.
Μέγεθος
Ένα προσαρμοσμένο μέγεθος γραμματοσειράς σε pixels (10-30 px) που παρακάμπτει το μέγεθος της προρύθμισης. Αφήστε στην προεπιλογή για να αφήσετε την προρύθμιση να καθορίσει το μέγεθος.
Πλάτος
- Προσαρμογή: το μπλοκ κειμένου έχει μόνο το πλάτος του περιεχομένου του.
- Γέμισμα: το μπλοκ κειμένου επεκτείνεται στο 100% του διαθέσιμου πλάτους κοντέινερ.
Ευθυγράμμιση
Οριζόντια ευθυγράμμιση κειμένου: Αριστερά, Κέντρο ή Δεξιά.
Ύψος γραμμής
Ελέγχει τον κατακόρυφο ρυθμό: Σφικτό (συμπαγείς γραμμές), Κανονικό (η προεπιλογή) ή Αραιό (απαλές γραμμές).
Απόσταση γραμμάτων
Ελέγχει την απόσταση χαρακτήρων: Σφικτή (χαρακτήρες πιο κοντά μεταξύ τους), Κανονική (η προεπιλογή) ή Αραιή (χαρακτήρες πιο μακριά μεταξύ τους).
Χρωματικό σχήμα και κληρονομικότητα
Από προεπιλογή ένα μπλοκ κειμένου κληρονομεί το χρώμα του από το γονικό τμήμα. Απενεργοποιήστε το Κληρονόμηση σχήματος για να χρησιμοποιήσετε ένα συγκεκριμένο χρωματικό σχήμα. Οι προρυθμίσεις επικεφαλίδων χρησιμοποιούν το χρώμα επικεφαλίδας του σχήματος. Οι προρυθμίσεις παραγράφου και προεπιλογής χρησιμοποιούν το χρώμα κειμένου σώματος του σχήματος.
Εσωτερική απόσταση
Εσωτερική απόσταση σε κάθε πλευρά σε pixels (πάνω, αριστερά, δεξιά και κάτω), καθεμία από 0 έως 100 px.
Διαχωριστικό
Μια οπτική γραμμή διαχωρισμού. Σε κατακόρυφη διάταξη εμφανίζεται ως οριζόντια γραμμή. Μέσα σε οριζόντια ομάδα εμφανίζεται ως κατακόρυφη γραμμή. Το διαχωριστικό προσαρμόζεται αυτόματα στην κατεύθυνση του γονικού κοντέινερ.
Πάχος
Το πάχος γραμμής σε pixels (1-10 px, προεπιλογή 1 px).
Μήκος
Η έκταση της γραμμής ως ποσοστό του κοντέινερ της (5-100%, προεπιλογή 100%). Ορίστε σε λιγότερο από 100% και συνδυάστε με ευθυγράμμιση για να δημιουργήσετε κεντρισμένη ή εσοχής διακοσμητική γραμμή.
Στυλ ακρών
- Αιχμηρό: ορθογώνια άκρα.
- Στρογγυλεμένο: άκρα σε σχήμα χαπιού.
Ευθυγράμμιση
Πώς τοποθετείται η γραμμή όταν το μήκος της είναι μικρότερο από 100%: Αρχή, Κέντρο (προεπιλογή) ή Τέλος.
Πλάτος
- Προσαρμογή: το κοντέινερ διαχωριστικού έχει μόνο το πλάτος της γραμμής.
- Γέμισμα: το κοντέινερ διαχωριστικού επεκτείνεται για να γεμίσει τον διαθέσιμο χώρο στον γονέα.
Χρωματικό σχήμα
Προαιρετικά ορίστε ένα χρωματικό σχήμα (1-9). Το διαχωριστικό χρησιμοποιεί το χρώμα περιγράμματος από το επιλεγμένο σχήμα. Αν δεν ορισθεί σχήμα, κληρονομεί το χρώμα από το γονικό τμήμα ή ομάδα.
Εσωτερική απόσταση
Απόσταση σε κάθε πλευρά σε pixels. Όταν το διαχωριστικό χρησιμοποιείται ως τμήμα ανώτατου επιπέδου, οι τιμές εσωτερικής απόστασης φτάνουν έως 200 px για μεγαλύτερη κατακόρυφη αναπνοή.
Συνήθη σφάλματα
- Δύο ομάδες γέμισμα μέσα σε οριζόντιο γονέα: κάθε μία θα καταλαμβάνει το 50% του διαθέσιμου χώρου, κάτι που συνήθως είναι αυτό που θέλετε. Αν χρειάζεστε μια πλευρά πλατύτερη από την άλλη, χρησιμοποιήστε το πλάτος Προσαρμοσμένο σε μία από αυτές.
- Το κατακόρυφο διαχωριστικό δεν εμφανίζεται: ένα διαχωριστικό γίνεται κατακόρυφο μόνο όταν είναι άμεσο θυγατρικό μιας ομάδας με Οριζόντια κατεύθυνση. Βεβαιωθείτε ότι η κατεύθυνση της γονικής ομάδας έχει οριστεί σε οριζόντια.
- Κείμενο με απροσδόκητο χρώμα: αν ένα μπλοκ κειμένου εμφανίζεται με λάθος χρώμα, πιθανώς κληρονομεί από γονική ομάδα με διαφορετικό χρωματικό σχήμα. Απενεργοποιήστε το Κληρονόμηση σχήματος στο μπλοκ κειμένου και αναθέστε ρητά το σωστό σχήμα.