Uno slider a fisarmonica è un modo divertente e coinvolgente per visualizzare contenuti in uno spazio ridotto. Gli slider a fisarmonica sono in genere composti da diversi elementi (o pannelli) impilati orizzontalmente, come le pieghe di una tenda. Passando il mouse su uno dei pannelli, questo si espande per rivelare il contenuto, mentre gli altri pannelli a fisarmonica si contraggono. È così che si ottiene l'effetto a fisarmonica, che si espande e si contrae.
In questo tutorial, vi mostrerò come creare uno slider a fisarmonica responsive in Divi utilizzando solo CSS. Per farlo, utilizzeremo diversi moduli Divi come pannelli a fisarmonica. È possibile utilizzare qualsiasi modulo, ma per questo esempio, utilizzeremo i moduli blurb in modo molto creativo per creare uno splendido slider a fisarmonica che si presenta (e funziona) alla grande 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:
- Se non lo hai già fatto, installa e attiva il tema Divi installato (o il plugin Divi Builder se non stai utilizzando il tema Divi).
- Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (costruttore visivo).
- 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 a seconda delle esigenze. L'accordion si adatterà e funzionerà indipendentemente dalla larghezza di riga. Inoltre, è fondamentale definire un'altezza fissa affinché il design funzioni correttamente. Gli elementi figlio (colonne e moduli) avranno un'altezza del 100%. Pertanto, se non si definisce un'altezza di riga fissa, gli elementi figlio non avranno altezza.
Parametri della colonna
Ora che l'altezza della riga è definita, 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 smartphone. Un'altezza del 100% consentirà a tutti i moduli aggiunti di utilizzare anch'essi un'altezza del 100%.
Creazione del pannello della fisarmonica con i moduli Riepilogo
Lo slider a fisarmonica può essere realizzato utilizzando qualsiasi tipo di modulo. Se lo desiderassimo, potremmo utilizzare una combinazione di moduli diversi per fungere da pannello a fisarmonica. Ma per questo progetto, utilizzeremo i moduli 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 frecce orizzontali (vedi screenshot)
- Icona (passaggio del mouse): icona di controllo (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 a 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: SÌ
icona
- Colore icona: #ffffff
- Immagine / posizione delle icone: a sinistra
Successivamente, vai alla scheda Progettazione e aggiorna i seguenti elementi:
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
Per far sì che i nostri pannelli a fisarmonica (o moduli di presentazione) si espandano e si contraggano con gli altri moduli, dobbiamo aggiungere codice CSS personalizzato per modificare le dimensioni del modulo utilizzando flex-grow. Dato che avremo un totale di 5 moduli a comporre l'accordion, aggiungiamo "flex: 1" come stato predefinito, e poi lo modifichiamo in "flex: 5" al passaggio del mouse.
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'elemento Blurb principale:
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
Fantastico! È stata una personalizzazione notevole 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 ottenere più pannelli a fisarmonica
Passa il mouse sopra il modulo di presentazione e fai clic sull'icona duplicata quattro volte per creare un totale di cinque pannelli a fisarmonica (o moduli).
Quindi aggiorna le immagini di sfondo per ciascuno dei nuovi testi di presentazione che hai duplicato.
Risultato finale
Considerazioni finali
Questo slider reattivo a fisarmonica presenta alcuni elementi davvero unici che lo rendono divertente da usare. I pannelli a fisarmonica si espandono e si contraggono al passaggio del mouse senza problemi imprevisti. E le icone di presentazione cambiano al passaggio del mouse e su dispositivi mobili per migliorare l'esperienza utente. Speriamo che questo design ti sia utile per il tuo prossimo progetto.