Divi Builder Plugin Documentation

Come aggiungere, configurare e personalizzare il modulo Divi blog.

Con Divi, anche i blog sono un modulo, e il tuo “blog” può essere posizionato ovunque sul tuo sito, e in vari formati. Puoi combinare i moduli blog e sidebar per creare i classici design dei blog. I blog a 1 colonna, 2 colonne o 3 colonne possono essere costruiti usando i moduli blog e sidebar.

Vedi una demo dal vivo di questo modulo

Come aggiungere un modulo blog alla tua pagina

Prima di poter aggiungere un modulo blog alla tua pagina, dovrai prima entrare nel Divi Builder. Una volta che il tema Divi è stato installato sul tuo sito web, noterai un pulsante Use Divi Builder sopra l’editor dei post ogni volta che costruisci una nuova pagina. Cliccando su questo pulsante abiliterai il Divi Builder, dandoti accesso a tutti i moduli del Divi Builder. Poi, cliccate sul pulsante Use Visual Builder per lanciare il costruttore in modalità visiva. Potete anche fare clic sul pulsante Use Visual Builder durante la navigazione del vostro sito web sul front-end se avete effettuato l’accesso alla vostra Dashboard di WordPress.

Una volta che sei entrato nel Visual Builder, puoi cliccare sul pulsante grigio più 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 degli ottimi tutorial su come usare gli elementi di riga e sezione di Divi.

Posiziona il modulo blog all’interno dell’elenco dei moduli e cliccalo per aggiungerlo alla tua pagina. L’elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola “blog” e poi cliccare su enter per trovare e aggiungere automaticamente il modulo blog! Una volta che il modulo è stato aggiunto, sarai accolto con l’elenco delle opzioni del modulo. Queste opzioni sono separate in tre gruppi principali: Content, Design e Advanced.

Esempio di caso d’uso: Aggiunta di un modulo blog con un layout a griglia in una sezione speciale con una barra laterale destra

Per questo esempio, aggiungerò un modulo blog a una pagina blog. Questa pagina di blog ha un’intestazione fullwidth con un modulo di ricerca sotto di essa. Sotto il modulo di ricerca, aggiungerò una sezione speciale con il modulo blog a sinistra e una sezione sidebar a destra. La barra laterale a destra ha un widget per i post recenti, un modulo Email Optin e un modulo Persona.

Ecco come appare la pagina di esempio.

Nota che il modulo blog è in un layout a griglia sul lato sinistro della sezione speciale.

Iniziamo.

Utilizza il visual builder per aggiungere una sezione di specialità con il seguente layout:

Ti verrà richiesto di aggiungere una riga a 1 o 2 colonne per il lato sinistro. Scegli la riga a 1 colonna.

Poi aggiungi il modulo Blog alla riga.

Aggiorna le impostazioni del Blog come segue:

Opzioni contenuto

Numero messaggi: 6
Tasto Leggi tutto: ON
Mostra paginazione: NO
Colore sfondo griglia: #ffffff

Opzioni di design

Layout: Griglia
Usa ombra: ON
Colore Icona Overlay: #ffffff
Colore Overlay: rgba(224,153,0,0.51)
Fonte di intestazione: Default
Dimensione carattere Header: 21px
Colore testo Header: #333333
Header Letter Spacing: 1px
Altezza linea di testa: 1.2em
Usa bordo: SI
Colore del bordo: #f0f0f0
Border Width: 1px
Border Style: Solid

Opzioni avanzate

Custom CSS (Read More Button):

L’avanzato Custom CSS per il pulsante read more crea un look personalizzato che si adatta bene al design.

Nella sezione della barra laterale destra del layout della sezione Specialty avrai bisogno di aggiungere un modulo sidebar che tira dentro il widget dei post recenti. Sotto di esso dovrai aggiungere un modulo Email Optin. E poi sotto l’Email Optin hai bisogno di aggiungere il Modulo Persona con informazioni sull’autore.

Ecco!

Opzioni per il contenuto del blog

Nella scheda del contenuto troverai tutti gli elementi del contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla ciò che appare nel vostro modulo si trova sempre in questa scheda.

Numero di post

Definire il numero di post che si desidera visualizzare. Avrai bisogno di avere dei post creati per mostrare qualcosa all’interno di questo modulo.

Seleziona le categorie che vorresti includere nel feed dei post. Qualsiasi categoria di post che hai creato apparirà qui per te da selezionare/deselezionare.

Categorie incluse

Scegli quali categorie vorresti includere nel feed.

Meta Date Format

Definisci qui il formato della data che vorresti visualizzare sui post del tuo blog. Il layout predefinito è un M j, Y formate (6 gennaio 2014) Vedi il Codex di WordPress sui formati di data per ulteriori opzioni.

Contenuto

Mostra il contenuto completo non troncherà i tuoi post sulla pagina indice. Mostrando l’estratto verrà visualizzato solo il testo dell’estratto.

Numero offset

Scegli quanti post vuoi compensare. Se sfalsate di 3 post, per esempio, i primi tre post nel vostro feed del blog non saranno visualizzati.

Show Featured Image

Questa opzione vi permette di scegliere se volete o meno che le immagini in miniatura appaiano nel vostro modulo blog.

Leggi di più

Qui puoi definire se mostrare o meno il link “leggi di più” dopo l’estratto.

Mostra autore

Scegli se vuoi visualizzare o meno l’autore di ogni post del blog nella meta area del post sotto il titolo del post.

Mostra data

Scegli se vuoi visualizzare o meno la data in cui ogni post è stato creato nell’area post meta sotto il titolo del post.

Mostra categorie

Scegli se vuoi visualizzare o meno le categorie dei post nell’area post meta sotto il titolo del post.

Mostra conteggio commenti

Scegli se vuoi visualizzare o meno il conteggio dei commenti nella meta area del post sotto il titolo del post.

Mostra paginazione

Scegli se vuoi visualizzare o meno la paginazione per questo feed. Per abilitare la paginazione numerata, dovrai installare il plugin WP Page Navi.

Admin Label

Questo cambierà l’etichetta del modulo nel costruttore per una facile identificazione. Quando usate la vista WireFrame nel Visual Builder, queste etichette appariranno all’interno del blocco del modulo nell’interfaccia del Divi Builder.

Opzioni di design del blog

Nella scheda di design troverete tutte le opzioni di stile del modulo, come font, colori, dimensioni e spaziatura. Questa è la scheda che userai per cambiare l’aspetto del tuo modulo. Ogni modulo Divi ha una lunga lista di impostazioni di design che puoi usare per cambiare praticamente tutto.

Layout

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

Featured Image Overlay

Se abilitato, un colore e un’icona di overlay saranno visualizzati quando un visitatore passa sopra l’immagine in evidenza di un post.

Colore dell’icona di sovrapposizione

Qui puoi definire un colore personalizzato per l’icona di sovrapposizione.

Colore della sovrapposizione

Qui puoi definire un colore personalizzato per la sovrapposizione.

Hover Icon Picker

Qui puoi definire un’icona personalizzata per la sovrapposizione.

Text Color

Se il tuo blog viene posizionato su uno sfondo chiaro il Text Color dovrebbe essere impostato su ‘Dark’. Viceversa, se il tuo blog è collocato su uno sfondo scuro, il Colore del testo dovrebbe essere impostato su ‘Chiaro’.

Font dell’intestazione

Puoi cambiare il font del tuo testo dell’intestazione selezionando il font desiderato dal menu a discesa. Divi viene fornito con dozzine di grandi font alimentati da Google Fonts. Per impostazione predefinita, Divi usa il font Open Sans per tutto il testo della tua pagina. Puoi anche personalizzare lo stile del tuo testo usando le opzioni grassetto, corsivo, tutto maiuscolo e sottolineato.

Dimensione del carattere dell’intestazione

Qui puoi regolare la dimensione del testo dell’intestazione. Puoi trascinare il cursore della gamma per aumentare o diminuire la dimensione del tuo testo, oppure puoi inserire il valore della dimensione del testo desiderato direttamente nel campo di input a destra del cursore. Il campo di input supporta diverse unità di misura, il che significa che puoi inserire “px” o “em” dopo il valore della dimensione per cambiarne il tipo di unità.

Colore del testo dell’intestazione

Di default, tutti i colori del testo in Divi appariranno bianchi o grigio scuro. Se vuoi cambiare il colore del tuo testo d’intestazione, scegli il colore desiderato dal selezionatore di colori usando questa opzione.

Spaziatura lettere d’intestazione

La spaziatura delle lettere riguarda lo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel testo dell’intestazione, usa il cursore della gamma 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” dopo il tuo valore di dimensione per cambiare il suo tipo di unità.

Header Line Height

L’altezza della linea influenza lo spazio tra ogni riga del tuo testo d’intestazione Se vuoi aumentare lo spazio tra ogni riga, usa il cursore della gamma 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” dopo il tuo valore di dimensione per cambiarne il tipo di unità.

Font del corpo

Puoi cambiare il font del tuo testo selezionando il font desiderato dal menu a discesa. Divi viene fornito con dozzine di grandi font alimentati da Google Fonts. Per impostazione predefinita, Divi usa il font Open Sans per tutto il testo della tua pagina. Puoi anche personalizzare lo stile del tuo testo usando le opzioni grassetto, corsivo, tutto maiuscolo e sottolineato.

Dimensione carattere corpo

Qui puoi regolare la dimensione del tuo testo corpo. Puoi trascinare il cursore della gamma per aumentare o diminuire la dimensione del tuo testo, oppure puoi inserire il valore desiderato della dimensione del testo direttamente nel campo di input a destra del cursore. Il campo di input supporta diverse unità di misura, il che significa che puoi inserire “px” o “em” dopo il valore della dimensione per cambiarne il tipo di unità.

Colore del testo del corpo

Di default, tutti i colori del testo in Divi appariranno come bianco o grigio scuro. Se vuoi cambiare il colore del tuo testo del corpo, scegli il colore desiderato dal selezionatore di colori usando questa opzione.

Spaziatura lettere del corpo

La spaziatura delle lettere influenza lo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel tuo testo, usa il cursore della gamma 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” dopo il tuo valore di dimensione per cambiare il suo tipo di unità.

L’altezza della linea del corpo

L’altezza della linea influenza lo spazio tra ogni linea del tuo testo del corpo Se vuoi aumentare lo spazio tra ogni linea, usa il cursore della gamma per regolare lo spazio o inserisci la dimensione desiderata della spaziatura 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” dopo il tuo valore di dimensione per cambiare il suo tipo di unità.

Font del meta testo

Puoi cambiare il font del tuo meta testo selezionando il font desiderato dal menu a discesa. Divi viene fornito con dozzine di grandi font alimentati da Google Fonts. Per impostazione predefinita, Divi usa il font Open Sans per tutto il testo della tua pagina. Puoi anche personalizzare lo stile del tuo testo usando le opzioni grassetto, corsivo, tutto maiuscolo e sottolineato.

Dimensione carattere Meta

Qui puoi regolare la dimensione del tuo testo meta. Puoi trascinare il cursore della gamma per aumentare o diminuire la dimensione del tuo testo, oppure puoi inserire il valore della dimensione del testo desiderato direttamente 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” dopo il tuo valore di dimensione per cambiarne il tipo di unità.

Colore del testo meta

Di default, tutti i colori del testo in Divi appariranno come bianco o grigio scuro. Se vuoi cambiare il colore del tuo meta testo, scegli il tuo colore desiderato dal selezionatore di colori usando questa opzione.

Meta Letter Spacing

Letter spacing influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel tuo meta testo, usa il cursore della gamma 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” dopo il tuo valore di dimensione per cambiare il suo tipo di unità.

Meta Line Height

L’altezza della linea influenza lo spazio tra ogni linea del tuo meta testo Se vuoi aumentare lo spazio tra ogni linea, usa il cursore della gamma per regolare lo spazio o inserisci la dimensione desiderata della spaziatura 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” dopo il tuo valore di dimensione per cambiarne il tipo di unità.

Usa bordo

Abilitando questa opzione metterai un bordo intorno al tuo modulo. Questo bordo può essere personalizzato usando le seguenti impostazioni condizionali.

Border Color

Questa opzione influenza il colore del tuo bordo. Seleziona un colore personalizzato dal selezionatore di colori per applicarlo al tuo bordo.

Border Width

Di default, i bordi hanno una larghezza di 1 pixel. Puoi aumentare questo valore trascinando il cursore della gamma o inserendo un valore personalizzato nel campo di input a destra del cursore. Le unità di misura personalizzate sono supportate, il che significa che puoi cambiare l’unità predefinita da “px” a qualcos’altro, come em, vh, vw ecc.

Stile del bordo

I bordi supportano otto stili diversi, tra cui: solido, punteggiato, tratteggiato, doppio, scanalatura, cresta, inset e outset. Seleziona lo stile desiderato dal menu a discesa per applicarlo al tuo bordo.

Opzioni avanzate del blog

Nella scheda avanzata, troverai opzioni che i web designer più esperti potrebbero trovare utili, come CSS personalizzati e attributi HTML. Qui potete applicare CSS personalizzati a qualsiasi elemento del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere usati per personalizzare il modulo all’interno del file style.css del tuo tema figlio.

IDSS

Inserisci un ID CSS opzionale da usare per questo modulo. Un ID può essere usato per creare uno stile CSS personalizzato, o per creare collegamenti a sezioni particolari della tua pagina.

Classe CSS

Inserisci le classi CSS opzionali da usare per questo modulo. Una classe CSS può essere usata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere usate nel tuo Divi Child Theme o all’interno del CSS personalizzato che aggiungi alla tua pagina o al tuo sito web usando le Opzioni del tema Divi o le Impostazioni della pagina Divi Builder.

Custom CSS

Il CSS personalizzato può anche essere applicato al modulo e a qualsiasi elemento interno del modulo. All’interno della sezione Custom CSS, troverai un campo di testo dove puoi aggiungere CSS personalizzato direttamente ad ogni elemento. I CSS inseriti in queste impostazioni sono già avvolti all’interno di tag di stile, quindi è sufficiente inserire regole CSS separate da punto e virgola.

Visibilità

Questa opzione ti permette di controllare su quali dispositivi appare il tuo modulo. Puoi scegliere di disabilitare il tuo modulo su tablet, smartphone o computer desktop individualmente. Questo è utile se vuoi usare moduli diversi su dispositivi diversi, o se vuoi semplificare il design mobile eliminando certi elementi dalla pagina.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.