Come rivelare il contenuto con un effetto hover dell'otturatore in Divi

Rivelare il contenuto del modulo al passaggio del mouse può avere alcuni vantaggi utili. 1) Può essere un ottimo modo per avere un design più compatto o elegante della tua pagina web inizialmente. 2) Risparmia spazio. 3) Può invogliare gli utenti a interagire con la tua pagina. 4) Sembra fantastico :). L'idea di base è mostrare solo una parte del contenuto del modulo (come un teaser) che rende allettante per i visitatori il passaggio del mouse per vedere di più. Una volta che passano il mouse sopra il modulo, l'intero contenuto viene rivelato con un morbido effetto al passaggio del mouse che si apre e si chiude come un otturatore.

In questo tutorial, ti mostrerò come puoi rivelare il contenuto del modulo con un effetto al passaggio del mouse in stile otturatore utilizzando Divi builder.

Sbirciata

Ecco una rapida occhiata a ciò che costruiremo insieme.

Iniziare

Iscriviti al nostro canale Youtube

Per iniziare, crea una nuova pagina, assegna un titolo alla pagina e quindi distribuisci Divi Builder per costruire sul front-end. Seleziona l'opzione "Scegli un layout predefinito". Quindi dal popup della libreria Divi, seleziona il pacchetto Day Spa Layout e fai clic per utilizzare il layout della pagina di destinazione.

Una volta caricato il layout sulla pagina, sei pronto per iniziare!

Aggiunta di divisori nella parte superiore e inferiore di Blurb

Scorri la pagina verso il basso fino alla sezione intitolata "Esperienze termali di lusso" con le quattro indicazioni. Useremo la riga con i quattro blurb per dare il via al design.

Aggiunta del primo divisore

Il nostro primo passo è aggiungere divisori sopra e sotto il modulo blurb per nascondere il nostro contenuto blurb dietro. Puoi pensare a questi divisori come alle persiane di una finestra che si apriranno e si chiuderanno al passaggio del mouse.

Aggiungi un modulo divisore sopra il blurb nella prima colonna e aggiorna quanto segue:

Colore di sfondo: #ffffff
Colore (del divisore): #ffffff
Peso del divisore: 100 px
Altezza: 100 px
Margine personalizzato: 0px in basso

Lo sfondo bianco corrisponde allo sfondo della nostra sezione poiché non vogliamo vederlo. Assicurati che il peso e l'altezza del divisore siano gli stessi.

Aggiunta del secondo divisore (arancione)

Quindi, crea un altro divisore direttamente sotto il divisore appena creato e aggiorna quanto segue:

Colore: #ff7a6b
Peso del divisore: 2px
Altezza: 2px
Margine personalizzato: 0px in basso

Quindi passa alla scheda del contenuto e assegna al divisore un'etichetta di amministrazione "divisore arancione". Questo aiuterà a distinguere il divisore dal precedente divisore (bianco) quando usiamo la modalità wireframe per copiare e incollare il divisore nelle altre colonne.

Salva la tua pagina.

Copiare e incollare i divisori intorno ai Blurbs

Ora siamo pronti per copiare e incollare i nostri divisori sopra e sotto ciascuno dei blurb in ciascuna delle colonne. Per rendere questo processo un po' più semplice, distribuisci la modalità wireframe aprendo il menu delle impostazioni nella parte inferiore della pagina e facendo clic sull'icona wireframe. (o usa MAIUSC + w)

In modalità wireframe, trova la riga contenente i blurb e i divisori che abbiamo appena creato. Quindi copia e incolla il divisore e il divisore arancione sopra e sotto ciascuna delle macchie in modo che il risultato finale assomigli a questo.

Quindi, torna alla vista desktop (maiusc + w) per completare il design. La tua pagina dovrebbe essere simile a questa.

Personalizzazione dei moduli Blurb

Ora che hai tutti i divisori a posto, è il momento di modificare i nostri moduli blurb con alcune regolazioni di stile, incluso un margine personalizzato per creare l'effetto al passaggio del mouse in stile otturatore.

Innanzitutto, usa la selezione multipla per selezionare tutti e quattro i moduli blurb. Per fare ciò, tieni semplicemente premuto ctrl (o cmd) e fai clic su ciascun modulo. Quindi apri le impostazioni di uno dei moduli per distribuire le impostazioni modali dell'elemento.

Nella scheda contenuto, aggiungi alcune righe di contenuto fittizio.

Quindi disabilita del tutto l'ombra della casella immagine.

Per creare l'effetto hover dell'otturatore, dobbiamo aggiungere margini superiore e inferiore negativi per nascondere il contenuto dietro i divisori per impostazione predefinita. Quindi impostiamo i margini su 0px per rivelare il contenuto al passaggio del mouse. Per fare ciò, aggiungi la seguente spaziatura.

Margine personalizzato (predefinito): -100 px in alto, -65 px in basso
Margine personalizzato (hover): 0px in alto, 0px in basso

Imbottitura personalizzata (hover): 10px in alto, 10px in basso

Potrebbe essere necessario regolare i valori dei margini negativi a seconda della quantità di contenuti di cui disponi. Ad esempio, potrebbe essere necessario disporre di un margine più negativo per contenuti di testo più lunghi.

Ora controlla il risultato finora.

Nota che la parte superiore e inferiore di ogni modulo è nascosta dietro i divisori finché non passi il mouse sopra di essi.

Ripulire l'effetto hover dell'otturatore

Centratura verticale dei moduli

Attualmente, l'effetto hover dell'otturatore spinge il resto del contenuto lungo la pagina ad ogni passaggio del mouse. Ciò causa alcuni movimenti di pagina che potrebbero distrarre. Inoltre, l'azione del passaggio del mouse va solo verso il basso, il che non è un vero effetto dell'otturatore. Vogliamo che il contenuto si apra sia verso l'alto che verso il basso dal centro. Per fare ciò dobbiamo fare quanto segue:

Apri le impostazioni delle righe e uniforma le altezze delle colonne.

Quindi vai alla scheda Avanzate e inserisci il seguente CSS personalizzato sotto l'Elemento principale:

align-items: center;

Ciò assicurerà che i moduli rimangano centrati verticalmente all'interno della colonna, dandoci quell'effetto otturatore verso l'alto e verso il basso.

Dare alla riga un'altezza fissa

Per evitare che l'effetto al passaggio del mouse spinga verso il basso il contenuto della pagina sottostante, è necessario impedire che la riga cresca in altezza a ogni passaggio del mouse. Per fare ciò dobbiamo impostare un'altezza fissa alla nostra riga sul desktop. Poiché l'altezza verrà fissata, dovrai assicurarti che l'altezza della riga sia sufficientemente alta da contenere l'altezza del contenuto del blurb nel suo stato al passaggio del mouse. Tuttavia, non vuoi renderlo troppo alto perché lascerai troppo spazio vuoto sopra e sotto i moduli. In questo esempio, imposterò l'altezza della riga su 600 px. Ma, poiché vogliamo solo l'altezza fissa impostata solo sul desktop, dobbiamo aggiungere alcuni CSS alle impostazioni della nostra pagina utilizzando una query multimediale.

Ecco cosa devi fare.

Prima di tutto, nelle impostazioni della riga, dai alla tua riga un ID CSS:

ID CSS: altezza fissa

Quindi apri le impostazioni della pagina (sotto la scheda avanzate) e aggiungi il seguente CSS personalizzato:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Ciò conferisce alla tua riga un'altezza fissa di 600 px sul desktop e impedisce all'effetto hover di spingere verso il basso il resto del contenuto della pagina.

Questo è tutto!

Il risultato finale

Guarda il progetto definitivo.

Ed ecco l'effetto hover dell'otturatore.

Potrebbe essere una buona idea disabilitare l'effetto hover sui dispositivi mobili. Per fare ciò, tutto ciò che devi fare è impostare il margine personalizzato per ciascun modulo blurb come segue:

Margine personalizzato (tablet): 0px in alto, 0px in basso

Pensieri finali

Questo effetto hover dell'otturatore è un modo creativo per stuzzicare il tuo pubblico per cercare ulteriori informazioni sui tuoi diversi servizi. E con la magia di Divi e alcuni frammenti di CSS, il risultato finale è piuttosto elegante. Sono sicuro che ci sono molte più applicazioni per questo effetto hover dell'otturatore poiché puoi usare qualsiasi modulo tu voglia. Sentiti libero di esplorare alcuni nuovi entusiasmanti design e non esitare a condividerli con noi. Non vedo l'ora di sentirti nei commenti.

Saluti!