Vorresti creare uno slider per fisarmonica Divi reattivo?
Uno slider a fisarmonica è un modo divertente e attraente da esporre contenuto in un piccolo spazio.
I cursori a fisarmonica sono generalmente 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 otteniamo l'effetto di espansione e contrazione del tipo a fisarmonica.
In questo tutorial, ti mostreremo 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.
Panoramica
Ecco una rapida panoramica di ciò che otterremo in questo tutorial.
Scarica DIVI ora!!!
Creazione di una nuova pagina con Divi Builder
Per iniziare, dovrai fare quanto segue:
- Dalla dashboard di WordPress, vai a Pagine> Aggiungi nuovo per creare una nuova pagina.
- Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
- quindi fare clic su Inizia a costruire (Costruisci da zero)
Successivamente, avrai una tela bianca per iniziare a progettare in Divi.
Creazione dello slider reattivo della fisarmonica in Divi
Creazione della linea
Per iniziare, aggiungi una riga di una colonna alla sezione normale.
Quindi apri le impostazioni della linea e aggiorna quanto segue:
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 1
- Larghezza: 100%
- Larghezza massima: 800 px
- Altezza: 400px (desktop); 700px (tablet e telefono)
I valori di larghezza e larghezza massima possono essere modificati in base alle proprie esigenze. La fisarmonica si adatterà e funzionerà in qualsiasi larghezza della linea.
Parametri della colonna
Ora che abbiamo un'altezza definita per la riga, apri le impostazioni della colonna e aggiungi il seguente CSS all'elemento principale:
Desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tavoletta di cioccolato Tablette
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Creazione del pannello della fisarmonica con i moduli Blurb
Il cursore a fisarmonica può essere costruito utilizzando qualsiasi tipo di modulo/i. Se volessimo, potremmo usare una combinazione di moduli diversi per fungere da pannello a fisarmonica. Ma per questo design, utilizzeremo i moduli Blurb.
Inizia aggiungendo un modulo Blurb alla linea.
Design Mod Blurb
Apri le impostazioni del modulo di presentazione e aggiorna quanto segue:
Mantenere il titolo fittizio e contenuto dal corpo. Possiamo sempre cambiarlo più tardi.
Quindi, aggiorna l'icona della presentazione come segue:
- Icona (Desktop): icona della linea della freccia orizzontale (vedi screenshot)
- Icona (al passaggio del mouse): (vedi screenshot)
- Icona (tablet e telefono): (vedi screenshot)
Sfondo
Quindi dai alla sfocatura un'immagine di sfondo e una sovrapposizione di gradiente al passaggio del mouse come segue:
- Aggiungi un'immagine di sfondo larga almeno 1000 px
- Posizione immagine di sfondo: centro sinistra
Quindi aggiungere una sovrapposizione di sfondo sfumato.
Librarsi
- Gradiente di sfondo a sinistra (hover): #3e215b
- Sfumatura di sfondo destra (al passaggio del mouse): rgba(0,0,0,0)
- Direzione gradiente: 90 gradi
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
icona
- Colore icona: #ffffff
- Posizionamento immagine/icona: a destra
Quindi, passa alla scheda Design e aggiorna quanto segue:
Titolo e corpo del testo
- Carattere del titolo: Poppins
- Peso del carattere: semi-grassetto
- Colore del testo del titolo: Transparent (Desktop), #ffffff (Hover)
- Dimensione del testo del titolo: 22px
- Colore del corpo del testo: Transparent (Desktop), #ffffff (Hover)
Altezza e ombra della scatola
Una volta che il testo è stato personalizzato, assegna al modulo un'altezza del 100% e un'ombra del riquadro come segue:
- Altezza: 100%
- Box Shadow: vedi screenshot
- Posizione orizzontale: -12px
- Posizione verticale: 0px
CSS personalizzato
Affinché i nostri pannelli a fisarmonica (o modulo Blurb) crescano e si contraggano con il resto dei moduli, è necessario aggiungere CSS personalizzati per modificare le dimensioni del modulo con flex-grow.
Dal momento che avremo un totale di 5 moduli che compongono la fisarmonica, aggiungiamo "flex:1" per lo stato predefinito e quindi lo cambiamo in "flex:5" nello stato 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;
In bilico
flex:5;
position: relative !important;
transition: flex 800ms !important;
Quindi aggiungi il seguente CSS personalizzato al CSS del contenuto Blurb:
ufficio
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tavoletta di cioccolato Tablette
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Overflow e transizione
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
- Durata della transizione: 400 ms
- Curva di velocità di transizione: lineare
Molto bene! Era una seria personalizzazione di un modulo Blurb. Ma la buona notizia è che tutto ciò che dobbiamo fare è duplicarli per creare i restanti pannelli a fisarmonica.
Layout duplicati per più pannelli a fisarmonica
Passa il mouse sopra il modulo di presentazione e fai clic sull'icona duplicato quattro volte per creare un totale di cinque pannelli (o moduli) a fisarmonica.
Quindi, aggiorna le immagini di sfondo per ciascuna delle nuove sfocature che hai duplicato.
Risultato finale
Ora che abbiamo eseguito tutti i passaggi, vediamo il risultato finale.
Scarica DIVI ora!!!
Conclusione
Questo dispositivo di scorrimento per fisarmonica reattivo ha davvero alcuni elementi unici che lo rendono divertente da usare. I pannelli a fisarmonica si espandono e si contraggono perfettamente al passaggio del mouse senza intoppi imprevisti.
E le icone di presentazione cambiano al passaggio del mouse e sui dispositivi mobili per migliorare l'esperienza utente. Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...