Come rivelare il contenuto della colonna su Hover con Divi (download gratuito!)

In uno degli ultimi post di Divi, ti abbiamo mostrato come far apparire il contenuto delle righe nascoste al passaggio del mouse. Oggi ti mostreremo come utilizzare lo stesso tipo di approccio per rivelare invece il contenuto della colonna. L'approccio che tratteremo è simile e ti consentirà di creare tutti i tipi di design che hanno un bell'effetto al passaggio del mouse sul desktop, ma funzionano bene anche per schermi di dimensioni più piccole senza opzioni di passaggio del mouse.

Speriamo che questo tutorial ti ispiri a creare tutti i tipi di design interattivi per i siti web che costruisci! Alla fine del post, sarai in grado di scaricare il file JSON e modificarlo in base alle tue esigenze.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Come puoi notare nella GIF di seguito, abbiamo una transizione fluida al passaggio del mouse che rivela il contenuto della colonna al passaggio del mouse.

Mobile

Su schermi di dimensioni più piccole, invece, il contenuto della colonna verrà già mostrato senza bisogno di passare il mouse.

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione regolare

Spaziatura

Apri una pagina nuova o esistente e aggiungi una sezione normale. Apri le impostazioni della sezione e aggiungi un riempimento personalizzato in alto e in basso nelle impostazioni di spaziatura.

• Imbottitura superiore: 10vw
• Imbottitura inferiore: 15vw

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e apporta alcune modifiche alle impostazioni di dimensionamento. Queste impostazioni consentiranno alla riga di occupare l'intera larghezza dello schermo e aiuteranno anche a rimuovere tutto lo spazio tra le colonne.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Spaziatura

Vai alle impostazioni di spaziatura della riga successiva. Qui, sostituiremo lo spazio che abbiamo rimosso nel passaggio precedente aggiungendo valori di riempimento personalizzati.

• Imbottitura sinistra: 8vw
• Imbottitura destra: 8vw
• Colonna 1 Imbottitura destra: 2vw
• Colonna 2 Imbottitura sinistra: 1vw
• Imbottitura destra colonna 2: 1vw
• Imbottitura sinistra colonna 3: 2vw

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Inizia con un modulo di testo nella colonna 1. Aggiungi del contenuto H3 a tua scelta.

Impostazioni testo H3

Quindi, vai alle impostazioni del testo dell'intestazione e apporta alcune modifiche all'aspetto del contenuto di H3.

• Intestazione 3 Font: Didact Gothic
• Intestazione 3 Peso del carattere: grassetto
• Intestazione 3 Allineamento del testo: Centro
• Colore testo titolo 3: #3567ff
• Titolo 3: Dimensione testo: 1.2vw (desktop), 20px (tablet e telefono)

Spaziatura

Aggiungi alcuni valori di spaziatura personalizzati al modulo di testo successivo.

• Margine inferiore: 4vw
• Imbottitura superiore: 4vw
• Imbottitura inferiore: 4vw

Scatola ombra

E dai al modulo un'ombra sottile.

• Posizione verticale dell'ombra del riquadro: 36px
• Forza sfocatura ombra scatola: 60 px
• Colore ombra: rgba(0,0,0,0.06)

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Continua aggiungendo un altro modulo di testo proprio sotto il precedente. Aggiungi del contenuto del paragrafo a tua scelta.

Impostazioni testo

Quindi, vai alla scheda Design e apporta alcune modifiche alle impostazioni del testo.

• Carattere del testo: Open Sans
• Dimensione del testo: 0.8vw (desktop), 14px (tablet e telefono)
• Spaziatura delle lettere del testo: -0.05vw
• Altezza riga di testo: 2,2 em
• Orientamento del testo: giustificato
• Colore del testo: scuro

Spaziatura

Gioca anche con il margine personalizzato e i valori di riempimento nelle impostazioni di spaziatura.

• Margine inferiore: 3vw
• Imbottitura superiore: 2vw
• Imbottitura inferiore: 2vw
• Imbottitura sinistra: 4vw
• Imbottitura destra: 4vw

Frontiera

E aggiungi un bordo sinistro e destro al modulo utilizzando le seguenti impostazioni:

• Larghezza bordo destro: 1px
• Colore bordo destro: #e5e5e5

Aggiungi modulo pulsante alla colonna 1

Aggiungi copia

Il modulo successivo di cui abbiamo bisogno nella prima colonna è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento

Quindi, vai alla scheda Design e modifica l'allineamento del pulsante al centro.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Continua aprendo le impostazioni del pulsante e modifica l'aspetto del pulsante per adattarlo al design generale che intendiamo ottenere.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 15px (tablet e telefono)
• Colore del testo del pulsante: #000000
• Larghezza bordo pulsante: 1px
• Colore bordo pulsante: #dddddd
• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: -0.05vw
• Peso del carattere: grassetto
• Stile carattere: maiuscolo

Spaziatura

Gioca anche con i valori di spaziatura del modulo pulsanti.

• Margine inferiore: 100 px (tablet e telefono)
• Imbottitura superiore: 0.8vw (desktop), 10px (tablet e telefono)
• Imbottitura inferiore: 0.8vw (desktop), 10px (tablet e telefono)
• Imbottitura sinistra: 3.5vw (desktop), 50px (tablet e telefono)
• Imbottitura destra: 3.5vw (desktop), 50px (tablet e telefono)

Clona moduli nella colonna 1 due volte e posiziona i duplicati nelle colonne rimanenti

Una volta che hai finito di aggiungere i tre diversi moduli alla colonna 1, puoi andare avanti e clonare ciascuno dei moduli due volte. Posiziona i duplicati nelle due colonne rimanenti per ottenere lo stesso design in ciascuna delle colonne.

Cambia il colore del testo del modulo di testo n. 1 nella colonna 2

Apri il primo modulo di testo nella colonna 2 e cambia il colore del testo.

• Colore testo titolo 3: #6d28c1

Cambia il colore del testo del modulo di testo n. 1 nella colonna 3

Fai la stessa cosa per il primo modulo di testo nella terza colonna.

• Colore testo titolo 3: #15668e

Aggiungi modulo di testo sovrapposto alla colonna 1

Aggiungi contenuto

Ora che abbiamo tutto il contenuto della colonna di cui abbiamo bisogno, possiamo aggiungere l'elemento sovrapposto che nasconderà il contenuto prima del passaggio del mouse. Per raggiungere questo obiettivo, utilizzeremo un altro modulo di testo. Vai avanti e aggiungine un altro alla prima colonna. Assicurati che questo sia l'ultimo modulo della colonna. Aggiungi alcuni contenuti a tua scelta.

Sfondo sfumato

Continua aggiungendo uno sfondo sfumato al modulo.

• Colore 1: #6a30ff
• Colore 2: #3567ff
• Direzione gradiente: 124 gradi

Impostazioni testo

Modifica le impostazioni del testo in seguito.

• Carattere del testo: Didact Gothic
• Colore del testo: #ffffff
• Dimensione del testo: 2vw
• Orientamento del testo: al centro

Spaziatura

E crea una forma dal modulo aggiungendo alcuni valori di riempimento personalizzati. Stiamo anche aggiungendo un margine superiore negativo per creare la sovrapposizione tra questo modulo e il contenuto della colonna. Il contenuto che nascondi dietro il modulo di testo non sarà cliccabile. Ecco perché è importante mantenere l'invito all'azione, come il pulsante nel nostro esempio, visibile senza passaggio del mouse.

• Margine superiore: -38vw
• Imbottitura superiore: 15vw
• Imbottitura inferiore: 15vw

Frontiera

Aggiungi alcuni angoli arrotondati al modulo di testo successivo.

Scatola ombra

Insieme a un'ombra sottile della scatola.

• Forza sfocatura ombra scatola: 40 px
• Colore ombra: rgba(0,0,0,0.16)

Filtri predefiniti

Quindi, vai alle impostazioni dei filtri e assicurati che l'opacità sia "100%" per impostazione predefinita.

• Opacità: 100%

Filtri al passaggio del mouse

Cambia l'opacità al passaggio del mouse su "0%". Ciò farà scomparire il modulo e consentirà invece di visualizzare tutto il contenuto della colonna.

• Opacità: 0%

CSS personalizzato

Per assicurarti che il modulo di testo rimanga in cima a tutto il contenuto della colonna, aggiungi due righe di codice CSS nella scheda avanzata del modulo di testo.

z-index: 99;
position: relative

Visibilità

E nascondi l'intero modulo su tablet e telefono. Come menzionato all'inizio di questo post, stiamo mostrando tutti i contenuti delle colonne su schermi di dimensioni più piccole per assicurarci che l'esperienza utente dei visitatori sia buona.

Clona il modulo di testo in sovrapposizione due volte e posiziona i duplicati nelle colonne rimanenti

Una volta che hai finito di modificare il modulo di testo in sovrimpressione, vai avanti e clonalo due volte. Posiziona ciascuno dei duplicati nelle due colonne rimanenti.

Modifica sfondo sfumato del modulo di testo sovrapposto nella colonna 2

Cambia il colore di sfondo sfumato del primo duplicato.

• Colore 1: #d530ff
• Colore 2: #6d28c1

Modifica sfondo sfumato del modulo di testo sovrapposto nella colonna 3

E fai lo stesso anche per il secondo duplicato.

• Colore 1: # 41ff30
• Colore 2: #15668e

Scarica la sezione GRATIS

Per mettere le mani sulla sezione di rivelazione della colonna, dovrai prima scaricarla 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!

Anteprima

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come rivelare il contenuto della colonna al passaggio del mouse. Puoi utilizzare questo approccio per qualsiasi tipo di sito web che crei per aggiungere un ulteriore livello di interazione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!