Evidenziazione del plug-in Divi: Divi FilterGrid

Divi FilterGrid è un plug-in di terze parti che aggiunge un nuovo modulo filtrabile a Divi Builder. Può visualizzare post da qualsiasi tipo di post personalizzato e creare filtri personalizzati per visualizzarli in base a qualsiasi tassonomia scelta. Visualizza post di blog, progetti, prodotti, crea gallerie e molto altro.

In questo momento saliente del plugin, daremo un'occhiata a Divi FilterGrid, vedremo cosa può fare e vedere quanto è facile da usare. Puoi acquistare il plugin dal sito web dello sviluppatore.

Modulo Divi FilterGrid

Il modulo Divi FilterGrid viene aggiunto a Divi Builder. L'icona è a colori e si distingue dal resto.

Divi FilterGrid Scheda Contenuto

La scheda Contenuto aggiunge molte funzionalità. Includono elementi del post, opzioni di query, opzioni di filtro, opzioni di impaginazione e sfondo per regolare tutti i colori di sfondo. Include anche il collegamento standard e le opzioni dell'etichetta amministratore.

Elementi postali

Le opzioni Post Elements ti consentono di mostrare o nascondere l'immagine in primo piano e quindi determinare l'azione della miniatura. Puoi collegarti al post, mostrare l'immagine in una lightbox, in una galleria lightbox, mostrare il post in un popup o aprire una galleria lightbox personalizzata. Per questo esempio, sto mostrando il post in un popup.

Questo apre l'immagine in una galleria lightbox. Il lettore può selezionare le frecce per vedere le immagini in evidenza di tutti i post. Facendo clic sul titolo del post si apre comunque il post nella stessa scheda.

Puoi anche modificare il colore della sovrapposizione, l'icona e il colore dell'icona. Ho personalizzato ciascuno di questi nell'immagine sopra. Puoi anche mostrare il titolo, aggiungere il collegamento al titolo, aggiungere un estratto, limitare il numero di caratteri dell'estratto, mostrare un pulsante Leggi altro, aggiungere campi personalizzati e altro. Ho aggiunto un estratto e disabilitato il post meta.

Opzioni di query

Le opzioni di query consentono di scegliere il tipo di query tra Base, Avanzata e Personalizzata. Scegli le categorie, il numero di post, il numero di offset e le opzioni di ordinamento. Ho scelto una categoria in questo esempio.

Le opzioni avanzate ti offrono diverse nuove funzionalità. Seleziona tipi di post, tassonomie e termini specifici ed escludi termini e tassonomie. Puoi anche mostrare post privati ​​e post permanenti. Nell'esempio sopra, sto impostando una tassonomia. Mi consente di scegliere le categorie o i tag specifici che desidero utilizzare e quindi specificare la loro relazione con il termine di ricerca. I termini figlio funzionano allo stesso modo. Ciò ti consente di ottenere ulteriori dettagli e non solo di mostrare i post in base a categorie o tag. È inoltre possibile impostare il numero di registrazione e le opzioni di ordine per le tassonomie.

Il tipo di query personalizzata consente di utilizzare contenuto personalizzato. Fornisce un collegamento alla documentazione in cui è possibile imparare a configurarlo. Le query personalizzate vengono eseguite con il codice nel file functions.php. La documentazione include diversi esempi per guidarti attraverso di essa.

Opzioni filtri

Le Opzioni filtri consentono di filtrare la griglia in base ai termini di ricerca. Seleziona il filtro predefinito e vedrai una modale in cui puoi scegliere categorie e tag per post e progetti. Puoi anche impostare l'ordine e filtrare per ID, nome o un ordine personalizzato. Per l'ordine personalizzato, vedrai una casella in cui puoi inserire i valori separati da virgole.

Opzioni di impaginazione

Le Opzioni di impaginazione consentono di scegliere il tipo di impaginazione. Scegli tra paginato, un pulsante per caricare di più o per caricare di più sullo scorrimento. Per l'opzione paginata puoi scegliere le frecce, il testo e il numero di pagine visualizzate nei collegamenti. Ho aggiunto del testo e modificato le frecce in questo esempio.

Sfondo

Le impostazioni Sfondo consentono di personalizzare gli sfondi della griglia, i filtri, il filtro attivo, l'impaginazione e l'impaginazione attiva. Include anche le opzioni di sfondo standard che ti aspetteresti in un modulo Divi. Nell'esempio sopra, ho regolato i colori di sfondo per il filtro, la griglia e l'impaginazione.

Scheda Progettazione griglia filtro Divi

La scheda Design fornisce personalizzazioni per le opzioni di layout, il testo del titolo del post, il testo dei metadati dei post, il testo del contenuto dei post, il testo dei filtri, il testo dell'impaginazione, il pulsante Leggi altro, il pulsante Carica altro e tutte le opzioni standard del modulo Divi.

Opzioni di layout

Le opzioni di layout consentono di selezionare un layout, uno skin, impostare la larghezza degli elementi, la dimensione della riga e della colonna e la dimensione del carattere della griglia. Ho ridotto la larghezza degli elementi, rimosso la grondaia e selezionato Midnight per la pelle. Ho anche ridotto la dimensione del carattere.

Questo è il filtro verticale sinistro. Posiziona i filtri in una pila verticale sul lato sinistro. Ho aumentato la larghezza degli elementi in modo che le immagini siano più grandi.

Questo è Elementi in sovrapposizione. I post sono più brevi in ​​questa opzione.

Zoom immagine mostra ogni immagine con una sovrapposizione e il titolo al centro. L'immagine viene ingrandita al passaggio del mouse.

Libreria mostra le carte con un bordo e posiziona il titolo sopra l'immagine.

Questo è il layout dell'elenco che utilizza lo skin predefinito.

Questa è Larghezza intera. Posiziona il titolo, il meta e l'estratto nella parte inferiore dell'immagine.

Scheda avanzata del modulo Divi FilterGrid

La scheda Avanzate aggiunge 15 campi CSS personalizzati per quasi tutti gli elementi all'interno del modulo. Gli utenti CSS non avranno problemi a scegliere elementi specifici da personalizzare.

Stile del modulo Divi FilterGrid

Le opzioni di layout possono creare alcuni design interessanti. In questo esempio, ho ridotto la larghezza in modo che vengano visualizzati in un'unica riga. Ho anche rimosso il meta e l'estratto.

Per questo, ho aumentato la larghezza degli elementi. Questo crea un bel design di galleria a mosaico.

In questo, ho aggiunto il titolo, tutti i meta, l'estratto e il pulsante Leggi altro. Ho cambiato il colore del titolo, l'ho reso tutto maiuscolo, aumentato le dimensioni, centrato e aumentato la spaziatura dei caratteri. Ho anche ridotto le dimensioni del pulsante Leggi di più e ho disegnato il testo in bianco.

Ci sono molte opzioni di stile per il pulsante Leggi di più. Per questo, sono tornato alla dimensione predefinita ma ho reso il testo più leggero. Ho arrotondato i bordi e gli ho dato un gradiente di sfondo.

Non viene visualizzato in modalità editor, ma puoi anche aggiungere un'immagine al pulsante. Puoi aggiungere l'immagine da sola, con una sovrapposizione a tinta unita o con una sovrapposizione sfumata. In questo esempio, ho aggiunto l'immagine dietro il mio gradiente verde.

Il testo dei meta dati del post regola tutti i meta dei post insieme. Ho cambiato il colore e l'interlinea.

Il testo dei filtri ti consente di definire lo stile del carattere per il filtro. Ho aumentato la dimensione del carattere, cambiato il colore e aggiunto un effetto ombra. Lo stile di filtro predefinito ha un colore diverso per il filtro selezionato. Puoi regolarlo separatamente nell'opzione sfondi nella scheda Contenuto.

In questo esempio, sto regolando il testo di impaginazione. Ho cambiato il colore, aumentato le dimensioni, aggiunto un po' di spazio tra i caratteri e aggiunto un'ombra. Ho anche regolato l'intensità della sfocatura.

Il pulsante Carica altro include anche le opzioni di stile di base. Sto usando il testo predefinito (può essere modificato nella scheda contenuto). Ho anche impostato il testo su bianco (è verde per impostazione predefinita).

Ho aumentato la dimensione del carattere, aggiunto la spaziatura dei caratteri, regolato il bordo, aggiunto un gradiente e disabilitato la visualizzazione solo dell'icona al passaggio del mouse.

Divi FilterGrid e tipi di post personalizzati

L'ho trovato facile da usare con i tipi di post personalizzati. Nelle opzioni di query, fai clic su Seleziona tipi di post e quindi seleziona il tipo di post dal modale.

Mostra ancora il filtro originale, ma puoi crearne uno tuo o disabilitarlo. Nelle opzioni di filtro, fai clic su filtra tassonomie e scegli le tue tassonomie dall'elenco. Fare clic su Imposta valori .

Ora ho un filtro personalizzato per i miei prodotti WooCommerce.

Ora ho un modulo di prodotto WooCommerce che posso modellare a mio piacimento.

Divi FilterGrid Blog Esempio

Per questo esempio ho sostituito il modulo blog dalla pagina del blog del layout Dog Walker. L'ho disegnato in modo che corrisponda ai colori, agli stili dei caratteri e agli angoli arrotondati per i post. Ho quindi aggiunto i prodotti WooCommerce da visualizzare nell'elenco dei blog. Questo è un ottimo modo per aggiungere vari tipi di contenuti all'interno del flusso del tuo blog.

Il risultato sembra incredibile. Crea un blog filtrabile, oppure puoi disabilitare il filtro e mostrare solo il contenuto.

Documentazione e prezzo del modulo Divi FilterGrid

La documentazione è disponibile sul sito Web dello sviluppatore. Fare clic sui pulsanti per visualizzare informazioni specifiche sulle funzionalità avanzate. Puoi visitare la pagina delle domande frequenti o inviare un ticket di supporto da qui. Puoi anche fare clic sul punto interrogativo per ogni funzione nel modulo per vedere una spiegazione su come usarlo.

Ci sono quattro opzioni per acquistare Divi FilterGrid:

• Sito singolo – $ 19
• 5 siti – $ 39
• Siti illimitati – $ 59
• Siti illimitati a vita – $ 129

Puoi acquistare il plugin dal sito web dello sviluppatore.

Pensieri finali

Divi FilterGrid è un plugin interessante. È un modulo eccellente per visualizzare diversi tipi di contenuto. Puoi visualizzare praticamente qualsiasi tipo di post e visualizzare più tipi di post insieme. Le opzioni di filtro possono essere complesse come desideri che siano.

Mi piace avere le opzioni di regolazione del colore per gli sfondi. Avere le opzioni di colore nella scheda Contenuto significa che le opzioni di colore si trovano in due posizioni diverse. Penso che sarebbe un tocco più intuitivo se quelle regolazioni del colore fossero spostate nella scheda Design. È bello, però, poter personalizzare i colori in autonomia.

L'ho trovato molto intuitivo. Consiglio di esplorare per vedere tutte le opzioni. Se sei interessato ad aggiungere una potente griglia filtrata per visualizzare i tuoi tipi di post, Divi FilterGrid è un plugin facile da consigliare.

Vogliamo sentire da voi. Hai provato Divi FilterGrid? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite Thepanyo / shutterstock.com