Un dispositivo di scorrimento a fisarmonica è un modo divertente e coinvolgente per visualizzare i contenuti in un piccolo spazio. I cursori a fisarmonica sono solitamente costituiti da più elementi (o pannelli) impilati orizzontalmente, come le pieghe di una tenda. E quando passi il mouse su uno dei pannelli, si espande per rivelare il contenuto mentre gli altri pannelli a fisarmonica si contraggono. È qui che si ottiene l'effetto a fisarmonica dell'espansione e della contrazione.

In questo tutorial ti mostrerò come creare uno slider a fisarmonica reattivo in Divi utilizzando solo CSS. Per fare ciò, utilizzeremo diversi moduli Divi che fungeranno da pannelli a fisarmonica. È possibile utilizzare qualsiasi modulo, ma in questo esempio utilizzeremo i moduli blurb in modo molto creativo per creare uno splendido slider a fisarmonica che ha un aspetto (e funziona) benissimo sia su desktop che su dispositivi mobili.

Check it out!

Panoramica

Ecco una panoramica di ciò che costruiremo in questo tutorial.

Iniziamo il tutorial

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi installato (o il plugin Divi Builder se non stai utilizzando il tema Divi).
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (costruttore visivo).
3. Scarica circa 5 diverse immagini nella libreria da utilizzare come immagini di sfondo necessarie per il tutorial.

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Crea uno slider con una fisarmonica reattiva su Divi

Creazione della linea

Per iniziare, aggiungi una riga di una colonna alla sezione normale.

Quindi aprire le impostazioni per la linea e aggiornare quanto segue:

• Larghezza della grondaia: 1
• Larghezza: 100%
• Larghezza massima: 800px
• Altezza: 400 px (desktop); 700px (tablet e telefono)

I valori di larghezza e larghezza massima possono essere modificati in base alle proprie esigenze. La fisarmonica verrà ridimensionata e funzionerà con qualsiasi larghezza di riga. Inoltre, l'impostazione di un'altezza fissa è molto importante affinché il design funzioni. Gli elementi figlio (colonna e moduli) avranno un'altezza del 100%. Pertanto, se non si imposta l'altezza fissa della riga, gli elementi figlio non avranno un'altezza.

Parametri della colonna

Ora che l'altezza della riga è impostata, apri le impostazioni della colonna e aggiungi il seguente codice CSS all'elemento principale:
ufficio

display:flex;flex-direction: row;align-items:center;height: 100%;

tavoletta di cioccolato Tablette

flex-direction: column;

La proprietà flex allineerà i pannelli a fisarmonica orizzontalmente sul desktop e verticalmente su tablet e telefono. L'altezza del 100% consentirà ai moduli che aggiungeremo di utilizzare anche il valore di altezza del 100%.

Creazione del pannello della fisarmonica con i moduli Riepilogo

Lo slider a fisarmonica può essere costruito utilizzando qualsiasi tipo di modulo. Se lo volessimo, potremmo utilizzare una combinazione di diversi moduli per fungere da pannello a fisarmonica. Ma per questo design, utilizzeremo i Mod Blurb.

Inizia aggiungendo un modulo di presentazione alla linea.

Design del modulo astratto

Apri le impostazioni del modulo di riepilogo e aggiorna quanto segue:

Mantieni il titolo fittizio e il contenuto del corpo. Possiamo sempre cambiarlo in seguito.

Quindi aggiornare l'icona di presentazione come segue:

• Icona (desktop): icona che rappresenta una linea di freccia orizzontale (vedi screenshot)

• Icona (hover): controlla l'icona (vedi screenshot)

• Icona (tablet e telefono): icona che rappresenta una linea di freccia verticale (vedi screenshot)

contesto

Quindi dai al blurb un'immagine di sfondo e una sovrapposizione gradiente come segue:

• Aggiungi un'immagine di sfondo larga almeno 1000 pixel
• Posizione dell'immagine di sfondo: centro sinistra

Quindi aggiungere una sovrapposizione di sfondo sfumato.

galleggiante

• Sfondo sfumato sinistro (hover): # 3e215b
• Sfumatura dello sfondo verso destra Colore (hover): rgba (0,0,0,0)
• Direzione gradiente: 90deg
• Posiziona il gradiente sopra l'immagine di sfondo: SI

icona

• Colore icona: #ffffff
• Immagine / posizione delle icone: a sinistra

Quindi vai alla scheda Design e aggiorna quanto segue:

Titolo e corpo del testo

• Carattere del titolo: Poppins
• Titolo carattere: semi grassetto
• Colore titolo testo: trasparente (desktop), #ffffff (hover)
• Dimensioni del titolo del testo: 23px
• Colore del testo del corpo: trasparente (desktop), #ffffff (hover)

Altezza e ombra della scatola

Una volta che il testo è elegante, assegna al modulo un'altezza di 100% e una scatola d'ombra come segue:

• Altezza: 100%
• Box Shadow: vedi screenshot
• Ombra della scatola Posizione orizzontale: -12px
• Shadow of the box Posizione verticale: 0px

Blurb CSS personalizzato

Affinché i nostri pannelli a fisarmonica (o modulo di presentazione) si espandano e si contraggano con il resto dei moduli, dobbiamo aggiungere CSS personalizzati per modificare le dimensioni del modulo con flex-grow. Dato che avremo un totale di 5 moduli che compongono la fisarmonica, aggiungiamo "flex: 1" per lo stato predefinito, quindi lo cambiamo in "flex: 5" nello stato hover.

Nella scheda Avanzate, aggiungi il seguente CSS personalizzato, l'elemento principale di Blurb:

ufficio

flex:1;position: relative !important;transition: flex 800ms !important;

tavoletta di cioccolato Tablette

flex:5;

Quindi aggiungi i seguenti css personalizzati al contenuto CSS Blurb:

ufficio

position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;

tavoletta di cioccolato Tablette

width: 100%;height: 100%;position: relative !important;

Overflow e transizione

• Straripamento orizzontale: nascosto
• Straripamento verticale: nascosto
• Durata della transizione: 400ms
• Curva della velocità di transizione: lineare

Bene! Era una seria personalizzazione di un modulo di presentazione. Ma la buona notizia è che tutto ciò che dobbiamo fare è duplicarli per creare i pannelli a fisarmonica rimanenti.

Duplica i Blurb per più pannelli a fisarmonica

Passa il mouse sul modulo di presentazione e fai clic sull'icona di duplicazione quattro volte per creare un totale di cinque pannelli (o moduli) a fisarmonica.

Quindi aggiorna le immagini di sfondo per ciascuno dei nuovi blurb che hai duplicato.

Risultato finale

Considerazioni finali

Questo reattivo cursore a fisarmonica ha davvero alcuni elementi unici che lo rendono divertente da usare. I pannelli a fisarmonica si espandono e si contraggono mentre si librano senza problemi imprevisti. E le icone di presentazione cambiano al passaggio del mouse e sui dispositivi mobili per migliorare la UX. Spero che questo design sia utile per il tuo prossimo progetto.