Evidenziazione del plug-in Divi: contenuto intenso

Il Divi Builder include un modulo blog per visualizzare i post in base alle categorie sia a larghezza intera che con layout a griglia. Hai mai desiderato un maggiore controllo sul layout del tuo blog? Potresti essere interessato a un plug-in di terze parti chiamato Content Intense.

Content Intense è un plug-in di BeSuperfly che aggiunge nuovi layout e funzionalità di stile per dare un nuovo aspetto al modulo del tuo blog. Si basa sul modulo blog standard, quindi include tutte le funzionalità familiari.

(Il plugin è disponibile dal sito web dello sviluppatore.)

In questo momento saliente del plugin daremo un'occhiata alle funzionalità e vedremo come appare sulla pagina. Lo caricherò anche in Extra (ma ovviamente è compatibile anche con Divi).

Installazione di contenuti intensi

Carica e attiva Content Intense proprio come qualsiasi plugin. Una volta che il plug-in è stato attivato, vedrai una nuova voce di menu all'interno di Impostazioni nella dashboard chiamata Attivazione plug-in di contenuto intenso. Fare clic su questo e inserire la chiave API e l'e-mail e salvare le modifiche.

Modulo contenuto intenso

Un nuovo modulo viene aggiunto a Divi Builder chiamato Content Intense.

La scheda Contenuto ti consente di visualizzare solo post, solo pagine o pagine e post, il numero da visualizzare, le categorie e il numero di offset. Mostra l'immagine in primo piano, il meta (che ti consente di scegliere un separatore), l'estratto, la navigazione e lo sfondo. Come vedrai, sto seriamente semplificando eccessivamente il numero di opzioni nelle impostazioni.

Una delle caratteristiche più esclusive è che le categorie di WordPress vengono aggiunte alle pagine. Se scegli di visualizzare le pagine, queste vengono selezionate quando scegli le loro categorie.

La scheda Design ti consente di selezionare uno dei 5 layout, abilitare la sovrapposizione, regolare il testo dell'intestazione, il corpo del testo e il meta testo. Regola anche il bordo, il pulsante, la spaziatura e l'animazione.

L'opzione Advanced than include le funzionalità di relazione del pulsante in modo da poter specificare il valore dell'attributo rel del collegamento. Questo è ottimo per creare segnalibri, impostare un collegamento a nofollow, ecc.

Contenuto Intenso Impostazioni predefinite

Le impostazioni predefinite visualizzano l'immagine in primo piano con il Gravatar dell'autore che si sovrappone alla parte inferiore dell'immagine. Questo è seguito dal pulsante post meta, titolo, una riga, estratto del post e leggi di più con animazione al passaggio del mouse. Ho aggiunto uno sfondo nella sezione per farlo risaltare.

In questo esempio ho aggiunto un asterisco per il meta separatore, ho cambiato il conteggio degli estratti da 270 a 100 e ho sostituito il pulsante Leggi altro con il testo centrato. Invece della data, mostra quanto tempo fa è stato pubblicato il post. Ho disabilitato il conteggio dei commenti.

Questo aggiunge un po' di colore allo sfondo dietro il testo. Ho anche spostato il pulsante a destra e impostato l'estratto su 150.

Ci sono cinque diversi layout. Gli esempi che abbiamo visto finora utilizzano Atlas – 3 colonne, layout verticale, con avatar. Diamo un'occhiata a ciascun layout. Sto usando le impostazioni predefinite.

Questo è Alpi. È un layout alternato orizzontale a una colonna. Lo sfondo del testo corrisponde al colore di sfondo che ho scelto nella sezione. Queste sono carte flat con effetti al passaggio del mouse per il pulsante.

Questo è Himalaya, un layout verticale a 3 colonne che utilizza l'immagine in primo piano del post come sfondo. Utilizza anche l'animazione dei pulsanti. Questo testo è più difficile da vedere senza aggiustamenti. Risolveremo questo problema in seguito con un overlay.

Questo è Rockies, un layout verticale a 3 colonne con effetti al passaggio del mouse. Posiziona anche l'immagine in primo piano come sfondo. Gli effetti al passaggio del mouse rivelano l'estratto completo e il pulsante Leggi altro. Faremo alcune modifiche per rendere il testo più leggibile.

Questo è Andes: un layout verticale a 1 colonna con avatar. Utilizza una versione ritagliata dell'immagine in primo piano e utilizza linee piccole per separare meta e linee più grandi per separare i post.

Nella parte inferiore della pagina vedrai i pulsanti di navigazione. Puoi disabilitarli o aggiungere il tuo testo. Prendono lo stile degli altri pulsanti, quindi quando hai modellato i pulsanti Leggi di più hai disegnato anche questi. Puoi anche usare il testo invece di un pulsante.

Esempio – Alpi con Atlas

Ho creato questo layout del blog utilizzando 2 moduli Content Intense. Il primo utilizza il layout delle Alpi senza navigazione. Il secondo modulo utilizza Atlas. Ho impostato il suo offset su 1 in modo che non mostri la stessa immagine del primo modulo. Ho regolato il colore del carattere su Arimo (uno dei miei preferiti). I pulsanti utilizzano un gradiente. Al passaggio del mouse passano a un colore solido e aumentano la spaziatura delle lettere. Il pulsante di navigazione corrisponde.

Esempio – Alpi

Sono un fanatico dei layout alternati. Adoro l'aspetto delle Alpi senza alcuna modifica, quindi ho apportato solo alcune piccole modifiche. Ho aggiunto un bordo rosso, una sovrapposizione rossa e ho cambiato i colori del pulsante e dell'intestazione. Ho anche cambiato il carattere in Dosis e l'ho reso in grassetto. Questo mostra l'overlay al passaggio del mouse.

In realtà mi piace di più senza il confine. Questo mostra il pulsante al passaggio del mouse.

Esempio – Ande

Questo esempio utilizza 6 diversi moduli Content Intense, tutti che utilizzano Andes e ciascuno è compensato di 1 in più rispetto al modulo precedente. Ho aggiunto uno sfondo alla sezione con una sovrapposizione. Il carattere dell'intestazione è Comfortaa. L'ultimo modulo utilizza la navigazione. Ho cambiato i pulsanti in testo.

Ecco uno sguardo al normale design a colonna singola. Ho anche aggiunto un overlay al passaggio del mouse. Tutto il resto è predefinito.

Esempio: Himalaya

Questo usa l'Himalaya con una sovrapposizione dietro il testo. Ho disabilitato il meta, cambiato il testo in chiaro, cambiato lo stile del pulsante in bianco e ridotto il carattere del pulsante a 12 punti. Il testo dell'intestazione è Bitter. L'unica animazione che ho incluso è per il passaggio del mouse. Questo sarebbe un ottimo CTA o collegamenti a pagine che descrivono i tuoi servizi.

Esempio – Montagne Rocciose

Amo il look di Rockies. Ha un bell'effetto ombra con animazione al passaggio del mouse che fa apparire il testo e il pulsante Leggi altro. Avrei potuto inserire una sovrapposizione di testo ma non volevo coprire l'immagine. Invece, ho cambiato il testo in chiaro. Ho anche cambiato i colori di meta e del pulsante e ho cambiato il separatore in un trattino.

Ovviamente una sovrapposizione sembra buona. Ho aggiunto una sovrapposizione nera e ho cambiato l'opacità in modo che un po' dell'immagine traspaia. Anche la data nell'angolo in alto a sinistra utilizza la sovrapposizione. Ho cambiato il pulsante in testo e l'ho spostato a destra. Mi piacciono quei tre punti e la linea in fondo alle carte. È un piccolo dettaglio che aggiunge un tocco di bagliore visivo.

Esempio – Extra

Content Intense funziona alla grande con Extra. Ho dovuto fare solo alcuni piccoli aggiustamenti dove ho usato Andes. Nel mio esempio avevo posizionato uno sfondo bianco per l'area di testo. Dato che ho usato il testo bianco, l'ho semplicemente cambiato in scuro. L'esempio sopra è Rockies. L'unica differenza era il colore del testo per il link per saperne di più.

Stili scaricabili

Le animazioni possono essere aggiunte tramite CSS. Il sito Web dello sviluppatore mostra diverse animazioni che hanno creato come quella sopra che sposta il testo al passaggio del mouse. Questo e altri stili possono essere scaricati da loro in un file JSON.

Licenza e documentazione

Scegli tra due licenze (nessuna delle due consente la rivendita):

• Licenza Standard: per l'utilizzo su un singolo sito web. Include 1 per il progetto di sviluppo e 1 per il progetto live.
• Licenza illimitata: può essere utilizzata in siti Web illimitati per uso personale e client.

Gli aggiornamenti sono automatici. Content Intense è disponibile sul sito Web dello sviluppatore.

La documentazione è provata sul sito Web dello sviluppatore. Ti guida attraverso le regolazioni e fornisce demo lungo il percorso.

Pensieri finali

Content Intense ha alcune belle funzionalità di layout e ancora più layout verranno aggiunti in futuro, quindi questo è solo l'inizio. Ciascuno dei layout può essere stilizzato con le regolazioni del modulo e personalizzato ulteriormente con CSS. È intuitivo da usare. Se sei interessato a dare al tuo blog un aspetto diverso, Content Intense potrebbe essere il plugin che stai cercando.

Vogliamo sentire da voi. Hai provato Content Intense? Facci sapere la tua esperienza con esso nei commenti qui sotto.

Immagine in primo piano tramite LanKoga / shutterstock.com