DocumentazioneCommercePage Builder

Layout - Riga

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Principiante
  • Intermedio
  • Utente

Utilizza il tipo di contenuto Riga per aggiungere una riga nella Page Builder fase.

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.

Casella degli strumenti Riga

La casella degli strumenti riga viene visualizzata quando si passa il puntatore del mouse sul contenitore riga. La casella degli strumenti include opzioni per spostare, nascondere, duplicare, modificare o rimuovere la riga. La selezione delle impostazioni determina l'aspetto, lo sfondo e il layout della riga. È possibile trascinare altri elementi di contenuto nella riga dal pannello Page Builder a sinistra.

Casella degli strumenti Riga

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta la riga in un'altra posizione rispetto alle altre righe sullo stage.
(etichetta)
Row
Identifica il contenitore di contenuto corrente come riga. Passa il cursore del mouse sul contenitore per visualizzare la casella degli strumenti.
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Modifica riga, in cui è possibile modificare le proprietà del contenitore.
Nascondi
Icona Nascondi {width="25"}
Nasconde la riga corrente.
Spettacolo
Mostra icona {width="25"}
Mostra la riga nascosta.
Duplica
Icona duplicata {width="25"}
Crea una copia della riga.
Rimuovi
Icona Rimuovi {width="25"}
Elimina dall’area di visualizzazione il contenitore righe e il relativo contenuto.
NOTE
Gli elementi nascosti vengono memorizzati nel database e invisibili ai clienti. Tuttavia, questi elementi sono visibili ai motori di ricerca e ad altri bot che eseguono la ricerca per indicizzazione del sito. Vengono inoltre restituiti come parte del contenuto se richiesto tramite una chiamata API con un attributo di invisibilità, a meno che non vengano rimossi dall’area di visualizzazione.

Aggiungi una riga

  1. Nel pannello Page Builder sotto Layout, trascina un nuovo Row ​nell'area di visualizzazione, appena sotto la prima riga.

  2. Per formattare la riga, passa il puntatore del mouse sul contenitore della riga per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

    Utilizzare le sezioni seguenti per informazioni dettagliate sul completamento delle impostazioni disponibili.

    Aggiunta di una riga {width="600" modal="regular"}

Modificare le impostazioni delle righe

  1. Passa il puntatore del mouse sul contenitore righe per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

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

  2. Utilizzare le sezioni seguenti per informazioni dettagliate sull'aggiornamento delle impostazioni disponibili.

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

Aspetto

Utilizza le impostazioni Aspetto per determinare la modalità di visualizzazione del contenuto nella riga.

Impostazioni aspetto

  • Per determinare la modalità di visualizzazione del colore e/o dell'immagine di sfondo in relazione al contenitore e alla larghezza dell'area contenuto, scegliere l'allineamento:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opzione Descrizione
    Contained Il colore o l’immagine di sfondo è limitato alla larghezza massima della pagina definita dal tema.
    Full Width Limita il contenuto alla larghezza massima della pagina definita dal tema. Il colore e/o l’immagine di sfondo non sono limitati e si estende per l’intera larghezza della riga.
    Full Bleed Il contenuto e l’immagine di sfondo e/o il colore non sono limitati ed estendono l’intera larghezza della riga. L'opzione Intero al vivo può essere utilizzata solo con temi che supportano il layout.

  • Immettere Minimum Height per la riga. Questo valore può essere un numero con qualsiasi unità CSS valida (ad esempio 100px, 50%, 50em, 100vh) o un calcolo (ad esempio 100vh - 237px).

    Ad esempio, puoi impostare l’altezza minima di una riga per estendere l’intera altezza della pagina, fornendo opzioni interessanti per immagini e video di sfondo di pagina intera.

  • Scegliere un'impostazione Vertical Alignment per allineare tutti i contenitori di contenuto aggiunti alla riga (superiore, centrale o inferiore).

Informazioni di base

Sono disponibili molte opzioni per definire la visualizzazione di sfondo di una riga. Potete applicare un colore semplice o un'immagine di sfondo e gestire effetti più sofisticati.

Colore di sfondo

Specificate il colore di sfondo 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 riga. Potete anche regolare l'opacità del colore.

Nessun colore (predefinito)

È possibile impostare il valore in uno dei tre modi seguenti:

  • Un nome di colore predefinito, ad esempio White
  • Valore esadecimale del colore, ad esempio #ffffff
  • Il valore rgba del colore, con percentuale di opacità, ad esempio rgba(255, 255, 255, 0.75)

Per scegliere un colore, fare clic sul campione a sinistra della casella Nessun colore.

Scelta di un campione di colore

Se fate clic sulla casella del colore per aprire nuovamente il selettore colore, la casella sotto il cursore mostra i valori correnti di rosso, verde, blu e alfa (rgba). L'ultimo numero indica la percentuale di opacità corrente come valore decimale. È possibile utilizzare il dispositivo di scorrimento per regolare l'opacità o immettere il valore decimale desiderato.

Impostazione dell'opacità

NOTE
Page Builder supporta anche un livello di trasparenza, o canale alfa, nelle immagini di sfondo che possono essere utilizzate per creare sfondi con diversi gradi di opacità.

Background Type

Un tipo di sfondo può essere un'immagine o un video. Page Builder utilizza Image per impostazione predefinita e mostra varie impostazioni immagine. Se si seleziona Video, Page Builder scambia le impostazioni dell'immagine con le impostazioni video. Entrambi i tipi di sfondo sono descritti come segue.

Tipo di sfondo

Impostazioni del tipo di immagine

Se si imposta Background Type ​su Image, utilizzare le impostazioni seguenti per definire la visualizzazione dell'immagine di sfondo.

Immagine di sfondo

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opzione Descrizione
    Upload Carica un file di immagine dal computer locale alla raccolta e quindi lo applica come immagine di sfondo per la riga.
    Select from Gallery Richiede di scegliere un'immagine esistente dalla raccolta come immagine di sfondo per la riga.
    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 sui dispositivi mobili.

  • Background Size - Impostare questa opzione per determinare il ridimensionamento dell'immagine di sfondo in relazione alla larghezza della riga:

    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 riga.
    Contain L'immagine di sfondo è limitata alla larghezza dell'area dei contenuti.
    Auto Applica le dimensioni dal foglio di stile corrente.

    Dimensione sfondo {width="250"}

  • Background Position - Impostare questa opzione per determinare il modo in cui l'immagine di sfondo viene ancorata in relazione alla riga:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Punto di ancoraggio Posizione
    Top Sinistra/Centro/Destra
    Center Sinistra/Centro/Destra
    Bottom Sinistra/Centro/Destra

    Il punto di ancoraggio è simile a una spina che collega l'immagine alla riga nella posizione di sfondo specificata.

  • Background Attachment - Impostare il tipo di allegato 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 collegata viene sincronizzata per spostarsi verso il basso durante lo scorrimento della pagina. Utilizzate Sfondo parallax (Parallax Background) per controllare la velocità di scorrimento.
    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 - Impostare su Yes per ripetere l'immagine di sfondo per riempire lo spazio disponibile nella riga.

Impostazioni del tipo di video

Se si imposta il Tipo di sfondo su Video, utilizzare le impostazioni seguenti per definire la visualizzazione dell'immagine di sfondo.

  • Video URL - Immettere un URL video valido. Gli URL video validi possono essere collegamenti a:

    • Video su YouTube: https://youtu.be/CoDhMRUUjeI
    • Video su Vimeo: https://vimeo.com/190156113
    • File video validi (.mp4 è consigliato): https://myvideos.com/spiral.mp4

    URL video di sfondo {width="300"}

  • Overlay Color - Selezionare un colore per applicare una tinta trasparente al video.

  • Infinite Loop - Imposta su No per riprodurre il video una volta e arrestarlo. Se questa opzione è impostata su Yes (impostazione predefinita), il video viene ripetuto in un ciclo infinito.

  • Lazy Load - Imposta su No per caricare il video con la pagina, anche quando non è visibile. Se questa opzione è impostata su Yes (impostazione predefinita), il video viene caricato dall'origine solo se visibile sullo schermo.

  • Play Only When Visible - Impostare su No per avviare la riproduzione del video subito dopo il caricamento, indipendentemente dal fatto che sia visibile o meno. Se questa opzione è impostata su Yes (impostazione predefinita), la riproduzione del video inizia solo quando è visibile.

  • Fallback Image - Se necessario, specificare un'immagine da visualizzare sullo schermo prima del caricamento del video e se il video non viene caricato per qualche motivo.

Sfondo Parallax

Utilizza queste opzioni per controllare la velocità di scorrimento di un’immagine o di un video di sfondo in relazione allo scorrimento della pagina. Lo sfondo può essere impostato per scorrere più lentamente per creare un senso di immersione.

  • Imposta Abilita sfondo Parallax su Yes.
  • Immettere la Velocità Parallax come valore decimale compreso tra -1.0 e 2.0.

Impostazioni sfondo Parallax

Avanzate

  • Per controllare il posizionamento orizzontale dei contenitori di contenuto aggiunti alla riga, 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 righe, tenendo conto della spaziatura specificata.
    Center Allinea il contenitore di contenuto al centro del contenitore di righe, tenendo conto di eventuali spaziature specificate.
    Right Allinea il contenitore di contenuto al bordo destro del contenitore di righe, tenendo conto della spaziatura specificata.

  • Imposta lo stile Border applicato a tutti e quattro i lati del contenitore righe:

    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:

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

    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.

    La riga nell'esempio seguente ha un raggio di bordo pari a 15.

    Riga con raggio bordo di 15 {width="500"}

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

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

    Immettere ogni valore corrispondente nel diagramma contenitore righe.

    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

    Margini e spaziatura interna {width="600" modal="regular"}

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