Evidenziazione del plug-in Divi – Modulo Divi Tilt Blurb

I blurb sono popolari all'interno dei layout Divi. Visualizzano testo, immagini, icone e altro, il che è ottimo per mostrare prodotti e servizi. E se volessi farli risaltare di più e fornire alcune interessanti animazioni al passaggio del mouse? Le animazioni comuni possono essere eseguite tramite CSS, ma se volessi qualcosa di diverso? Un plugin chiamato Tilt Blurb Divi Module potrebbe essere quello che stai cercando.

Che cos'è il modulo Tilt Blurb?

Tilt Blurb Module è un plug-in di terze parti di Hadworm che aggiunge un nuovo modulo blurb a Divi Builder (sia per Divi che per Extra) che aggiunge interessanti effetti di inclinazione, creando un aspetto 3D. In questo momento saliente del plugin daremo un'occhiata al modulo e vedremo cosa può fare. Ho mostrato alcune gif, ma la maggior parte saranno immagini a causa delle dimensioni dei file delle gif. Le immagini per gli esempi sono prese da Unsplash.com e da WordPress.org.

Installazione del modulo Tilt Blurb Divi

Carica e attiva il plugin normalmente. Nel collegamento Plugin all'interno del menu della dashboard troverai un nuovo elemento chiamato Tile Blurb License. Fare clic su questo, inserire la chiave di licenza e salvare le modifiche. Questo ti assicurerà di ricevere gli aggiornamenti.

Un nuovo modulo viene aggiunto a Divi Builder chiamato Tilt Blurb. È di colore viola all'interno del Divi Builder, quindi è difficile non vederlo. Mi piace quando gli sviluppatori usano colori diversi per i loro moduli in modo che si distinguano dai moduli standard (per quello che vale).

Il modulo include le schede standard più una nuova:

• Contenuto: testo, collegamento, immagine e icona, sfondo, etichetta amministratore
• Impostazioni di inclinazione: impostazioni di inclinazione, sfondo inclinato, livelli di inclinazione
• Design: immagine e icona, testo, testo dell'intestazione, corpo del testo, bordo, ridimensionamento, spaziatura
• Avanzato: ID e classi CSS, CSS personalizzato, animazione, visibilità

Impostazioni di inclinazione

Per questi esempi ho aggiunto uno sfondo e poi ho posizionato sopra un'immagine più piccola come primo piano per creare gli effetti 3D. E poi fatto il caffè. Un sacco di caffè.

Esempio con impostazioni predefinite

Ecco un esempio di come appare l'inclinazione 3D prima del tweaking. Ho aggiunto un titolo, un testo, uno sfondo e un'icona. L'inclinazione segue il mio mouse e distingue il testo e l'icona dall'immagine dandogli un aspetto 3D. Per me l'effetto di parallasse ha eliminato lo sfondo quindi non l'ho usato.

Dimensioni con immagine

Questo ridimensiona il blurb usando un'immagine nascosta e centra il contenuto.

Inclinare le dimensioni del blurb con 2 immagini con contenuto mobile

Questo include due immagini: una per il primo piano e una per lo sfondo. L'immagine e il testo in primo piano sono in 3D utilizzando la funzione di contenuto mobile.

Puoi regolare la quantità di float che funziona come uno zoom, avvicinando il contenuto in primo piano al lettore. Questa immagine usa 200 per l'importo float, che è al massimo.

Importo inclinazione

Il cursore della quantità di inclinazione ti consente di controllare di quanto si inclina l'immagine. L'impostazione predefinita è 20. Questo usa 100.

Prospettiva di inclinazione

Inclinazione prospettiva approfondisce la prospettiva. Più basso è il numero, più profonda è la prospettiva. Il valore predefinito è 1000. Questo esempio è 200.

Scala di inclinazione

Tilt Scale è un livello di zoom. Il valore predefinito è 1.1, il che significa che al passaggio del mouse l'immagine viene moltiplicata per 1.1. Questo esempio è 2. Va a 0 ma il livello 0 ha creato uno zoom avanti e indietro continuo che non ha funzionato per questa immagine. Potrebbero essere necessari alcuni esperimenti per ottenere ciò che desideri.

Velocità di inclinazione

Tilt Speed ​​controlla la velocità con cui l'immagine si muove mentre passi il mouse. Più basso è il numero, più velocemente si muove. Il valore predefinito è 100. Questo è 5000. Sono parziale per l'effetto lento.

Inclinazione inversa

Tilt Reverse cambia la direzione dell'inclinazione. Normalmente l'inclinazione si allontana dal mouse. Inverti inclina l'immagine verso il mouse.

Abbagliamento inclinato

Tilt Glare aggiunge un effetto di abbagliamento che segue il mouse. La quantità di abbagliamento è regolabile. L'immagine sopra usa .8 che è l'impostazione predefinita. Questo è ottimo per creare effetti di luce.

Raggio del bordo

Il raggio del bordo cambia la forma del bordo. Il valore predefinito è 40. Questo è impostato su 100, l'importo massimo.

Inclinare lo sfondo

Inclinazione sfondo consente di impostare un colore di sfondo e gli effetti del bordo.

Inclinare lo sfondo

Un effetto collaterale di Tilt Background Color è che crea un bel bagliore intorno all'immagine.

Regola l'inclinazione del colore dello sfondo, della larghezza del bordo, dello stile del bordo dello sfondo, della larghezza del bordo e del colore dell'ombra del bordo e del riquadro.

Inclinare la distanza dello sfondo

La distanza dello sfondo di inclinazione regola la distanza dell'ombra. È impostato su -50 per impostazione predefinita. Questo esempio usa -25.

Questo esempio usa una distanza di inclinazione dello sfondo di 0 e un'opacità di 0,3, che crea una sovrapposizione sullo sfondo.

Inclinare la dimensione/scala dello sfondo

Dimensioni/scala sfondo inclinato modifica la distanza dello sfondo inclinato. Il valore predefinito è 1.04. Questo è 1.2.

Livelli di inclinazione

Inclinare livelli applica la stessa immagine più e più volte come più livelli, creando un solido effetto 3D. Può utilizzare un'immagine o un colore di sfondo e puoi regolare la profondità del livello. Ho applicato l'immagine sopra con una profondità di livello di 50.

L'immagine che ho applicato è vista qui come bordo. Ho regolato la quantità di inclinazione per renderlo più facile da vedere.

Come previsto, la parte inferiore dell'immagine ha un aspetto diverso. Questo è un ottimo modo per aggiungere un po' di texture al bordo. Una profondità dello strato più piccola renderà il bordo più sottile.

Questo usa una profondità di livello di 10.

Questo esempio utilizza sia lo sfondo inclinato che i livelli di inclinazione.

Ecco un logo WordPress 3D che sembra racchiuso in un cristallo. Ho caricato il logo nell'area dell'immagine Immagine e icona, ho impostato la quantità di inclinazione su 100, ho usato il riflesso di inclinazione predefinito, ho aggiunto il logo all'immagine del livello in Livelli di inclinazione, ho impostato una profondità del livello di 50 e ho impostato il colore del livello su bianco e quasi completamente trasparente.

Ecco il logo senza colore del livello. I lati sono più difficili da vedere.

Licenza, supporto e documentazione

Il plug-in può essere utilizzato su siti Web illimitati per te e i tuoi clienti. Include 6 mesi di supporto. La documentazione è disponibile sul sito Web dello sviluppatore. Include istruzioni su come creare alcuni degli esempi mostrati sul sito web. Mi piacerebbe vedere ancora più esempi come come sono stati realizzati i loghi.

Pensieri finali

Il modulo Tilt Blurb offre molti interessanti effetti di inclinazione, che creano un bell'aspetto 3D per immagini, icone e testo. È un ottimo modo per creare CTA, copertine di libri 3D e immagini di prodotti. Il modulo Tilt Blurb è innovativo e intuitivo. Se vuoi aggiungere dei bei effetti di inclinazione ai tuoi blurb, vale la pena dare un'occhiata al modulo Tilt Blurb.

Vogliamo sentire da voi. Hai provato il modulo Tilt Blurb Divi? Fateci sapere cosa ne pensate nei commenti qui sotto.

Immagine in primo piano tramite hobbit / shutterstock.com