Creare un blog con Divi: il tutorial completo per chi inizia

Creare un blog con Divi è una delle domande più frequenti fra gli appassionati di questo splendido tema. Articoli e notizie non fanno parte solo del mondo dell’editoria, ma riguardano anche realtà commerciali come i siti di vendita o i portali dei professionisti che vogliono proporre servizi e prodotti, oltre ad informazioni. Se il tuo è un sito di news, ti consigliamo però di pensare ad Extra, il secondo tema più popolare di Elegant Themes e ideato proprio per blogger, quotidiani e simili. Se invece creare un blog con Divi è il tuo imperativo, leggi il nostro tutorial completo per scoprire come muoverti.

Come creare un blog con Divi

Se stai leggendo questa guida prima della fine di novembre 2019, abbiamo in serbo per te una bellissima ‘novità’. In realtà non si tratta di una news, ma di un’usanza che ET adotta ogni anno e sempre nel periodo del Black Friday. Anche se adesso il prezzo di Divi può sembrare proibitivo, sappi che in questo particolare periodo dell’anno puoi fare il tuo acquisto con un forte sconto. Lo sconto sarà attivo a partire dal 29 Novembre e comprende non solo la possibilità di acquistare i due piani in forte sconto, ma anche l’accesso a prezzi vantaggiosi anche per quanto riguarda plugin, template e tanti altri gradget. Senza considerare i bonus in regalo! Se hai rimandato l’acquisto del tema di ET fino ad ora, forse un piccolo aiutino potrà esserti utile per entrare a far parte della comunità di abbonati.

Prima di iniziare: gli strumenti necessari

Forse sarà banale dirlo, ma prima di iniziare a creare un blog con Divi bisogna per forza avere il tema già installato sul proprio sito WordPress. Se non lo hai ancora fatto, scarica il file dal sito ufficiale inserendo le tue credenziali e scegli se adottare il piano annuale oppure a vita. In entrambi i casi ne rimarrai soddisfatto! Seguendo il link che ti abbiamo segnalato, potrai inoltre fare una prova gratuita prima di procedere con l’acquisto e guardare con i tuoi occhi la demo. Ultimati questi passaggi, sei pronto per installare DIVI al meglio: ti rimandiamo all’articolo apposito per scoprire quali voci sono più utili da impostate e quali altre invece sarebbe meglio ignorare.

Il tema ‘figlio’

Parliamo di un altro strumento necessario che dovrai tenere in considerazione in questa primissima fase della tua esperienza ‘diviana’. Il secondo step che ti suggeriamo riguarda il Child Theme, ovvero una sorta di succursale del tema principale su cui fare delle modifiche ai files del tema stesso. Il Child Theme ti sarà utile anche per non perdere le impostazioni che hai scelto per il tuo sito, il codice CSS aggiuntivo e ti farà risparmiare davvero un sacco di tempo. Per creare il Child Theme ti consigliamo di affidarti al fai da te e girare al largo dalle guide non ufficiali. Spesso sono ricche di errori, non sono aggiornate e l’unico risultato che otterrai è una forte delusione. Il nostro suggerimento è invece di avvalerti di un particolare generatore automatico che abbiamo testato su tutti i nostri siti e che è stato realizzato da uno degli sviluppatori del team ufficiale.

I layout

Hai diverse possibilità per creare un blog con Divi. Visto che il tuo obbiettivo è costruire un Layout per la tua sezione dedicata agli articoli, dovrai pensare alla struttura visiva della pagina. Puoi crearla interamente con le tue manine oppure adottare uno dei Layout preimpostati del produttore (sono 140!). Anche in questo caso potrai scegliere fra mantenerne lo stile oppure effettuare delle piccole modifiche in base alle tue esigenze. Se hai scelto Divi come tuo tema preferito, vorrai magari giocare con gli effetti visivi e distinguerti rispetto alla massa. Ecco perchè la decisione migliore riguarda creare un contenuto originale.

Costruisci la pagina blog

Una volta aggiunta una nuova pagina e scelto il titolo, per esempio ‘Blog’, iniziamo a lavorare sul frontend. Se hai già avuto modo di costruire altre pagine conoscerai già le tre opzioni che ti appaiono ancora prima di lavorare al contenuto. Ad ogni modo, Build from scratch ti permette di creare da zero la tua pagina, altrimenti puoi scegliere di caricare subito uno dei Layout che abbiamo visto poco fa, cliccando sul secondo box. Nel nostro caso scegliamo la prima opzione e procediamo.

Lo sfondo

Ci verrà richiesto se creare una sezione standard, con specialità oppure a larghezza piena. Quest’ultima presenta ben pochi moduli e visto che dobbiamo partire dal nome della pagina, scegliamo il primo. Prima di inserire la riga, cambiamo subito lo sfondo della sezione per dare un tocco di colore al titolo. Per modificare il background bisogna cliccare sulla rotellina della sezione (il box blu) e spostarsi alla voce Sfondo della scheda Contenuti. Qui abbiamo diverse opzioni, come inserire uno sfondo pieno da un unico colore, utilizzarne due per giocare con i gradienti oppure inserire un’immagine o un video.

Non vogliamo appesantire troppo la pagina e quindi scegliamo due colori differenti, un classico azzurro e il turchese #35fff8. Lasciamo tutto così com’è e spostiamoci invece nella scheda Design. In seconda posizione troviamo Modulo Separatore. Con questa funzione possiamo giocare ancora di più con i colori, inserendo un elemento visivo molto carino. Clicchiamo su In Fondo e scegliamo il motivo che preferiamo. Il Colore Bordo sarà invece bianco, perchè vogliamo dare una continuità con il corpo della pagina.

Il titolo

Adesso possiamo aggiungere la riga e il modulo testo al suo interno. Si aprirà in automatico la finestra delle Impostazioni, dove inserire il titolo e modificare i suoi valori. Scriviamo quindi la frase o la parola che preferiamo in Testo e selezioniamo l’Heading 1, ovvero H1. Se hai delle difficoltà, puoi orientarti con l’immagine che trovi qui di seguito.

Modifichiamo lo stile per renderlo più accattivante. Se hai un sito amatoriale, giovane o dinamico, puoi optare per un font come Aclonica. In caso di portali professionali, commerciali e via dicendo potrai invece spulciare fra le tante alternative per l’intestazione, scegliendo il carattere che più ti piace. Nel nostro caso abbiamo preferito usare il grassetto, mettere il testo in posizione centrale, usare il bianco (visto che lo sfondo è colorato) e cambiare le Dimensioni del Testo in base al dispositivo usato dall’utente: 50px per il Desktop, 40px per il Tablet e 30px per il Mobile.

Una nuova sezione

È arrivato finalmente il momento di entrare nel cuore della nostra guida su come costruire un blog con Divi: inserire gli articoli. Aggiungiamo un’altra sezione al di sotto di quella che contiene l’intestazione. Stavolta scegliamo la colonna Specialità per inserire sia i box degli articoli sia una sidebar laterale. Molto utile per inserire widget personali!

Il modulo Blog

Per la riga scegliamo il box da due colonne di uguale proporzione e inseriamo un modulo Blog nella prima. Nelle Impostazioni, lasciamo Articoli come tipo di post e 1 come Count. Sta a noi poi decidere se sfruttare tutte le categorie in generale oppure solo una in particolare. Il resto lo decideremo in base alle nostre necessità. In questo esempio abbiamo preferito lasciare tutto invariato e modificare l’aspetto grafico del box. Andiamo quindi su Design e in Layout selezioniamo Griglia dal menù a tendina.

Per creare un effetto anche per l’immagine in evidenza, abbiamo scelto di variare i valori di Overlay. Attiviamo la Sovrimpressione dell’immagine e mettiamo un bianco per il colore dell’icona. Scegliamo sempre bianco per il colore dello sfondo, ma modifichiamo la trasparenza in modo che la foto venga solo sfumata: rgba(255,255,255,0.4).

In Immagine possiamo invece scegliere se creare un effetto arrotondato per gli angoli, inserire un bordo oppure un’ombra. Tieni presente però che in questo caso agirai solo sull’immagine in evidenza e non sull’intero box. L’ombreggiatura del modulo si modifica invece con Box Shadow, per esempio selezionando l’ombra inferiore e cambiando il colore della stessa. Se non vogliamo che sia piena, possiamo scegliere un colore qualsiasi e aggiungere della trasparenza. Nel nostro esempio abbiamo deciso di rimanere in tema con il blu della prima sezione: rgba(12,113,195,0.54).

Il testo

Prima di chiudere le impostazioni del modulo vogliamo fare altre modifiche al testo. Per esempio possiamo dare al titolo del post un colore diverso rispetto al metatesto e al pulsante Leggi di più. Per il Titolo testo andiamo sulla voce apposita, scegliamo il font Acme, luce soffusa Standard e colore blu scuro (#031875). Modifichiamo anche le dimensioni del testo come abbiamo fatto in precedenza:

• Desktop 24px, Tablet 22px, Telefono 20px
• Interlinea Desktop e Tablet 1.4em, Telefono 1.6em

Procediamo con il Metadata Testo, ovvero il nome dell’autore, la data e il nome della categoria. Lasciamo tutto di default tranne il colore, un semplice blu #0c71c3. Scegliamo però di differenziarlo a livello visivo rispetto al titoletto: cambiamo lo stile in corsivo grazie alla I. Facciamo la stessa cosa anche su Leggi di più Testo:

• Font – Acme
• Colore #0c71c3
• Interlinea 3em

Cambiamo anche il valore di Mostra Paginazione Testo, ovvero la scritta Post Precedenti:

• Luce – Semi Bold
• Stile – TT
• Dimensioni – 16px
• Interlinea – 3em

Seconda colonna: clona tutto

Per fortuna il tema ci permette di non fare tutto il lavoro da capo anche per la seconda colonna. Possiamo clonare il box appena creato e incollarlo alla sua destra. Come? Attiviamo il menù del modulo e clicchiamo sui tre pallini, poi su Copia modulo. Click con il pulsante destro sul + della seconda colonna e scegliere Incollare Modulo. Il gioco è fatto! O quasi.

Come puoi notare abbiamo creato una copia identica del primo contenuto, ma la nostra intenzione è di mostrare un altro post, non è vero? Per visualizzare un secondo articolo dobbiamo solo modificare la voce Post Offset Number che troviamo in Impostazioni/Contenuti. Considera che la posizione 0 indica l’articolo più recente e 1 quello precedente. Inseriamo quindi 1 e diamo l’okay. Possiamo anche scegliere di non mostrare la paginazione, disattivando Mostra Paginazione presente nella voce Elementi della stessa scheda.

Terza colonna: la Sidebar

Come di certo ricorderai, all’inizio di questa guida su come creare un blog con Divi abbiamo creato una sezione comprensiva sia dei box articoli sia di una barra laterale a destra. Parliamo quindi della terza colonna della riga su cui stiamo lavorando. Click sul simbolo + per aggiungere il modulo Barra Laterale. In Impostazioni/Contenuti troviamo l’Area Widget. Significa che possiamo decidere se visualizzare una barra laterale che abbiamo pianificato per post, footer o altre sezioni del nostro sito. In alternativa possiamo creare un secondo widget, inserendo un menù nascosto con categorie inedite, una galleria di immagini e persino un box ricerca. Proprio come ti mostriamo nell’immagine d’esempio.

Se vuoi replicare questo stile, ti basta fare queste variazioni:

• Design/Layout – Destro
• Attiva Elimina Separatore Bordo
• Font Titolo – Trebuchet
• Luce – Semi Bold
• Allineamento – Centrale
• Dimensione – 22px Desktop, 20px Tablet e Telefono
• Interlinea – 1.5em
• Body Testo Luce – Chiaro
• Allineamento – Centro
• Colore – #0c71c3
• Dimensioni – 16px
• Spaziatura – Desktop -147px, auto per Tablet e Telefono

Va da sè che possiamo usare la nostra creatività per inserire qualsiasi contenuto in questa sezione. Ti mostriamo un altro esempio!

Se abbiamo già ideato un Footer che ci soddisfa, possiamo concludere qui la nostra pagina, cliccare su Salva e pubblicare. Altrimenti possiamo proseguire inserendo altre sezioni, come per esempio un Menù centrale visibile alla fine oppure un modulo che rimandi alla pagina di ricerca risultati realizzata con il Divi Theme Builder. Non c’è davvero alcun limite alla fantasia! Il nostro tutorial su come creare una pagina Blog con Divi termina qua: vi è stata utile? Fateci sapere il vostro parere con un commento.