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.
slider per fisarmonica Divi reattivo
  • Dagli un titolo che abbia senso per te e fai clic Usa Divi Builder
  • quindi fare clic su Inizia a costruire (Costruisci da zero)
slider per fisarmonica Divi reattivo

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;
crea un dispositivo di scorrimento per fisarmonica Divi reattivo

tavoletta di cioccolato Tablette

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
crea un dispositivo di scorrimento per fisarmonica Divi reattivo

Overflow e transizione

  • Overflow orizzontale: nascosto
  • Overflow verticale: nascosto
  • Durata della transizione: 400 ms
  • Curva di velocità di transizione: lineare
crea un dispositivo di scorrimento per fisarmonica Divi reattivo

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.

crea un dispositivo di scorrimento per fisarmonica Divi reattivo

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.

...

Pin It on Pinterest