Come mostrare le funzionalità nelle schede Hover con Divi

Stai cercando modi nuovi e creativi per mostrare funzionalità e/o prodotti sulle tue pagine web? In tal caso, continua a leggere perché in questo post ti mostreremo come visualizzare le funzionalità nelle schede al passaggio del mouse utilizzando solo le opzioni integrate di Divi. Le possibilità che hai con questo approccio sono infinite e ti permetteranno sicuramente di comprendere Divi a un livello più profondo. L'effetto tab hover si verifica solo su ambienti desktop compatibili con il passaggio del mouse. Quando le schede al passaggio del mouse vengono visualizzate da schermi di dimensioni più piccole, le funzionalità verranno elencate nella loro forma originale.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo un'occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Iniziamo a creare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Sfondo sfumato

Aggiungi una nuova pagina o aprine una esistente e aggiungi una nuova sezione. Apri le impostazioni della sezione e aggiungi uno sfondo sfumato alla sezione. Useremo lo sfondo sfumato per coprire la parte sinistra delle schede al passaggio del mouse come puoi notare nelle schermate di stampa sopra.

• Colore 1: #f2f2f2
• Colore 2: #ffffff
• Direzione del gradiente: 87 gradi
• Posizione di partenza: 20%
• Posizione finale: 20%

Spaziatura

Quindi, rimuovi l'imbottitura superiore e inferiore personalizzata della sezione aggiungendo "0px" a entrambe le opzioni.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

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

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e cambia il colore di sfondo.

• Colore di sfondo: #ffffff

Allineamento delle righe

Modifica anche l'allineamento delle righe.

• Allineamento riga: a sinistra

Dimensionamento predefinito

E cambia anche le impostazioni di dimensionamento.

• Usa larghezza personalizzata: Sì
• Unità: PX
• Larghezza personalizzata: 400 px
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1

Dimensionamento al passaggio del mouse

Modifica l'opzione Larghezza personalizzata nelle impostazioni di ridimensionamento al passaggio del mouse. Ciò consentirà alla riga di espandersi durante il passaggio del mouse.

• Larghezza personalizzata: 2000 px

Spaziatura

Quindi, vai alle impostazioni di spaziatura e rimuovi i valori di riempimento superiore e inferiore predefiniti.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Bordo predefinito

Aggiungi "20px" nell'angolo in alto a destra della riga e aggiungi anche un bordo sinistro alla riga.

• Larghezza bordo sinistro: 20 px
• Colore bordo sinistro: #6d44ff

Confine al passaggio del mouse

Rimuovi l'angolo arrotondato in alto a destra "20px" al passaggio del mouse aggiungendo invece "0px".

Ombra casella predefinita

Ultimo ma non meno importante, aggiungi un'ombra sottile.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Forza di diffusione dell'ombra della scatola: -10px
• Colore ombra: rgba(0,0,0,0.11)

Ombra del riquadro al passaggio del mouse

E modifica il colore dell'ombra in un colore completamente trasparente al passaggio del mouse.

• Colore ombra: rgba (255,255,255,0)

Aggiungi modulo Blurb alla riga

Aggiungi contenuto

Ora che abbiamo finito di modificare tutte le impostazioni della riga, possiamo andare avanti e aggiungere un modulo Blurb alla colonna. Sentiti libero di usare qualsiasi altro modulo a tua scelta. Dopo aver aggiunto il modulo, aggiungi del contenuto a tua scelta.

Seleziona icona

Seleziona un'icona a tua scelta successivamente.

Impostazioni icona

E cambia l'aspetto dell'icona nelle impostazioni dell'icona.

• Colore icona: #5323ff
• Posizionamento delle icone: in alto
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 54px

Impostazioni predefinite del testo del titolo

Modifica le impostazioni del testo del titolo in seguito.

• Carattere del titolo: Poppins
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #5323ff
• Dimensione del testo del titolo: 25px
• Spaziatura delle lettere del titolo: -1px
• Altezza della riga del titolo: 1em

Passa il mouse sulle impostazioni del testo del titolo

E modifica l'altezza della riga del titolo al passaggio del mouse.

• Altezza della riga del titolo: 1,5 em

Impostazioni predefinite del corpo del testo

Quindi, vai alle impostazioni del testo del corpo e apporta alcune modifiche. Ciò include la modifica della dimensione del testo in "0px". Questo ci aiuterà a far apparire il corpo del testo solo al passaggio del mouse.

• Carattere del corpo: Poppins
• Peso del carattere del corpo: leggero
• Allineamento del corpo del testo: Centro
• Colore del corpo del testo: #000000
• Dimensioni del corpo del testo: 0 px (desktop), 15 px (tablet e telefono)
• Altezza della linea del corpo: 2.2em

Impostazioni del testo del corpo al passaggio del mouse

Per assicurarti che il corpo del testo appaia al passaggio del mouse, modifica le dimensioni del testo al passaggio del mouse.

• Dimensione del testo del corpo: 15px

Spaziatura predefinita

Per dare al modulo un po' di spazio per respirare, stiamo aggiungendo al modulo un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 80px
• Imbottitura inferiore: 80 px

Spaziatura al passaggio del mouse

Modificheremo le impostazioni di spaziatura al passaggio del mouse. Non sarai in grado di vedere il risultato finale prima di uscire da Visual Builder perché stiamo applicando le opzioni al passaggio del mouse sia alla riga che al modulo Blurb.

• Imbottitura superiore: 80px
• Imbottitura inferiore: 80 px
• Imbottitura sinistra: 20vw
• Imbottitura destra: 20vw

Clona riga 3 volte

Una volta che hai finito di modificare la prima riga e il suo modulo Blurb, puoi andare avanti e clonare la riga fino a tutte le volte che vuoi.

Modulo Modifica riga e blurb n. 2

Cambia la spaziatura delle righe

Apri il primo duplicato e aggiungi un margine sinistro personalizzato. Questo ci permetterà di creare l'effetto scala che potete notare nell'anteprima di questo post.

• Margine sinistro: 6vw

Cambia colore bordo riga

Cambia anche il colore del bordo sinistro della riga.

• Colore bordo sinistro: #00ffcc

Cambia contenuto e icona Blurb

Quindi, apri il Modulo Blurb e cambia l'icona.

Cambia il colore dell'icona del modulo Blurb

Insieme al colore dell'icona.

• Colore icona: #00eda6

Cambia il colore del testo del titolo

E il colore del testo del titolo.

• Colore del testo del titolo: #00eda6

Modifica riga e blurb modulo n. 3

Cambia la spaziatura delle righe

Aggiungi anche un margine sinistro personalizzato al secondo duplicato.

• Margine sinistro: 12vw

Cambia colore bordo riga

Cambia il colore del bordo della riga sinistra.

• Colore bordo sinistro:#afebff

Cambia contenuto e icona Blurb

Insieme all'icona e al contenuto del blurb.

Cambia il colore dell'icona del modulo Blurb

Modifica anche il colore dell'icona.

• Colore icona: #68d9ff

Cambia il colore del testo del titolo

E anche il colore del testo del titolo.

• Colore del testo del titolo: #68d9ff

Modulo Modifica riga e blurb n. 4

Cambia la spaziatura delle righe

Al prossimo e ultimo duplicato! Aggiungi un margine sinistro personalizzato alla riga.

• Margine sinistro: 18vw

Cambia colore bordo riga

Cambia anche il colore del bordo sinistro della riga.

• Colore bordo sinistro: #dd87cf

Cambia contenuto e icona Blurb

Apri il modulo Blurb nella riga e modifica l'icona e il contenuto del modulo.

Cambia il colore dell'icona del modulo Blurb

Insieme al colore dell'icona.

• Colore icona: #dd6aca

Cambia il colore del testo del titolo

E anche il colore del testo del titolo.

• Colore del testo del titolo: #dd6aca

Anteprima

Ora che abbiamo seguito il tutorial, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come utilizzare le opzioni integrate di Divi solo per creare schede al passaggio del mouse. Questo approccio ti aiuterà a condividere contenuti su funzionalità o prodotti in modo interattivo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!