Come creare un cartello 3D con effetti al passaggio del mouse in Divi
Pubblicato: 2019-05-13Sappiamo tutti che un buon sito Web consente ai visitatori di trovare facilmente ciò che stanno cercando in modo rapido ed efficiente. E aiuta sempre se riesci a rendere i tuoi contenuti più coinvolgenti. In questo tutorial, ti mostrerò come progettare un cartello segnaletico 3D che coinvolga gli utenti e renda loro facile trovare ciò che stanno cercando in un modo unico. Per fare ciò, utilizzeremo le opzioni di trasformazione di Divi e la proprietà prospettiva css su più moduli blurb per creare l'effetto 3D dei segni ruotati su un palo.
Iniziamo!
Sbirciata
Scarica GRATUITAMENTE il layout del cartello 3D
Per mettere le mani sul design del cartello 3D di questo tutorial, 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!
Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.
Andiamo al tutorial, vero?
Iscriviti al nostro canale Youtube
Cosa ti serve per iniziare
Per iniziare, avrai bisogno di quanto segue:
- Assicurati di avere il tema Divi installato e attivo sul tuo sito WordPress.
- Se vuoi creare la tua immagine del post, avrai bisogno di un editor di foto come Photoshop, Gimp o Sketch. Oppure puoi utilizzare l'immagine fornita nel download gratuito del layout per questo design sopra.
- Oltre a questo, costruiremo tutto da zero sul front-end di Divi Builder.
Creazione dell'immagine per il cartello stradale
Il modo più semplice per creare un cartello per questo disegno è creare un piccolo blocco di immagine ripetibile che possiamo aggiungere come immagine di sfondo che si ripete verticalmente lungo la sezione o la riga della pagina. Se vuoi saltare questo passaggio, puoi importare il layout json incluso nel download gratuito sopra per iniziare. Ma se vuoi crearne uno tuo con un colore personalizzato a tua scelta, ecco come farlo.
Per questo esempio, userò Photoshop, ma il processo è molto simile anche per altri editor di foto popolari.
In Photoshop, fai clic per creare un nuovo documento con un'altezza e una larghezza personalizzate di 25 px.
Imposta il colore di primo piano su nero (# 000000) o sul colore che desideri.
Quindi seleziona lo strumento secchiello e fai clic all'interno del livello quadrato vuoto per dipingere il quadrato di nero.
Quindi salva la tua immagine come jpeg sul tuo computer. Questa è l'immagine che utilizzeremo nel design per creare il post per il nostro design del cartello 3D.
Implementazione del design della segnaletica 3D in Divi
Una volta che sei pronto, assicurati di creare una nuova pagina, assegna un titolo alla pagina e distribuisci Divi Builder sul front-end. Seleziona l'opzione "Crea da zero".
La tua tela bianca ti aspetta!
Ora crea una nuova sezione regolare con una riga a una colonna.
Personalizzazione della riga
Prima di aggiungere un modulo, apri le impostazioni della riga e aggiorna quanto segue:
Immagine di sfondo: [inserisci un'immagine quadrata personalizzata per il post]
Dimensione dell'immagine di sfondo: dimensione reale
Ripetizione immagine di sfondo: Ripeti Y (verticale)
Quindi aggiorna quanto segue:
Larghezza grondaia: 1
Larghezza massima: 980 px
Imbottitura personalizzata: 2vw superiore, 2vw inferiore
Quindi dobbiamo aggiungere il seguente CSS personalizzato all'elemento principale della colonna come segue:
perspective: 1000px;
Questa proprietà CSS della prospettiva è necessaria per ottenere l'effetto 3D del segno (o del blurb) ogni volta che lo ruotiamo con le opzioni di trasformazione.
Per maggiori informazioni su questo, controlla come funziona la prospettiva con le opzioni di trasformazione di Divi.
Creare un'insegna con un modulo Blurb
Per creare il nostro primo cartello sul nostro cartello 3D, utilizzeremo un modulo blurb. Vai avanti e aggiungi un modulo blurb alla riga.
Quindi apri le impostazioni del blurb e aggiorna il contenuto del blurb come segue:
Riduci il contenuto fittizio per includere solo un paio di righe di testo.
Usa l'icona: S
Icona: freccia sinistra (vedi screenshot)
Colore di sfondo: #1a233f
Colore icona: #9eb3c2
Posizionamento immagine/icona: a sinistra
Usa la dimensione del carattere dell'icona: S
Dimensione carattere icona: 80px
Orientamento del testo: centro
Carattere del titolo: Display Playfair
Colore del testo del titolo: #9eb3c2
Dimensione del testo del titolo: 38 px (desktop), 26 px (telefono)
Larghezza massima: 600 px
Allineamento del modulo: Centro
Imbottitura personalizzata: 5% in alto, 5% in basso, 5% a sinistra, 5% a destra
Angoli arrotondati: 20px
Larghezza bordo: 3px
Colore bordo: #21335e
Questo si occupa dello stile del nostro modulo blurb, ma per ottenere il nostro effetto 3D, dobbiamo usare le opzioni di trasformazione per ruotare il nostro modulo blurb. Per fare questo aggiornare quanto segue:
Trasforma Ruota asse X: 20 gradi
Duplica la riga per più segni
Ora che abbiamo completato uno dei nostri progetti di segni, possiamo duplicare la riga per crearne altri. Ogni volta che duplichiamo la riga, dovremo semplicemente aggiornare la rotazione della trasformazione in modo che i segni ruotino a gradi diversi attorno al palo.
Vai avanti e duplica la riga e aggiorna il modulo blurb nella nuova riga come segue:
Trasforma Ruota Asse X: -30deg
Duplica la riga per creare un terzo segno e aggiorna il modulo blurb in quella nuova riga come segue:
Trasforma Ruota asse X: 40 gradi
Cambiare la direzione del secondo segno
In questo momento tutte le frecce puntano nella stessa direzione. Per cambiare la direzione da sinistra a destra, dobbiamo aggiornare un po' le impostazioni del modulo blurb.
Apri le impostazioni del modulo blurb nella seconda riga (quella centrale) e aggiorna quanto segue:
Icona: freccia destra (vedi screenshot)
Orientamento del testo: a sinistra
Possiamo capovolgere l'ordine del contenuto del blurb in modo che il testo sia a sinistra e l'icona sia a destra. Per fare ciò dobbiamo aggiungere una singola riga di CSS personalizzato all'elemento principale come segue:
direction: rtl;
Ora il contenuto del blurb è invertito e hai un cartello che punta in una nuova direzione!
Ruota i segni allo stato originale al passaggio del mouse
Una delle cose interessanti di questa configurazione è che puoi facilmente aggiungere uno stato al passaggio del mouse per riportare il modulo ruotato alla rotazione originale (0 gradi). Ciò consente all'utente di interagire con il contenuto e di avere una visione chiara del testo quando si passa con il mouse sul modulo.
Poiché vogliamo aggiungere lo stesso stato al passaggio del mouse a tutti e tre i moduli blurb, usa multiselect per selezionare tutti e tre i moduli blurb e apri le impostazioni di uno dei moduli per visualizzare la modale delle impostazioni dell'elemento. Quindi aggiorna quanto segue:
Trasforma Ruota asse X (hover): 0deg
Salva le impostazioni e il gioco è fatto!
Ora controlla il design e la funzionalità fino ad ora.
Personalizzazione della nostra sezione con un'immagine di sfondo
Per il nostro ultimo passaggio, possiamo aggiungere una nuova immagine di sfondo alla nostra sezione. Questo è facoltativo ovviamente, ma l'immagine giusta può sembrare davvero interessante, specialmente se usi l'effetto di parallasse.
Apri la sezione e aggiungi una nuova immagine di sfondo. (Sto usando un'immagine dal nostro Pacchetto Layout Agenzia)
Quindi aggiorna quanto segue:
Usa effetto parallasse: S
Imbottitura personalizzata: 0px in alto, 0px in basso
Risultato finale
Pensieri finali
La creazione di un cartello 3D aggiunge davvero un elemento di design creativo e coinvolgente al tuo sito che può davvero far risaltare i tuoi contenuti (letteralmente). E l'effetto hover consente all'utente di visualizzare il contenuto senza l'effetto 3D per un bel fallback. Non dimenticare che puoi facilmente aggiungere un URL di collegamento al modulo blurb in modo che possa fungere da elemento di navigazione cliccabile, se lo desideri. Ad ogni modo, spero che questo ti dia un po' di ispirazione per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Saluti!