Come cambiare un'immagine di sfondo con una gif animata al passaggio del mouse?
Pubblicato: 2019-06-14Cambiare un'immagine di sfondo con una GIF animata al passaggio del mouse può essere un ottimo modo per dare vita ai tuoi contenuti e allo stesso tempo fornire un'illustrazione interessante per prodotti o servizi. Ad esempio, se stai promuovendo le funzionalità di un particolare prodotto software, una GIF animata può aiutarti a illustrare aspetti della funzionalità dei prodotti (lo facciamo per i prodotti qui su Elegant Themes). Ma, invece di mostrare inizialmente quella GIF, potresti voler mostrare uno screenshot fermo di quella funzione che viene sostituita con una versione animata (o GIF) al passaggio del mouse.
In questo tutorial, ti mostrerò come creare un blurb che cambia un'immagine di sfondo (ferma) con una GIF animata al passaggio del mouse. Inizieremo esaminando come creare uno screenshot e una GIF utilizzando Snagit (un software di cattura dello schermo). Quindi esamineremo come implementare quelle immagini di sfondo in un blurb in modo che si attivino al passaggio del mouse. Il passaggio effettivo delle immagini è estremamente semplice con le opzioni di hover in background di Divi.
Questo design aiuterà a mantenere il design statico in anticipo e quindi a coinvolgere gli utenti ogni volta che interagiscono con il contenuto.
Iniziamo.
Sbirciata
Scarica lo sfondo GIF sul layout al passaggio del mouse GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai 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!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json in una nuova pagina con Divi Builder attivo.
Andiamo al tutorial, vero?
Cosa ti serve per iniziare
Iscriviti al nostro canale Youtube
Per iniziare, avrai bisogno di quanto segue:
- Il tema Divi installato e attivo
- Software di cattura dello schermo (o una combinazione di strumenti) che ti consentirà di acquisire schermate, registrare video sullo schermo e creare GIF. In questo tutorial userò Snagit principalmente perché è una soluzione all-in-one che uso tutti i giorni per i miei post sul blog e tutorial.
- Una nuova pagina creata per costruire da zero sul front-end (visual builder)
Dopodiché, avrai una tela bianca per iniziare a creare alcune schede al passaggio del mouse in Divi.
Parte 1: creazione di schermate e GIF
Per questo progetto, vogliamo creare uno screenshot da visualizzare come immagine di sfondo fissa per un modulo blurb. Quindi vogliamo creare una GIF (un'immagine animata) che dia vita a quell'immagine di sfondo fissa con una breve illustrazione di come funziona il prodotto. Il trucco è creare immagini e GIF che si somigliano abbastanza da avere una transizione graduale quando si cambia un'immagine con l'altra al passaggio del mouse.
Una volta create le due immagini, possiamo utilizzare l'immagine fissa come immagine di sfondo iniziale. Quindi possiamo passare dall'immagine di sfondo all'immagine gif passando il mouse sul modulo blurb.
Per creare gli screenshot e le GIF, utilizzerò Snagit. Sebbene non sia un software gratuito, è davvero facile da usare e ti consente di creare schermate, registrare lo schermo e registrare schermate nascoste in GIF, tutto in un unico posto.
Creazione dell'immagine fissa dello screenshot
Per creare lo screenshot, apri Snagit e apri la casella di acquisizione. Quindi assicurati di scegliere di acquisire un'immagine selezionando un'area dello schermo. Ciò ti consentirà di trascinare un'area sullo schermo da acquisire come immagine. Per avviare l'acquisizione dello schermo, fare clic sul pulsante di acquisizione.
Quindi fare clic e trascinare l'area di acquisizione intorno all'area dello schermo che si desidera acquisire come immagine.
Salva l'immagine sul tuo computer. Quindi apri nuovamente la casella Snagit Capture e scegli di acquisire un video selezionando una regione dello schermo. Per avviare l'acquisizione dello schermo, fare clic sul pulsante di acquisizione.
Quindi fare clic e trascinare l'area di acquisizione intorno all'area dello schermo che si desidera acquisire e registrare come clip video. Per creare una transizione più fluida tra l'immagine fissa e la gif, ti consigliamo di catturare la stessa area per il video come hai fatto per l'immagine (o il più vicino possibile).
Quando sei pronto, fai clic sul pulsante di registrazione e conduci la dimostrazione che desideri registrare.
Al termine, fare clic su Interrompi per interrompere la registrazione. Quindi puoi modificare il video clip nell'editor Snagit. Al termine dell'edizione, fai clic sul pulsante Gif accanto al video per creare una Gif dal tuo video.
Nel popup Crea Gif, modifica le impostazioni di output secondo necessità. Assicurati di abilitare il loop in modo che la tua gif si ripeta. Quindi fare clic sul pulsante Crea.
Una volta che la gif è stata creata, salvala sul tuo computer.
Ora hai un'immagine fissa e un'immagine gif pronte per essere aggiunte al tuo design in Divi.
Parte 2: Creazione di un Blurb che cambia l'immagine di sfondo con l'immagine GIF animata al passaggio del mouse
Se non lo hai già fatto, crea una nuova pagina e distribuisci Divi Builder per costruire sul front-end. Quindi crea una nuova sezione regolare con una riga di due colonne.
Nella colonna 1, aggiungi un modulo blurb.
Quindi aggiorna le impostazioni del contenuto come segue:
Corpo: "Il testo del corpo va qui"
Usa l'icona: S
Icona: nuvola (vedi screenshot)
Aggiungi l'immagine di sfondo predefinita
Quindi, aggiungi l'immagine di sfondo predefinita al blurb come segue:
Immagine di sfondo: carica l'immagine di sfondo (lo screenshot fisso) che hai creato.
Dimensione immagine di sfondo: Adatta (questo assicurerà che l'intera immagine rimanga visibile)
Posizione dell'immagine di sfondo: in alto al centro (questo manterrà l'immagine nella parte superiore del blurb)
Aggiungi l'immagine GIF di sfondo al passaggio del mouse
Dopo aver posizionato l'immagine di sfondo iniziale, distribuisci l'opzione al passaggio del mouse sullo sfondo e seleziona la scheda al passaggio del mouse. Quindi aggiungi l'immagine Gif per fungere da nuova immagine di sfondo nello stato al passaggio del mouse.
Disegnare il modulo Blurb
Continua a modellare il modulo blurb aggiornando le seguenti impostazioni di progettazione:
Colore icona: #6bb962
Icona del cerchio: S
Colore del cerchio: #ffffff
Allineamento del testo: centro
Carattere del titolo: Lora
Dimensione del testo del titolo: 34px
Imbottitura: 50% sopra, 5% sotto, 3% sinistra, 3% destra
La vera chiave di questo design è l'imbottitura. Per posizionare lo sfondo sopra il contenuto del blurb, è necessario aggiungere circa il 50% dell'imbottitura superiore. E poiché la dimensione dell'immagine di sfondo è impostata su "adatta" e la posizione è impostata su "in alto al centro", si posizionerà bene sopra il contenuto che risponde alle larghezze del browser.
Infine, dai al blurb un'ombra di casella al passaggio del mouse come segue:
Box Shadow: vedi screenshot
Posizione verticale dell'ombra del riquadro: 0px
Intensità sfocatura dell'ombra del riquadro: 0 px (predefinito), 24 px (al passaggio del mouse)
Risultato finale
Questo è il risultato finale.
Ed ecco il design su tablet e telefono.
Ed ecco come potrebbe apparire con blurb aggiuntivi con schermate e colori diversi.
Pensieri finali
Se non hai familiarità con l'utilizzo delle GIF sul tuo sito web, dovresti assolutamente prenderlo in considerazione. Possono davvero dare vita ai tuoi contenuti e fornire illustrazioni estremamente utili per i tuoi visitatori. E, con le opzioni di passaggio del mouse sullo sfondo di Divi, puoi facilmente cambiare un'immagine fissa con una GIF al passaggio del mouse. Questa soluzione può fornire un design meno distratto in anticipo che coinvolge davvero l'utente quando interagisce con i tuoi contenuti. Spero che lo trovi utile per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!