Come ricreare le anteprime dei pacchetti di layout di ET con effetti al passaggio del mouse a ventaglio in Divi

Una delle fantastiche funzionalità del nuovo design del sito Web di elegantthemes.com sono le anteprime del pacchetto di layout predefinite nella pagina del prodotto Divi. Ciò che rende unico questo design è il modo in cui ogni pacchetto di layout è caratterizzato da tre immagini separate che si aprono a ventaglio al passaggio del mouse.

Oggi ti mostreremo come ricreare il design delle anteprime dei nostri pacchetti di layout con lo stesso impressionante effetto hover a ventaglio in Divi. Poiché il design è un po' più avanzato, utilizzeremo alcuni CSS personalizzati in combinazione con le opzioni di design integrate di Divi. Ma non preoccuparti, non ci vorrà molto per costruire e il risultato ne vale sicuramente la pena.

Iniziamo.

Sbirciata

Ecco una sbirciatina alle anteprime del pacchetto di layout con un effetto hover fan-out. Notare che la riga inferiore ha un effetto al passaggio del mouse secondario che ruota le immagini separatamente al passaggio del mouse.

Il layout a tre colonne sul desktop si adatterà a una colonna su tablet e telefono.

Scarica GRATUITAMENTE il layout degli effetti al passaggio del mouse dell'anteprima del pacchetto di layout

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Iscriviti al nostro canale Youtube

Cosa ti serve per iniziare

Per iniziare, dovrai avere la seguente configurazione:

1. Il tema Divi installato e attivo
2. Una nuova pagina creata per costruire da zero sul generatore di front-end (visuale) di Divi.
3. Tre immagini da utilizzare per i contenuti fittizi. Le immagini dovrebbero essere di circa 250 px per 375 px per ottenere i migliori risultati. Poiché si tratta di anteprime di pagine Web, puoi creare i tuoi screenshot di qualsiasi design di pagina e quindi ritagliare/ridimensionare ogni immagine di conseguenza.

Dopodiché, avrai una tela bianca per iniziare a creare alcune schede al passaggio del mouse in Divi.

Ricreare le anteprime dei pacchetti di layout di ET con effetti al passaggio del mouse a ventaglio in Divi

Costruire la sezione e la riga

Crea una nuova sezione regolare con una riga a tre colonne.

Prima di aggiungere qualsiasi modulo, apri le impostazioni della riga e aggiorna le dimensioni e la spaziatura come segue:

• Larghezza grondaia: 2
• Larghezza: 90%
• Larghezza massima: 1120 px (desktop), 400 px (tablet)

Quindi aggiungi un po' di imbottitura alla riga sul tablet per una maggiore spaziatura sui dispositivi mobili.

• Colonna 1 Imbottitura: 20% in basso
• Imbottitura colonna 2: 20% in basso
• Colonna 3 Imbottitura: 20% in basso

Aggiunta dell'immagine 1

Ora siamo pronti per aggiungere la nostra prima delle tre immagini che comporranno il nostro design di anteprima del pacchetto di layout. Vai avanti e aggiungi un modulo immagine alla colonna 1.

Quindi carica l'immagine nel modulo immagine (dovrebbe essere di circa 250 px per 375 px di dimensione).

Quindi aggiorna le impostazioni di progettazione come segue:

• Allineamento immagine: centro
• Larghezza: 220 px
• Overflow verticale: nascosto
• Indice Z: 4

Poiché abbiamo bisogno di scegliere come target il contenitore dell'immagine (non l'immagine stessa), dobbiamo aggiungere un'altezza personalizzata, un'ombra del riquadro e un raggio del bordo utilizzando CSS personalizzati. Aggiungi il seguente CSS all'elemento principale:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Ciò consentirà all'immagine di adattarsi con il con del contenitore dell'immagine quando aggiungeremo l'effetto al passaggio del mouse in seguito. Come puoi vedere ora, l'immagine è stata leggermente tagliata in basso perché abbiamo un'altezza personalizzata di 240 px e l'overflow impostato su "nascosto".

Aggiunta dell'immagine 2

Per creare la seconda immagine, aggiungi un nuovo modulo immagine sotto il primo modulo immagine nella colonna 1. Quindi carica una nuova immagine (250X350) nel modulo.

Quindi dobbiamo posizionare l'immagine dietro e leggermente a sinistra dell'immagine 1. Per fare ciò dovremo aggiungere una larghezza e un'altezza personalizzate con l'overflow verticale nascosto (proprio come abbiamo fatto con l'immagine 1). La differenza principale qui è che dobbiamo dare all'immagine una posizione assoluta in modo che venga visualizzata nella parte superiore sinistra della colonna dietro l'immagine 1.

Per fare ciò, aggiorna quanto segue:

• Larghezza: 180 px
• Overflow verticale: nascosto

Quindi aggiungi il seguente CSS personalizzato all'elemento principale:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Aggiunta dell'immagine 3

Ora siamo pronti per aggiungere la terza immagine per completare l'anteprima del pacchetto di layout. A questo punto ha senso utilizzare la modalità di visualizzazione wireframe poiché abbiamo alcune sovrapposizioni che rendono più difficile l'utilizzo del visual builder. Distribuire la modalità wireframe e duplicare l'immagine 2.

Abbiamo duplicato l'immagine perché vogliamo trasferire la maggior parte delle impostazioni che abbiamo usato per l'immagine 2. L'unica differenza (oltre a una nuova immagine) è che dobbiamo posizionare l'immagine a destra anziché a sinistra.

Apri l'immagine duplicata (immagine 3) e aggiorna il modulo immagine con una nuova immagine (250×375).

Quindi aggiorna il CSS personalizzato modificando la proprietà di posizione left in una proprietà di posizione right . Non sono necessarie altre modifiche al CSS.

Se preferisci, puoi copiare e incollare il seguente CSS nell'elemento principale per sostituire il CSS corrente.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Fin qui tutto bene

Ecco il risultato finale fino ad ora.

Il design è in realtà davvero bello così com'è, ma facciamo un salto di qualità con un effetto hover a ventaglio.

Aggiunta dell'effetto Hover Fan-Out CSS

Normalmente, se avessimo a che fare con una sola immagine, potremmo facilmente aggiungere effetti al passaggio del mouse utilizzando le opzioni Divi integrate. Ma questo effetto hover fan-out richiede che attiviamo lo stato hover di più elementi figlio (immagini) contemporaneamente quando si passa con il mouse sulla colonna padre. Quando si passa con il mouse sulla colonna, si desidera che le seguenti regolazioni vengano eseguite sulle immagini.

1. Aggiungi una durata di transizione a ciascuna immagine per una transizione graduale al passaggio del mouse.
2. Regola l'immagine 1 in modo che abbia una larghezza di 180 px e un'altezza di 240 px. Ciò farà sì che il contenitore dell'immagine diventi più alto e più stretto per mostrare più immagine.
3. Regola l'immagine 2 e 3 per avere una larghezza di 160 px e un'altezza di 220 px. Ciò farà anche sì che le immagini diventino più alte e più strette per mostrare più dell'immagine.
4. Regola l'immagine 2 per ruotare di 5 gradi in senso antiorario e spostarla leggermente a sinistra. Possiamo farlo aggiungendo il valore di -5 gradi alla proprietà transform:rotate e regolando il valore della proprietà left position su 0.
5. Regola l'immagine 3 per ruotare di 5 gradi in senso orario e spostarla leggermente a destra. Possiamo farlo aggiungendo un valore di 5 gradi alla proprietà transform:rotate e regolando il valore della proprietà position right su 0.

Per aggiungere il CSS personalizzato necessario per questi effetti al passaggio del mouse, dobbiamo aggiungere una classe CSS personalizzata alla riga contenente le immagini. Questo ci permetterà di applicare il CSS personalizzato solo alle immagini in una particolare riga.

Apri le impostazioni della riga e aggiungi la seguente classe CSS.

• Classe CSS: immagini fan-out

Per aggiungere il CSS personalizzato alla pagina, apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato nella scheda Avanzate.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Ho aggiunto un commento sopra ogni frammento di css per ricordarti cosa sta facendo ciascuno.

Una volta che hai finito. Controlla il risultato finale.

Risultato finale

Effetto hover opzionale: rotazione dell'immagine 1 e 2 separatamente al passaggio del mouse

Per aggiungere un altro livello di coinvolgimento alle immagini di anteprima del pacchetto di layout, possiamo fare in modo che la rotazione dell'immagine 1 e dell'immagine 2 avvenga separatamente dall'effetto hover iniziale. Ciò consentirà all'utente di interagire con le immagini in un modo unico. Puoi anche aggiungere link separati o anteprime lightbox a quelle immagini, se lo desideri.

Ecco come lo fai.

Estrarre le proprietà di trasformazione dalle impostazioni di pagina CSS personalizzato

Innanzitutto, è necessario eliminare le due righe di CSS personalizzato che ruotano l'immagine quando si passa con il mouse sulla colonna. Apri il CSS personalizzato delle impostazioni della pagina ed estrai quanto segue:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Aggiunta di proprietà di trasformazione al passaggio del mouse per l'immagine 2

Quindi apri le impostazioni del modulo immagine per l'immagine 2 e usa le opzioni di trasformazione integrate di Divi per aggiungere lo stesso valore di rotazione della trasformazione che abbiamo eliminato in precedenza per lo stato al passaggio del mouse.

• Trasforma Ruota asse Z (hover): -5deg
• Trasforma Trasla asse X (hover): -20px

Aggiunta di proprietà di trasformazione al passaggio del mouse per l'immagine 3

Quindi aggiorna le impostazioni del modulo immagine per l'immagine 3 per aggiungere la proprietà di rotazione della trasformazione.

• Trasforma Ruota asse Z (hover): 5deg
• Trasforma Trasla asse X (hover): 20px

Ora controlla il risultato finale.

Risultato finale

Aggiunta di collegamenti alle immagini

Se desideri creare collegamenti di reindirizzamento per mostrare un particolare pacchetto di layout o design di pagina su una pagina separata, sarebbe meglio aggiungere lo stesso URL di collegamento a tutte e tre le immagini nel pacchetto. Per fare ciò, apri ciascuno dei moduli immagine e aggiungi l'URL del collegamento.

Aggiunta di nuove anteprime dei pacchetti di layout alle altre colonne

Per completare il disegno, possiamo copiare le tre immagini nella colonna 1 e incollarle nella colonna 2 e nella colonna 3.

Dopodiché, tutto ciò che devi fare è aggiornare ciascuna delle immagini nelle colonne 2 e 3 con delle nuove.

Questo è tutto!

Progetto definitivo

Ecco il disegno definitivo. La riga superiore mostra l'effetto al passaggio del mouse al passaggio del mouse quando si passa con il mouse sulla colonna. La seconda riga mostra l'effetto hover fan-out secondario aggiunto all'immagine 2 e 3 separatamente.

Il layout a tre colonne sul desktop si adatterà a una colonna su tablet e telefono.

Pensieri finali

L'effetto hover a ventaglio è un elemento di design bello e accattivante che puoi utilizzare per presentare i layout di pagina sul tuo sito web. La combinazione di CSS personalizzati e impostazioni Divi integrate che abbiamo trattato in questo tutorial funzionerà magicamente. E questa configurazione servirà come un ottimo punto di partenza per esplorare più design utilizzando Divi builder. Spero che questo ti dia qualche ispirazione per portare il tuo portfolio al livello successivo.

Non vedo l'ora di sentirti nei commenti.

Saluti!