Vorresti presentare le tue funzionalità o i tuoi prodotti sotto forma di scheda Divi con effetto hover?
Stai cercando nuovi modi creativi per mostrare funzionalità e/o prodotti sulle tue pagine web?
In tal caso, continua a leggere perché in questo articolo ti mostreremo come mostrare 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 sicuramente ti permetteranno di comprendere Divi a un livello più profondo.
L'effetto al passaggio del mouse sulla scheda si verificherà solo sul desktop. Su schermi di dimensioni inferiori, appariranno nelle loro forme normali.
Andiamo!
Panoramica
Prima di immergerci in questo tutorial, diamo un'occhiata al risultato che vogliamo ottenere.
Iniziamo il processo di creazione con Divi
Aggiungi una nuova sezione
Sfondo sfumato
Aggiungi una nuova pagina o apri una pagina esistente e aggiungi una nuova sezione. Apri le impostazioni della sezione e aggiungi uno sfondo sfumato alla sezione.
- Colore sinistro: #f2f2f2
- Colore giusto: #ffffff
- Direzione gradiente: 87 gradi
- Posizione sinistra: 20%
- Posizione giusta: 80%
spaziatura
Quindi, modificare le seguenti impostazioni di spaziatura:
- Imbottitura (superiore e inferiore): 0px
Aggiungi una nuova linea
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
Dimensionamento e allineamento
Nella scheda Design, tirare verso il basso l'opzione dimensionamento e modificare le seguenti impostazioni:
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 1
- Larghezza: 400px
- Allineamento delle righe: a sinistra
Dimensionamento al passaggio del mouse
Cambia opzione Larghezza nelle impostazioni di ridimensionamento al passaggio del mouse. Ciò consentirà alla linea di espandersi quando è in bilico.
- Larghezza (al passaggio del mouse): 2 pixel
spaziatura
Quindi vai alle impostazioni di spaziatura nell'opzione Spaziatura
- Imbottitura (superiore e inferiore): 0px
Confine (desktop)
Aggiungi "20px" nell'angolo in alto a destra della linea e aggiungi anche un bordo sinistro alla linea.
- Angoli arrotondati (desktop): 20px (angolo in alto a destra)
- Larghezza bordo sinistro: 20px
- Colore bordo sinistro: #6d44ff
Confine in bilico
Rimuovi l'angolo arrotondato in alto a destra di "20px" al passaggio del mouse aggiungendo invece "0px".
Box Shadow (Desktop)
Infine, aggiungi un'ombra sottile.
- Intensità sfocatura ombra scatola: 80px
- Box Shadow Spread Forza: -10px
- Colore ombra: rgba(0,0,0,0.11)
Passa l'ombra
E cambia il colore dell'ombra in un colore completamente trasparente al passaggio del mouse.
- Box Shadow: rgba(255,255,255,0)
Aggiungi il modulo Blurb alla riga
Aggiungi contenuto
Ora che abbiamo finito di modificare tutte le impostazioni di riga, possiamo andare avanti e aggiungere un modulo Blurb alla colonna. Sentiti libero di usare qualsiasi altro modulo a tua scelta.
Una volta aggiunto il modulo, aggiungine alcuni contenuto de votre choix.
Seleziona l'icona
Quindi seleziona un'icona a tua scelta.
Impostazioni delle icone
E cambia l'aspetto dell'icona nelle impostazioni dell'icona. Vai alla scheda Design
- Colore icona: #5323ss
- Posizionamento immagine/icona: in alto
- Larghezza immagine/icona: 50px
Impostazioni del titolo del testo (desktop)
Quindi modificare le impostazioni del titolo.
- Carattere del titolo: Poppins
- Allineamento del testo: centrato
- Colore del testo del titolo: #5323ff
- Dimensione del testo del titolo: 25px
- Spaziatura lettere: -1px
- Altezza della linea: 1 em
Impostazioni del titolo del testo al passaggio del mouse
E cambia l'altezza della riga del titolo al passaggio del mouse.
- Altezza riga del titolo: 1,5 em
Impostazioni del corpo del testo (desktop)
Quindi, vai alle impostazioni del corpo del testo 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 testo: centrato
- Colore del corpo del testo: #000000
- Dimensione del corpo del testo: 0px (desktop), 15px (tablet e telefono)
- Altezza della linea: 2,2 em
Impostazioni del corpo del testo al passaggio del mouse
Per assicurarti che il corpo del testo venga visualizzato al passaggio del mouse, modifica le dimensioni del testo al passaggio del mouse.
- Dimensione del corpo del testo: 15px
Spaziatura (desktop)
Per dare spazio al modulo, modifichiamo i seguenti parametri di spaziatura:
- Imbottitura (superiore e inferiore): 80px
Spaziatura al passaggio del mouse
Modificheremo le impostazioni di spaziatura al passaggio del mouse.
- Imbottitura (superiore e inferiore): 80px
- Imbottitura (sinistra e destra): 20vw
Clona la 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 tutte le volte che vuoi.
Modifica linea e modulo blurb n. 2
Cambia il colore del bordo della linea
Iniziamo cambiando il colore del bordo sinistro della linea.
- Colore bordo sinistro: #00ffcc
Modifica contenuto e icona Blurb
Quindi, apri le impostazioni del modulo Blurb e cambia l'icona.
Cambia il colore dell'icona del modulo di sfocatura
Con il colore dell'icona.
- Colore icona: #00eda6
Cambia il colore del titolo
E il colore del testo del titolo.
- Colore del testo del titolo: #00eda6
Modifica linea e modulo Burb #3
Colore bordo linea
Cambiamo il colore del bordo della linea sinistra.
- Colore bordo sinistro: #afebff
Modifica contenuto e icona Blurb
Cambiamo anche l'icona e contenuto del testo di presentazione.
Cambia il colore dell'icona del modulo di sfocatura
Cambia 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
Modifica linea e modulo blurb n. 4
Cambia il colore del bordo della linea
Nel modulo successivo e ultimo, cambia anche il colore del bordo sinistro della linea.
- Colore bordo sinistro: #dd87cf
Modifica contenuto e icona Blurb
Apri il modulo Blurb nella riga e modifica l'icona e il file contenuto du modulo.
Cambia il colore dell'icona del modulo di sfocatura
Con il 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
Panoramica
Ora che abbiamo esaminato il tutorial, diamo un'ultima occhiata al risultato.
Scarica DIVI ora!!!
Conclusione
In questo articolo, ti abbiamo mostrato come utilizzare le opzioni integrate di Divi solo per creare schede disponibili al passaggio del mouse.
Questo approccio ti aiuterà a condividere i contenuti su funzionalità o prodotti in modo interattivo.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
