Evidenziazione del plug-in Divi – Image Intense

Image Intense è un plug-in premium di terze parti dei ragazzi di Superfly che aggiunge un nuovo modulo a Divi Builder sia per Divi che per Extra. Il nuovo modulo combina le funzionalità di tre moduli Divi (moduli immagine, testo e pulsanti) e quindi aggiunge nuove funzionalità per aggiungere effetti di sovrapposizione e passaggio del mouse alle immagini. Le caratteristiche includono 22 transizioni al passaggio del mouse dell'immagine, pulsanti, impostazioni di opacità, modalità di fusione miste, collegamenti di testo e molto altro.

Image Intense è un ottimo modo per aggiungere micro-interazioni che danno feedback ai tuoi lettori e richiamano l'attenzione sul tuo invito all'azione (CTA). Le animazioni includono l'ingrandimento o la riduzione dell'immagine, l'allungamento dell'immagine, la compressione dell'immagine, l'aggiunta di una sovrapposizione, lo scorrimento, la visualizzazione del testo, ecc.

In questo momento saliente del plugin daremo un'occhiata a cosa può fare il plugin. Le immagini sono prese da Unsplash.com.

Installazione e impostazioni

Il plugin aggiunge un modulo al Divi Builder. Per installare il modulo è sufficiente caricare e attivare il plugin. Usa Divi Builder normalmente e posiziona il modulo Image Intense all'interno del tuo layout. Può essere utilizzato al posto di un modulo immagine.

Le Impostazioni generali includono l'URL dell'immagine, le dimensioni del supporto, lo stile al passaggio del mouse, i titoli, la didascalia, l'orientamento della didascalia, il pulsante, la direzione dell'animazione, ecc. Queste sono impostazioni familiari e includono una breve descrizione. Le nuove impostazioni includono collegamenti alla documentazione per ulteriori informazioni.

I titoli in sovrimpressione possono utilizzare il markup. Qui puoi aggiungere collegamenti, mettere in grassetto il testo, ecc.

Le impostazioni di progettazione avanzate includono larghezza dell'immagine, modalità di fusione mista, opacità, opacità al passaggio del mouse, gradiente di sovrapposizione personalizzato, ecc. Include il carattere previsto, lo sfondo, il bordo, il colore e le scelte di riempimento, nonché CSS personalizzato .

Esempi: mettere al lavoro un'immagine intensa

Per vedere cosa può fare ho creato diversi layout e aggiunto diversi moduli Image Intense. Ecco alcune delle animazioni e delle funzionalità.

Animazioni e dimensioni delle immagini

In questo esempio puoi vedere la dimensione ritagliata delle immagini con due titoli sovrapposti. L'immagine a sinistra utilizza l'impostazione ritagliata 400 x 516 per le dimensioni del supporto e Auckland per l'animazione.

L'immagine si ingrandisce leggermente e mostra una sovrapposizione con un messaggio. Il colore e la dimensione del carattere possono essere modificati se necessario.

L'immagine a destra viene ingrandita e include il messaggio in una sovrapposizione. Questo è più evidente della differenza. Usa lo stile hover di Gerusalemme .

L'immagine al centro utilizza lo stile al passaggio del mouse Douala .

Puoi vedere in questa immagine la cornice spostata nella parte inferiore dell'immagine e ora visualizza il messaggio.

L'immagine al centro utilizza lo stile di sovrapposizione Madison .

Puoi vedere qui come posiziona una sovrapposizione sull'immagine che riduce l'opacità mantenendo il focus sull'area cerchiata che include il messaggio.

Modalità di fusione mista

Mix Blend Mode è un modo semplice per applicare gli attributi CSS all'immagine. Unisce il colore del modulo con il suo sfondo. Può creare alcuni effetti selvaggi e alcune impostazioni funzionano meglio con determinati colori, quindi ciò richiederà alcuni esperimenti. Alcune delle funzionalità potrebbero non funzionare con tutti i browser, quindi ti consigliamo di utilizzare questa funzionalità con cautela.

L'immagine al centro utilizza la modalità di fusione mista chiamata Luce intensa .

Questo usa la luminosità . Ho anche aggiunto un pulsante in basso al centro e ho impostato uno stile personalizzato.

Opacità

L'opacità è la trasparenza di un'immagine. Più un'immagine è opaca, meno trasparenza ha. L'opacità è anche influenzata dallo stile di animazione e dalla modalità di fusione del mix che scegli. Puoi usarli in varie combinazioni per vedere quali tipi di effetti puoi creare. È possibile applicare diversi livelli di opacità all'immagine normale e all'immagine al passaggio del mouse.

Questa è l'immagine normale senza opacità. Sto utilizzando la dimensione originale completa per l'impostazione della dimensione del supporto.

Qui l'immagine al passaggio del mouse. Ho impostato la valutazione dell'opacità a 0,6. Questo usa lo stile al passaggio del mouse di Cali .

Questo utilizza un'immagine grande di 1024 × 1024 senza ritaglio e un'opacità dell'immagine di 0,4. Entrambi i titoli in sovrimpressione utilizzano tag HTML. Sto usando i tag per forte, enfasi e pausa. Sta usando lo stile al passaggio del mouse di Portland .

Ho impostato l'opacità al passaggio del mouse su 1 in modo che l'immagine sia completamente rivelata al passaggio del mouse.

Aggiunta di un gradiente personalizzato

Nelle Impostazioni di progettazione avanzate ho selezionato Usa sfumatura sovrapposizione personalizzata . Questo apre una nuova serie di opzioni in cui posso selezionare il colore iniziale e finale del gradiente, l'orientamento del gradiente e la posizione di arresto iniziale e finale sia per l'immagine normale che per l'immagine al passaggio del mouse.

Ecco uno sguardo al gradiente usando lo stile di sovrapposizione Madison .

L'immagine a sinistra mostra una sovrapposizione prima del passaggio del mouse.

Al passaggio del mouse la sovrapposizione viene rimossa per rivelare l'immagine. Questo usa lo stile hover di Hanoi .

Scambio immagine

In questo esempio volevo scambiare un'immagine con un'altra. Questo viene fatto aggiungendo un'immagine come immagine di sfondo del modulo nelle Impostazioni di progettazione avanzate .

Quindi imposta il livello di opacità in modo che un'immagine venga visualizzata senza passaggio del mouse e l'altra immagine venga visualizzata al passaggio del mouse. Quello che mostra al passaggio del mouse mostrerà anche un messaggio.

Ho scelto questa immagine come immagine di sfondo e ho impostato l'immagine del modulo per avere un'opacità di 0.

Al passaggio del mouse, il colibrì si trasforma in un'aquila e mostra un messaggio. Questo usa lo stile hover di Kiev .

Immagini di fusione

Puoi anche fondere le due immagini regolando l'opacità in modo che l'immagine di sfondo venga mostrata attraverso l'immagine in primo piano. Questo può creare alcuni effetti e messaggi interessanti.

Questo usa lo stile hover di Londra . Ho organizzato i messaggi per sfruttare il loro posizionamento. In questo esempio la dimensione del carattere del titolo è impostata su 24 e la dimensione del carattere della didascalia è impostata su 50.

Ecco l'immagine al passaggio del mouse. Le opacità possono anche essere modificate per mostrare entrambe, ma una può essere più evidente.

Aggiunta di collegamenti al testo

È possibile aggiungere collegamenti al testo della didascalia. Questo viene fatto inserendo uno pseudo shortcode con il testo seguito dall'URL. Lo shortcode è fornito nella descrizione del campo in modo da poterlo copiare e incollare. Utilizzerà gli attributi href, target e class.

Questo aggiunge una didascalia con un collegamento che può portare i lettori a una pagina o a un post per ulteriori informazioni.

Questo è ottimo per creare CTA, link a post o pagine, ecc., Per guidare i lettori ai tuoi contenuti. Le immagini stesse possono anche essere rese cliccabili. Questo potrebbe portarli a un portfolio o a una pagina di informazioni o contatti.

pulsanti

Puoi aggiungere un pulsante all'immagine per creare un invito all'azione.

L'immagine a sinistra utilizza un gradiente radiale con markup per il testo. L'immagine a destra mostra il pulsante con un effetto al passaggio del mouse. Entrambe le immagini utilizzano bordi neri. Ho aggiunto una sovrapposizione per lo sfondo del pulsante e ho impostato il raggio del bordo su 15. Questo esempio utilizza lo stile al passaggio del mouse di Rochester .

L'immagine a sinistra utilizza un gradiente verticale tra due tonalità di nero: la prima con il 65% di opacità e la seconda con il 19% di opacità (19%! Lo so... sei il benvenuto!).

Sovrapposizioni, pulsanti e gradienti sono ottimi per creare CTA.

Prezzo, licenza e documentazione

Questo è un plugin premium. Sono $ 25 per un singolo sito più un sito di sviluppo che ti consente di utilizzarlo su un sito di sviluppo nello stesso momento in cui lo stai utilizzando sul tuo sito live. Sono $ 45 per siti illimitati .

La documentazione è fornita sul sito Web e include esempi e un'area demo in cui è possibile vedere gli effetti dal vivo. Il supporto è fornito da un sistema di ticket di supporto.

Pensieri finali

Image Intense è un modulo eccellente per aggiungere immagini con transizioni al passaggio del mouse. Le sovrapposizioni possono includere sfumature, testo, collegamenti, vari livelli di opacità e persino passare da un'immagine all'altra. Testo, pulsanti, collegamenti, ecc. Hanno più opzioni di posizione e ci sono molte opzioni di transizione tra cui scegliere. Puoi fare ancora di più aggiungendo il tuo CSS.

Ho trovato il modulo intuitivo da usare. Se puoi usare un modulo Divi, ti sentirai come a casa con questo. Tutte le caratteristiche di stile sono qui. Le transizioni overlay al passaggio del mouse sono un ottimo modo per aggiungere un po' di brio al tuo sito web Divi. Se sei interessato ad aggiungere transizioni al passaggio del mouse alle tue immagini, penso che troverai Image Intense che vale la pena dare un'occhiata.

Vogliamo sentire da voi! Hai usato Image Intense? Facci sapere la tua esperienza nei commenti qui sotto!

Immagine in primo piano tramite wowomnom / shutterstock.com