Panoramica
Tre componenti di layout riutilizzabili appaiono in quasi ogni sezione del builder: Gruppo, Testo e Divisore. Capirli ti permette di costruire qualsiasi layout tu voglia senza scrivere CSS.
Gruppo
Un Gruppo è un contenitore di layout flessibile. Aggiungi blocchi figlio al suo interno (testo, pulsanti, immagini, input newsletter e persino gruppi nidificati) e controlla esattamente come sono disposti.
Direzione
- Verticale: i figli si impilano dall'alto verso il basso (predefinito per la maggior parte delle sezioni).
- Orizzontale: i figli si siedono fianco a fianco in una riga.
Abilita Impila su mobile per passare automaticamente un gruppo orizzontale a uno stack verticale su schermi piccoli.
Allineamento e posizione
Queste due impostazioni controllano come i figli sono distribuiti lungo gli assi principale e trasversale. Il loro significato cambia a seconda della direzione del gruppo:
- Direzione verticale: Posizione controlla la distribuzione verticale (in alto, al centro, in basso o spazioso). Allineamento controlla la posizione orizzontale (sinistra, centro, destra o spazioso).
- Direzione orizzontale: Allineamento controlla la distribuzione orizzontale (sinistra, centro, destra o spazioso). Posizione controlla la posizione verticale (in alto, al centro, in basso o spazioso).
Spazioso distribuisce i figli in modo uniforme con spazio uguale tra di loro, il che è utile per distribuire gli articoli su una riga a larghezza intera.
Gap
La spaziatura in pixel tra gli elementi figlio (0–100 px, predefinito 20 px).
Larghezza
- Riempimento: si espande per occupare tutto lo spazio disponibile nel genitore. Usalo per i gruppi che devono condividere lo spazio in modo uniforme all'interno di un genitore orizzontale.
- Adattamento: si restringe alla dimensione naturale del suo contenuto. Usalo per i gruppi che devono essere larghi solo quanto il loro contenuto.
- Personalizzato: imposta una percentuale specifica (0–100%). Il gruppo mantiene quella dimensione senza crescere o restringersi.
Combinazione di colori ed ereditarietà
Per impostazione predefinita un gruppo eredita la combinazione di colori della sua sezione genitore. Disattiva Eredita schema per assegnare una combinazione di colori esplicita (1–9) dalle tue impostazioni globali dei colori. Questo ti permette di creare zone di colore di sfondo o testo distinte all'interno di una sezione senza aggiungere una nuova sezione.
Bordo
Aggiungi un bordo attorno al gruppo. Opzioni: Nessuno o Solido. Quando selezionato solido, imposta lo spessore del bordo (1–20 px); il colore proviene dal colore del bordo dello schema attivo.
Raggio
Arrotondamento degli angoli in pixel (0–100). Usalo per creare contenitori gruppo simili a schede.
Opacità
Opacità complessiva del gruppo (0–100%, predefinito 100%).
Overlay
Aggiunge un layer colorato all'interno del gruppo. Quando abilitato, imposta il Colore overlay (inclusa la trasparenza usando il cursore di opacità del selettore colore), lo Stile (riempimento piatto solido o un gradiente che sfuma verso trasparente), e per il gradiente la Direzione (verso l'alto o verso il basso). Viene comunemente usato per creare un layer tinto semi-trasparente sopra uno sfondo media in una sezione hero.
Padding
Spaziatura su ogni lato in pixel (superiore, sinistra, destra e inferiore), ognuno da 0 a 100 px. Il padding viene applicato all'interno del bordo del gruppo, creando respiro tra il bordo e i figli del gruppo.
Testo
Un blocco di testo mostra contenuto di testo avanzato (intestazioni, paragrafi e testo formattato) all'interno di una sezione o gruppo. L'editor supporta grassetto, corsivo, sottolineato, barrato e testo colorato.
Preimpostazione
La preimpostazione tipografica controlla la dimensione del carattere, il peso del carattere e il ruolo semantico del testo. Preimpostazioni disponibili:
- Predefinito: eredita lo stile di testo base della sezione.
- Paragrafo: stile del testo del corpo.
- Da Intestazione 1 a Intestazione 6: dimensioni decrescenti dalla più grande alla più piccola, usando il carattere di intestazione definito nelle impostazioni tipografiche.
Dimensione
Una dimensione del carattere personalizzata in pixel (10–30 px) che sovrascrive la dimensione della preimpostazione. Lascia al valore predefinito per lasciare che la preimpostazione determini la dimensione.
Larghezza
- Adattamento: il blocco di testo è largo solo quanto il suo contenuto.
- Riempimento: il blocco di testo si espande al 100% della larghezza del contenitore disponibile.
Allineamento
Allineamento orizzontale del testo: Sinistra, Centro o Destra.
Altezza della riga
Controlla il ritmo verticale: Compatto (righe compatte), Normale (predefinito), o Spaziato (righe spaziose).
Spaziatura tra le lettere
Controlla la spaziatura tra i caratteri: Compatto (caratteri più vicini), Normale (predefinito), o Spaziato (caratteri più distanti).
Combinazione di colori ed ereditarietà
Per impostazione predefinita un blocco di testo eredita il suo colore dalla sezione genitore. Disattiva Eredita schema per usare una combinazione di colori specifica. Le preimpostazioni di intestazione usano il colore di intestazione dello schema; le preimpostazioni paragrafo e predefinito usano il colore del testo del corpo dello schema.
Padding
Spaziatura interna su ogni lato in pixel (superiore, sinistra, destra e inferiore), ognuno da 0 a 100 px.
Divisore
Una linea separatrice visiva. In un layout verticale appare come una linea orizzontale. All'interno di un gruppo orizzontale appare come una linea verticale. Il divisore si adatta automaticamente alla direzione del suo contenitore genitore.
Spessore
Lo spessore della linea in pixel (1–10 px, predefinito 1 px).
Lunghezza
L'estensione della linea come percentuale del suo contenitore (5–100%, predefinito 100%). Impostalo a meno del 100% e combinalo con l'allineamento per creare una linea decorativa centrata o rientrata.
Stile dell'estremità
- Netto: estremità rettangolari.
- Arrotondato: estremità a forma di pillola.
Allineamento
Come viene posizionata la linea quando la sua lunghezza è inferiore al 100%: Inizio, Centro (predefinito), o Fine.
Larghezza
- Adattamento: il contenitore del divisore è largo solo quanto la linea stessa.
- Riempimento: il contenitore del divisore si espande per riempire lo spazio disponibile nel suo genitore.
Combinazione di colori
Imposta facoltativamente una combinazione di colori (1–9). Il divisore usa il colore del bordo dallo schema selezionato. Se non viene impostato nessuno schema, eredita il colore dalla sezione o gruppo genitore.
Padding
Spaziatura su ogni lato in pixel. Quando il divisore viene usato come sezione di primo livello, i valori del padding arrivano fino a 200 px per un maggiore respiro verticale.
Problemi comuni
- Due gruppi di riempimento all'interno di un genitore orizzontale: ognuno prenderà il 50% dello spazio disponibile, il che di solito è quello che vuoi. Se hai bisogno che un lato sia più largo dell'altro, usa la larghezza Personalizzato su uno di essi.
- Divisore verticale non visibile: un divisore diventa verticale solo quando è un figlio diretto di un gruppo impostato sulla direzione Orizzontale. Assicurati che la direzione del gruppo genitore sia impostata su orizzontale.
- Testo con colore inaspettato: se un blocco di testo appare nel colore sbagliato, probabilmente sta ereditando da un gruppo genitore che ha una combinazione di colori diversa. Disattiva Eredita schema sul blocco di testo e assegna esplicitamente lo schema corretto.