DocumentazioneCommercePage Builder

Layout - Schede

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 Schede per aggiungere un set di schede nella Page Builder fase. Quando trascinate il segnaposto Schede dal pannello allo stage, inizialmente viene visualizzata una singola scheda predefinita. Puoi aggiungere altre schede per creare un set completo. La larghezza del set di schede è determinata dalla larghezza delle impostazioni relative al contenitore padre e alla spaziatura interna.

Set di schede {width="500" modal="regular"}

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.

Caselle degli strumenti

Quando si utilizza il tipo di contenuto Schede, è possibile aggiungere e modificare singole schede e il contenitore Schede che contiene una o più schede. Ogni scheda dispone di una propria casella degli strumenti utilizzata per progettare schede nella fase Page Builder.

Casella degli strumenti Scheda singola

Casella degli strumenti Scheda {width="500" modal="regular"}

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Questo controllo accanto all'etichetta della scheda viene utilizzato per spostare la singola scheda in un'altra posizione nel set di schede.
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Modifica schede, in cui è possibile modificare le proprietà della singola scheda.
Duplica
Icona duplicata {width="25"}
Crea una copia della scheda.
Rimuovi
Icona Rimuovi {width="25"}
Elimina la scheda dal set di schede.

Casella degli strumenti contenitore Schede

Casella degli strumenti contenitore schede {width="500" modal="regular"}

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta il set di schede in un'altra posizione sulla griglia nel contenitore padre.
Aggiungi
Icona Aggiungi {width="25"}
Aggiunge una scheda al set di schede.
(etichetta)
Tabs
Identifica il contenitore corrente come set di schede. Passa il puntatore del mouse sul bordo superiore del contenitore per visualizzare la casella degli strumenti.
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Modifica scheda, in cui è possibile modificare le proprietà del contenitore.
Nascondi
Icona Nascondi {width="25"}
Nasconde il contenitore di schede.
Spettacolo
Mostra icona {width="25"}
Mostra il contenitore di schede nascosto.
Duplica
Icona duplicata {width="25"}
Copia la scheda corrente.
Rimuovi
Icona Rimuovi {width="25"}
Elimina dall'area di visualizzazione il set di schede corrente.
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 singola scheda

  1. Nel pannello Page Builder sotto Layout, trascina il segnaposto Tabs ​direttamente nell'area di visualizzazione oppure in una riga o colonna nell'area di visualizzazione.

    Trascinamento delle schede in una riga {width="600" modal="regular"}

  2. Fai clic sull'etichetta Tab 1 per visualizzare la casella degli strumenti delle singole schede e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

  3. Immettere Tab Name che si desidera utilizzare come etichetta.

    Inserimento del nome della scheda {width="600" modal="regular"}

  4. Se necessario, immettere Minimum Height per la scheda.

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

  5. Scegliere un'impostazione Vertical Alignment per allineare tutti i contenitori di contenuto aggiunti alla scheda (Superiore, Centrale o Inferiore).

  6. Se necessario, impostate le altre opzioni utilizzando come guida le sezioni seguenti:

  7. Nell'angolo superiore destro fare clic su Save per applicare le impostazioni e tornare all'area di lavoro Page Builder.

Aggiungere un set di schede

I passaggi seguenti iniziano con una singola scheda e creano un set di tre schede all’interno di un contenitore di schede. Se non si dispone già di una singola scheda, seguire le istruzioni precedenti per aggiungere una singola scheda all'area di visualizzazione.

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

  2. Fare clic sull'etichetta Tab 2 per visualizzare il cursore e immettere la propria etichetta per la scheda.

  3. Fai di nuovo clic sulla seconda scheda nell'area di visualizzazione e scegli l'icona Duplica ( Icona Duplica {width="20"} ).

  4. Fare clic sull'etichetta YourName Copy per visualizzare il cursore e immettere un'etichetta propria per la terza scheda.

Corrispondenza tra set di schede e casella degli strumenti {width="600" modal="regular"}

Spostare una tabulazione all'interno del set

  1. Fare clic sulla scheda da spostare.

  2. Seleziona e trascina l'icona Sposta ( Icona Sposta {width="20"} ), visualizzata immediatamente prima del testo dell'etichetta della scheda, in una nuova posizione all'interno del set di schede.

Aggiungere contenuto a una scheda

Puoi inserire qualsiasi tipo di contenuto in una scheda, esattamente come si fa per una riga. Per aggiungere un tipo di contenuto di testo come esempio, attenersi alla procedura descritta di seguito.

  1. Fai clic sulla scheda in cui desideri aggiungere il contenuto.

  2. Nel pannello Page Builder, espandi Elements e trascina un segnaposto Testo nella scheda.

  3. Inserisci o incolla del testo nell’editor e utilizza la barra degli strumenti dell’editor per formattarlo come necessario.

    Per ulteriori informazioni sull'utilizzo del tipo di contenuto testo, vedere Elementi - Testo.

    Modifica del contenuto di testo aggiunto nella scheda {width="500" modal="regular"}

  4. Nell'angolo superiore destro fare clic su Save.

Modificare le singole impostazioni delle schede

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

  2. Se necessario, modifica una delle impostazioni di base per la scheda:

    • Tab Name - Immettere il testo revisionato per l'etichetta della scheda. Potete anche modificare l'etichetta direttamente sullo stage.

    • Minimum Height - Immettere come pixel se si desidera ignorare l'altezza automatica. Ad esempio, potete impostare l'altezza minima in modo che corrisponda all'altezza di un'immagine di sfondo per garantire che sia visibile l'intera immagine.

    • Vertical Alignment - Scegliere la posizione verticale dei contenitori di contenuto aggiunti alla scheda.

  3. Modificare le altre impostazioni in base alle esigenze utilizzando le sezioni seguenti per i dettagli.

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

Informazioni di base

  • Background Color - Specificare 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) {width="200"}

    È possibile immettere un valore in tre modi:

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

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

    note note
    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 Image - Se necessario, utilizzare gli strumenti forniti per scegliere un'immagine di sfondo da applicare alla scheda:

    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 scheda.
    Select from Gallery Richiede di scegliere un'immagine esistente dalla raccolta come immagine di sfondo per la scheda.
    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 - Scegliere come ridimensionare l'immagine di sfondo in relazione alla larghezza della scheda:

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

  • Background Position - Scegliere come ancorare l'immagine di sfondo in relazione alla scheda: Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right

  • Background Attachment - Scegliere 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.
    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 in modo da riempire lo spazio disponibile nella scheda.

Avanzate

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

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

    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 15 {width="500"}

  • (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 del contenitore di schede.

    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

Modifica impostazioni set di schede

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

  2. Se necessario, modificare Default Active Tab.

    Scegliere la scheda del set che si desidera rendere attivo al caricamento della pagina.

  3. Immettere Minimum Height, in pixel, se si desidera ignorare l'altezza automatica per il set di schede.

  4. Per posizionare le schede di navigazione nella parte superiore del set di schede, scegliere Tab Navigation Alignment (Left, Center o Right).

    Schede di navigazione allineate a destra {width="500" modal="regular"}

  5. Impostare le opzioni avanzate per il set di schede:

    • Per controllare il posizionamento del set di schede all'interno del contenitore principale, 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 il set di schede lungo il bordo sinistro del contenitore principale, tenendo conto di tutte le spaziature specificate.
      Center Allinea il set di schede al centro del contenitore principale, tenendo conto di tutte le spaziature specificate.
      Right Allinea il set di schede lungo il bordo destro del contenitore principale, tenendo conto della spaziatura specificata.

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

      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 di schede.

      Separare più nomi di classe con uno spazio.

    • Immettere i valori, in pixel, per Margins and Padding per determinare i margini esterni e la spaziatura interna del contenitore di schede.

      Immetti i valori corrispondenti nel diagramma del contenitore schede.

      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

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

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