Evidenziazione del plug-in Divi – Divi Portfolio Grid

Divi include un modulo portfolio che mostra il tuo portfolio a tutta larghezza o un layout a griglia e include tutte le funzioni di base che ti aspetteresti da un modulo Divi: sfondi, caratteri, colori, bordi, sovrapposizioni, icone, ecc. Cosa succede se vuoi un layout diverso, come un design a più colonne, o nuove funzionalità come un pulsante personalizzabile? Potresti essere interessato a un plugin di terze parti chiamato Divi Portfolio Grid.

Divi Portfolio Grid è un plug-in di terze parti di Divi Theme Store. Non solo offre le funzionalità standard del modulo Divi, ma fornisce anche un layout a 2, 3 e 4 colonne con nuove funzionalità di stile in modo da poter creare portafogli unici. Aggiunge anche un pulsante con testo ed effetti al passaggio del mouse per cambiare i colori.

In questa panoramica daremo un'occhiata a Divi Portfolio Grid utilizzando un portfolio di esempio che ho creato. Tutte le immagini utilizzate nei portfolio e negli sfondi sono state prese da Unsplash.com.

Installazione del plug-in Divi Portfolio Grid

Prima di poter caricare il plugin dovrai decomprimere il file di download. All'interno del file zippato troverai il file del plugin zippato insieme a una guida rapida in PDF. La guida rapida è un documento che guida l'utente attraverso l'installazione e una panoramica su come utilizzare il modulo. Carica il file del plug-in compresso che si trova nel file di download, installa e attiva normalmente.

Funzionalità del modulo portfolio personalizzato

Il plugin aggiunge un nuovo modulo al Divi Builder chiamato Custom Portfolio Module. Il modulo funziona come qualsiasi altro modulo Divi Builder dal back-end, quindi puoi trascinarlo e rilasciarlo all'interno di qualsiasi riga e regolare contenuto, design e impostazioni avanzate.

Personalizza il colore di sfondo, scegli un'immagine di sfondo, seleziona un layout, crea un testo personalizzato per i pulsanti, scegli il numero di post da visualizzare, seleziona la categoria, mostra meta, scegli i colori, ecc.

Anche tutte le caratteristiche di design standard sono qui. Regola colori, caratteri, pulsanti, icone, sovrapposizioni e altro.

Esempi: utilizzo del modulo Portfolio personalizzato Divi

Per i miei esempi ho creato una pagina, ho aggiunto uno sfondo per dargli un tocco visivo, ho reso la riga a tutta larghezza e ho aggiunto il modulo Griglia Portfolio. Prima di esaminarlo, diamo una rapida occhiata al modulo standard del portafoglio Divi Building per un confronto.

Modulo Portafoglio Divi standard

Diamo uno sguardo alla pagina che utilizza il modulo portfolio Divi standard. L'ho impostato sul layout della griglia e ho impostato il colore del carattere su chiaro. Tutte le altre funzionalità sono impostate sui valori predefiniti. Include anche sovrapposizioni al passaggio del mouse con icone (in modalità griglia), bordi, sfondo, meta e stile dei caratteri.

L'immagine in primo piano del progetto viene visualizzata con il titolo e la categoria del progetto sotto l'immagine. Cliccando sul titolo si accede al progetto. Facendo clic sul titolo della categoria si apre una pagina di categoria per quella categoria. Include anche effetti al passaggio del mouse con opzioni di colore e icona di sovrapposizione quando si utilizza il layout della griglia.

Esempi di moduli di portfolio personalizzato

Include tre layout tra cui scegliere, quindi puoi impostare i tuoi portafogli in 2, 3 o 4 colonne. Diamo un'occhiata a ciascuno dei layout con varie personalizzazioni e funzionalità.

Ecco uno sguardo al layout a 2 colonne. Visualizza l'immagine in primo piano del progetto, include il titolo e la categoria cliccabili in una barra sotto l'immagine e posiziona un pulsante con il testo sopra l'immagine e la barra. Queste sono le caratteristiche e i colori predefiniti.

L'immagine include gli stessi effetti al passaggio del mouse del modulo portfolio standard, ma il pulsante include anche effetti al passaggio del mouse. Puoi vedere in questo esempio che le impostazioni predefinite del pulsante cambiano lo sfondo viola in rosso.

Puoi anche vedere un bell'effetto al passaggio del mouse che crea un'ombra dietro la carta su cui stai passando il mouse. Il titolo viene visualizzato come suggerimento. Anche l'overlay al passaggio del mouse è una funzione predefinita, quindi non deve essere abilitata. La transizione dell'effetto hover mostra un'ombra più pesante fino al completamento della transizione.

Ecco uno sguardo al layout a 3 colonne. In questo esempio ho cambiato il colore dello sfondo e del testo del pulsante e ho cambiato il testo per visualizzare il mio messaggio.

Il pulsante include anche l'effetto hover shadow. In questo esempio sto solo passando il mouse sopra il pulsante, quindi l'immagine non mostra il suo effetto al passaggio del mouse. Lo sfondo e il testo del pulsante hanno cambiato colore.

Questo esempio utilizza il layout a 4 colonne. Ho impostato il raggio del pulsante su 0 e ho cambiato tutti gli stili dei caratteri.

L'effetto al passaggio del mouse posiziona una sovrapposizione blu con un'opacità del 47% (mi dispiace per il numero dispari ma è dove il mio mouse si è fermato, quindi l'ho seguito) e un'icona di casella di controllo in rosso. Il pulsante cambia da grigio scuro con testo della scheda chiaro a bianco sporco con testo grigio scuro.

In questo esempio ho aggiunto uno sfondo che mostra dietro il titolo e il meta. Ho aggiunto un bordo rosso con una larghezza di 2 pixel (quindi è facile da vedere nell'immagine). Ho regolato tutti i caratteri e i colori e ho cambiato il colore di sfondo del pulsante, il colore al passaggio del mouse e il colore dell'icona. Ho lasciato il colore di sovrapposizione predefinito al passaggio del mouse per mostrare il contrasto tra l'area dell'immagine in primo piano e l'immagine di sfondo dietro il titolo e la metasezione.

Il pulsante viene visualizzato solo se stai mostrando il titolo. Questo esempio mostra solo la categoria.

Questo esempio mostra solo il titolo del progetto. Poiché viene visualizzato il titolo, viene visualizzato anche il pulsante.

In questo esempio ho posizionato una sovrapposizione rossa con un'opacità di 66. Ho modificato l'icona al passaggio del mouse e personalizzato il pulsante e i suoi effetti al passaggio del mouse. Un'immagine di sfondo (di un cielo grigio) è posta dietro il titolo. Questo utilizza diverse categorie di progetti. Il raggio del pulsante è impostato su 10.

Griglia del portfolio Divi – Responsive

Il plugin è reattivo. Ecco il layout a 3 colonne su un iPad (emulato negli strumenti per sviluppatori di Chrome) in modalità verticale. Per ulteriori informazioni sugli strumenti per sviluppatori di Google Chrome, consulta l'articolo Perché dovresti iniziare a utilizzare subito gli strumenti per sviluppatori di Chrome.

Questo è lo stesso layout in modalità orizzontale.

Questo è lo stesso layout su un Galaxy S5 in modalità verticale.

Ed ecco il layout che utilizza un Galaxy S5 è la modalità orizzontale.

Licenza, aggiornamenti e documentazione

La licenza copre un uso illimitato e include aggiornamenti a vita. La documentazione è fornita nel file PDF contenuto nella cartella compressa. È un breve documento e fornisce una procedura dettagliata con immagini per iniziare. È un plugin facile da usare e ho trovato tutto intuitivo. Se sei abituato a usare i moduli Divi dovresti sentirti a casa con questo modulo.

Divi Portfolio Grid può essere acquistato presso il Divi Theme Store.

Pensieri finali

Divi Portfolio Grid è facile da usare e fornisce abbastanza funzionalità extra rispetto al modulo portfolio Divi standard che molti utenti lo troveranno essenziale. Include layout a 2, 3 e 4 colonne, aggiunge un pulsante con effetti al passaggio del mouse, sovrapposizioni con icone e tutto lo stile del modulo che ti aspetteresti, incluse le funzionalità CSS avanzate in modo da poterlo personalizzare con il tuo codice. Se desideri un portfolio con funzionalità oltre al modulo portfolio Divi standard, Divi Portfolio Grid potrebbe essere il modulo di cui hai bisogno.

Ci piacerebbe sentire da voi! Hai provato Divi Portfolio Grid? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in evidenza tramite 2RAL / shutterstock.com