Creazione di descrizioni di servizi a comparsa su Hover con Divi

La creazione di descrizioni dei servizi a comparsa al passaggio del mouse può essere un modo efficace per informare e coinvolgere gli utenti con informazioni aggiuntive. Proprio come un suggerimento, queste descrizioni a comparsa riveleranno più informazioni sul tuo servizio al passaggio del mouse. Ma con Divi, hai la suite completa di strumenti di progettazione disponibile nel generatore Divi per creare straordinari design a comparsa senza alcun CSS personalizzato aggiuntivo.

In questo tutorial, ti mostreremo quanto è facile creare descrizioni di servizi pop-out sul tuo sito Web Divi. Il trucco è posizionare i moduli in modo tale che scivolino uno dietro l'altro e fuoriescano ogni volta che si regola la larghezza della riga al passaggio del mouse.

Iniziamo!

Sbirciata

Scarica il layout GRATUITAMENTE

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!

Iscriviti al nostro canale Youtube

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

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai avere quanto segue:

1. Il tema Divi installato e attivo
2. Una nuova pagina creata per costruire da zero sul front-end (visual builder)
3. Immagini da utilizzare per contenuti fittizi. Useremo un paio del pacchetto di layout di Investment Company per questo tutorial.

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Creazione delle descrizioni dei servizi a comparsa su Hover con Divi

Crea la sezione e la riga

Innanzitutto, crea una nuova sezione regolare con una riga a una colonna.

Prima di aggiungere qualsiasi modulo, aggiorna le impostazioni della riga come segue:

Aggiungi un'immagine di sfondo scuro o un colore di sfondo scuro. Sto usando un'immagine di sfondo astratta dal pacchetto di layout della società di investimento. Ma se non vuoi usare quello, puoi semplicemente aggiungere un colore di sfondo di #161c29.

• Larghezza grondaia: 1
• Larghezza: 100%
• Altezza: 320 px (desktop), automatico (tablet e telefono)\
• Imbottitura: 0px in alto, 0px in basso

Aggiungi un modulo Blurb

Quindi aggiungi un modulo blurb alla tua riga.

E aggiorna le impostazioni del modulo blurb come segue:

• Titolo: Servizio
• Icona: vedi screenshot

Elimina anche il contenuto del corpo predefinito.

• Immagine di sfondo: aggiungi un'immagine di circa 320px per 215px
• Dimensione immagine di sfondo: adatta
• Posizione immagine di sfondo: in alto al centro

• Colore sfondo sfumato sinistro: rgba (31,72,192,0.61)
• Colore di sfondo sfumato a destra: #161c29
• Posizione di partenza: 34%
• Posizione finale: 71%
• Posiziona il gradiente sopra l'immagine di sfondo: S

• Colore icona: #ffffff
• Allineamento del testo: centro
• Carattere del titolo: Archivo
• Colore del testo del titolo: #ffffff
• Dimensione del testo del titolo: 38px
• titolo Spaziatura lettere: 4px
• Larghezza massima: 320 px
• Allineamento del modulo: centro
• Altezza: 320 px

• Imbottitura: 68px in alto
• Angoli arrotondati: 10px
• Indice Z: 1

L'aggiunta del valore dell'indice z 1 è fondamentale per assicurarsi che il modulo blurb rimanga al di sopra degli altri moduli che verranno eventualmente impilati dietro di esso.

Aggiungi un modulo di invito all'azione

Quindi dobbiamo aggiungere un modulo di invito all'azione che sarà posizionato a sinistra del modulo blurb.

Questa sarà la nostra prima delle due aree di contenuto che alla fine compariranno al passaggio del mouse.

Ora dobbiamo eliminare il colore di sfondo predefinito e aggiornare le impostazioni di progettazione come segue:

• Allineamento del testo: a sinistra
• Carattere del titolo: Archivo
• Dimensione del testo del titolo: 22px
• Larghezza: 320 px
• Allineamento del modulo: a sinistra (desktop), al centro (tablet e telefono)
• Altezza: 320 px (desktop), automatico (tablet e telefono)
• Margine: -320px (desktop), 0px (tablet e telefono)
• Imbottitura: 40px in alto, 40px a sinistra, 40px a destra

Duplica il modulo di invito all'azione e allinealo a destra

Per creare il secondo blocco di contenuto che apparirà a destra del blurb, possiamo distribuire la modalità di visualizzazione wireframe e duplicare il modulo di invito all'azione. Quindi apri le impostazioni del duplicato e aggiorna l'allineamento del modulo a destra.

Ecco come dovrebbe essere il design finora.

Creazione del pulsante

L'elemento finale che dobbiamo aggiungere al nostro design è il pulsante. Se lo desideri, puoi aggiungere un pulsante all'interno di uno dei moduli di invito all'azione. Ma per questo disegno ho pensato che sarebbe stato meglio aggiungere un pulsante che rimane visibile in fondo alla nostra riga.

Per creare il pulsante, distribuisci il modulo di visualizzazione wireframe e aggiungi un modulo pulsante direttamente sotto il secondo modulo di invito all'azione in modo che sia l'ultimo modulo nella riga/colonna.

Apri le impostazioni del modulo pulsante e quindi attiva la modalità di visualizzazione desktop in modo da modificare visivamente il pulsante.

Aggiungi il testo del pulsante "Ulteriori informazioni".

Quindi aggiorna lo stile del pulsante come segue:

• Allineamento dei pulsanti: centro
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #1f48c0
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 10 px
• Spaziatura lettere pulsanti: 4px
• Carattere pulsante: Archivo

Ora non ci resta che posizionare il nostro pulsante.

• Margine (desktop): -25px in alto
• Margine (tablet e telefono): 25 px in alto, 50 px in basso
• Indice Z: 2

Il valore dell'indice z di 2 assicurerà che il pulsante rimanga sopra il modulo blurb (che ha un indice az di 1).

Creazione dell'effetto hover pop out

Il principale effetto al passaggio del mouse di cui abbiamo bisogno per ottenere le descrizioni dei servizi a comparsa implica la modifica della larghezza della riga al passaggio del mouse. Per fare ciò dovremo dare alla nostra riga una larghezza ridotta per impostazione predefinita. In questo modo i moduli si impilano uno dietro l'altro e rimangono nascosti dietro il modulo blurb. Quindi espanderemo la larghezza della riga al passaggio del mouse per esporre i due moduli di invito all'azione nascosti.

Apri le impostazioni della riga e aggiorna la larghezza come segue:

• Larghezza massima (desktop): 320 px
• Larghezza massima (hover): 1080px
• Larghezza massima (tablet e telefono) 1080px

Quindi, per un tocco finale, aggiungi un raggio di bordo alla riga e aggiorna l'opzione di overflow di visibilità su visibile in modo che il pulsante non venga nascosto.

• Angoli arrotondati: 10px
• Overflow orizzontale: visibile
• Overflow verticale: visibile

Risultato finale

Dai un'occhiata alle descrizioni dei servizi pop-out finora.

Ed eccolo sul display del tablet e del telefono.

Altre opzioni di design da provare

È sempre divertente sperimentare più opzioni di design ora che abbiamo la configurazione di base in atto. Ecco alcuni suggerimenti che puoi provare per le descrizioni dei servizi pop-out.

Aggiungere un colore di sfondo alla sezione

Se lo desideri, puoi aggiungere un colore di sfondo alla sezione che corrisponda al colore/immagine di sfondo della riga per un design unico a comparsa.

Vai alle impostazioni della riga e aggiorna quanto segue:

• Colore di sfondo: #161c29

Quindi controlla il risultato.

Utilizzo di solo due moduli

Se desideri un pop-out più compatto utilizzando solo due moduli, puoi eliminare uno dei moduli di invito all'azione e quindi allineare il modulo blurb a sinistra in modo che i due diventino visibili al passaggio del mouse.

Per fare ciò, distribuire la modalità di visualizzazione wireframe. Quindi elimina il primo modulo di invito all'azione direttamente sotto il modulo blurb.

Successivamente, aggiorna il modulo blurb con un allineamento del modulo a sinistra.

• Allineamento del modulo: a sinistra (desktop), al centro (tablet)

Infine, diminuire la larghezza massima della riga al passaggio del mouse per renderla più compatta. Apri le impostazioni della riga e aggiorna quanto segue:

• Larghezza massima (al passaggio del mouse): 700 px
• Larghezza massima (tablet): 700 px

Questo è il risultato finale.

Ed eccolo su uno sfondo bianco.

Pensieri finali

La creazione di descrizioni di servizi pop-out al passaggio del mouse è un modo unico per coinvolgere i visitatori con i tuoi contenuti. Questa funzionalità funziona in modo molto simile a un suggerimento fantasioso e informativo ricco di tutte le funzionalità di progettazione di Divi. Ed è abbastanza facile da fare. Una volta che hai dimensionato e posizionato i moduli, tutto ciò che devi fare è regolare la larghezza della riga al passaggio del mouse. Sentiti libero di sperimentare diversi moduli e contenuti per ancora più applicazioni. Se non altro, spero che questo ti dia un po' più di ispirazione per fare di più con Divi.

Non vedo l'ora di sentirti nei commenti.

Saluti!