Vuoi usare gli effetti ombra e al passaggio del mouse in? Divi creare contenuto interattivo e fai risaltare il tuo sito web ?
Assicurati che il tuo sito web distinguersi da siti Web simili può essere difficile. Ma una volta che ci arrivi, vale quasi sempre lo sforzo e il pensiero che ci sono voluti.
Ti mostreremo come creare contenuto interattivo durante la creazione di siti Web con Divi.
Andiamo!
Panoramica
Prima di immergerci in questo tutorial, diamo una rapida occhiata al risultato che puoi aspettarti.
Computer desktop
Mobile
Iniziamo la realizzazione con Divi!
Guarda anche: Divi: come creare un menu a ruota che gira al passaggio del mousel
Aggiungi una nuova sezione
Colore di sfondo
Crea una nuova pagina o aprine una esistente e aggiungi una sezione regolare ad essa. Apri le impostazioni della sezione e cambia il colore di sfondo.
- Sfondo: #03006d
spaziatura
Quindi vai alle impostazioni di spaziatura delle sezioni e modifica come segue:
- Imbottitura (superiore e inferiore): 50px
Aggiungi una nuova linea
Struttura della colonna
Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura di colonne.
dimensionamento
Quindi vai alle impostazioni di ridimensionamento e lascia che la linea riempia l'intera larghezza dello schermo.
- Usa larghezza grondaia personalizzata: SÌ
- Larghezza grondaia: 1
- Larghezza: 100%
spaziatura
Modifichiamo anche le seguenti impostazioni di spaziatura:
- Imbottitura (a destra): 9vw (desktop), 5vw (tablet e telefono)
- Imbottitura (destra): 5vw (tablet e telefono)
Aggiungi un modulo di testo alla colonna 1
Aggiungi contenuto
Una volta che hai finito di modificare le impostazioni della riga, aggiungi il primo modulo di testo alla colonna 1.
Aggiungi il primo carattere come testo del paragrafo. Poi il contenuto che desideri venga visualizzato come testo dell'elenco.
Impostazioni di testo (desktop)
Quindi vai alla scheda Designe modificare le impostazioni predefinite del testo del paragrafo. Assicurati di utilizzare lo stesso colore per il testo e lo sfondo della sezione.
- Peso del carattere: Ultra grassetto
- Colore del testo: #03006d
- Dimensione del testo: 27vw (desktop), 0vw (tablet e telefono)
- Altezza della linea: 1,1 em
- Ombra del testo: vedi cattura
- Intensità sfocatura ombra: 0,01 em
- Colore ombra: #ffffff
- Allineamento del testo: a sinistra
Impostazioni del testo al passaggio del mouse
Per creare il piacevole effetto al passaggio del mouse, dovremo modificare queste impostazioni del testo del paragrafo al passaggio del mouse.
- Colore del testo (al passaggio del mouse): #ffffff
- Colore ombra (al passaggio del mouse): rgba (255,255,255,0)
Impostazioni elenco (desktop)
Continua andando alle impostazioni dell'elenco.
- Peso del carattere: leggero
- Colore testo elenco: #ffffff
- Dimensione testo elenco: 0px (desktop), 18px (tablet e telefono)
- Posizione stile: Cerchio
- Posizione stile elenco non ordinato: esterno
- Rientro elemento elenco non ordinato: 0px
Elenca le impostazioni del testo al passaggio del mouse (al passaggio del mouse)
Vogliamo che il testo dell'elenco appaia al passaggio del mouse. Questo è il motivo per cui cambieremo la dimensione del testo al passaggio del mouse.
- Dimensione testo elenco non ordinato (al passaggio del mouse): 18px
spaziatura
Continua andando alle impostazioni di spaziatura del modulo e apporta alcune modifiche anche lì.
- Margine (inferiore): 50px (tablet e telefono)
- Margine (a destra): -4vw (desktop), 0vw (tablet e telefono)
Clona il modulo di testo 4 volte e posiziona i duplicati nelle colonne rimanenti
Ora che abbiamo finito di modificare il primo modulo nella colonna 1, clona il modulo quattro volte. Quindi posiziona ciascuno dei duplicati nelle colonne rimanenti. Modificheremo ciascuno dei duplicati in modo che corrisponda a ciò che desideriamo.
Modifica il modulo Testo nella colonna 2
Modifica contenuto
Apri il duplicato nella colonna 2 e modifica il contenuto.
Cambia spaziatura
Quindi, vai alle impostazioni di spaziatura e modifica i valori dei margini personalizzati.
- Margine (inferiore): 50px (tablet e telefono)
- Margine (sinistra e destra): -2vw (desktop), 0vw (tablet e telefono)
- Margine destro: -2vw (desktop), 0vw (tablet e telefono)
Modifica il modulo Testo nella colonna 3
Modifica contenuto
Modificare anche il contenuto del duplicato nella colonna 3.
Cambia spaziatura
Con le impostazioni di spaziatura nella scheda progettazione.
- Margine (sinistra): 2,5 vw
- Margine (destra): 1,5 vw
Modifica il modulo Testo nella colonna 4
Modifica contenuto
Continua aprendo le impostazioni del modulo Testo nella colonna 4 e modifica anche il contenuto lì.
Cambia spaziatura
Quindi, vai alla scheda Design e modifica i valori dei margini personalizzati nelle impostazioni di Spaziatura.
- Margine (sinistra): -6vw
- Margine (destra): 2vw
Modifica il modulo Testo nella colonna 5
Contenuto
Fai spazio all'ultimo duplicato. Modifica il contenuto nell'area del contenuto.
Cambia spaziatura
Con impostazioni di spaziatura personalizzate.
- Margine (sinistra): -7vw
- Margine (destra): 3vw
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Leggi anche: Divi : Come personalizzare il carrello e le icone di ricerca del modulo “Menu a larghezza intera”.
ufficio
Mobile
Scarica DIVI ora!!!
Conclusione
Sappiamo quanto sia importante garantire che il tuo sito web si distingue dagli altri siti web. Con le opzioni integrate di Divi, puoi essere creativo quanto vuoi.
Questo articolo è un esempio di come creare contenuti interattivi al passaggio del mouse.
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.
...
