Layout - Colonna

Utilizza il Colonna tipo di contenuto per suddividere una pagina in più colonne nel 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 {width="600" modal="regular"}

NOTE
Se stai apportando modifiche significative a Page Builder è consigliabile aumentare il Durata sessione amministratore per evitare il timeout della sessione mentre si lavora.

Aggiornamenti nella versione 2.4.5

Le funzionalità di Page Builder vengono 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 Columns trascinando una colonna sopra o sotto altre colonne del 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 Columns Il contenitore 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
Icona Sposta {width="25"}
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
Icona Impostazioni {width="25"}
Apre la pagina Modifica colonna, in cui è possibile modificare le proprietà del contenitore.
Duplica
Icona Duplica {width="25"}
Crea una copia della colonna corrente.
Rimuovi
Icona Rimuovi {width="25"}
Elimina la colonna corrente e il relativo contenuto.

Griglia colonna

Il griglia garantisce che il contenuto sia allineato in modo coerente in una colonna e aiuta la pagina a eseguire correttamente il rendering sia sui desktop che sui dispositivi mobili. Per ulteriori informazioni, vedere Strumenti di contenuto avanzati sezione del Page Builder configurazione.

Divisioni griglia in una riga con una colonna {width="500" modal="regular"}

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 {width="600" modal="regular"}

Aggiungi una colonna

  1. In Page Builder pannello in Layout, trascina un Column ​sul palco.

    Trascinamento di una colonna 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.

    Due colonne uguali {width="600" modal="regular"}

  2. Nell'angolo superiore sinistro del gruppo di colonne fare clic sul pulsante Griglia strumento ( Controllo griglia ) e regolare 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 Strumenti di contenuto avanzati sezione del Page Builder configurazione.

    Divisioni griglia su due colonne {width="600" modal="regular"}

Ridimensionare una colonna

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

    Bordo evidenziato tra due colonne {width="600" modal="regular"}

  2. 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 ciascuna colonna viene visualizzata dopo l’etichetta, ad esempio 4/12 (quattro su 12) e 8/12 (otto su dodici).

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

Rimuovere una colonna

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

    Casella degli strumenti Colonna {width="600" modal="regular"}

  2. Se la colonna contiene del contenuto, fai clic su OK per confermare.

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

    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.

    Colonna singola con griglia {width="600" modal="regular"}

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

    • Scorri verso il basso fino a Advanced ​e imposta tutti e quattro Padding ​valori per 0.

      Utilizzo della spaziatura nulla {width="600" modal="regular"}

    • Nell’angolo superiore destro, fai clic su Save per chiudere Edit Column ​pagina.

  4. Fai clic su Chiudi schermo intero ( Icona Chiudi schermo intero {width="20"} ) nell'angolo superiore destro dell'area di lavoro e quindi fare clic su Save nell’angolo superiore destro.

Modificare le impostazioni delle colonne

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

    Casella degli strumenti Colonna {width="600" modal="regular"}

  2. Modificare il 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).

  3. Modifica lo sfondo per il contenuto della colonna.

    • Background Color - Specificare il colore scegliendo un campione, facendo clic sul selettore di colori 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, utilizza 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.
      Icona fotocamera {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 su dispositivi mobili.

    • Background Size - Modifica questa impostazione per determinare come viene ridimensionata l’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 : modifica 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 - Modifica questa impostazione per determinare il modo in cui l'immagine di sfondo si sposta 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.

  4. Aggiornare il Advanced ​in base alle esigenze.

    • Per controllare il posizionamento orizzontale dei contenitori di contenuto aggiunti alla colonna, scegli 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 il Border stile, 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) Specifica i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore colonne.

      Separare più nomi di classe con uno spazio.

    • Immetti i valori, in pixel, per il 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
  5. Al termine, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d