Come posizionare i suggerimenti al passaggio del mouse ovunque sulla tua pagina con Divi
Pubblicato: 2019-08-28Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.
Questa settimana, come parte della nostra iniziativa di progettazione Divi in corso, ti mostreremo come creare e posizionare suggerimenti al passaggio del mouse ovunque sulla tua pagina con Divi. Questo è un ottimo modo per condividere informazioni collaterali con i tuoi visitatori senza includerle direttamente nella pagina.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il layout dei suggerimenti al passaggio del mouse
Per mettere le mani sul layout dei tooltip al passaggio del mouse gratuito, devi prima scaricarlo 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 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.
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!
Crea una nuova pagina usando il layout della home page di Dog Walker
Aggiungi nuova pagina
La prima cosa che devi fare è creare una nuova pagina andando su Pagine > Aggiungi nuovo . Continua dando un titolo alla tua pagina, pubblicando la pagina e passando a Visual Builder.
Carica la pagina di destinazione del passeggiatore di cani
Carica il layout della pagina di destinazione nella tua pagina successiva. Sebbene utilizzeremo questo pacchetto di layout per esaminare la tecnica dei suggerimenti al passaggio del mouse, puoi applicare questo approccio a qualsiasi tipo di layout su cui stai lavorando.
Crea design di suggerimenti al passaggio del mouse
Aggiungi nuova riga in fondo alla sezione
Struttura delle colonne (decidi quanti tooltip ti servono)
Dopo aver caricato il layout della pagina di destinazione, è il momento di iniziare a creare i suggerimenti al passaggio del mouse. Li aggiungeremo in un punto specifico della pagina, ma puoi posizionarli ovunque utilizzando le opzioni di traduzione di trasformazione. Individua la seguente sezione sulla tua pagina e aggiungi una riga di tre colonne in fondo ad essa:
Larghezza massima riga
Per assicurarci che i disegni delle descrizioni comandi appaiano nel punto giusto, utilizzeremo la stessa larghezza massima della riga utilizzata per la riga che si trova sopra di essa. Vai alle impostazioni di dimensionamento della riga e regola la larghezza massima di conseguenza:
- Larghezza massima: 1280 px
Spaziatura
Per ridurre lo spazio occupato dal contenitore di righe, rimuoveremo l'imbottitura superiore e inferiore predefinita nelle impostazioni di spaziatura.
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
straripamenti
Ci stiamo anche assicurando che gli overflow della riga siano visibili nella scheda Avanzate.
- Overflow orizzontale: visibile
- Overflow verticale: visibile
Aggiungi il modulo di testo della descrizione comando alla colonna 1
Aggiungi contenuto alla casella dei contenuti
Punto interrogativo
È ora di iniziare a creare il primo design del tooltip! Useremo un modulo di testo. Aggiungeremo uno span (per l'icona del tooltip) e un div (per il contenuto del tooltip) all'interno della casella del contenuto. Questo ci darà più libertà di modellare individualmente l'icona del tooltip al passaggio del mouse e il contenuto del tooltip. Inizia aggiungendo lo span e assegnandogli il "punto interrogativo" della classe.
Div descrizione comando
Continua aggiungendo un div alla casella del contenuto con la classe 'tooltip-content'. Aggiungi il contenuto della descrizione comando di tua scelta in questo div.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Open Sans
- Colore del testo: #ffffff
Impostazioni testo H3
Modifica anche le impostazioni del testo H3.
- Intestazione 3 Carattere: Amatic SC
- Colore testo titolo 3: #ffffff
- Intestazione 3 Dimensioni del testo: 30 px
Dimensionamento
Stiamo anche giocando con la larghezza e l'altezza del modulo per creare l'effetto al passaggio del mouse.
- Larghezza: 300 px
- Altezza: 42px
Spaziatura
Aggiungi anche un po' di imbottitura superiore.
- Imbottitura superiore: 10px
Visibilità predefinita
Ora, nello stato predefinito, vogliamo che tutto ciò che va sotto l'icona della descrizione comandi sia nascosto. Ecco perché nasconderemo gli overflow nella scheda Avanzate.
- Overflow orizzontale: nascosto
- Overflow verticale: nascosto
Visibilità al passaggio del mouse
Al passaggio del mouse, tuttavia, vogliamo che tutto venga visualizzato. Lo faremo rendendo visibili gli overflow al passaggio del mouse.
- Overflow orizzontale: visibile
- Overflow verticale: visibile
Aggiungi modulo codice sotto modulo testo
Ora che abbiamo definito lo stile del modulo, dobbiamo ancora definire lo span e il div all'interno della casella del contenuto utilizzando le classi CSS che gli abbiamo assegnato. Aggiungi un modulo di codice proprio sotto il modulo di testo della descrizione comando.
Aggiungi codice CSS ai div di stile nel modulo di testo
Aggiungi le seguenti righe di codice CSS per definire lo stile delle diverse parti del modulo di testo:
<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}
.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>
Duplica il modulo di testo della descrizione comandi due volte e posizionalo nelle colonne rimanenti
Una volta completata la prima colonna, puoi clonare due volte il modulo di testo della descrizione comando e posizionare i duplicati nelle due colonne rimanenti della riga.
Modifica il contenuto del tooltip
Assicurati di modificare il contenuto della descrizione comando di ciascun duplicato.
Modifica posizione descrizione comando (usando Trasforma Traduci)
Descrizione comando #1
Ultimo ma non meno importante, dovremo riposizionare i tooltip dove vogliamo sulla pagina. Per ottenere lo stesso identico risultato mostrato nell'anteprima di questo post, apri il primo modulo di testo del suggerimento e applica i seguenti valori di traduzione di trasformazione:
- A destra: -450 px (desktop), -2000 px (tablet), -1900 px (telefono)
Descrizione comando #2
Passa al modulo di testo della descrizione comando nella seconda colonna e modifica i valori di traduzione della trasformazione come segue:
- A destra: -400 px (desktop), -1300 px (tablet), -1250 px (telefono)
Descrizione comando n. 3
Fai la stessa cosa per il modulo di testo del tooltip nella colonna 3 e il gioco è fatto!
- A destra: -500 px (desktop), -600 px (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
In questo post, ti abbiamo mostrato come creare e posizionare suggerimenti al passaggio del mouse ovunque nella tua pagina senza la necessità di un plug-in aggiuntivo. Questo è un ottimo modo per aggiungere ulteriori informazioni senza includerle direttamente nella tua pagina. Questo tutorial sui casi d'uso fa parte della nostra iniziativa di progettazione Divi in corso, in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. Se hai domande, assicurati di lasciare una domanda nella sezione commenti qui sotto!
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.