Utilizzo delle ombre di testo al passaggio del mouse per creare contenuti interattivi con Divi

Far risaltare il tuo sito web da siti simili può essere difficile, ma una volta che ci riesci, ne vale quasi sempre la pena e il pensiero che ci è stato dedicato. Per aiutarti a trarre ispirazione, ti mostreremo come creare contenuti interattivi durante la creazione di siti Web con Divi.

L'esempio che ricreeremo in questo tutorial funzionerà particolarmente bene per qualsiasi pagina su su cui stai lavorando. Sarai in grado di condividere fatti o informazioni aziendali al passaggio del mouse utilizzando le opzioni di ombreggiatura del testo integrate di Divi. Ci stiamo anche assicurando che questi effetti al passaggio del mouse non si applichino su schermi di dimensioni più piccole in modo che le informazioni e l'esperienza mobile non vadano perse.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato che puoi aspettarti.

Desktop

Mobile

Ci stiamo assicurando che tutte queste interazioni al passaggio del mouse non si applichino a schermi di dimensioni più piccole. Utilizzando la stessa sezione e gli stessi moduli, otterremo invece il seguente semplice risultato:

Approccio

• L'esempio che ricreeremo è ottimo per le pagine, ma puoi farlo funzionare con qualsiasi parola di 5 o 6 caratteri (associala alla struttura della colonna)
• Ciascuno dei personaggi sarà dedicato a un singolo modulo di testo
• Utilizziamo una riga con un numero sufficiente di colonne per collegare i diversi caratteri della parola e farli apparire come se fossero stati creati nello stesso modulo
• Per impostazione predefinita, faremo in modo che il colore del testo del modulo di testo corrisponda al colore di sfondo della sezione
• Per assicurarci che il carattere rimanga leggibile, applicheremo anche un'ombra di testo bianca al carattere
• Una volta posizionato il carattere, l'ombra del testo scomparirà e il colore del testo cambierà, dandoti la sensazione che il testo si stia riempiendo
• Passando il mouse su un personaggio, verranno visualizzate anche alcune informazioni aggiuntive
• Su schermi di dimensioni più piccole, i fatti e/o le informazioni sull'azienda saranno presenti fin dall'inizio

Iniziamo a ricreare!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione

Colore di sfondo

Apri una pagina nuova o esistente e aggiungi una sezione normale. Apri le impostazioni della sezione e cambia il colore di sfondo.

• Colore di sfondo: #0306d

Spaziatura

Quindi, vai alle impostazioni di spaziatura della sezione e aggiungi un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e consenti alla riga di occupare l'intera larghezza dello schermo. Questo è un passaggio importante perché ci consentirà di determinare la distanza manualmente, utilizzando le unità di visualizzazione.

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

Spaziatura

Nel passaggio precedente, ci siamo sbarazzati di tutte le impostazioni di dimensionamento predefinite fornite con una nuova riga. Tuttavia, dobbiamo aggiungere manualmente un po' di riempimento. Qui, stiamo usando le unità di visualizzazione per assicurarci che il risultato rimanga lo stesso per tutte le dimensioni dello schermo del desktop.

• Imbottitura sinistra: 9vw (desktop), 5vw (tablet e telefono)
• Imbottitura destra: 5vw (tablet e telefono)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

Una volta che hai finito di modificare le impostazioni della riga, puoi andare avanti e aggiungere il primo modulo di testo alla colonna 1. Aggiungi il primo carattere come testo del paragrafo e il contenuto che vuoi che appaia al passaggio del mouse come testo dell'elenco.

Impostazioni di testo predefinite

Quindi, vai alla scheda Progettazione e modifica le impostazioni di testo del paragrafo predefinite. Assicurati di utilizzare lo stesso colore sia per il testo che per lo sfondo della sezione.

• Peso del carattere del testo: Ultra grassetto
• Colore del testo: #0306d
• Dimensione del testo: 27vw (desktop), 0vw (tablet e telefono)
• Altezza riga di testo: 1.1em
• Intensità della sfocatura dell'ombra del testo: 0.01em
• Colore ombra del testo: #ffffff
• Orientamento del testo: a sinistra

Impostazioni testo al passaggio del mouse

Per creare il simpatico effetto al passaggio del mouse, dovremo modificare queste impostazioni del testo del paragrafo al passaggio del mouse. Nota come ora stiamo usando un colore dell'ombra del testo completamente trasparente per farlo scomparire.

• Colore del testo: #ffffff
• Colore dell'ombra del testo: rgba (255,255,255,0)

Impostazioni testo elenco predefinito

Continua andando alle impostazioni del testo dell'elenco. Una parte importante di queste impostazioni è assicurarsi che la dimensione del testo sul desktop sia "0px", ma aggiungendo "18px" come dimensione del testo per schermi di dimensioni inferiori. Ciò assicurerà che il testo dell'elenco venga visualizzato su schermi di dimensioni più piccole ma non sul desktop senza che venga spostato con il mouse.

• Peso del carattere dell'elenco non ordinato: leggero
• Colore testo elenco non ordinato: #ffffff
• Dimensioni del testo dell'elenco non ordinato: 0 px (desktop), 18 px (tablet e telefono)
• Colore dell'ombra del testo dell'elenco non ordinato: rgba(255,255,255,0)
• Tipo di stile elenco non ordinato: cerchio
• Stile elenco non ordinato Posizione: esterno
• Rientro elemento elenco non ordinato: 0px

Impostazioni testo elenco al passaggio del mouse

Vogliamo che il testo dell'elenco appaia al passaggio del mouse. Ecco perché cambieremo la dimensione del testo al passaggio del mouse. Assicurati che la dimensione del testo che usi al passaggio del mouse sia la stessa della dimensione del testo che usi su schermi di dimensioni più piccole. Ciò contribuirà a garantire che non vi sia alcun effetto al passaggio del mouse su schermi di dimensioni più piccole.

• Dimensioni testo elenco non ordinato: 18 px

Spaziatura

Continua andando alle impostazioni di spaziatura del modulo e apporta alcune modifiche anche lì.

• Margine inferiore: 50 px (tablet e telefono)
• Margine destro: -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, possiamo andare avanti e clonare il modulo quattro volte e posizionare ciascuno dei duplicati nelle colonne rimanenti. Nei prossimi passaggi, modificheremo ciascuno dei duplicati in modo che corrisponda al nuovo personaggio.

Modifica modulo di 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: 50 px (tablet e telefono)
• Margine sinistro: -2vw (desktop), 0vw (tablet e telefono)
• Margine destro: -2vw (desktop), 0vw (tablet e telefono)

Modifica modulo di testo nella colonna 3

Modifica contenuto

Modifica anche il contenuto del duplicato nella colonna 3.

Cambia spaziatura

Insieme alle impostazioni di spaziatura nella scheda Progettazione.

• Margine inferiore: 50 px (tablet e telefono)
• Margine sinistro: -5.5vw (desktop), 0vw (tablet e telefono)
• Margine destro: 1.5vw (desktop), 0vw (tablet e telefono)

Modifica modulo di testo nella colonna 4

Modifica contenuto

Continua aprendo il Modulo di testo nella colonna 4 e modifica anche qui il contenuto.

Cambia spaziatura

Quindi vai alla scheda Progettazione e modifica i valori dei margini personalizzati nelle impostazioni di spaziatura.

• Margine inferiore: 50 px
• Margine sinistro: -6vw (desktop), 0vw (tablet e telefono)
• Margine destro: 2vw (desktop), 0vw (tablet e telefono)

Modifica modulo di testo nella colonna 5

Modifica contenuto

All'ultimo duplicato. Modificare il contenuto nella casella del contenuto.

Cambia spaziatura

Insieme alle impostazioni di spaziatura personalizzate.

• Margine inferiore: 50 px
• Margine sinistro: -7vw (desktop), 0vw (tablet e telefono)
• Margine destro: 3vw (desktop), 0vw (tablet e telefono)

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

Sappiamo quanto sia importante far risaltare il tuo sito web da altri siti web là fuori. Con le opzioni integrate di Divi, puoi essere creativo quanto vuoi. Questo post è un esempio di come puoi creare contenuti interattivi al passaggio del mouse assicurandoti che tutto rimanga semplice su schermi di dimensioni più piccole. Puoi utilizzare l'esempio che abbiamo ricreato per qualsiasi pagina di informazioni su cui stai attualmente lavorando. È un ottimo modo per condividere alcuni fatti e informazioni aggiuntive sulla tua azienda mentre interagisci con i tuoi visitatori. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!