Divi Plugin Highlight: DTS Filterable Portfolio Grid Pro

Il modulo portfolio filtrabile di Divi ti consente di creare un portfolio a schermo intero o in una griglia. E se volessi un aspetto diverso che aggiunga un pulsante e scelte per 3 o 4 colonne all'interno della griglia? Questo è esattamente ciò che fa un plug-in di terze parti chiamato DTS Filterable Portfolio Grid Pro.

DTS Filterable Portfolio Grid Pro aggiunge un nuovo modulo a Divi Builder. Il plugin dà al tuo portfolio un nuovo look e ha opzioni per 3 o 4 colonne in una griglia. Visualizza i tipi di post del progetto. Include testo del pulsante personalizzato e opzioni avanzate personalizzate.

Il plugin è disponibile dal sito web dello sviluppatore.

In questo momento saliente del plugin daremo un'occhiata a DTS Filterable Portfolio Grid Pro e vedremo cosa può fare. Le immagini sono prese da Unsplash.com.

Installazione di DTS Filterable Portfolio Grid Pro

Carica e attiva il plugin normalmente. Dopo aver attivato il plug-in, vai su Impostazioni nella dashboard e seleziona Attivazione DTS Filterable Portfolio Grid Pro . Inserisci la tua API Key ed e-mail e salva le modifiche.

Impostazioni del modulo

Il plugin aggiunge un nuovo modulo al Divi Builder. È blu, quindi è difficile non vederlo.

Le impostazioni del contenuto includono il numero di post, la selezione della categoria, mostra il titolo, le categorie, l'impaginazione, lo sfondo e il testo del pulsante personalizzato.

La scheda Design include le impostazioni per il layout, i colori, i caratteri, le icone, le sovrapposizioni, i bordi e l'animazione.

Esempi – Griglia

Le impostazioni predefinite utilizzano una griglia a 3 colonne. Puoi vedere l'animazione al passaggio del mouse nel riquadro centrale. Le tessere includono l'immagine con la sezione del titolo e un pulsante posizionato al centro. La parte inferiore mostra la categoria. Le tessere mostrano un'ombra che si allontana al passaggio del mouse. Come puoi intuire, ognuno di questi elementi è personalizzabile.

In questo esempio ho modificato la griglia in 4 colonne e regolato il colore di sfondo del pulsante, il colore dello sfondo del pulsante e il colore del carattere del pulsante. Il layout a quattro colonne modifica le dimensioni dell'immagine in modo che corrispondano.

In questo ho ridotto il raggio del pulsante, aumentato la dimensione del carattere dei pulsanti, cambiato l'icona al passaggio del mouse e il suo colore e cambiato il colore di sovrapposizione del passaggio del mouse. Tutte queste regolazioni sono semplici e intuitive.

In questo esempio ho portato il raggio del bordo a 0 per creare angoli quadrati per il pulsante. Ho aumentato le dimensioni dei caratteri per il testo del pulsante, il testo del titolo e ho cambiato gli stili dei caratteri. Ho anche reso l'overlay al passaggio del mouse nero con un'opacità sufficiente per mostrare l'immagine e ho cambiato l'icona al passaggio del mouse.

Questo riduce l'altezza della linea per il titolo. Ho anche scurito il colore per il carattere e aumentato la spaziatura delle lettere. Ho reimpostato il carattere della categoria sui valori predefiniti e l'ho impostato in corsivo. Il raggio del pulsante è impostato su 100 e ho aggiunto il testo del mio pulsante. Ho anche cambiato il colore della sovrapposizione e selezionato un'icona diversa e ho cambiato il suo colore in bianco. Questo esempio utilizza anche un bordo, che è impostato su rosso e largo 2 pixel. Le opzioni del bordo includono colore, larghezza e stile.

Il modulo ha un'opzione di colore del testo per chiaro e scuro, nel caso in cui utilizzi uno sfondo scuro dietro il titolo, ma attualmente non c'è un'opzione per cambiare lo sfondo dietro il titolo. Sospetto che questa sia una funzionalità imminente.

Le impostazioni dello sfondo (colore standard, sfumatura, immagine e video) si applicano dietro il modulo. Le carte toccano il bordo del colore di sfondo e non ci sono regolazioni dell'imbottitura all'interno del modulo.

Ciò renderebbe lo sfondo imbarazzante, ma ci sono un paio di soluzioni facili. Puoi aggiungere il riempimento alla sezione o alla riga, come ho fatto in tutte le immagini in questo articolo, oppure puoi usare i CSS per aggiungere il riempimento al modulo.

Ecco il CSS che ho aggiunto alla scheda Avanzate nella sezione Elemento principale per il modulo. Dice semplicemente a Divi di aggiungere il riempimento a tutte e 4 le posizioni. I valori si applicano nello stesso ordine dei campi di riempimento di righe e moduli: in alto, a destra, in basso, a sinistra. Ciò significa che ho assegnato all'imbottitura superiore un valore di 40, all'imbottitura destra un valore di 30, all'imbottitura inferiore è 20 e all'imbottitura sinistra è 30.

Il risultato è esattamente quello che volevo: diversi livelli di imbottitura su tutti e quattro i lati. Ciò rende la funzionalità di sfondo più utilizzabile ed è facile da implementare.

Esempi – Filtro

Poiché si tratta di un portafoglio filtrabile, è logico che anche il filtro sia personalizzabile. Come previsto, ci sono regolazioni per lo stile del carattere, la dimensione, l'allineamento, il colore, la spaziatura e l'altezza. Fino a questo punto abbiamo visto il filtro con le sue impostazioni predefinite.

Questo esempio utilizza il carattere Amatic SC in rosso. Ho aumentato la dimensione del carattere ma ho lasciato la spaziatura e l'altezza ai valori predefiniti.

Questo usa un font chiamato Bevan. Sto usando un rosso più scuro. La dimensione del carattere è la stessa del carattere precedente.

Questo usa Arvo. Ho ridotto la dimensione del carattere e selezionato un colore grigio scuro.

Animazioni

Le animazioni di Divi sono disponibili anche nelle impostazioni del modulo. Scegli nessuno, dissolvenza, scorrimento, rimbalzo, zoom, capovolgimento, piegatura e rotazione. Puoi anche regolare l'animazione in modo che si ripeta solo una volta o in loop, scegli la direzione, la durata, il ritardo, l'intensità, l'opacità iniziale e la curva di velocità.

Questo esempio usa Roll. Ho lasciato tutto il resto di default.

Utilizzo della griglia del portfolio all'interno di un layout

DTS Filterable Portfolio Grid Pro ha un bell'aspetto all'interno di un layout. Ecco un esempio di layout fotografico con blog, portfolio e modulo di contatto. Sto usando le impostazioni predefinite per la griglia del portfolio e si fonde bene.

Utilizzo della griglia del portfolio con Extra

DTS Filterable Portfolio Grid Pro è anche compatibile con Extra. Ecco uno sguardo a un layout simile al layout Divi sopra. Questo utilizza anche le impostazioni predefinite. Sto usando una griglia a 3 colonne con dimensioni dell'immagine non corrispondenti. Questa è una soluzione semplice: usa semplicemente immagini della stessa dimensione.

Licenza

Ci sono due opzioni di licenza tra cui scegliere: sito singolo ed esteso. Entrambi includono aggiornamenti a vita e 6 mesi di supporto.

Pensieri finali

DTS Filterable Portfolio Grid Pro è facile da usare e offre uno stile elegante per far risaltare il tuo portfolio. Ci sono un paio di funzionalità che mi piacerebbe vedere aggiunte, come il titolo e i meta colori di sfondo, ma fornisce comunque abbastanza funzionalità che è facile da consigliare. Se sei interessato a un modulo griglia di sfondo filtrabile con uno stile oltre il modulo Divi standard, vale la pena dare un'occhiata a DTS Filterable Portfolio Grid Pro.

Vogliamo sentire da voi! Hai provato DTS Filterable Portfolio Grid Pro? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite AF studio / shutterstock.com