Media - Banner

Utilizza il Banner tipo di contenuto per aggiungere un componente illustrato e interattivo che coinvolge gli utenti con un invito all’azione e un pulsante nel Page Builder fase.

NOTE
Precedentemente il Banner nel menu Contenuto, è ora Blocco dinamico.
w-700 modal-image
Banner sulla home page di una vetrina
NOTE
Se stai apportando modifiche significative a Page Builder è consigliabile aumentare il Durata sessione amministratore per evitare il timeout della sessione mentre si lavora.

Casella degli strumenti banner

La casella degli strumenti del banner viene visualizzata quando si passa il puntatore sul contenitore del banner.

w-600 modal-image
Casella degli strumenti banner
Strumento
Icona
Descrizione
Sposta
img-md
w-25
Icona Sposta
Sposta il banner in un'altra posizione sullo stage.
(etichetta)
Banner
Identifica il contenitore di contenuto corrente come banner. Passa il cursore del mouse sul contenitore per visualizzare la casella degli strumenti.
Impostazioni
img-md
w-25
Icona Impostazioni
Apre la pagina Modifica banner, in cui è possibile modificare le proprietà del banner e del contenitore.
Nascondi
img-md
w-25
Nascondi icona
Nasconde il banner corrente.
Spettacolo
img-md
w-25
Mostra icona
Mostra il banner nascosto.
Duplica
img-md
w-25
Icona Duplica
Crea una copia del banner.
Rimuovi
img-md
w-25
Icona Rimuovi
Elimina il banner dalla fase.
Upload New Image
Carica un'immagine dal file system locale nella raccolta per lo sfondo del banner.
Select from Gallery
Utilizza un'immagine esistente della raccolta per lo sfondo del banner.
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 un banner

  1. In Page Builder pannello, espandere Media e trascina un Banner segnaposto nell'area di visualizzazione.

    img-md
    w-600 modal-image
    Trascinamento di un tipo di contenuto banner nell'area di visualizzazione

    Il Upload Image ​e_Select from Gallery_ sono inclusi pulsanti che consentono di apportare modifiche rapide al contenuto del banner direttamente dall'area di visualizzazione. Puoi anche modificare il contenuto di Edit Banner ​pagina.

  2. Fai clic nel segnaposto del banner per visualizzare editor di testo e immettere il contenuto del banner.

    È inoltre possibile includere contenuto banner più complesso utilizzando Contenuto impostazioni.

Modificare le impostazioni del banner

  1. Passa il puntatore del mouse sul contenitore del banner per visualizzare la casella degli strumenti e scegli Impostazioni ( Icona Impostazioni ).

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

  3. Al termine, fai clic su Save nell'angolo superiore destro per chiudere Edit Banner ​pagina.

  4. Nell’angolo superiore destro, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

Appearance

I banner sono facili da configurare e mantenere, poiché si basano su uno dei quattro modelli predefiniti.

  • Scegliete uno dei seguenti tipi di posizionamento del banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Posizionamento Descrizione
    Poster Centra contenuto e pulsante sul banner. Se utilizzata, la sovrapposizione estende l'intera larghezza del banner.
    Collage Left Inserisce il contenuto e il pulsante in un'area definita sul lato sinistro del banner. La sovrapposizione, se utilizzata, copre solo l'area definita.
    Collage Center Posiziona il contenuto e il pulsante in un'area definita centrata sul banner. La sovrapposizione, se utilizzata, copre solo l'area definita.
    Collage Right Inserisce il contenuto e il pulsante in un'area definita sul lato destro del banner. La sovrapposizione, se utilizzata, copre solo l'area definita.
    img-md
    w-600 modal-image
    Aspetto - destra collage
  • (Facoltativo) Inserisci il Minimum Height per la riga.

    L’altezza minima 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 un banner in modo da estendere l’intera altezza della pagina, fornendo opzioni interessanti per immagini e video di sfondo a pagina intera.

Background

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

Background Color

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.

w-200
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)

Se desiderate scegliere un colore, fate clic sul campione a sinistra della Nessun colore casella.

w-600 modal-image
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.

w-600 modal-image
Impostazione dell'opacità
NOTE
Page Builder supporta anche un livello di trasparenza, oppure canale alfa, nelle immagini di sfondo che possono essere utilizzate per creare sfondi con vari gradi di opacità.

Background Type

Un tipo di sfondo può essere un'immagine o un video. Page Builder impostazione predefinita Image e mostra varie impostazioni di immagine. Se si seleziona Video, Page Builder sostituisce le impostazioni immagine con le impostazioni video. Entrambe le impostazioni del tipo di sfondo sono descritte nelle sezioni seguenti.

w-200
Tipo di sfondo

Impostazioni del tipo di immagine

Se si imposta Tipo di sfondo a Image, utilizza le seguenti impostazioni per definire la visualizzazione dell'immagine di sfondo.

w-600 modal-image
Banner con immagine di sfondo
  • Background Image - Se necessario, usate gli strumenti forniti per scegliere un'immagine di sfondo da applicare al banner:

    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 lo applica come immagine di sfondo del banner.
    Select from Gallery Richiede di scegliere un'immagine esistente dalla raccolta come immagine di sfondo per il banner.
    img-md
    w-25
    Icona fotocamera
    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 : imposta questa opzione per determinare come viene ridimensionata l’immagine di sfondo in relazione alla larghezza del banner:

    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 del banner.
    Contain L'immagine di sfondo è limitata alla larghezza dell'area dei contenuti.
    Auto Applica le dimensioni dal foglio di stile corrente.
    img-md
    w-200
    Dimensione sfondo
  • Background Position : imposta questa opzione per determinare il modo in cui l'immagine di sfondo viene ancorata in relazione al banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Ancoraggio Posizioni
    Top Sinistra/Centro/Destra
    Center Sinistra/Centro/Destra
    Bottom Sinistra/Centro/Destra

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

  • Background Attachment : imposta il tipo di allegato 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 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 - Se si desidera ripetere l'immagine di sfondo per riempire lo spazio, modificare questa impostazione Yes.

Impostazioni del tipo di video

Se si imposta Background Type ​a Video, utilizza le seguenti impostazioni per definire la visualizzazione dell'immagine di sfondo.

  • Video URL - Inserisci 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
    img-md
    w-200
    URL video di sfondo
  • Overlay Color - Selezionate un colore per applicare una tinta trasparente al video.

  • Infinite Loop - Imposta su No per fare in modo che il video venga riprodotto una volta e interrotto. Quando è impostato 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. Quando è impostato su Yes (impostazione predefinita), il video viene caricato dall’origine solo se visibile sullo schermo.

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

  • Fallback Image : se necessario, specifica un’immagine da visualizzare sullo schermo prima che il video venga caricato e se per qualche motivo non viene caricato.

Content

È possibile modificare il contenuto del banner direttamente sullo stage o quando si modificano le impostazioni. Le impostazioni offrono funzioni di contenuto più complesse, ad esempio collegamenti e pulsanti dei banner e sovrapposizioni. La posizione del contenuto riflette Aspetto posizionamento.

Contenuto semplice sull’area di visualizzazione

  1. Fare clic sul testo segnaposto e immettere il testo che si desidera visualizzare sul banner.

    La barra degli strumenti dell'editor viene visualizzata sopra la casella di testo.

    img-md
    w-600 modal-image
    Modifica contenuto sullo stage
  2. Utilizza la barra degli strumenti dell’editor per immettere e formattare il testo, nonché per inserire elementi quali collegamenti, immagini e widget.

    img-md
    w-600 modal-image
    Posiziona nell'area intermedia con testo formattato

Contenuto complesso nelle impostazioni

  1. Passa il puntatore del mouse sul contenitore del banner per visualizzare la casella degli strumenti e scegli Impostazioni (+-------------------------------+ | img-md | +===============================+ | w-25 | +-------------------------------+ | Icona Impostazioni | +-------------------------------+).

  2. Scorri verso il basso fino a Content ​e utilizza la sezione Message Text ​per immettere e formattare il testo del banner.

    È inoltre possibile inserire elementi quali collegamenti di testo, immagini e widget.

    img-md
    w-600 modal-image
    Editor di testo per messaggi
  3. Se necessario, specifica un Link per il banner.

    Il collegamento è la pagina di destinazione visualizzata quando il cliente fa clic sul pulsante o sull'area del banner. Puoi utilizzare uno dei tre tipi di collegamento seguenti:

    • URL : collegamenti a un URL relativo o completo.
    • Product : identifica la pagina di destinazione in base al nome del prodotto o allo SKU. Cerca il prodotto per nome in base a un nome parziale o completo. Scegli il prodotto dall’elenco dei risultati della ricerca.
    • Category - Identifica la pagina di destinazione come una categoria o sottocategoria specifica nella struttura delle categorie. Cerca la categoria in base a un nome parziale o completo. Scegliete la categoria dalla sezione espansa della struttura visualizzata.
    • Page : identifica la pagina di destinazione come pagina di contenuto specifica. Cerca la pagina in base a un nome parziale o completo. Scegliere la pagina dall'elenco dei risultati di ricerca.
    note note
    NOTE
    A partire dalla versione 2.4.1 di, Page Builder non supporta più il collegamento del banner e dei collegamenti all’interno del testo nidificato a causa di problemi di visualizzazione nella vetrina. Se utilizzi un collegamento in Message Text, non è possibile configurare​_Link_ opzione. Se si preferisce utilizzare un solo collegamento per l'intero banner, è possibile rimuovere tutti i collegamenti dal testo.
    img-md
    w-200
    Configurazione del collegamento bloccata
  4. Se necessario, aggiungi un pulsante per richiedere ai clienti di seguire il collegamento.

    L'impostazione Aspetto banner posiziona un singolo collegamento o pulsante sotto il testo. Completa le proprietà del collegamento o del pulsante che desideri aggiungere.

    img-md
    w-600 modal-image
    Aspetto con testo e pulsante (o collegamento)
    note note
    NOTE
    È inoltre possibile utilizzare più pulsanti o collegamenti aggiungendo un blocco al banner. Per evitare conflitti, mantenere tutti i collegamenti o i pulsanti nel blocco separato e non aggiungere un collegamento o un pulsante direttamente al banner.
    • Imposta Show Button a uno dei seguenti elementi:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opzione Descrizione
      Always Sul banner viene sempre visualizzato un pulsante.
      On Hover Sul banner compare un pulsante solo al passaggio del mouse.
      Never Show Sul banner non viene mai visualizzato un pulsante.
    • Inserisci il Button Text sul pulsante.

    • Imposta Button Type a uno dei seguenti elementi:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opzione Descrizione
      Primary Applica lo stile del pulsante principale dal foglio di stile corrente.
      Secondary Applica lo stile del pulsante secondario dal foglio di stile corrente, se applicabile.
      Link Crea un collegamento ipertestuale anziché un pulsante.

      Lo stile del pulsante del tema corrente determina il formato del pulsante. In genere, un pulsante principale ha un colore di sfondo più prominente rispetto a un pulsante secondario.

  5. Imposta Show Overlay a uno dei seguenti elementi:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opzione Descrizione
    Always La sovrapposizione è sempre visibile.
    On Hover La sovrapposizione viene visualizzata solo al passaggio del mouse.
    Never Show La sovrapposizione non è visibile.

    È possibile utilizzare una sovrapposizione per applicare un colore di sfondo all'area di contenuto attiva definita da Appearance impostazione. L'immagine di sfondo del banner rimane visibile per l'intera larghezza del banner.

    Se scegli di mostrare una sovrapposizione, imposta Overlay Color:

    • Fai clic su Nessun colore e scegliete un campione.
    • In Nessun colore immettere un nome di colore valido o un valore esadecimale.
    img-md
    w-600 modal-image
    Colore sovrapposizione
  6. Nell’angolo superiore destro, fai clic su Save per applicare le impostazioni e tornare al Page Builder Workspace.

    img-md
    w-600 modal-image
    Banner con messaggio di testo e pulsante

Search Engine Optimization seo

Il testo di queste impostazioni è visibile ai motori di ricerca e migliora l’indicizzazione della pagina.

  • Per Alternative Text, immetti un Alt descrizione testuale degli strumenti di accesso facilitato digitale da visualizzare.

    L’utilizzo di testo alternativo è una best practice in materia di accessibilità ed è richiesto per legge in alcune lingue. In HTML, il alt è un sottoinsieme del image tag: <image title="tooltip" alt="description" src="image.jpg">.

  • Per Title Attribute, immetti il testo da visualizzare come descrizione comando al passaggio del mouse.

    Come best practice, scegli un titolo descrittivo ricco di parole chiave per migliorare il modo in cui l’immagine viene indicizzata dai motori di ricerca. In HTML, il title è un sottoinsieme del image tag: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  1. Per controllare il posizionamento orizzontale dei contenitori di contenuto aggiunti al banner, 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 del banner, tenendo conto della spaziatura specificata.
    Center Allinea il contenitore di contenuto al centro del contenitore del banner, tenendo conto di eventuali spaziature specificate.
    Right Allinea il contenitore di contenuto al bordo destro del contenitore del banner, tenendo conto di eventuali spaziature specificate.
  2. Imposta il Border stile applicato a tutti e quattro i lati del contenitore banner:

    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.
  3. Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

    • Border 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.

      img-md
      w-600 modal-image
      Colore bordo
    • 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.

  4. (Facoltativo) Specifica i nomi di CSS classes dal foglio di stile corrente per applicarlo al contenitore del banner.

    Separare più nomi di classe con uno spazio.

  5. Immetti i valori, in pixel, per il Margins and Padding per specificare i margini esterni e la spaziatura interna del banner.

    Immettere ogni valore corrispondente nel diagramma contenitore banner.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Opzione Descrizione
    Margins Quantità di spazio vuoto applicata al bordo esterno di tutti i lati del contenitore.
    Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d