Vai al contenuto principale

Come aggiungere una sezione di commento su Divi

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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!

commento modulo divi.png

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.

pulsante divi costruttore modulo blog divi

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.

aggiungi commenti divi.png

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.

aggiungi una sezione di commento divi.jpg

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.

commento modulo divi.png

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.

pubblica un commento su un articolo.jpg

È 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.

modulo commento divi opzione content.png

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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.

opzione commento divi builder.png

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

testo modulo modulo commento divi.png

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.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

border divi builder.png

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.

box shadow divi builder module comment.png

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.

sezione avanzata modulo generatore di divi commenti.png

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.

Questo articolo contiene i commenti 2

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
5 azioni
quota1
Tweet1
Enregistrer3