Con Divi, anche i blog sono un modulo e il tuo "blog" può essere posizionato ovunque sul tuo sito web e in diversi formati. Puoi combinare i moduli del blog e della barra laterale per creare design di blog classici. È possibile creare 1 colonna, 2 colonne o 3 colonne utilizzando il modulo blog e barra laterale.

Come aggiungere un modulo blog alla tua pagina

Prima di poter aggiungere un modulo blog alla tua pagina, devi prima accedere a Divi Builder. Una volta che Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Facendo clic su questo pulsante, potrai attivare Divi Builder, che ti darà accesso a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando sfogli il tuo sito web upstream se hai effettuato l'accesso alla dashboard di WordPress.

Una volta entrati in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, non dimenticare di aggiungere prima una riga alla tua pagina. Abbiamo ottimi tutorial sull'utilizzo degli elementi di Linee e tanta tanta sezioni di Divi.

Individua il modulo blog nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "blog" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo del blog! Una volta aggiunto il modulo, verrai accolto con l'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Caso d'uso del modulo blog con un layout a griglia in una sezione specializzata con una barra laterale destra

Per questo esempio, aggiungerò un modulo blog a una pagina del blog. Questa pagina del blog ha un'intestazione completa con un modulo di ricerca di seguito. Sotto il modulo di ricerca aggiungerò una sezione specializzata con il modulo blog sul lato sinistro e una sezione della barra laterale sulla destra. La barra laterale a destra contiene un widget di post recenti, un modulo di attivazione dell'email e un modulo persona.

Questo è l'aspetto della pagina di esempio.

Si noti che il modulo blog si trova in un layout a griglia sul lato sinistro della sezione speciale.

Cominciamo.

Utilizzare il visual builder per aggiungere una sezione specializzata con il seguente layout:

Ti verrà chiesto di aggiungere una colonna o una riga di due colonne per il lato sinistro. Scegli la colonna della riga 1.

Quindi aggiungi il modulo blog alla riga.

Aggiorna le impostazioni del blog come segue:

Opzioni di contenuto

Numero post: 6
Ulteriori informazioni Pulsante: ON
Mostra paginazione: NO
Colore sfondo griglia: #ffffff

Opzioni di design

Layout: griglia
Usa Dropshadow: ON
Icona colore sovrapposizione: #ffffff
Hover Overlay Color: Header rgba (224,153,0,0.51)
Polizia:
Intestazione dimensione carattere: 21px
Colore del testo dell'intestazione: # 333333
Spaziatura lettere: 1px
Altezza riga di intestazione: 1.2 em
Bordo: SÌ
Colore del bordo: # f0f0f0
Larghezza del bordo: 1px
Stile del bordo: solido

Opzioni avanzate

CSS personalizzato (pulsante Leggi altro):

colore: # e09900;
blocco di visualizzazione;
text-align: center;
margin-top: 10px;
border: 1px solid #ccc;
padding: 5px;
Trasformazione del testo: maiuscola;
interlinea: 1px;

Il pulsante CSS personalizzato avanzato per il pulsante Leggi altro crea un look personalizzato che si abbina al design.

Nella sezione della barra laterale destra del layout della sezione specialistica, dovrai aggiungere un modulo della barra laterale che inserisce il widget dei post recenti. Di seguito è necessario aggiungere un modulo di attivazione dell'e-mail. E poi sotto Email Optin, devi aggiungere il modulo Persona con le informazioni sull'autore.

Questo è tutto!

Opzioni di contenuto del blog

Nella scheda Contenuto, troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo sarà sempre in questa scheda.

Numero articolo (Numero di articoli)

Imposta il numero di messaggi che desideri visualizzare. Avrai bisogno di messaggi per tutto ciò che appare in questo modulo.

Seleziona le categorie che desideri includere nel feed del post. Tutte le categorie di messaggi che hai creato appariranno qui per essere selezionate / deselezionate.

Categorie incluse

Scegli le categorie che desideri includere nel feed.

Formato meta-data

Imposta qui il formato della data che desideri visualizzare nei post del tuo blog. Il layout predefinito è M j, formato Y (6 gennaio 2014) Vedere il Codice WordPress sui formati di data per ulteriori opzioni.

Contenuto

La visualizzazione del contenuto completo non troncherà i tuoi post nella pagina dell'indice. Mostra snippet visualizzerà solo il testo dello snippet.

Numero di offset

Scegli il numero di messaggi che desideri compensare. Se compensi con 3 post, ad esempio, i primi tre post nel feed del tuo blog non verranno visualizzati.

Mostra immagine in primo piano

Questa opzione ti consente di scegliere se vuoi che le miniature appaiano nel tuo modulo blog o meno.

Leggi altro pulsante

Qui puoi impostare se visualizzare o meno il link "leggi di più" dopo lo snippet.

Mostra autore

Scegli se visualizzare o meno l'autore di ogni post del blog nella casella meta del post sotto il titolo del post.

Mostra la data

Scegli se visualizzare o meno la data di creazione di ciascun articolo nella casella Meta oggetto sotto il titolo del messaggio.

Mostra categorie

Scegli se visualizzare o meno le categorie di post nell'area meta post sotto il titolo della pubblicazione.

Mostra il numero di commenti

Scegli se visualizzare o meno il numero di commenti nella casella meta post sotto il titolo del post.

Visualizza l'impaginazione

Scegli se visualizzare o meno l'impaginazione per questo feed. Per abilitare la paginazione numerata sarà necessario installare il plug-in WP Page Navi .

Etichetta di amministrazione

Questo cambierà l'etichetta del modulo nel generatore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette appariranno nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di design del blog

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa scheda ti consente di modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare praticamente qualsiasi cosa.

Fornitura

Puoi scegliere di visualizzare i post del tuo blog in una griglia o in un layout a larghezza intera.

Immagine sovrapposta

Se questa opzione è abilitata, vengono visualizzati un colore e un'icona in sovrimpressione quando un visitatore passa con il mouse sull'immagine selezionata di un messaggio.

Colore dell'icona in sovrimpressione

Qui puoi impostare un colore personalizzato per l'icona di sovrapposizione.

Librarsi sul colore della copertina

Qui puoi definire un colore personalizzato per la sovrapposizione.

Hover Icon Picker

Qui puoi definire un'icona personalizzata per l'overlay.

Colore del testo

Si il tuo blog è posizionato su uno sfondo chiaro, il colore del testo deve essere impostato su “Scuro”. Visto, sì il tuo blog è posizionato su uno sfondo scuro, il colore del testo deve essere impostato su “Chiaro”.

Carattere dell'intestazione

Puoi modificare il carattere dell'intestazione selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere dell'intestazione

Qui puoi regolare la dimensione del testo dell'intestazione. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Colore del testo dell'intestazione

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore della tua intestazione, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere di intestazione

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera del testo dell'intestazione, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione di spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Altezza riga di intestazione

L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. Se desideri aumentare lo spazio tra ogni riga, utilizza il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata in il campo di immissione a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Carattere del corpo

È possibile modificare il carattere del corpo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere del corpo

Qui puoi regolare la dimensione del testo del tuo corpo. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Colore del testo del corpo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo corpo del testo, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere del corpo

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera del tuo corpo di testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione dello spazio che desideri nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Altezza della linea del corpo

L'altezza della riga influisce sullo spazio tra ogni riga del corpo del testo. Se si desidera aumentare lo spazio tra ogni riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Metas font

Puoi cambiare il carattere del tuo meta-testo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere Metas

Qui puoi regolare la dimensione del tuo meta testo. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Colore del testo per meta

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo meta-testo, scegli il colore che desideri dal selettore di colori usando questa opzione.

Spaziatura di meta lettere

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera del tuo meta-testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Meta Line Height

L'altezza della riga influisce sullo spazio tra ogni riga del meta-testo.Se desideri aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda della tua dimensione per cambiare il tipo di unità.

Usa il bordo

Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.

Colore del bordo

Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.

Larghezza del confine

Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Unità di misura personalizzate supportate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro, ad esempio em, vh, vw ecc.

Stile del bordo

I bordi supportano otto diversi stili, tra cui: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, inserto e inizio. Seleziona lo stile che desideri dal menu a discesa per applicarlo al bordo.

Opzioni di blog avanzate

Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi CSS e ID personalizzati al modulo, che possono essere usati per personalizzare il modulo nel file style.css del tuo child theme.

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tuo Tema Divi Figlio o in CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando Opzioni tema Divi o Impostazioni pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi elemento interno del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere CSS direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già incorporate con i tag di stile. Quindi devi solo inserire regole CSS separate da punto e virgola.

visibilità

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare mod differenti su dispositivi differenti o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

Questo è tutto per questo tutorial.