Evidenziazione del plug-in Divi – Divi Blog Extras

Divi include un modulo blog per visualizzare i tuoi post a tutta larghezza o con layout a griglia. È un bel modulo e fa il suo lavoro. E se volessi layout e funzionalità diversi? Questo può essere fatto con i CSS, ma un plugin di terze parti chiamato Divi Blog Extras rende il compito molto più semplice.

Divi Blog Extras è un plug-in di terze parti di Divi Extended che aggiunge un nuovo modulo a Divi Builder con diverse nuove funzionalità per visualizzare i post del tuo blog. Include sei diversi design di layout e aggiunge una funzione di caricamento AJAX con un pulsante Carica altro. I post si caricano mentre scorri e il caricamento è veloce. È possibile modificare il testo sia per il pulsante Leggi di più che per il pulsante Carica più.

In questo momento saliente del plugin daremo un'occhiata a Divi Blog Extras e avremo alcune idee su cosa si può fare con questo plugin. Le immagini di questi esempi sono state prese da Unsplash.com.

Divi Blog Extra Installazione e impostazioni

Carica e attiva normalmente. Un nuovo modulo chiamato Divi Blog Extras sarà quindi disponibile in Divi Builder. Per usarlo è sufficiente trascinarlo in una riga come qualsiasi modulo. Poiché le opzioni sono le stesse dei moduli Divi Builder standard, l'utilizzo di questo modulo è intuitivo.

Le impostazioni del contenuto includono le opzioni familiari e hanno sei scelte di layout, lunghezza dell'estratto, colori di categoria, carica più testo del pulsante, sovrapposizione di immagini in primo piano, leggi altro testo del pulsante e opzioni di colore del testo. Le impostazioni di progettazione includono intestazione, meta e corpo del testo e lo stile dei bordi. Il layout Blocco esteso aggiunge la posizione dell'immagine e il classico aggiunge le icone social. Diamo un'occhiata più da vicino a ciascuno dei layout.

Griglia estesa

Il layout predefinito, Griglia estesa, visualizza i post del blog con immagini e testo alternati. Le immagini si illuminano al passaggio del mouse. I nomi delle categorie vengono inseriti all'interno di una casella. in modalità responsive le immagini vengono posizionate in alto.

In questo esempio ho aggiunto un overlay al passaggio del mouse, un'icona al passaggio del mouse, modificato il testo Leggi altro, limitato l'estratto a 100 caratteri e modificato il testo della categoria e i colori di sfondo. L'animazione al passaggio del mouse viene visualizzata quando passi con il mouse su qualsiasi parte del post.

Scatola estesa

Box Extended inserisce l'estratto in un riquadro che si sovrappone all'immagine e rimuove il riquadro attorno al nome della categoria. L'immagine dell'autore viene aggiunta alla metasezione. Le immagini e il testo si alternano. Questo è uno dei layout di blog più eleganti.

In questo esempio ho modificato il carattere della categoria e i colori di sfondo, limitato la lunghezza dell'estratto a 150 caratteri e modificato il carattere in blu e modificato il testo del pulsante Leggi altro. Il passaggio del mouse predefinito illumina l'immagine come mostrato nell'immagine in alto sopra.

Intera larghezza

Larghezza completa posiziona le immagini a sinistra e l'estratto a destra, aggiungendo una data con stile all'estrema sinistra. Ogni post è separato da una linea. Il nome della categoria viene inserito all'interno di meta.

Questo esempio disabilita la data e le meta info. Il testo utilizza colori personalizzati. Ho cambiato la lettura di più e ho caricato più testo del pulsante. L'estratto è limitato a 200 caratteri.

Tutti i layout sono responsive. Ecco uno sguardo al look reattivo di Full Width. Mostra due moduli affiancati in una riga a 2 colonne.

Blocco esteso

Block Extended è una griglia del blog che aggiunge il nome della categoria sull'immagine e il meta nella parte inferiore della scheda. L'immagine viene ingrandita quando passi con il mouse su una parte qualsiasi della scheda. Mi piace questo tipo di microinterazione perché mostra che la carta è cliccabile.

Block Extended ha tre opzioni per la visualizzazione delle immagini. Questo esempio posiziona l'immagine in primo piano sullo sfondo con il testo in sovrimpressione.

Questo esempio alterna l'immagine di sfondo tra le prime due scelte.

Sfondo a tutta larghezza

Sfondo a larghezza intera visualizza una versione ritagliata dell'immagine a larghezza intera e posiziona l'estratto con meta in una sovrapposizione sull'immagine. Il posizionamento dell'estratto si alterna. Meta è separato dall'estratto con una linea.

Questo esempio usa una sovrapposizione scura sull'immagine per mostrare che la sovrapposizione dell'estratto non usa la stessa sovrapposizione al passaggio del mouse. Lo sfondo della sezione è rosso per questo esempio. Notare che il rosso è visibile al passaggio del mouse. Ho anche aggiunto il testo del pulsante Leggi altro e un bordo di 2 pixel.

Classico

Il layout classico mostra i post del blog con immagini a dimensione intera ed estratti a larghezza intera sotto le immagini. La categoria e la data sono posizionate sopra il titolo. Il titolo include un separatore di linea breve per distinguerlo dall'immagine. Sotto l'estratto c'è il nome dell'autore e il numero di commenti separati da una barra. Un separatore di linea più sottile e largo separa i pali l'uno dall'altro.

Questo layout ha un'opzione per visualizzare le icone social. Facendo clic su Carica altro (o come l'ho etichettato - Vedi altri articoli) viene visualizzato il prossimo set di post, che equivale al numero di post che ho selezionato per la visualizzazione. In questo esempio sto visualizzando due post. Carica altro carica i prossimi 2 post.

Creazione di un layout unico con Divi Blog Extras

È possibile utilizzare più moduli insieme per creare layout di riviste. Questo semplice layout include quattro moduli che mostrano il layout Gird Extended. Ogni modulo visualizza diverse categorie. I due al centro mostrano due post ciascuno.

Questo crea un layout di rivista con diverse categorie per le varie sezioni. Questo esempio mostra come la griglia estesa sembra reattiva.

Questo è lo stesso layout di Divi Builder ma utilizza lo sfondo a larghezza intera. Gli overlay coprono quasi completamente le immagini in modalità reattiva.

Questo esempio utilizza il layout Classic per il modulo superiore e Grid Extended per i due moduli successivi. Ciascuno dei moduli visualizza diverse categorie e ha il proprio stile per il testo della categoria. Il modulo superiore non visualizza un estratto.

Questo crea un layout di rivista interessante. Ho anche impostato le righe per visualizzare l'intera larghezza. Puoi mescolare e abbinare i layout per ottenere un design unico. Ho creato i layout con diverse categorie per ogni modulo. In un futuro aggiornamento il modulo avrà una funzione di offset in modo da poter utilizzare più moduli all'interno della stessa categoria.

Licenza

Un singolo sito è $ 15. La licenza estesa è di $ 30 e può essere utilizzata su siti illimitati per te e i tuoi clienti. Include aggiornamenti a vita.

Questo plugin non funziona con Extra.

• Puoi acquistare questo plugin sul sito web di Divi Extended.

Pensieri finali

Divi Blog Extras aggiunge alcune belle caratteristiche di stile e design per dare un po' di brio al modulo del tuo blog. Aggiunge anche la possibilità di applicare uno stile agli sfondi e al testo delle categorie. Utilizza AJAX per il caricamento e include un nuovo pulsante di caricamento. Puoi anche aggiungere il tuo testo al caricamento di più e leggere più pulsanti. Ognuno di questi design è ottimo per dare al tuo blog un aspetto unico rispetto al blog standard. Se desideri un design del blog che vada oltre il modulo blog standard di Divi Builder, Divi Blog Extras potrebbe essere il modulo che stai cercando.

Vogliamo sentire da voi. Hai provato Divi Blog Extras? Facci sapere la tua esperienza nei commenti qui sotto.

Immagine in evidenza tramite pulsar011 / shutterstock.com