Ένα Group είναι ένα κουτί που περιέχει άλλα μπλοκ και τα τακτοποιεί. Χρησιμοποιήστε το για να βάλετε στοιχεία δίπλα δίπλα, να φτιάξετε στήλες ή να δώσετε σε ένα μέρος ενός τμήματος δικό του φόντο και περίγραμμα.
Πού μπορείτε να χρησιμοποιήσετε ομάδες
Πολλά τμήματα δέχονται μπλοκ Group: το υποσέλιδο, το newsletter, το hero, οι διαφάνειες του slideshow, το FAQ, το πριν και μετά, οι κριτικές, η επικοινωνία, η σελίδα 404, η επιβεβαίωση παραγγελίας, οι πτυσσόμενες γραμμές και η περιοχή κειμένου στις λίστες προϊόντων, όπως τα προτεινόμενα προϊόντα και οι συλλογές. Κάθε τμήμα ορίζει ποια μπλοκ μπορούν να μπουν στις ομάδες του και πόσες ομάδες δέχεται.
Για να προσθέσετε μία στον builder, επιλέξτε το τμήμα, κάντε κλικ στο Add new block και διαλέξτε Group. Μετά σύρετε άλλα μπλοκ μέσα της. Ορισμένα τμήματα (υποσέλιδο, newsletter, κριτικές) σας επιτρέπουν επίσης να βάλετε μια ομάδα μέσα σε άλλη ομάδα.
Διάταξη
- Width: το Fill παίρνει τον ελεύθερο χώρο και τον μοιράζεται εξίσου με τις άλλες ομάδες Fill δίπλα του. Το Fit είναι μόνο όσο πλατύ είναι το περιεχόμενό του. Το Custom ορίζει ένα Custom width σε ποσοστό.
- Direction: το Vertical βάζει τα μπλοκ το ένα κάτω από το άλλο, το Horizontal τα βάζει δίπλα δίπλα. Τα μπλοκ που είναι δίπλα δίπλα πάνε σε νέα γραμμή όταν δεν υπάρχει αρκετός χώρος.
- Stack vertically on mobile (μόνο με Horizontal): στα κινητά τα μπλοκ μπαίνουν το ένα κάτω από το άλλο.
- Position: τοποθετεί τα μπλοκ πάνω κάτω (Top, Center, Bottom).
- Alignment: τοποθετεί τα μπλοκ από αριστερά προς δεξιά (Left, Center, Right).
- Space between: απλώνει τα μπλοκ με ίση απόσταση ανάμεσά τους. Προσφέρεται στην κατεύθυνση που ακολουθούν τα μπλοκ: στο Position για μια κάθετη ομάδα, στο Alignment για μια οριζόντια ομάδα.
Εμφάνιση
- Use parent color scheme: ενεργό από προεπιλογή, οπότε η ομάδα χρησιμοποιεί τα χρώματα του τμήματος. Απενεργοποιήστε το και επιλέξτε ένα Color scheme για να δώσετε στην ομάδα δικό της φόντο και χρώματα κειμένου.
- Border: None ή Solid. Το Solid προσθέτει Border thickness (1 έως 20 pixel) και Border opacity. Το χρώμα είναι το χρώμα περιγράμματος του σχήματος.
- Corner radius: στρογγυλεύει τις γωνίες, από 0 έως 100 pixel.
- Background overlay: προσθέτει ένα στρώμα χρώματος πάνω από το φόντο. Ορίστε το Overlay color και το Overlay style: Solid ή Gradient που σβήνει σταδιακά προς το διάφανο, με Gradient directionUp ή Down. Χρήσιμο για να διαβάζεται το κείμενο πάνω σε μια εικόνα hero.
Αποστάσεις
Το Gap είναι η απόσταση ανάμεσα στα μπλοκ μέσα στην ομάδα (0 έως 100 pixel). Το Padding είναι η απόσταση ανάμεσα στην άκρη της ομάδας και στα μπλοκ της, σε κάθε πλευρά.
Συνταγές
- Δύο κουμπιά δίπλα δίπλα σε ένα hero: βάλτε τα και τα δύο σε μια ομάδα Horizontal με μικρό κενό.
- Τρεις στήλες στο υποσέλιδο: μια ομάδα Horizontal με τρία στοιχεία Fill μέσα της και ενεργό το Stack vertically on mobile.
- Μια κάρτα: μια ομάδα Vertical με δικό της χρωματικό σχήμα, περίγραμμα Solid, στρογγυλεμένες γωνίες και περιθώρια.
- Κείμενο αριστερά, κουμπί δεξιά: μια ομάδα Horizontal με το Alignment ρυθμισμένο σε Space between.
Καλό να ξέρετε
- Μια στήλη είναι πιο φαρδιά από ό,τι θέλετε: δύο ομάδες Fill μοιράζονται τον χώρο εξίσου. Ορίστε τη μία σε Custom και δώστε της ένα ποσοστό.
- Η ομάδα δεν εμφανίζεται: μια ομάδα χωρίς μπλοκ, ή μόνο με κρυμμένα μπλοκ, δεν εμφανίζεται στο κατάστημά σας.
- Το Group δεν υπάρχει στη λίστα μπλοκ: αυτό το τμήμα δεν δέχεται ομάδες ή έχει φτάσει το όριο ομάδων του.
- Οι ρυθμίσεις των Text, Button και Divider βρίσκονται στο Μπλοκ Group, Text, Button και Divider: πώς λειτουργούν οι ρυθμίσεις των στοιχείων διάταξης;.