Layout - Colonna

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

{width="600" modal="regular"}

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.

{width="600" modal="regular"}

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.

{width="600" modal="regular"}

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.

{width="600" modal="regular"}

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).

{width="600" modal="regular"}

Passa il puntatore del mouse sulla colonna da rimuovere per visualizzare la casella degli strumenti e scegli l'icona Rimuovi ( {width="20"} ).

{width="600" modal="regular"}

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.

{width="600" modal="regular"}

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 ( {width="20"} ).

• Scorri verso il basso fino alla sezione Advanced ​e imposta tutti e quattro i valori Padding ​su 0.

  {width="600" modal="regular"}

• Nell'angolo superiore destro fare clic su Save per chiudere la pagina Edit Column.

Fai clic sull'icona Chiudi schermo intero ( {width="20"} ) nell'angolo superiore destro dell'area di lavoro, quindi fai clic su Save nell'angolo superiore destro.

Passa il puntatore del mouse sulla colonna per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( {width="20"} ).

{width="600" modal="regular"}

Modificare le impostazioni di Appearance in base alle esigenze.

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

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  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:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  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.
  {width="25"}	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:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  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:

  table 0-row-2 1-row-2 2-row-2 layout-auto
  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:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  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:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  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:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  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.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  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.