Media - Cursore

Utilizza il tipo di contenuto Slider per aggiungere una presentazione di immagini allo Page Builder stage. Puoi caricare nuove immagini o scegliere quelle esistenti dalla galleria o dal catalogo dei prodotti. Un dispositivo di scorrimento può essere impostato per la riproduzione automatica o controllato manualmente con i pulsanti di navigazione. Per associare il cursore a una promozione specifica, vedere Blocco dinamico.

Dispositivo di scorrimento multimediale nella vetrina

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 Dispositivo di scorrimento, è possibile aggiungere e modificare singole diapositive e il relativo contenitore che contiene una o più diapositive. Ogni diapositiva dispone della propria casella degli strumenti che consente di progettare diapositive sullo stage Page Builder.

Casella degli strumenti di una singola diapositiva

Casella degli strumenti diapositiva singola

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta la diapositiva in un'altra posizione sul dispositivo di scorrimento.
(etichetta)
N. diapositiva
Identifica il numero della diapositiva corrente.
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Edit Slide, in cui è possibile modificare le proprietà della diapositiva corrente.
Duplica
Icona duplicata {width="25"}
Crea una copia della diapositiva corrente.
Rimuovi
Icona Rimuovi {width="25"}
Elimina la diapositiva corrente dal cursore.

Casella degli strumenti cursore

Strumento
Icona
Descrizione
Sposta
Icona Sposta {width="25"}
Sposta il dispositivo di scorrimento in un'altra posizione sullo stage.
(etichetta)
Slider
Identifica il contenitore cursore.
Impostazioni
Icona Impostazioni {width="25"}
Apre la pagina Edit Slider, in cui è possibile modificare le proprietà del video e del contenitore.
Nascondi
Icona Nascondi {width="25"}
Nasconde il cursore corrente.
Spettacolo
Mostra icona {width="25"}
Mostra il cursore nascosto.
Duplica
Icona duplicata {width="25"}
Crea una copia del cursore.
Rimuovi
Icona Rimuovi {width="25"}
Elimina il cursore dall'area di visualizzazione.
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.

Aggiungere una singola diapositiva

  1. Aprire la pagina, il blocco o il blocco dinamico in cui si desidera posizionare il dispositivo di scorrimento ed espandere la sezione Content.

  2. Nel pannello Page Builder, espandi Media e trascina un segnaposto Slider in una riga, colonna o scheda sull'area di visualizzazione.

    Nell'esempio seguente il colore di sfondo della riga è giallo (#fffd16).

    Trascinamento del cursore sull'area di visualizzazione {width="600" modal="regular"}

    Il contenitore del dispositivo di scorrimento viene visualizzato sullo stage con una singola diapositiva vuota.

  3. Fare clic nel contenitore del dispositivo di scorrimento per visualizzare l'editor di testo e immettere il contenuto per la prima diapositiva.

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

  4. Fai clic sul punto di navigazione nella parte inferiore del cursore per visualizzare la casella degli strumenti per la singola diapositiva e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

    I cursori dispongono di due caselle degli strumenti. Assicurarsi di utilizzare la casella degli strumenti della diapositiva nella parte inferiore.

  5. Completare le impostazioni, se necessario, in base alle sezioni seguenti:

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

Aggiungi altre diapositive

Nelle sezioni seguenti viene descritta una serie di passaggi per iniziare con una singola diapositiva e creare un cursore reattivo che presenta funzioni e collegamenti a prodotti specifici. Se non si dispone già di una singola diapositiva, seguire le istruzioni precedenti per aggiungere una singola diapositiva all'area di visualizzazione.

Per aggiungere diapositive, utilizzare uno dei metodi seguenti o una loro combinazione:

Metodo 1: duplicare una diapositiva esistente

È possibile risparmiare tempo duplicando una diapositiva già configurata con le impostazioni necessarie.

  1. Fai clic sul punto di navigazione sotto la diapositiva per visualizzare la casella degli strumenti e scegli l'icona Duplica ( Icona Duplica {width="20"} ).

    Duplicazione di una diapositiva {width="500" modal="regular"}

  2. Fai clic sul punto di navigazione per la nuova diapositiva e per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

  3. Modificare le impostazioni in base alle esigenze, secondo le sezioni riportate di seguito.

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

Metodo 2: aggiungere una nuova diapositiva vuota

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

    Aggiunta di una diapositiva vuota {width="500" modal="regular"}

    Una nuova diapositiva vuota con un punto di navigazione e una casella degli strumenti specifici viene aggiunta al dispositivo di scorrimento e visualizzata sullo stage.

    Nuova diapositiva con casella degli strumenti {width="500" modal="regular"}

  2. Fai clic sul punto di navigazione per la nuova diapositiva e per visualizzare la casella degli strumenti e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

  3. Modificare le impostazioni in base alle esigenze, secondo le sezioni riportate di seguito.

  4. Al termine, fare clic su Save nell'angolo superiore destro per chiudere la pagina Edit Slide.

Aggiungere un widget a una diapositiva

È possibile aggiungere qualsiasi tipo di widget alla diapositiva in una fase di Page Builder seguendo la procedura seguente:

  1. Creare il widget che si desidera visualizzare in una diapositiva.

  2. Aprire la pagina, il blocco o il blocco dinamico in cui si desidera posizionare il dispositivo di scorrimento ed espandere la sezione Content.

  3. Nel pannello Page Builder, espandi Media e trascina un segnaposto Slider in una riga, colonna o scheda sull'area di visualizzazione.

  4. Fare clic nel contenitore del dispositivo di scorrimento per visualizzare la barra degli strumenti editor di testo e fare clic sull'icona Inserisci widget ( Inserisci icona widget {width="20"} ).

  5. Seleziona Widget Type necessari.

  6. Specifica le impostazioni, che sono diverse a seconda del tipo di widget

    Esempio di inserimento di un widget nella diapositiva {width="600" modal="regular"}

  7. Al termine, fare clic su Insert Widget nell'angolo superiore destro.

  8. Modificare le altre impostazioni in base alle esigenze.

  9. Al termine, fare clic su Save nell'angolo superiore destro.

    Esempio di widget inserito nella diapositiva {width="600" modal="regular"}

Visualizza ogni diapositiva

Per visualizzare tutte le diapositive sullo stage, fare clic sul punto successivo sotto la diapositiva visualizzata.

Cursore completato

La diapositiva nell’esempio precedente presenta un’immagine di sfondo, un’immagine mobile trasparente e un’immagine in linea aggiunta dall’editor di testo. Questa tecnica funziona bene sui dispositivi mobili disattivando l’immagine di sfondo e visualizzando solo l’immagine in linea più piccola. La diapositiva prodotto in questo esempio presenta le seguenti impostazioni aggiuntive:

Opzione
Impostazione di esempio
Appearance
Collage Right
Background Color
#ffffff (bianco)
Background Image
L'immagine in questa diapositiva è stata salvata dalla pagina del prodotto e caricata nella raccolta.
Mobile Background Image
L’immagine di sfondo mobile è un’immagine trasparente quadrata di 10 pixel. L’utilizzo di un’immagine vuota per dispositivi mobili sostituisce efficacemente l’immagine di sfondo standard con un’immagine invisibile.
Background Size
Auto
Message Text
Minerva LumaTech™ V-Tee (Allinea al centro) con l'immagine inserita ridimensionata al 40% (Allinea al centro)
Link
Product
Show Button
Always
Button Text
Buy Now
Show Overlay
Never Show
Alignment
Center (per allineare il pulsante)
Border
Solid
Border Color
#000000 (nero)
Border Width
1 px

Modificare le impostazioni delle singole diapositive

  1. Modificare la visualizzazione del dispositivo di scorrimento sullo stage e visualizzare la diapositiva che si desidera modificare.

  2. Nella casella degli strumenti delle singole diapositive, scegliere l'icona Impostazioni ( Icona Impostazioni {width="20"} ) e completare le impostazioni, in base alle esigenze, in base alle sezioni seguenti.

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

Appearance

  1. Scegliete uno dei seguenti tipi di posizionamento delle diapositive:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Tipo Descrizione
    Poster Centra il contenuto della diapositiva nel contenitore cursore. La sovrapposizione, se utilizzata, estende l'intera larghezza del dispositivo di scorrimento.
    Collage Left Inserisce il contenuto della diapositiva in un'area definita sul lato sinistro del contenitore del dispositivo di scorrimento. La sovrapposizione, se utilizzata, copre solo l'area definita.
    Collage Center Posiziona il contenuto della diapositiva in un'area definita centrata sul contenitore del dispositivo di scorrimento. La sovrapposizione, se utilizzata, copre solo l'area definita.
    Collage Right Inserisce il contenuto della diapositiva in un'area definita sul lato destro del contenitore del dispositivo di scorrimento. La sovrapposizione, se utilizzata, copre solo l'area definita.

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

  2. Immettere Slide Name.

    Quando si utilizza la modalità di modifica, il nome della diapositiva viene visualizzato come descrizione comando sopra il punto di navigazione. Il nome della diapositiva non è visibile dalla vetrina.

    Nome diapositiva nella navigazione {width="500" modal="regular"}

  3. Immettere Minimum Height per la diapositiva.

    L'altezza minima può essere un numero con qualsiasi unità CSS valida (come 100px, 50%, 50em, 100vh) o un calcolo (come 100vh - 237px).

    Ad esempio, puoi impostare l’altezza minima della diapositiva in modo da coprire l’intera altezza della pagina, quindi utilizzare immagini e video di sfondo per opzioni di progettazione interessanti.

    note note
    NOTE
    Quando la diapositiva è impostata sull'altezza completa della pagina (100 vh), il dispositivo di scorrimento che contiene la diapositiva estende anche l'altezza completa della pagina per adattarla all'altezza della diapositiva.

Background

Sono disponibili molte opzioni per definire la visualizzazione di sfondo di una diapositiva. 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.

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 opacità colore di sfondo

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. Entrambe le impostazioni del tipo di sfondo sono descritte nelle sezioni seguenti.

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.

Banner con immagine di sfondo

  • Background Image - Se necessario, utilizzare 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.
    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 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.

    Dimensione sfondo {width="400"}

  • Background Position - Scegli come 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
    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 al banner 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 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="500"}

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

Content

È possibile modificare il contenuto della diapositiva direttamente sullo stage o quando si modificano le impostazioni. Le impostazioni forniscono funzioni di contenuto più complesse, ad esempio collegamenti e pulsanti delle diapositive, e sovrapposizioni. La posizione del contenuto riflette l'impostazione di posizionamento Aspetto.

Contenuto semplice sull’area di visualizzazione

  1. Fare clic sul segnaposto o sul testo esistente e immettere il nuovo testo che si desidera visualizzare nella diapositiva.

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

  2. Utilizza la barra degli strumenti dell’editor per immettere e formattare il testo, nonché per inserire elementi quali collegamenti, immagini e widget.

    Fase con testo formattato {width="500" modal="regular"}

Contenuto complesso nelle impostazioni

  1. Fai clic sul punto di navigazione nella parte inferiore del cursore per visualizzare la casella degli strumenti per la singola diapositiva e scegli l'icona Impostazioni ( Icona Impostazioni {width="20"} ).

  2. Nella sezione Content, immettere Message Text ​che si desidera visualizzare con la diapositiva.

  3. Scorri verso il basso fino alla sezione Content ​e utilizza l'editor Message Text ​per immettere e formattare il testo del banner.

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

  4. Formatta il testo come necessario utilizzando la barra degli strumenti dell’editor.

    La prima diapositiva di questo esempio ha un'immagine di sfondo, ma non un testo del messaggio. Il testo Buy 3 Get 1 Free sopra il dispositivo di scorrimento si trova in un contenitore di testo (aggiunto in seguito).

  5. Se necessario, specificare Link per la diapositiva.

    Il collegamento è la pagina di destinazione visualizzata quando il cliente fa clic sull'area della diapositiva. 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.

      Scelta di un prodotto da collegare {width="600" modal="regular"}

    • Category - Identifica la pagina di destinazione come 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.

      Scelta di una categoria da collegare {width="600" modal="regular"}

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

      Scelta di una pagina da collegare {width="600" modal="regular"}

    A partire dalla versione 2.4.1, Page Builder non supporta più il collegamento della diapositiva e dei collegamenti all'interno del testo nidificato a causa di problemi di visualizzazione nella vetrina. Se si utilizza un collegamento in _Message Text_, non è possibile configurare l'opzione _Link_. Se si preferisce utilizzare un solo collegamento per l'intera diapositiva, è possibile rimuovere tutti i collegamenti dal testo. La configurazione del collegamento è bloccata {width="300"}

    Per impedire al visitatore di uscire dal tuo archivio, seleziona la casella di controllo Open in new tab. Quando la casella di controllo è deselezionata, la destinazione collegata si apre nella stessa scheda del browser, in modo da allontanare il visitatore dal tuo archivio.

  6. Se necessario, aggiungi un pulsante per richiedere ai clienti di seguire il collegamento.

    La posizione della diapositiva Aspetto posiziona un singolo collegamento o pulsante sotto il testo. Completa le proprietà del collegamento o del pulsante che desideri aggiungere.

    Aspetto diapositiva - destra collage {width="600" modal="regular"}

    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 su uno dei seguenti:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opzione Descrizione
      Always Sulla diapositiva viene sempre visualizzato un pulsante.
      On Hover Un pulsante appare sulla diapositiva solo al passaggio del mouse.
      Never Show Sulla diapositiva non viene mai visualizzato un pulsante.
    • Immettere Button Text da visualizzare sul pulsante.

    • Imposta Button Type su uno dei seguenti:

      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.

  7. Imposta Show Overlay su uno dei seguenti:

    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 dall'impostazione Aspetto. L'immagine di sfondo della diapositiva rimane visibile per l'intera larghezza della diapositiva.

    Impostazioni sovrapposizione diapositiva {width="600" modal="regular"}

    Se scegli di mostrare una sovrapposizione, imposta Overlay Color:

    • Fare clic sul campione Nessun colore e scegliere un campione.
    • Nel campo Color immettere un nome di colore valido o un valore esadecimale.

    Colore sovrapposizione diapositiva {width="600" modal="regular"}

Search Engine Optimization seo

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

  • Per Alternative Text, immettere una descrizione di testo alt per gli 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, l'attributo alt è un sottoinsieme del tag image: <image title="tooltip" alt="description" src="image.jpg">.

  • Per Title Attribute, immettere il testo da visualizzare come descrizione 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, l'attributo title è un sottoinsieme del tag image: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  1. Per controllare il posizionamento orizzontale del contenuto aggiunto alla diapositiva, scegliere 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 contenuto lungo il bordo sinistro della diapositiva, tenendo conto della spaziatura specificata.
    Center Allinea il contenuto al centro della diapositiva, tenendo conto della spaziatura specificata.
    Right Allinea il contenuto lungo il bordo destro della diapositiva, tenendo conto della spaziatura specificata.
  2. Impostare lo stile Border applicato a tutti e quattro i lati della diapositiva:

    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 delle diapositive.
    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:

    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.
  4. (Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare alla diapositiva.

    Separare più nomi di classe con uno spazio.

  5. Immettere i valori in pixel per Margins and Padding per specificare i margini esterni e la spaziatura interna della diapositiva.

    Immettete ogni valore corrispondente nel diagramma diapositiva.

    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 della diapositiva.
    Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati della diapositiva.

Aggiungi un titolo cursore

Se desideri un titolo sopra il cursore, aggiungi semplicemente un [tipo di contenuto testo] sopra il cursore. Quindi, formattate il testo in base alle esigenze.

  1. Nel pannello Page Builder, espandi Elements e trascina un segnaposto Testo in una riga, colonna o scheda impostata sull'area di visualizzazione.

    Durante il trascinamento, il punto di inserimento sopra il dispositivo di scorrimento viene contrassegnato da una linea guida rossa.

    Trascinamento di un segnaposto di testo sopra un dispositivo di scorrimento {width="600" modal="regular"}

  2. Utilizza l’editor per formattare il testo in base alle esigenze.

    Modifica del testo del titolo del dispositivo di scorrimento {width="500" modal="regular"}

Modificare le impostazioni del cursore

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

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

  2. Immettere Minimum Height per la diapositiva.

    L'altezza minima può essere un numero con qualsiasi unità CSS valida (come 100px, 50%, 50em, 100vh) o un calcolo (come 100vh - 237px).

    Ad esempio, puoi impostare l’altezza minima di un cursore per allungare l’intera altezza della pagina, fornendo opzioni interessanti per immagini e video di sfondo a pagina intera.

    Altezza minima cursore {width="400"}

  3. Se si desidera che il cursore inizi al caricamento della pagina, impostare Autoplay su Yes e Autoplay Speed sul numero di millisecondi di ritardo tra le diapositive.

    Per impostazione predefinita, la velocità è impostata su 4000 ms, ovvero quattro secondi. Se si imposta la riproduzione automatica su No, la prima diapositiva viene visualizzata per impostazione predefinita e il cliente deve fare clic sulla navigazione della diapositiva (punti o frecce) per visualizzare la diapositiva successiva in sequenza.

    Impostazioni riproduzione automatica cursore {width="600" modal="regular"}

  4. Per smussare la transizione da una diapositiva all'altra, impostare Fade su Yes.

    Con la dissolvenza, le diapositive sembrano rimanere al loro posto, ma il contenuto cambia uniformemente da una diapositiva all’altra. Senza dissolvenza, viene visualizzato il movimento orizzontale da una diapositiva all'altra.

    Impostazioni dissolvenza cursore e ciclo infinito {width="600" modal="regular"}

  5. Per fare in modo che la presentazione venga ripetuta indefinitamente mentre la pagina è aperta, impostare Infinite Loop su Yes.

  6. Per scegliere il tipo di controlli di navigazione per il dispositivo di scorrimento, effettuare le seguenti operazioni:

    • Per includere le frecce Successivo e Precedente sul lato sinistro e destro di ciascuna diapositiva, impostare Show Arrows su Yes.

    • Per includere un set di punti di navigazione sotto il cursore, impostare Show Dots su Yes.

    Frecce e punti della presentazione del cursore {width="600" modal="regular"}

  7. Completa le impostazioni del cursore Avanzate in base alle esigenze.

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

Avanzato - cursore slider-advanced

  1. Per controllare il posizionamento delle diapositive all'interno del contenitore cursore padre, scegliere 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 le diapositive lungo il bordo sinistro del contenitore del dispositivo di scorrimento, tenendo conto della spaziatura specificata.
    Center Allinea le diapositive al centro del contenitore del dispositivo di scorrimento, tenendo conto di qualsiasi spaziatura specificata.
    Right Allinea le diapositive lungo il bordo destro del contenitore del dispositivo di scorrimento, tenendo conto della spaziatura specificata.
  2. Impostare lo stile Border applicato a tutti e quattro i lati del contenitore del dispositivo di scorrimento:

    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:

    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.
  4. (Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare al contenitore cursore.

    Separare più nomi di classe con uno spazio.

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

    Immettere i valori corrispondenti nel diagramma.

    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.
    Padding Quantità di spazio vuoto applicata al bordo interno di tutti i lati del contenitore.

Testare il cursore

  1. Aprire la pagina in cui è incluso il dispositivo di scorrimento, impostare Enable Page su Yes.

  2. Nell'angolo superiore destro fare clic sulla freccia Save e scegliere Save & Close.

  3. Trova la pagina nella griglia Pagine e seleziona View nella colonna Action.

    Anteprima cursore - visualizzazione standard {width="600" modal="regular"}

    Quando visualizzi l’anteprima del cursore, ridimensiona la finestra in modo da visualizzarne l’aspetto su un dispositivo mobile.

    Anteprima cursore - visualizzazione mobile {width="400" modal="regular"}

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