Présentation de la modification en bloc et la sélection multiple sur Divi

Presentazione in blocco e selezione multipla su Divi

Oggi abbiamo scoperto una nuova funzionalità su Divi, ovvero: Multiselect (selezione multipla) e Bulk Editing (Bulk Editing) per divi, una nuova incredibile funzionalità che ti consente di creare siti Web con nuova velocità ed efficienza . È ora possibile selezionare più elementi contemporaneamente ed eseguire azioni globali sull'intero gruppo di elementi.

Puoi trascinare, rilasciare, copiare, incollare, eliminare e persino modificare il design e il contenuto di ogni cosa contemporaneamente. Invece di apportare modifiche noiose a un gruppo di elementi uno per uno, e ancora e ancora, selezionali tutti e modificali tutti in una volta. È davvero impressionante.

Modifica più elementi contemporaneamente per risparmiare tempo

La modifica di più elementi contemporaneamente ti farà risparmiare un'enorme quantità di tempo rimuovendo le attività ripetitive, noiose e costose associate alla progettazione di un sito Web coerente.

Tenere premuto Cmd / Ctrl o Maiusc per selezionare più

Quando costruisci in Divi, ora puoi tenere premuti i tasti Cmd o Ctrl e fare clic sugli elementi per selezionarli. Puoi selezionare più elementi tutte le volte che vuoi e puoi anche selezionare una combinazione di moduli, righe e sezioni. Puoi anche tenere premuto il tasto Maiusc e fare clic per selezionare una serie di moduli in una colonna, una serie di righe in una sezione o una serie di sezioni in una pagina. Una volta selezionato, puoi modificare in blocco l'intera raccolta di elementi contemporaneamente.

Modifica in blocco di diversi moduli

Quando modifichi in blocco il design di più elementi multi-selezionati, tutti si aggiornano in tempo reale, facendoti risparmiare tonnellate e tonnellate di tempo di progettazione. Quando apri le impostazioni modali per una raccolta di elementi, Divi visualizza automaticamente un elenco di impostazioni condivise. Quando si modifica il design, tutti gli elementi selezionati vengono aggiornati di conseguenza. Puoi persino modificare in blocco una raccolta di elementi diversi. Ad esempio, puoi aggiungere una casella ombra a un contenitore Blurb, un contenitore Immagine e una sezione contemporaneamente.

Trascina, rilascia, copia, incolla ed elimina rapidamente

La selezione multipla è un ottimo modo per copiare, incollare ed eliminare rapidamente più elementi contemporaneamente. È anche un ottimo modo per spostare una serie di elementi in una nuova posizione, piuttosto che trascinarli uno per uno. Puoi persino trascinare e rilasciare moduli, linee e sezioni contemporaneamente e Divi combinerà automaticamente gli elementi e li rilascerà in un'unica posizione.

Comprendi meglio la struttura della tua pagina

Tenere premuti i tasti Cmd o Ctrl è anche un ottimo modo per comprendere meglio la struttura della pagina e selezionare rapidamente piccoli moduli individuali che potrebbero essere difficili da trovare utilizzando l'interfaccia di compilazione minima di Divi. Quando tieni premuto il tasto Cmd o Ctrl, ottieni una chiara panoramica di tutti i moduli, linee e sezioni, dandoti un'immagine perfetta dell'intera pagina e di come tutti i pezzi si incastrano.

Selezione multipla e di modifica di massa sono disponibili su Divi, Divi poi scaricare e provare questa nuova funzione.

Comment utiliser les formats d’affichage du blog sur Divi

Come utilizzare i formati di visualizzazione del blog su Divi

Quando scrivi un post sul blog da includere nel modulo blog, puoi utilizzare uno dei 6 diversi formati di post. Articolo, video, audio, citazione, galleria e link. Ciascuno di questi formati struttura il tuo articolo in modo diverso, con maggiore enfasi sul tipo di contenuto rappresentato dal formato.

Quando scrivi un post sul blog noterai una casella a destra del tuo editor di testo chiamata "Formato". In questa casella ci sono le 6 opzioni di formato. Se scegli "Standard" otterrai un post del blog con formattazione normale, mentre ogni altra opzione avrà un design unico associato al tipo di formato.

Utilizzo del formato di pubblicazione video

Selezionando il formato del post video verrà posizionato un video nella parte superiore del post. Sostituirà anche l'immagine di anteprima standard nelle pagine dell'indice con un video incorporato. Dopo aver selezionato il formato del post "Video" nella casella delle opzioni di formato, la prossima cosa da fare è aggiungere un video al tuo post. Il tema utilizzerà automaticamente il primo video nel tuo post come formato video. Per aggiungere un video al tuo post, inserisci semplicemente l'URL del tuo video (Vimeo o YouTube) nell'editor del post o usa il pulsante "Aggiungi media" per caricare e incorporare il tuo file video.

Utilizzando il formato dell'articolo audio

Selezionando il formato dell'articolo audio verrà visualizzato un lettore audio sul tuo articolo. Sostituirà anche l'immagine di anteprima standard nelle pagine dell'indice con il tuo lettore audio. Il lettore audio riproduce il primo file audio che incorpori nel tuo articolo. Per aggiungere un file audio al tuo post, usa il pulsante "Aggiungi media" per caricare il tuo file audio. Non c'è incorporamento del file audio. Una volta caricato un file, il tema lo utilizza automaticamente per il post che stai attualmente modificando. Il file audio dovrebbe essere scaricato durante la modifica dell'articolo.

Usa il formato del post di citazione

Il formato del post di citazione mostrerà una citazione stilizzata nella parte superiore del tuo post. La citazione sostituirà anche l'immagine di anteprima standard su tutte le pagine dell'indice. Quando selezionato, il formato del post audio utilizzerà il primo Blockquote nel tuo post come contenuto di citazione. Le citazioni in blocco possono essere facilmente aggiunte dall'editor dei post. Evidenzia il tuo testo e poi premi il pulsante blockquote per trasformarlo in una citazione.

Usa il formato del post della galleria

Il formato del post della galleria mostrerà una galleria di immagini nella parte superiore del tuo post. Sostituirà anche l'immagine di anteprima standard su tutte le pagine dell'indice con un dispositivo di scorrimento dell'immagine. Una volta selezionato, il formato del post della Galleria utilizzerà la prima galleria che hai aggiunto al tuo post. Le gallerie possono essere aggiunte al tuo post utilizzando WordPress Media Editor. Basta fare clic su "Aggiungi un mediaPer creare una galleria e aggiungerla al tuo post.

Utilizzando il formato link post

Il formato Link post creerà un link stilizzato e lo aggiungerà all'inizio del tuo post. Questo è l'ideale per condividere brevi informazioni con i tuoi lettori. Quando selezionato, il formato del post del link utilizzerà il primo link del tuo post come URL del link principale. Il collegamento verrà posizionato all'inizio del tuo articolo e sostituirà anche la miniatura standard su tutte le pagine dell'indice. Per aggiungere un collegamento al tuo post, puoi utilizzare il pulsante "link" nell'editor dei post di WordPress.

Questo è tutto per la selezione dei formati di pubblicazione disponibili su Divi.

Comment aligner des éléments sur la même ligne sur Divi

Come allineare elementi sulla stessa linea su Divi

La possibilità di allineare verticalmente il contenuto durante la creazione di un sito con Divi può essere un'aggiunta pratica al tuo strumento di progettazione. A volte un determinato layout richiede che il contenuto sia allineato verticalmente in modi diversi (centrato, in basso, in alto). L'esigenza più comune è centrare il contenuto verticalmente.

Fornisce un delizioso tocco di spaziatura simmetrica che è utile quando si utilizzano layout di più colonne per il contenuto. Inoltre, il contenuto centrato verticalmente rimane centrato su diverse larghezze del browser, eliminando il fastidio di applicare spaziatura interna o margini personalizzati per ottenere una reattività simile.

In questo tutorial, ti mostrerò come aggiungere alcuni piccoli snippet CSS a qualsiasi colonna per allineare verticalmente il contenuto. Userò alcuni dei layout predefiniti di Divi per esempi di come farlo. Se non sai molto di CSS, non devi preoccuparti. Sarà abbastanza facile da applicare ai tuoi layout in pochi secondi.

Capire Flex e Divi

La proprietà css Flex (o Flexbox) è semplicemente un modo per posizionare gli elementi in pile orizzontali e / o verticali (molto simili a una tabella). Tranne che, a differenza delle tabelle tradizionali, la proprietà flex ti consente di creare scatole che si adatteranno alle dimensioni del contenuto che contiene.

Divi utilizza la proprietà flex ogni volta che selezioni "Equalizza altezze colonne" come parametro di riga. Assicura solo che la dimensione delle colonne si adatterà alla dimensione della colonna con più contenuto. E poiché "Equalize Column Heights" consente la flessibilità per il contenitore di righe, puoi trarne vantaggio facilmente aggiungendo CSS alle tue colonne per regolare il contenuto di ciascuna colonna (o area).

Ad esempio, se aggiungi "margin: auto" a una colonna in una riga, il contenuto di quella colonna (sia che si tratti di uno o più moduli) verrà centrato verticalmente.

Inoltre, se aggiungi "align-items: center" alla tua linea, tutte le colonne (e il loro contenuto) saranno centrate verticalmente.

Naturalmente, ci sono molti altri usi per la proprietà Flex nel web design, così come CSS più avanzati che puoi applicare al tuo tema. Ma per questo tutorial, volevo mantenerlo semplice.

È davvero necessario?

Tecnicamente no. Puoi allineare verticalmente i tuoi contenuti / moduli in una colonna usando la spaziatura personalizzata (padding e margine). Ad esempio, puoi utilizzare le opzioni di spaziatura di Divi per dare una colonna uguale all'imbottitura superiore e inferiore per centrare i moduli verticalmente nella colonna. Puoi anche aggiungere solo il riempimento superiore a una colonna per allineare il contenuto inferiore. Tuttavia, potrebbe essere necessario regolare la spaziatura quando si aggiorna la pagina con più contenuti. Inoltre, può essere difficile mantenere questo allineamento su diverse larghezze del browser.

Quindi, se stai cercando una soluzione per allineare verticalmente il contenuto senza dover pensare alla spaziatura personalizzata, penso che lo troverai utile.

Cominciamo!

Carica il layout predefinito sulla tua pagina

Per iniziare, userò il layout della gamma di portfolio di Interior Design Company. Per ottenere questo layout sulla tua pagina, crea una nuova pagina. Quindi dai un titolo alla tua pagina. Fare clic su "Usa Divi Builder" quindi su "Usa Visual Builder". Quindi seleziona l'opzione "Scegli un layout di base". Quindi selezionare il kit di layout di Interior Design Company dalla finestra a comparsa Carica dalla libreria. Infine, seleziona la pagina Portfolio dall'elenco dei layout e fai clic su "Usa questo layout".

Una volta caricato il layout sulla tua pagina, sei pronto per partire.

Metodo 1: come allineare verticalmente il contenuto utilizzando Flex e Margine automatico

Apri le impostazioni della riga per la seconda riga della pagina (quella direttamente sotto la riga con il titolo della pagina). Sotto le impostazioni di progettazione, apri il gruppo di opzioni di dimensionamento e nota che "Equalizza altezze colonne" è già attivo. Ciò significa che la linea ora ha la proprietà flex ("display: flex;") aggiunta.

Ora vai alle impostazioni della scheda Avanzate per la stessa riga e aggiungi il seguente snippet css sotto la casella di immissione dell'elemento principale della colonna 2.

marginauto;

Ora i contenuti della seconda colonna sono stati spostati per essere centrati verticalmente.

Rendi allineati i contenuti inferiori

Se si desidera allineare il contenuto nella parte inferiore in modo che tutti i moduli si impilino nella parte inferiore della colonna, è possibile regolare il valore del margine come segue:

marginauto 0;

Allineamento verticale del contenuto per tutte le colonne della tua riga

Invece di aggiungere "margin: auto" a ciascuna colonna singolarmente, puoi anche centrare verticalmente il contenuto di tutte le colonne nella riga aggiungendo il seguente frammento all'elemento principale delle impostazioni della riga.

align-items: center;

O se vuoi che tutti i contenuti delle tue colonne siano allineati in basso, puoi aggiungere questo estratto:

align-items: flex-end;

E non dimenticare che puoi sfruttare la funzione Estendi stili di Divi facendo clic con il pulsante destro del mouse sull'elemento principale con il tuo frammento CSS e facendo clic su "Estendi elemento principale".

Quindi, estendi questo elemento css principale a tutte le righe della pagina (o sezione) per centrare verticalmente tutto il contenuto di ciascuna colonna della pagina.

Ora tutto è centrato verticalmente.

Tuttavia, potresti aver notato che il colore di sfondo della colonna bianca non copre più l'intera altezza della riga. Questo perché abbiamo aggiunto "margin: auto" alla colonna. Per risolvere questo problema, puoi cambiare il colore di sfondo della linea in bianco e rimuovere il riempimento dalla linea. Ma invece, ti mostrerò un modo per centrare il contenuto della colonna senza modificare il margine.

Metodo 2: allinea il contenuto verticalmente utilizzando la direzione della flessione della colonna

Nel primo metodo, abbiamo sfruttato la proprietà flex aggiunta alla riga. Ciò ha reso ciascuna delle nostre colonne una "scatola flessibile" che poteva essere allineata verticalmente semplicemente regolando il margine.

Ma esiste anche un modo flessibile per allineare il contenuto delle nostre colonne senza perdere l'effetto "Equalizza altezza colonna" che mantiene le nostre colonne (e gli sfondi delle colonne) della stessa dimensione. Per fare ciò, aggiungeremo solo poche righe di CSS alla nostra colonna in modo che tutti i moduli nella colonna siano impilati verticalmente e quindi centrati.

Torniamo alla nostra linea nell'esempio precedente. Apri le impostazioni della riga e rimuovi qualsiasi CSS personalizzato che potresti avere facendo clic con il pulsante destro del mouse su CSS personalizzato e facendo clic su "Ripristina stili CSS personalizzati".

Quindi aggiungere il seguente CSS nella colonna 2, elemento principale:

display: flex; flex-direction: colonna; giustificare-contenuto: centro;

Oppure, se volessi allineare il contenuto in fondo, basta sostituire "Giustifica il contenuto: centra" con "Giustifica il contenuto: flex-end".

La cosa fantastica di questa configurazione è che se il mio contenuto è centrato verticalmente e viene raggiunta la larghezza della riga, il contenuto rimane centrato.

Crea sfocature (Riepilogo) con diverse quantità di testo allineato verticalmente

Anche rendere il contenuto della colonna centrato verticalmente può essere utile per i blurb. Come sai, non tutti i blurb conterranno la quantità esatta di testo utilizzata per descrivere la funzionalità o il servizio. Centrare verticalmente questi blurb può creare un bel design per il tuo layout.

Per questo esempio, allineerò verticalmente i blurb al layout della home page di Digital Payments.

Per prima cosa aggiungerò diverse quantità di testo del corpo ai blurb per dare una rappresentazione più realistica di come potrebbe apparire un sito.

Ora devo andare alle impostazioni della linea e "Armonizza le altezze delle colonne".

Ora posso aggiungere i miei snippet CSS per allineare il mio contenuto e modificare il design.

Nella scheda Avanzate delle impostazioni della riga, possiamo centrare verticalmente il contenuto delle nostre colonne aggiungendo quanto segue sotto Elemento principale:

align-items: center;

O cambialo seguendo per allinearli.

align-items: flex-end;

Puoi anche ripristinare i tuoi stili CSS personalizzati e aggiungere i seguenti margini personalizzati per allineare la prima colonna in basso e la terza colonna allineata in alto.

Elemento principale CSS della colonna 1:

marginauto auto 0;

Elemento principale CSS della colonna 3:

margin0 auto auto;

E i layout a colonna singola?

Tecnicamente, non è necessario alcun CSS o flex snippet per centrare verticalmente il contenuto della colonna. Tutto quello che devi fare è assicurarti di avere una spaziatura uguale sopra e sotto i tuoi contenuti (o moduli). La maggior parte delle volte, gli utenti necessitano di contenuti verticali centrati su layout con più colonne perché desiderano che i contenuti adiacenti siano perfettamente allineati.

Questo è tutto per questo tutorial che ti mostra come allineare gli elementi sulla stessa linea su Divi.

Comment Importer & Exporter des mises en page sur Divi

Come importare ed esportare layout su Divi

Divi ha un ampio sistema di portabilità che estende ogni centimetro del tema. Qualsiasi cosa all'interno di Divi può essere esportata da un sito Web e quindi importata in un nuovo sito Web. Le esportazioni Divi sono anche un ottimo modo per salvare parti del tuo sito Web, salvare i tuoi preset preferiti per le nuove versioni dei clienti o condividere le tue configurazioni e impostazioni Divi personalizzate con i tuoi colleghi.

Ciò include le opzioni del tema, le impostazioni di personalizzazione, i ruoli Divi e in particolare le raccolte Layout Divi e Libreria Divi. Ogni sistema funziona esattamente allo stesso modo e noterai l'icona della portabilità Divi in ​​tutto il tema. Quando esporti un elemento Layout Divi o Libreria Divi, questo può essere condiviso e utilizzato su qualsiasi sito Web Divi. Tutto, comprese le immagini, i CSS personalizzati e le impostazioni di progettazione avanzate, sono contenuti in un unico file JSON.

Quando carichi il file su un nuovo sito Web, i tuoi layout Divi sono pronti per l'uso!

Esportazione di elementi dalla libreria Divi

La libreria Divi è uno strumento potente per i web designer perché ti consente di creare e classificare progetti personalizzati che puoi utilizzare per avviare i tuoi progetti futuri. Grazie al sistema di portabilità, questi progetti personalizzati possono ora essere facilmente trasferiti tra siti Web e condivisi con i colleghi. Per esportare elementi dalla libreria Divi, devi prima accedere alla pagina Divi> Libreria Divi dalla dashboard di WordPress. Qui vedrai un elenco di tutti i tuoi elementi dalla libreria Divi, oltre a un pulsante "Importa ed esporta" nella parte superiore dello schermo. Fare clic su questo pulsante per avviare la finestra a comparsa della portabilità.

Da questa finestra, mentre sei nella scheda "Esporta", puoi fare clic sul pulsante "Esporta layout Divi Builder" per avviare l'esportazione dell'intera libreria Divi. Puoi anche scegliere un nome per il tuo file di esportazione. L'esportazione di raccolte di librerie di grandi dimensioni, in particolare quelle che contengono foto ad alta risoluzione, potrebbe richiedere del tempo. Si consiglia di esportare la libreria in raccolte di medie dimensioni.

Se hai una libreria molto grande, puoi scegliere i singoli elementi da esportare invece di esportare tutto in una volta. Divi ti consente di selezionare singoli elementi da esportare. A tale scopo, chiudere la finestra a comparsa della portabilità e, nell'elenco degli elementi della libreria, selezionare gli elementi che si desidera esportare.

Fare nuovamente clic su "Importa ed esporta" per avviare la finestra di portabilità. Prima di esportare, seleziona la casella "Esporta solo gli elementi selezionati". D'ora in poi, Divi esporterà solo gli elementi che hai precedentemente selezionato nella tua libreria Divi.

Al termine del processo di esportazione, il browser scarica automaticamente un file .JSON. Questo file può essere utilizzato per importare gli elementi esportati in un nuovo sito Web utilizzando la scheda "Importa" nella finestra a comparsa della portabilità.

Importazione di elementi dalla libreria Divi

Dopo aver esportato una raccolta dalla libreria Divi, puoi importarla in un nuovo sito Web. Per fare ciò, utilizzerai la stessa finestra pop-up di portabilità. Per prima cosa, vai alla tua pagina Divi> Libreria Divi, quindi fare clic sul pulsante "Importa ed esporta". Questa volta sarà necessario fare clic sulla scheda "Importa" per visualizzare le opzioni di importazione.

Una volta nella scheda Importa, fare clic sul pulsante "Scegli file" e individuare il file .JSON precedentemente esportato. Dopo aver selezionato il file, fare clic sul pulsante "Importa layout Divi Builder" per avviare l'importazione. Una volta completato il processo di importazione, noterai che gli elementi della libreria Divi sono stati aggiunti alla tua libreria e le immagini incluse sono state importate nella tua libreria WordPress.

Esportazione di singoli layout

È anche possibile esportare layout individuali di Divi Builder. Il processo funziona esattamente come esportare gli elementi della libreria. L'unica differenza è che i singoli elementi possono essere esportati e importati direttamente da e sul post in fase di modifica. Quando utilizzi Divi Builder, cerca l'icona di portabilità Divi. . Cliccando su questa icona, avvierai il sistema di portabilità e sarai in grado di esportare il tuo attuale layout Divi.

Importa i singoli layout

Dopo aver esportato il layout Divi e scaricato il file .JSON, questo file può essere importato in una nuova pagina. I layout importati sostituiranno il contenuto della pagina corrente con il contenuto esportato. Per importare un layout Divi Builder, fare clic sull'icona della portabilità in Divi Builder per avviare il sistema di portabilità. Vai alla scheda Importa. Fare clic sul pulsante "Scegli un file" e individuare il layout Divi Builder precedentemente esportato e fare clic sul pulsante "Importa layout Divi Builder". " 

Importazione ed esportazione dei parametri dei ruoli Divi

Se desideri esportare le impostazioni del ruolo del tuo sito, prima vai al file Divi> Editor di ruoli nella dashboard di WordPress. Dopo aver salvato le impostazioni del ruolo come desiderato, fare clic sull'icona della portabilità sopra le impostazioni del ruolo. Verrà avviato il sistema di portabilità in cui è possibile esportare le impostazioni del ruolo corrente. Se disponi di un file .JSON delle impostazioni del ruolo precedentemente esportato, puoi anche scegliere di importare queste impostazioni qui.

La possibilità di importare ed esportare le impostazioni dei ruoli Divi è utile quando si desidera duplicare alcune impostazioni per altri siti Web. Con pochi clic puoi configurare i tuoi ruoli.

Importazione ed esportazione delle opzioni del tema Divi

Se desideri esportare le opzioni del tema Divi, vai prima alla pagina Divi> Opzioni tema nella dashboard di WordPress. Dopo aver salvato le opzioni del tema nel modo desiderato, fai clic sull'icona della portabilità. Questo avvierà il sistema di portabilità in cui puoi esportare le tue attuali opzioni del tema Divi. Se hai un file .JSON delle opzioni del tema precedentemente esportato, puoi scegliere di importare queste opzioni qui.

Importazione ed esportazione delle impostazioni di personalizzazione del tema Divi

L'importazione e l'esportazione delle impostazioni di personalizzazione del tema Divi è un modo semplice per rilanciare il tuo prossimo progetto. Ottenere le impostazioni di personalizzazione del tema corrette può richiedere del tempo. Perché non esportare queste impostazioni per velocizzare il tuo prossimo progetto?

Se vuoi esportare le impostazioni di personalizzazione del tema Divi, prima vai alla pagina Divi> Customizer dalla dashboard di WordPress. Dopo aver salvato le impostazioni di personalizzazione del tema Divi come desideri, fai clic sull'icona di portabilità nella parte superiore del personalizzatore. Questo avvierà il sistema di portabilità in cui puoi esportare le tue attuali opzioni del tema Divi. Se hai un file .JSON esportato in precedenza con le impostazioni del tema, puoi anche scegliere di importare queste opzioni qui.

Comment ajouter une section de commentaire sur Divi

Come aggiungere una sezione di commento su Divi

Il modulo commenti ti consente di inserire un modulo di commento in qualsiasi punto della tua pagina. Se stai utilizzando una pagina standard o un post senza Divi Builder, i commenti verranno comunque visualizzati sotto il contenuto del tuo post.

Una volta attivato Divi Builder, puoi posizionare il modulo dei commenti in qualsiasi punto della pagina e il modulo dei commenti verrà visualizzato nella posizione del modulo. Questo ti dà molto più controllo sui tuoi commenti!

Come aggiungere un modulo di commento alla tua pagina

Prima di poter aggiungere un modulo di commenti alla tua pagina, devi prima accedere a Divi Builder. Una volta installato il tema Divi sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editore ogni volta che crei una nuova pagina.

Facendo clic su questo pulsante, attivi Divi Builder, che ti dà 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 navighi nel tuo sito Web a monte 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, ricordati di aggiungere prima una riga alla tua pagina.

Individua il modulo dei commenti 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 "commenti" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo dei commenti! Una volta aggiunto il modulo, sarai accolto con l'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Usa il caso aggiungendo una sezione commenti al tuo post sul blog

Per questo esempio, ti mostrerò quanto è facile inserire e formattare un modulo di commenti nel tuo post utilizzando Visual Builder.

Nota che la sezione dei commenti viene aggiunta sotto il contenuto del post e sopra una sezione a piè di pagina di tre colonne. Tuttavia, il modulo dei commenti avrebbe potuto essere aggiunto ovunque.

Utilizzando Visual Builder, aggiungi una sezione standard con una riga a larghezza intera (1 colonna) sotto i moduli che contengono il contenuto del tuo post. Quindi aggiungi il modulo Commenti alla riga.

Aggiorna le impostazioni dei commenti come segue:

Opzioni di contenuto

Colore di sfondo dei campi: #ffffff

Opzioni di design

Colore del testo: scuro
Commento Polizia: PT Sans
Dimensione carattere commento: 20px
Commento Colore del testo:
Campo di Polizia: PT Sans
Dimensione carattere campo: 20px
Meta Font: PT Sans, Italic, Maiuscolo
Dimensione carattere Meta: 16px
Field Border Raggio: 0px
Usa bordo: SÌ
Colore del bordo: #aaaaaa
Larghezza del bordo: 1px
Usa stili personalizzati per il pulsante: SÌ
Pulsante Dimensione testo: 20
Colore testo pulsante: #ffffff
Colore sfondo pulsante: # 02b875
Larghezza del confine di
pulsante: 3px

Alcuni elementi, come le meta informazioni dei post e le immagini degli avatar, vengono visualizzati solo quando tu o qualcun altro aggiungete un commento al post.

È tutto. La bellezza di questo modulo è che puoi aggiungere contenuti aggiuntivi dopo la sezione dei commenti (come un invito all'azione o un modulo di contatto) che non è facile da fare con un WordPress per impostazione predefinita.

Opzioni di contenuto del modulo Commenti

Nella scheda dei contenuti 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.

Mostra avatar dell'autore

La disabilitazione di questa opzione rimuoverà l'avatar dell'autore del commento dall'elenco dei commenti.

Mostra il pulsante di risposta

Quando il pulsante Mostra risposta è disabilitato, gli utenti non saranno in grado di rispondere ai commenti nell'elenco dei commenti.

Visualizza i commenti

Se disabilitato, il numero totale di commenti non verrà più visualizzato sopra l'elenco dei commenti.

Colore di sfondo dei campi

Il modulo dei commenti mostra un modulo di commento composto da diversi campi di input. Per impostazione predefinita, questi campi di input hanno un colore di sfondo grigio. Puoi cambiare questo colore scegliendo un colore personalizzato dal selettore di colori.

Etichetta amministrativa

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

Commenti opzioni di progettazione

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.

Colore del testo

Qui puoi scegliere il valore del tuo testo. Se stai lavorando con uno sfondo scuro, il tuo testo dovrebbe essere evidenziato. Se stai lavorando con uno sfondo chiaro, il tuo testo dovrebbe essere scuro.

Carattere del commento

Puoi modificare il carattere del tuo commento 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, tutto maiuscolo e sottolineato.

Dimensione del carattere del commento

Qui puoi regolare la dimensione del carattere del tuo commento. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderato 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à.

Colore del testo dei commenti

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

Spaziatura di lettere di commento

La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera del testo del commento, 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à.

Altezza riga del commento

L'altezza della riga influisce sullo spazio tra ogni riga del testo del commento. Se si desidera aumentare lo spazio tra ogni riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione dello spazio 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à.

Campo di polizia

È possibile modificare il carattere del 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, tutto maiuscolo e sottolineato.

Dimensione del carattere del campo

Qui puoi regolare la dimensione del testo del campo. 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 campo

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

Spaziatura di lettere di campo

La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera del testo nel campo, 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à.

Altezza della linea del campo

L'altezza della riga influisce sullo spazio tra ogni riga di testo nel campo. 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à.

Meta 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 testo utilizzando le opzioni grassetto, corsivo, tutto maiuscolo e sottolineato.

Dimensione del carattere Meta

Qui puoi regolare la dimensione del tuo meta testo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderato 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à.

Colore del meta-testo

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 tra le 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 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à.

Altezza della meta linea

L'altezza della riga influisce sullo spazio tra ogni riga del meta-testo. Se si desidera aumentare lo spazio tra ciascuna riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione dello spazio 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à.

Campo raggio di confine

Il raggio del bordo influisce sull'arrotondamento degli angoli di ciascun campo di input. Più alto è il valore, più arrotondati saranno i quattro angoli di ciascun campo di input. È possibile ridurre il valore a 0 per creare campi di input rettangolari o aumentare il valore in modo significativo per creare campi di input con bordi circolari.

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 input a destra del dispositivo di scorrimento. Supporta unità di misura personalizzate, 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 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.

Margine personalizzato

Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto oa destra ea sinistra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere un margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Imbottitura personalizzata

L'imbottitura è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere un margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Usa stili personalizzati per i pulsanti

L'abilitazione di questa opzione rivela le varie impostazioni di personalizzazione dei pulsanti che puoi utilizzare per modificare l'aspetto del pulsante del tuo modulo.

Dimensione del testo del pulsante

Questa impostazione può essere utilizzata per aumentare o diminuire la dimensione del testo nel pulsante. Il pulsante verrà ridimensionato man mano che la dimensione del testo aumenta e diminuisce.

Colore del testo del pulsante

Per impostazione predefinita, i pulsanti assumono il colore principale del tema, come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore di testo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del pulsante.

Colore di sfondo del pulsante

Per impostazione predefinita, i pulsanti hanno un colore di sfondo trasparente. Questo può essere modificato selezionando il colore di sfondo desiderato dal selettore di colori.

Larghezza del bordo del pulsante

Tutti i pulsanti Divi hanno un bordo 2px per impostazione predefinita. Questo bordo può essere aumentato o diminuito utilizzando questa impostazione. I bordi possono essere rimossi inserendo un valore di 0.

Colore del bordo del pulsante

Per impostazione predefinita, i bordi dei pulsanti assumono il colore principale del tema, come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore del bordo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del bordo del pulsante.

Pulsante Raggio bordo

Il raggio del bordo influisce sull'arrotondamento degli angoli dei pulsanti. Per impostazione predefinita, i pulsanti in Divi hanno un piccolo raggio che arrotonda gli angoli di 3 pixel. Puoi ridurlo a 0 per creare un pulsante quadrato o aumentarlo in modo significativo per creare pulsanti con bordi circolari.

Spaziatura delle lettere dei pulsanti

La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera del testo del pulsante, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione dello spazio 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à.

Pulsante della polizia

È possibile modificare il carattere del 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 testo utilizzando le opzioni grassetto, corsivo, tutto maiuscolo e sottolineato.

Aggiungi icona pulsante

Disabilitata questa impostazione rimuoverà le icone dal tuo pulsante. Per impostazione predefinita, tutti i pulsanti Divi visualizzano un'icona a forma di freccia quando si passa con il mouse.

Icona del pulsante

Se le icone sono abilitate, puoi usare questa impostazione per selezionare quale icona usare nel tuo pulsante. Divi ha diverse icone tra cui scegliere.

Colore dell'icona del pulsante

La regolazione di questa impostazione cambierà il colore dell'icona che appare sul tuo pulsante. Per impostazione predefinita, il colore dell'icona è lo stesso del colore del testo del pulsante, ma questa impostazione consente di regolare il colore in modo indipendente.

Posizione dell'icona del pulsante

Puoi scegliere di visualizzare l'icona del tuo pulsante a sinistra o a destra del tuo pulsante.

Mostra solo l'icona al passaggio del mouse per il pulsante

Per impostazione predefinita, le icone dei pulsanti vengono visualizzate solo al passaggio del mouse. Se vuoi che l'icona appaia sempre, disattiva questa impostazione.

Colore del testo cavalcavia pulsante

Quando il mouse del visitatore passa sopra il pulsante, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Colore di sfondo del mouse

Quando il mouse del visitatore passa sopra il pulsante, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Colore del bordo al passaggio del mouse

Quando il mouse del visitatore passa sopra il pulsante, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Pulsante del passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, viene utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Lettere di rollover del pulsante di spaziatura

Quando il pulsante viene posizionato sopra il mouse di un visitatore, viene utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Commenti Opzioni 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 e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

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 tema Divi Child o in CSS personalizzati che aggiungi alla tua pagina o al tuo sito web utilizzando le opzioni del tema Divi o le impostazioni della 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.

Comment utiliser le module blog sur Divi Builder

Come utilizzare il modulo blog su Divi Builder

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. 1 colonna, 2 colonne o 3 colonne possono essere create 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 installato il tema Divi 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 navighi nel tuo sito Web a monte 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 di 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

Se il tuo blog è posizionato su uno sfondo chiaro, il colore del testo dovrebbe essere impostato su "Scuro". Visto, se il tuo blog è posizionato su uno sfondo scuro, il colore del testo dovrebbe 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 tema Divi Child o in CSS personalizzati che aggiungi alla tua pagina o al tuo sito web utilizzando le opzioni del tema Divi o le impostazioni della 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.