Come etichettare un'immagine di sfondo con tooltip coinvolgenti in Divi

L'aggiunta di suggerimenti per etichettare un'immagine di sfondo è un modo creativo per coinvolgere i visitatori con informazioni preziose sul tuo prodotto o servizio. L'idea di base è posizionare le icone (o il testo) in posizioni specifiche sull'immagine (come una mappa di Google con punti di riferimento). E se sfrutti gli effetti al passaggio del mouse di Divi, puoi rivelare testo aggiuntivo quando passi con il mouse su un'icona per creare suggerimenti accattivanti.

In questo tutorial, ti mostrerò come etichettare un'immagine di sfondo con blurb che serviranno come suggerimenti informativi sul tuo prodotto. Per fare ciò, utilizzerò la pagina di destinazione della palestra fitness per etichettare un'immagine di sfondo con informazioni sulla forma fisica di qualità.

Iniziamo.

Una sbirciata

Ecco un'anteprima del design che costruiremo in questo tutorial.

Quello di cui hai bisogno

Per questo tutorial, avrai bisogno di quanto segue:

• Il tema Divi
• La pagina di destinazione della palestra fitness dal pacchetto layout palestra fitness (disponibile da Divi Builder)
• Un'immagine da utilizzare per l'immagine di sfondo che è esattamente 320 px per 507 px. Sentiti libero di trascinarlo sul desktop e usarlo per questo tutorial.
  

Preparazione del layout predefinito

Per iniziare, crea una nuova pagina, aggiungi un titolo e quindi distribuisci Visual Builder. Quindi seleziona "Scegli un layout predefinito". Dal popup di caricamento dalla libreria, seleziona il layout della pagina di destinazione della palestra e fai clic su "Usa questo layout".

Una volta caricato il layout nella pagina, scorrere verso il basso fino alla quarta sezione con la riga di due colonne che ha il titolo "Programmi in primo piano" nella colonna di destra. Aggiungeremo la nostra immagine di sfondo con i suggerimenti nella colonna di sinistra di questa riga.

Utilizzare l'editor in linea per modificare il testo del titolo nella colonna di destra in "Smart Fitness".

Aggiunta dell'immagine di sfondo e personalizzazione delle impostazioni della riga

Con questo design, il dimensionamento e la spaziatura sono cruciali e dovranno essere precisi. E tutto inizia con la dimensione della nostra immagine di sfondo. Come accennato prima, l'immagine che usiamo per lo sfondo dovrebbe essere 320px per 507px. Poiché una larghezza di 320 px è un buon punto di partenza per i dispositivi mobili, questo ci consentirà di rendere il design ottimizzato per i dispositivi mobili senza dover modificare le dimensioni della nostra immagine.

Apri le impostazioni della riga e aggiungi l'immagine di sfondo alla colonna 1. Quindi aggiorna quanto segue:

Colonna 1 Dimensione immagine di sfondo: dimensione effettiva
Colonna 1 Posizione immagine di sfondo: Centro a sinistra
Colonna 1 Immagine di sfondo Ripeti: nessuna ripetizione

Quindi dobbiamo aggiungere una larghezza personalizzata alla riga ed eliminare la spaziatura superiore e inferiore.

Larghezza personalizzata: 700 px
Imbottitura personalizzata: 0px in alto, 0px in basso

Impostando la larghezza su 700 px, la riga non si rimpicciolisce su schermi di dimensioni inferiori prima del punto di interruzione del tablet.

A questo punto, penso che sia una buona idea andare avanti e impostare un'altezza specifica per la colonna 1 uguale all'altezza dell'immagine di sfondo. In questo modo sappiamo che l'immagine rimarrà visibile se il contenuto della colonna non espone l'intera immagine. Per fare ciò, vai alla scheda Avanzate e aggiungi il seguente CSS personalizzato nell'Elemento principale della colonna 1:

height: 507px;

Ora l'altezza della colonna è uguale all'altezza della tua immagine e non dipenderà dal contenuto (o dai moduli) che aggiungiamo alla riga.

Aggiungere le etichette dei suggerimenti sull'immagine di sfondo usando Blurbs

Con la nostra immagine di sfondo in posizione, possiamo iniziare ad aggiungere i nostri blurb che verranno posizionati e stilizzati per funzionare come suggerimenti. Vai avanti e aggiungi un modulo blurb alla colonna 1 e aggiorna le seguenti impostazioni del blurb:

Titolo: "Messa a fuoco"
Contenuto: "La chiave del successo!"
Usa icona: Sì
Icona: vedi screenshot

È importante mantenere il titolo e il contenuto solo di poche parole perché vogliamo essere in grado di adattare l'intero blurb all'interno dell'immagine di sfondo.

Successivamente, aggiornerai le impostazioni di progettazione. Questo è un design più avanzato di un blurb, quindi ci sono molte opzioni da cambiare insieme ad alcuni effetti al passaggio del mouse che riveleranno il contenuto del blurb al passaggio del mouse. Aggiorna le seguenti impostazioni di design del blurb:

Colore icona: #edf000
Icona del cerchio: S
Colore del cerchio: rgba(0,0,0,0)
Mostra bordo cerchio: S
Colore bordo cerchio (predefinito): rgba(0,0,0,0)
Colore bordo cerchio (passa il mouse): #edf000
Posizionamento immagine/icona: a sinistra
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 40px

Continua a regolare le impostazioni del design come segue:

Peso del carattere del titolo: grassetto
Colore del testo del titolo (predefinito): rgba(0,0,0,0)
Colore del testo del titolo (predefinito): #edf000
Colore del corpo del testo (predefinito): rgba(0,0,0,0)
Colore del corpo del testo (predefinito): #ffffff

(Nota che i colori del testo predefiniti sono completamente trasparenti per nasconderli finché non passi con il mouse sopra il blurb.)

Margine personalizzato: 15 px in alto, 0 px in basso, 90 px a sinistra
Imbottitura personalizzata: 5 pixel in alto, 5 pixel in basso, 5 pixel a destra

(Il margine personalizzato è il modo in cui posizioni l'icona blurb in una posizione specifica sull'immagine.)

Box Shadow: vedi screenshot
Posizione orizzontale dell'ombra del riquadro: -154px
Posizione verticale dell'ombra del riquadro: 0px
Colore ombra (predefinito): rgba(0,0,0,0)
Colore ombra (al passaggio del mouse): #1e2441

(L'ombra della casella è un modo creativo per aggiungere un colore di sfondo dietro il contenuto del blurb. Per impostazione predefinita, l'ombra della casella è completamente trasparente ma mostrerà un bel colore blu al passaggio del mouse.)

Ora vai a controllare il risultato finale del tuo primo blurb per assicurarti che l'effetto al passaggio del mouse e il design siano corretti.

Successivamente, possiamo duplicare il modulo blurb per creare la nostra seconda etichetta del tooltip. Dopo aver duplicato il blurb, puoi aggiornare il contenuto con il testo che desideri (mantienilo breve). Quindi tutto ciò che devi fare è posizionare la descrizione comando utilizzando un margine personalizzato diverso come segue:

Margine personalizzato: 0 px in alto, 0 px in basso, 15 px a sinistra

Per creare il terzo contrassegno, puoi duplicare il secondo contrassegno.

Per questa terza descrizione, esauriremo lo spazio sul lato destro della nostra immagine, quindi non avremo davvero molto spazio per i contenuti. Potremmo usare il margine negativo per estendere il blurb all'esterno dell'immagine, ma questo si estenderebbe anche oltre la dimensione dello schermo di 320 px sui dispositivi mobili. Quindi, introdurremo alcuni piccoli frammenti di codice per capovolgere il nostro contenuto del blurb in modo che l'icona sia a destra e il testo a sinistra. Per fare ciò, apri le impostazioni del blurb e, nella scheda Avanzate, aggiungi il seguente CSS personalizzato.

Elemento principale CSS:

direction: rtl;

Blurb immagine CSS:

padding-left: 15px;

Se non l'hai notato, l'icona è ora sulla destra. Ora tutto ciò che devi fare è posizionare il blurb utilizzando il seguente margine personalizzato:

Margine personalizzato: 35 px in alto, 0 px in basso, 0 px a sinistra

Dobbiamo anche regolare l'ombra della scatola in modo che provenga da sinistra anziché da destra come segue:

Posizione orizzontale dell'ombra del riquadro: 150 px

Ora controlla il tooltip invertito sul sito live.

Per l'ultimo contrassegno, copia il primo contrassegno nella parte superiore della colonna e incollalo sotto il terzo contrassegno.

Quindi aggiornare il margine come segue:

Margine personalizzato: 0 px in alto, 100 px a sinistra

Ora controlla il risultato finale del design!

E dai un'occhiata a quegli effetti al passaggio del mouse del tooltip!

È reattivo?

Questo design è stato costruito pensando ai dispositivi mobili fin dall'inizio. L'immagine ha una larghezza di 320px, che è la larghezza della maggior parte dei piccoli smartphone. E poiché abbiamo dimensionato e posizionato tutto utilizzando un'unità di lunghezza in pixel, il design (comprese le descrizioni comandi) non si sposta quando regoliamo le dimensioni del browser.

Tuttavia, c'è un'altra cosa che potresti dover fare per assicurarti e massimizzare la larghezza dell'immagine sui piccoli schermi del telefono. Per impostazione predefinita, la tua riga avrà una larghezza dell'80% sui dispositivi mobili, quindi per renderlo al 100%, puoi aggiungerlo come CSS personalizzato all'elemento principale della tua riga in questo modo:

width: 100%;

La tua larghezza personalizzata di 700 px continuerà a essere utilizzata come larghezza massima su desktop, ma ora sarà al 100% su dispositivi mobili.

Pensieri finali

Etichettare un'immagine di sfondo con suggerimenti ed effetti al passaggio del mouse come questo può aggiungere un elemento di design professionale che coinvolge il pubblico con informazioni utili. E sono sicuro che ci sono diversi modi per utilizzare questo concetto per altri casi d'uso. Ma comporta delle sfide se hai intenzione di mantenere il design anche sui dispositivi mobili. Il trucco è pensare al cellulare e pianificare in anticipo. Spero che questo serva da ispirazione per progetti futuri lungo la strada. Semmai, almeno sai come creare un blurb con un'icona o la destra :).

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!