Media - Cursore

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

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

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

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

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.

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

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

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

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

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

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

{width="500" modal="regular"}

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

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

• Appearance
• Background
• Content
• Advanced

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

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

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

{width="500" modal="regular"}

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

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

• Appearance
• Background
• Content
• Advanced

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

Creare il widget che si desidera visualizzare in una diapositiva.

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

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

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

Seleziona Widget Type necessari.

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

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

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

Modificare le altre impostazioni in base alle esigenze.

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

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

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

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

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

Scegliete uno dei seguenti tipi di posizionamento delle diapositive:

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

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.

{width="500" modal="regular"}

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.

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.

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

{width="500" modal="regular"}

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

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

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.

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

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.

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

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

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

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.

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

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

Imposta Show Overlay su uno dei seguenti:

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

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

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

Per controllare il posizionamento orizzontale del contenuto aggiunto alla diapositiva, scegliere Alignment:

Impostare lo stile Border applicato a tutti e quattro i lati della diapositiva:

Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

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

(Facoltativo) Specificare i nomi di CSS classes dal foglio di stile corrente da applicare alla diapositiva.

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

Immettete ogni valore corrispondente nel diagramma diapositiva.

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.

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

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

{width="500" modal="regular"}

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

{width="500" modal="regular"}

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.

{width="400"}

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.

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

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.

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

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

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.

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

Completa le impostazioni del cursore Avanzate in base alle esigenze.

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

Per controllare il posizionamento delle diapositive all'interno del contenitore cursore padre, scegliere Alignment:

Impostare lo stile Border applicato a tutti e quattro i lati del contenitore del dispositivo di scorrimento:

Se si imposta uno stile di bordo diverso da None, completare le opzioni di visualizzazione del bordo:

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

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.

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

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

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

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

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

{width="400" modal="regular"}