Come creare un effetto al passaggio del mouse in espansione per i layout della griglia in Divi

L'aggiunta di un effetto al passaggio del mouse in espansione al layout della griglia è un modo unico per coinvolgere il pubblico nell'interazione con il contenuto della pagina. L'idea è di iniziare con una visualizzazione compatta della griglia e quindi espandere quella griglia per portare il contenuto della griglia in primo piano quando un utente passa il mouse sull'elemento in Divi. Questo è ottimo per espandere una galleria di immagini per visualizzare una galleria più grande (con immagini più grandi) al passaggio del mouse. E potresti anche espandere un gruppo di blurb per coinvolgere i visitatori nell'esplorazione dei tuoi servizi.

Iniziamo.

Sbirciata

Ecco un'anteprima degli esempi di effetti al passaggio del mouse in espansione che tratterò in questo tutorial.

Iniziare

Per questo tutorial, tutto ciò di cui hai veramente bisogno è Divi. Utilizzeremo anche il layout predefinito di Design Agency About Page disponibile all'interno di Divi Builder per avviare il design.

Per iniziare, crea una nuova pagina, assegna un titolo alla tua pagina e fai clic per utilizzare Divi Builder. Quindi seleziona l'opzione Scegli un layout predefinito. Dal popup di caricamento dalla libreria, selezionare il pacchetto di layout dell'agenzia di design e quindi fare clic per utilizzare la pagina delle informazioni sull'agenzia di design.

Una volta che il layout è stato caricato nella pagina, pubblicalo. Per questo tutorial, utilizzerò il generatore Divi sul front-end. Per fare ciò, tutto ciò che devi fare è fare clic sul pulsante "Crea sul front-end" nella parte superiore dell'editor della pagina di backend.

Ora sei pronto per iniziare!

Blurb in espansione al passaggio del mouse

Per questo primo esempio, ti mostrerò come espandere i blurb nella seconda sezione di questo layout che mostrano i servizi offerti.

Sposta i moduli Blurb su Occupa solo una riga

Attualmente la sezione è composta da due righe a tre colonne con un contrassegno in ciascuna colonna.

Dal momento che aggiungeremo il nostro effetto hover a una singola riga, dobbiamo spostare i blurb dalla riga inferiore alla riga superiore. Assicurati che ogni colonna nella riga superiore abbia due blurb.

Quindi eliminare la riga inferiore vuota.

Personalizzazione dei moduli Blurb

Successivamente, useremo Multiselect per selezionare tutti e sei i blurb in modo da poter applicare lo stesso design a tutti loro contemporaneamente. Per fare ciò, tieni premuto ctrl (o cmd) e fai clic su ciascuno dei moduli blurb finché non vengono selezionati tutti. Quindi fai clic sull'icona delle impostazioni su uno dei blurb per aprire la modale delle impostazioni dell'elemento.

Vai avanti ed elimina il contenuto trovato nella casella del contenuto, quindi aggiorna le impostazioni di progettazione come segue:

Dimensione del testo del titolo 16px
Larghezza: 150 px
Allineamento del modulo: centro
Imbottitura personalizzata: 10px in alto, in basso di default, a sinistra di default, a destra di default

Dare ai moduli una larghezza personalizzata di 150 px mantiene il testo del titolo bloccato in posizione quando espandiamo la riga.

Salva le modifiche e fai clic fuori dalla selezione multipla.

Rendi la trama centrale più pronunciata

Quindi, apri le impostazioni del modulo blurb per la descrizione in alto nella seconda colonna intitolata "Identità del marchio". Quindi aggiorna quanto segue:

Dimensione carattere icona: 120 px
Dimensione del testo del titolo: 18 px (predefinito)

Questo rende semplicemente il blurb centrale più pronunciato come il pezzo centrale da cui gli altri blurb si espanderanno verso l'esterno.

Personalizzazione della riga da espandere al passaggio del mouse

Per espandere i nostri moduli al passaggio del mouse, regoleremo la dimensione e la spaziatura della riga. Apri le impostazioni della riga e aggiorna quanto segue:

Larghezza personalizzata: 750 px
Larghezza grondaia: 4
Imbottitura personalizzata (impostazione predefinita): 150 px a sinistra, 150 px a destra
Imbottitura personalizzata (hover): 0px a sinistra, 0px a destra
Imbottitura personalizzata (tablet): 0px a sinistra, 0px a destra

La modifica dei valori di riempimento al passaggio del mouse è ciò che crea l'effetto al passaggio del mouse in espansione. La riga si espanderà di 150 px a destra e di 150 px a sinistra.

Controlla il risultato finale.

Fare una griglia circolare

Se vuoi creare un layout di griglia circolare che si espanda, tutto ciò che serve sono alcune piccole modifiche.

Per prima cosa duplica una delle macchie esterne e trascinala sopra la grande macchia sulla seconda colonna. Quindi elimina il testo del titolo nel blurb centrale con l'icona grande.

Per allineare verticalmente i blurb, puoi aggiungere un piccolo frammento di CSS personalizzato. Apri le impostazioni della riga e aggiungi il seguente CSS personalizzato all'elemento principale:

align-items: center;

Ora controlla il risultato.

Espandere la griglia a destra

Puoi anche scegliere di espandere la griglia a sinistra oa destra. Organizza semplicemente i tuoi moduli e poi aggiorna l'imbottitura personalizzata della tua riga. Ad esempio, se desideri espandere il contenuto a destra, imposta la spaziatura interna personalizzata predefinita su 0 px a sinistra e 300 px a destra.

Come appare sui dispositivi mobili

Ecco a cosa ricadrà il design su tablet e smartphone. L'effetto al passaggio del mouse in espansione non sarà attivo nemmeno sui dispositivi mobili.

Aggiunta di un effetto al passaggio del mouse in espansione a una galleria di immagini

Puoi anche espandere una galleria di immagini al passaggio del mouse utilizzando il modulo galleria per mostrare un layout di griglia più grande con immagini più grandi. Per fare ciò, individuare la sezione verso la parte inferiore del titolo del layout di pagina di Design Agency About "Our Work".

Quindi aggiungi una nuova riga a una colonna sotto la riga con le tre immagini. All'interno della riga, aggiungi un modulo galleria.

Aggiorna le impostazioni del modulo galleria come segue:

Aggiungi 4 immagini alla galleria con le stesse dimensioni in modo che abbiano lo stesso aspetto su tutta la riga.

Numero immagini: 4
Mostra titolo e didascalia: NO
Mostra impaginazione: No

Quindi, vai alla scheda Design e aggiorna quanto segue:

Colore icona zoom: #353740
Colore sovrapposizione al passaggio del mouse: rgba(252.210,29,0.92)

Larghezza (da tavolo): 40%
Larghezza (al passaggio del mouse): 100%
Larghezza (compressa): 100%

La modifica della larghezza del modulo della galleria al passaggio del mouse è ciò che crea l'effetto al passaggio del mouse in espansione. L'impostazione della larghezza del tablet su 100% impedisce inoltre che l'effetto al passaggio del mouse si verifichi sui dispositivi mobili.

Ecco come appare finora.

Dobbiamo ancora aggiornare le nostre impostazioni di riga per migliorare un po' la funzionalità e abbinare il layout.

Apri le impostazioni della riga e aggiorna quanto segue:

Larghezza personalizzata: 80%
Larghezza grondaia: 2
Equalizza le altezze delle colonne: S

Interrompere l'espansione dell'effetto hover che spinge il contenuto verso il basso nella pagina

Se vuoi che la galleria di immagini si espanda senza spingere verso il basso il contenuto della pagina, puoi farlo impostando un'altezza minima per la tua riga. questo renderà migliore la UX, specialmente con un pulsante direttamente sotto la galleria.

Vai alle impostazioni di riga e aggiungi il seguente CSS personalizzato nell'elemento principale:

min-height: 350px

Quindi aggiungi il seguente CSS personalizzato nell'elemento principale della colonna:

margin: auto;

L'equalizzazione delle altezze delle colonne attiva la proprietà css "display: flex" sul backend che consente a "margin: auto" di allineare il contenuto della colonna da centrare verticalmente all'interno della riga che ora ha un'altezza minima di 350 px. Scopri di più su questo concetto nel nostro articolo completo su come allineare verticalmente i contenuti in Divi.

Controlla il risultato finale.

Aggiunta di più immagini alla Galleria

Puoi anche aggiungere altre 4 immagini alla galleria e aumentare l'altezza minima della tua riga a 475 px per il seguente risultato.

Come appare sui dispositivi mobili

Ecco come apparirà la galleria sui dispositivi mobili. L'effetto hover in espansione non è attivo.

Pensieri finali

Gli esempi forniti sono solo alcuni dei modi in cui utilizzi Divi per creare un effetto al passaggio del mouse in espansione per l'intero contenuto della griglia. Ma sono sicuro che puoi usarlo per innumerevoli altri casi d'uso. Puoi espandere i moduli del portfolio, i moduli del negozio o persino i moduli del blog. Quindi diventa creativo e divertiti ad esplorare le possibilità da solo.

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!