Layout - Colonna

Ultimo aggiornamento: 14 novembre 2024

Argomenti:

Creato per:

Principiante
Intermedio
Utente

Utilizza il tipo di contenuto Colonna per dividere una pagina in più colonne nella Page Builder fase. Quando si aggiunge una colonna a una riga o a una scheda oppure direttamente all'area di visualizzazione, il gruppo di colonne viene inizialmente diviso in due colonne di larghezza uguale. Puoi aggiungere o rimuovere colonne in base alle esigenze. È possibile ridimensionare una colonna trascinando il bordo tra due colonne. La larghezza della colonna successiva viene regolata in modo da riempire lo spazio disponibile all’interno della riga, della scheda o dell’area di visualizzazione. Una singola colonna estende l'intera larghezza dell'area di visualizzazione o del relativo contenitore.

Aggiunta di una colonna

NOTE

Se si apportano modifiche significative al contenuto di Page Builder, è consigliabile aumentare la durata della sessione di amministrazione per evitare il timeout della sessione mentre si lavora.

Aggiornamenti nella versione 2.4.5

Le funzionalità di Page Builder sono state aggiornate nella versione 2.4.5 in modo che gli utenti ora utilizzino Columns come contenitore principale per le singole colonne. Questo nuovo contenitore supporta anche le proprietà per lo sfondo ed elimina la necessità di racchiudere le colonne in una riga. Riduce i markup superflui e offre un controllo più preciso sullo schermo e sull'esperienza della vetrina.

È possibile modificare il layout del contenitore Columns trascinando una colonna al di sopra o al di sotto di altre colonne nel gruppo e sovrapponendole. Si apre una nuova varietà di possibili combinazioni di layout che possono essere ottenute senza la necessità di personalizzazione da parte degli sviluppatori.

Guarda questo video per una dimostrazione di come il contenitore Columns può essere utilizzato per perfezionare i layout di pagina:

Casella degli strumenti Colonna

Ogni colonna ha una casella strumenti di opzioni che viene visualizzata quando passi il cursore sul contenitore.

Strumento	Icona	Descrizione
Sposta		Sposta la colonna e il relativo contenuto in un'altra posizione in relazione ad altre colonne.
(etichetta)	Colonna	Identifica il contenitore corrente come colonna. Passa il puntatore del mouse sul contenitore colonne per visualizzare la casella degli strumenti.
Impostazioni		Apre la pagina Modifica colonna, in cui è possibile modificare le proprietà del contenitore.
Duplica		Crea una copia della colonna corrente.
Rimuovi		Elimina la colonna corrente e il relativo contenuto.

Griglia colonna

La griglia garantisce che il contenuto sia allineato in modo coerente in una colonna e consente il rendering corretto della pagina sia sui dispositivi desktop che mobili. Per ulteriori informazioni, vedere la sezione Strumenti di contenuto avanzati della configurazione di Page Builder.

Divisioni griglia in una riga con una colonna

Nell'esempio di due colonne riportato di seguito, i numeri tra parentesi (6/12) nel bordo superiore di ogni contenitore di colonne indicano il numero di divisioni della griglia in ogni colonna e il numero totale di divisioni. In questo caso, la colonna corrisponde alla larghezza di sei unità della griglia su un totale di 12.

Divisioni griglia su riga con due colonne

Aggiungi una colonna

Nel pannello Page Builder sotto Layout, trascina un Column nell'area di visualizzazione.

Il gruppo di colonne è ora diviso in due colonne di uguale larghezza. Ogni colonna è un contenitore separato per il contenuto e dispone di un set specifico di opzioni della casella degli strumenti.
Nell'angolo superiore sinistro del gruppo di colonne fare clic sullo strumento Griglia ( ) e modificare le dimensioni della griglia in base alle esigenze.

Il posizionamento dei contenuti sulla griglia consente di allineare i contenuti in modo coerente ed esegue il rendering corretto della pagina sia sui dispositivi desktop che mobili. Per ulteriori informazioni, vedere la sezione Strumenti di contenuto avanzati della configurazione di Page Builder.

Ridimensionare una colonna

Passa il cursore del mouse sul bordo tra due colonne.

Il bordo viene evidenziato e viene visualizzata la casella degli strumenti per la colonna selezionata.
Tenere premuto il pulsante del mouse per visualizzare la griglia e trascinare il bordo in una nuova posizione sulla griglia.

La larghezza di entrambe le colonne viene regolata in modo da riflettere la modifica. La nuova larghezza di ogni colonna viene visualizzata dopo l'etichetta, ad esempio 4/12 (quattro su 12) e 8/12 (otto su 12).

Rimuovere una colonna

Passa il puntatore del mouse sulla colonna da rimuovere per visualizzare la casella degli strumenti e scegli l'icona Rimuovi ( ).
Se la colonna contiene contenuto, fare clic su OK per confermare.

Per accelerare il processo in futuro, è possibile saltare il passaggio di conferma selezionando la casella di controllo Do not show this again.

Il gruppo di colonne ora ha una singola colonna (12/12) e una griglia. Poiché la griglia è disponibile solo per le colonne, è possibile utilizzare questa tecnica per visualizzare la griglia.
Se si desidera che il gruppo di colonne estenda la colonna rimanente fino alla larghezza completa della riga o dell'area di visualizzazione:
- Passa il puntatore del mouse sulla colonna per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).
- Scorri verso il basso fino alla sezione Advanced e imposta tutti e quattro i valori Padding su 0.
- Nell'angolo superiore destro fare clic su Save per chiudere la pagina Edit Column.
Fai clic sull'icona Chiudi schermo intero ( ) nell'angolo superiore destro dell'area di lavoro, quindi fai clic su Save nell'angolo superiore destro.

Modificare le impostazioni delle colonne

Passa il puntatore del mouse sulla colonna per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( ).

Modificare le impostazioni di Appearance in base alle esigenze.

Scegliere l'impostazione di allineamento che determina la posizione della colonna rispetto al relativo contenitore.

Opzione	Descrizione
`Full Height`	La colonna estende l’intera altezza del relativo contenitore.
`Top Aligned`	La colonna è allineata nella parte superiore del relativo contenitore.
`Centered`	La colonna è centrata al centro del relativo contenitore.
`Bottom Aligned`	La colonna è allineata nella parte inferiore del relativo contenitore.

Se necessario, immettere Minimum Height per la colonna. Ad esempio, potete impostare l'altezza minima in modo che corrisponda all'altezza di un'immagine di sfondo.
Se si imposta l'altezza minima, impostare Vertical Alignment per controllare la posizione dei contenitori di contenuto aggiunti alla colonna (Top, Center o Bottom).

Modifica lo sfondo per il contenuto della colonna.

Background Color - Specificare il colore scegliendo un campione, facendo clic sul selettore del colore o immettendo un nome di colore valido o un valore esadecimale equivalente. Questa impostazione determina il colore di sfondo della colonna.

Background Image - Se necessario, utilizzare gli strumenti forniti per scegliere un'immagine di sfondo da applicare alla colonna:

Strumento	Descrizione
Upload	Carica un file di immagine dal computer locale alla raccolta e quindi lo applica come immagine di sfondo per la colonna.
Select from Gallery	Richiede di scegliere un'immagine esistente dalla raccolta come immagine di sfondo per la colonna.
	Consente di trascinare l'immagine nella sezione della fotocamera o di spostarsi sull'immagine nel file system locale.

Background Mobile Image - Se necessario, utilizzare gli stessi strumenti per scegliere un'immagine di sfondo diversa da utilizzare per la visualizzazione sui dispositivi mobili.

Background Size - Modifica questa impostazione per determinare il ridimensionamento dell'immagine di sfondo in relazione alla larghezza della colonna:

Opzione	Descrizione
`Cover`	L'immagine di sfondo copre l'intera larghezza della colonna.
`Contain`	L'immagine di sfondo è limitata alla larghezza dell'area dei contenuti.
`Auto`	Applica la dimensione di sfondo predefinita specificata nel foglio di stile del tema corrente.

Background Position - Modificare questa impostazione per determinare il punto di ancoraggio dell'immagine in relazione alla colonna. Opzioni: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center o Bottom Right

Background Attachment - Modificare questa impostazione per determinare la modalità di spostamento dell'immagine di sfondo in relazione alla pagina di scorrimento:

Opzione	Descrizione
`Scroll`	L'immagine di sfondo viene sincronizzata per spostarsi verso il basso durante lo scorrimento della pagina.
`Fixed`	(Non disponibile per dispositivi mobili) L’immagine di sfondo non si sposta quando il contenitore scorre sopra l’immagine ed è fisso nella posizione di sfondo specificata.

Background Repeat - Se si desidera ripetere l'immagine di sfondo per riempire lo spazio, modificare questa impostazione Yes.

Aggiornare le impostazioni di Advanced in base alle esigenze.

Per controllare il posizionamento orizzontale dei contenitori di contenuto aggiunti alla colonna, scegliere un Alignment:

Opzione	Descrizione
`Default`	Applica l'impostazione predefinita di allineamento specificata nel foglio di stile del tema corrente.
`Left`	Allinea i contenitori di contenuto lungo il bordo sinistro del contenitore di colonne, tenendo conto della spaziatura specificata.
`Center`	Allinea il contenitore di contenuto al centro del contenitore di colonne, tenendo conto di eventuali spaziature specificate.
`Right`	Allinea il contenitore di contenuto al bordo destro del contenitore di colonne, tenendo conto della spaziatura specificata.

Imposta lo stile Border, che viene applicato a tutti e quattro i lati del contenitore colonne:

Opzione	Descrizione
`Default`	Applica lo stile di bordo predefinito specificato dal foglio di stile associato.
`None`	Non fornisce alcuna indicazione visibile dei bordi del contenitore.
`Dotted`	Il bordo del contenitore viene visualizzato come una linea tratteggiata.
`Dashed`	Il bordo del contenitore viene visualizzato come una linea tratteggiata.
`Solid`	Il bordo del contenitore viene visualizzato come linea continua.
`Double`	Il bordo del contenitore viene visualizzato come una doppia riga.
`Groove`	Il bordo del contenitore viene visualizzato come una linea scanalata.
`Ridge`	Il bordo del contenitore viene visualizzato come una linea scanalata.
`Inset`	Il bordo del contenitore viene visualizzato come una linea interna.
`Outset`	Il bordo del contenitore viene visualizzato come una linea di contorno.

Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

Opzione	Descrizione
Border Color	Specificate il colore scegliendo un campione, facendo clic sul selettore del colore oppure immettendo un nome di colore valido o un valore esadecimale equivalente.
Border Width	Immettere il numero di pixel per lo spessore della linea del bordo.
Border Radius	Immettere il numero di pixel per definire la dimensione del raggio utilizzato per arrotondare ogni angolo del bordo.

(Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore colonne.

Separare più nomi di classe con uno spazio.

Immettere i valori in pixel per Margins and Padding per specificare i margini esterni e la spaziatura interna della colonna.

Immetti ogni valore corrispondente nel diagramma contenitore colonne.

Area contenitore	Descrizione
Margins	Quantità di spazio vuoto applicata al bordo esterno di tutti i lati del contenitore. Opzioni: `Top` / `Right` / `Bottom` / `Left`
Padding	Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore. Opzioni: `Top` / `Right` / `Bottom` / `Left`

Al termine, fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

recommendation-more-help