Uno slider a fisarmonica è un modo divertente e attraente da esporre contenuto in uno spazio ristretto. 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, questo si espande per rivelare il contenuto mentre gli altri pannelli della fisarmonica si contraggono. È qui che si ottiene l'effetto a fisarmonica di espansione e contrazione.
In questo tutorial, ti mostrerò come creare un dispositivo di scorrimento per fisarmonica reattivo Divi utilizzando solo CSS. Per fare ciò, utilizzeremo diversi moduli Divi per fungere da pannelli di fisarmonica. È possibile utilizzare qualsiasi modulo, ma per questo esempio utilizzeremo i moduli blurb in un modo molto creativo per creare un bellissimo dispositivo di scorrimento a fisarmonica che sembra (e funziona) alla grande sia sul desktop che sui 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 l'hai già fatto, installa e attiva il Tema Divi installato (o il plugin Divi Builder se non si utilizza il file 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 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 contenuto dal corpo. Possiamo sempre cambiarlo più tardi.
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.
