Aggiunta di un layout carosello.

Impara DXPR BuilderCrea le pagineAggiungi contenutiLayout

Usa l’elemento di layout Carosello quando vuoi che i contenuti si alternino nello stesso punto, come citazioni, offerte o annunci. Ottieni slide che avanzano da sole, con un punto per ogni slide. A differenza del carosello di immagini, ogni slide contiene qualsiasi elemento: testo, immagini, pulsanti e altro. L’esempio costruisce uno slider di citazioni di studenti.

Uno slider di citazioni di studenti su una banda grigio chiaro che mostra la citazione di Aisha Khan, con una barra per ciascuna delle sue tre slide

  1. Passa sopra alla colonna e fai clic su + nella sua barra dei controlli per aprire il selettore di elementi.
  2. Nella scheda Layout fai clic su Carousel.
  3. Si aprono prima le sue impostazioni. Fai clic su Save per tenere i valori predefiniti. Il carosello compare con una slide vuota.
  4. Fai clic su + dentro la slide e aggiungi contenuti, per esempio un elemento Text.
  5. Per aggiungere una slide, passa sopra al carosello e fai clic su Add slide nella sua barra dei controlli. Fai clic sul punto della slide sotto il carosello per aprirla, poi riempila allo stesso modo.

Cosa vedi

Compare la prima slide con una barra per ogni slide sotto di essa. Ogni 5 secondi entra la slide successiva e dopo l’ultima torna la prima. I visitatori possono fare clic su una barra per saltare a una slide o scorrere su touch screen. Ogni slide prende l’altezza della più alta, così il contenuto sotto il carosello non salta.

Apri le impostazioni da More > Settings nella barra dei controlli del Carousel. Il pannello General contiene i tempi.

Impostazione Cosa fa Valore predefinito
Frames per slide Quante slide mostrare fianco a fianco, da 1 a 10. Gli schermi stretti ne mostrano meno, fino a una sui telefoni 1
Disable auto-play Impedisce alle slide di avanzare da sole Off
Auto-play interval Tempo tra le slide, da 1000 a 20000 millisecondi 5000
Stop on hover Mette in pausa l’avanzamento automatico mentre il puntatore è sopra il carosello Off
Dots navigation Nel pannello Dots: mostra un punto per ogni slide On
Next/Previous Nel pannello Next/Previous: mostra i pulsanti freccia Off

Punti e frecce

Con Dots navigation attivo, il pannello Dots offre anche:

  • Dots orientation: Outside slider (sotto) o Inside slider
  • Dot shape: Bar, Circle, Square o Triangle
  • Active dot transformation: None, Grow taller, Grow wider o Scale up
  • Dot color e Active dot color

Con Next/Previous attivo, il pannello Next/Previous offre anche:

  • Orientation: Outside slider o Inside slider
  • Dot shape: il pulsante dietro ogni freccia, No background, Circle, Square o Bar
  • Icon color, Icon hover color, Background color e Background hover color
  • Outside navigation position: Adjacent, Top center, Top left, Top right, Bottom center, Bottom left o Bottom right

Idee per le slide

  • Slider di testimonianze: metti in ogni slide un Block quote con la citazione e un elemento Text con il nome. Tieni Dots navigation attivo e Next/Previous spento, e imposta Auto-play interval su 7000 così i visitatori finiscono di leggere.
  • Carosello hero: apri More > Settings di una slide e scegli una foto come Background image nel suo pannello Style. Aggiungi un elemento Text con il titolo e un Button. Attiva Stop on hover così i visitatori possono leggere e fare clic.

Se non lo vedi

  • Non ci sono punti sotto il carosello. I punti compaiono solo quando il carosello ha due slide e solo con Dots navigation attivo. Fai clic su Add slide, oppure attiva Dots navigation nel pannello Dots.
  • La nuova slide non compare dopo Add slide. Le nuove slide si aggiungono alla fine e restano nascoste finché non le apri. Fai clic sull’ultimo punto sotto il carosello.
  • Le slide non si muovono da sole. Disable auto-play è attivo. Disattivalo nel pannello General delle impostazioni del carosello.
  • Non ci sono frecce. Next/Previous è spento per impostazione predefinita. Attivalo nel pannello Next/Previous.
  • Carousel manca dalla scheda Layout del selettore. Il tuo profilo utente DXPR Builder lo esclude. Un amministratore seleziona Carousel in Elements nel tuo profilo in /admin/dxpr_studio/dxpr_builder/profile.

E adesso?