Panoramica
Tre componenti di layout riutilizzabili compaiono in quasi ogni sezione nel builder: Gruppo, Testo e Divisore. Insieme ti permettono di costruire qualsiasi layout senza scrivere CSS. Seleziona un blocco per aprirne le impostazioni.
Gruppo
Un Gruppo è un contenitore di layout flessibile. Aggiungi blocchi figli al suo interno (testo, pulsanti, immagini, campi newsletter, persino gruppi annidati) e controlla come sono disposti.
Direzione
- Verticale: i figli si impilano dall'alto verso il basso.
- Orizzontale: i figli si affiancano in una riga.
L'interruttore Impila in verticale su mobile compare solo quando la Direzione è Orizzontale. Attivalo per trasformare una riga orizzontale in una pila verticale sugli schermi piccoli.
Posizione e Allineamento
Questi distribuiscono i figli lungo l'asse principale e l'asse trasversale. Il loro significato si scambia con la direzione, e l'opzione Distribuzione (spazio uguale tra i figli) esiste solo sull'asse principale:
- Direzione verticale: Posizione è l'asse principale (verticale): alto, centro, basso o distribuzione. Allineamento è l'asse trasversale (orizzontale): sinistra, centro o destra.
- Direzione orizzontale: Allineamento è l'asse principale (orizzontale): sinistra, centro, destra o distribuzione. Posizione è l'asse trasversale (verticale): alto, centro o basso.
Larghezza
- Riempi: si espande per occupare tutto lo spazio disponibile nel genitore. Usalo per gruppi che devono condividere lo spazio in modo uguale dentro un genitore orizzontale.
- Adatta: si restringe alla dimensione naturale del suo contenuto.
- Personalizzata: rivela uno slider Larghezza personalizzata impostato come percentuale (da 0 a 100%). Il gruppo mantiene quella dimensione senza crescere né restringersi.
Spazio
La spaziatura in pixel tra gli elementi figli (da 0 a 100 px, predefinito 20 px).
Schema di colori
Usa lo schema di colori del genitore è attivo per impostazione predefinita, così il gruppo eredita lo schema del suo genitore. Disattivalo per rivelare il selettore Schema di colori e scegliere uno dei tuoi schemi di colori globali. Questo ti permette di creare zone di colore distinte all'interno di una sezione.
Bordo
Bordo è Nessuno o Pieno. Pieno rivela due slider: Spessore del bordo (da 1 a 20 px, predefinito 1) e Opacità del bordo (da 0 a 100%, predefinito 100). Il colore proviene dal colore del bordo dello schema attivo.
Raggio degli angoli
Arrotondamento degli angoli in pixel (da 0 a 100), indipendente dal bordo. Usalo per contenitori simili a schede.
Overlay di sfondo
L'interruttore Overlay di sfondo aggiunge uno strato colorato sopra lo sfondo del gruppo. Quando è attivo, imposta il Colore overlay (inclusa la trasparenza tramite lo slider di opacità del selettore), lo Stile overlay (Pieno riempimento uniforme o Gradiente che sfuma verso il trasparente) e per il gradiente la Direzione del gradiente (Su o Giù). Usato comunemente per dare una tinta a uno sfondo multimediale.
Spaziatura interna
Spaziatura interna su ciascun lato in pixel, ognuna da 0 a 100 px. La spaziatura interna sta dentro il bordo, tra esso e i figli.
Testo
Un blocco di testo renderizza titoli, paragrafi e testo formattato. L'editor di testo ricco supporta grassetto, corsivo, sottolineato, barrato e testo colorato.
Preset
Il preset tipografico imposta la famiglia di caratteri, il peso predefinito e il tag HTML semantico (il suo ruolo nella pagina):
- Predefinito: eredita lo stile di testo di base della sezione.
- Paragrafo: stile del testo del corpo.
- Titolo 1 fino a Titolo 6: stili di titolo, usando i tuoi caratteri per titoli e sottotitoli.
Dimensione
Una dimensione del carattere personalizzata in pixel (da 10 a 30 px, predefinito 16). È la dimensione a cui il blocco viene effettivamente renderizzato.
Larghezza e Allineamento
- Adatta: il blocco è largo solo quanto il suo contenuto.
- Riempi: il blocco si espande al 100% della larghezza del contenitore.
Allineamento (Sinistra, Centro, Destra) compare solo quando Larghezza è impostata su Riempi, dato che l'allineamento ha senso solo quando il blocco riempie il suo contenitore.
Altezza linea e Spaziatura caratteri
Altezza linea imposta il ritmo verticale: Normale (predefinito), Stretta o Ampia. Spaziatura caratteri imposta la spaziatura tra i caratteri con le stesse tre opzioni.
Schema di colori
Dentro un gruppo, Usa lo schema di colori del genitore è attivo per impostazione predefinita. Disattivalo per rivelare il selettore Schema di colori. I preset di titolo usano il colore del titolo dello schema; paragrafo e predefinito usano il colore del testo del corpo. Come sezione autonoma, il selettore è a sé senza interruttore di ereditarietà.
Spaziatura interna
Spaziatura interna su ciascun lato in pixel, ognuna da 0 a 100 px.
Divisore
Una linea di separazione che si adatta al suo genitore. In un layout verticale (a colonna) è una linea orizzontale; dentro un gruppo orizzontale diventa una linea verticale.
Larghezza
- Adatta: il contenitore è largo solo quanto la linea.
- Riempi: il contenitore si espande per riempire lo spazio disponibile.
Spessore
Spessore della linea in pixel (da 1 a 10 px, predefinito 1). Per un divisore orizzontale questa è l'altezza; per uno verticale è la larghezza.
Lunghezza
L'estensione della linea come percentuale del suo contenitore (da 5 a 100%, predefinito 100). Impostala sotto il 100% per creare una linea parziale e rientrata.
Allineamento
Posiziona la linea quando la sua lunghezza è sotto il 100%: Inizio, Centro (predefinito) o Fine. Questo controllo è nascosto mentre la Lunghezza è 100%.
Raggio degli angoli
- Netto: estremità rettangolari.
- Arrotondato: estremità a forma di pillola.
Schema di colori
Facoltativamente scegli uno Schema di colori. Il divisore usa il colore del bordo di quello schema. Se non ne è impostato nessuno, eredita il colore dalla sezione o dal gruppo genitore.
Spaziatura interna
Spaziatura su ciascun lato in pixel. Come blocco l'intervallo è da 0 a 100 px. Quando il divisore è aggiunto come sezione di livello superiore, la spaziatura arriva fino a 200 px (predefinito 20) per un respiro verticale più generoso.
Insidie comuni
- Due gruppi a riempimento dentro un genitore orizzontale: ciascuno prende il 50% dello spazio, che di solito è quello che vuoi. Per rendere un lato più largo, imposta la Larghezza di quel gruppo su Personalizzata.
- Il divisore verticale non compare: un divisore diventa verticale solo quando è figlio diretto di un gruppo impostato su direzione Orizzontale. Controlla la direzione del gruppo genitore.
- Opzione Distribuzione mancante: Distribuzione compare solo sull'asse lungo cui scorrono i figli, quindi è su Posizione per i gruppi verticali e su Allineamento per i gruppi orizzontali.
- Testo nel colore sbagliato: probabilmente sta ereditando da un gruppo genitore con uno schema diverso. Disattiva Usa lo schema di colori del genitore sul blocco di testo e scegli lo schema esplicitamente.
Per dove questi componenti possono essere collocati, vedi Sezioni e blocchi.