Ir para o conteúdo principal

Como adicionar uma seção de comentários no Divi

Divi: o tema WordPress mais fácil de usar

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

O módulo de comentários permite que você coloque um formulário de comentários em qualquer lugar da sua página. Se você usar uma página padrão ou uma publicação sem o Divi Builder, os comentários sempre aparecerão sob o conteúdo de sua publicação.

Uma vez que o Divi Builder é ativado, você pode colocar o módulo de comentário em qualquer lugar da sua página e o formulário de comentários aparecerá no local do módulo. Isso lhe dá muito mais controle sobre seus comentários!

comentário módulo divi.png

Como adicionar um módulo de comentários à sua página

Antes de adicionar um módulo de comentários à sua página, você deve primeiro acessar o Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página.

Clicar neste botão ativa o Divi Builder, que lhe dá acesso a todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando estiver navegando em seu site upstream se você estiver logado no seu painel do WordPress.

botão divi construtor módulo blog divi

Uma vez inserido no Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

adicionar comentários divi.png

Localize o módulo de comentários na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode inserir a palavra "comentários", depois clicar em entrar para pesquisar e adicionar automaticamente o módulo de comentários! Uma vez que o módulo é adicionado, você será bem-vindo com a lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Caso de uso incluindo uma seção de comentários em sua postagem do blog

Para este exemplo, mostrarei como é fácil inserir e formatar um módulo de comentários em seu artigo usando o Visual Builder.

Observe que a seção de comentários é adicionada abaixo do conteúdo da publicação e acima de uma seção de rodapé de três colunas. No entanto, o módulo de comentários poderia ter sido adicionado em qualquer lugar.

adicionar um comentário section divi.jpg

Usando o Visual Builder, adicione uma seção padrão com uma linha de largura total (coluna 1) abaixo dos módulos que contêm o conteúdo de sua publicação. Em seguida, adicione o módulo Comentários à linha.

comentário módulo divi.png

Atualize as configurações de comentário da seguinte maneira:

Opções de conteúdo

Cor de fundo dos campos: #ffffff

Opções de design

Cor do texto: escuro
Comente Polícia: PT Sans
Tamanho da Fonte do Comentário: 20px
Cor do texto de comentário:
Campo Policial: PT Sans
Tamanho da Fonte do Campo: 20px
Meta Fonte: PT Sans, Italic, Uppercase
Tamanho da fonte Meta: 16px
Raio da Borda do Campo: 0px
Use Border: YES
Cor da fronteira: #aaaaaa
Largura da borda: 1px
Use estilos personalizados para o botão: SIM
Botão Tamanho do Texto: 20
Cor do texto do botão: #ffffff
Cor de fundo do botão: # 02b875
Largura da borda de
botão: 3px

Alguns itens, como informações meta de itens e imagens de avatar, aparecem apenas quando você ou alguém adiciona um comentário à postagem.

postar um comentário em um artigo.jpg

Isso é tudo. A beleza deste módulo é que você pode adicionar conteúdo adicional após a seção de comentários (como uma chamada à ação ou um formulário de contato), o que não é fácil de fazer com um WordPress padrão.

Opções de conteúdo do módulo Comment

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre nesta guia.

comentário do módulo divi option content.png

Ver o autor Avatar

Desativar esta opção removerá o avatar do autor do comentário da lista de comentários.

Mostrar botão de resposta

Quando o botão Mostrar Resposta está desativado, os usuários não poderão responder aos comentários na lista de comentários.

Ver comentários

Quando desativado, o número total de comentários não será mais exibido acima da lista de comentários.

Cor de fundo dos campos

O módulo de comentários exibe um formulário de comentários composto de diferentes campos de entrada. Por padrão, esses campos de entrada têm uma cor de plano de fundo cinza. Você pode alterar essa cor escolhendo uma cor personalizada no seletor de cores.

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Rótulo de administração

Isso mudará a tag do módulo no gerador para fácil identificação. Ao usar a exibição WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo da interface do Divi Builder.

Opções de design de comentários

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta aba permite que você altere a aparência do seu módulo. Cada módulo Divi tem uma longa lista de parâmetros de design que você pode usar para modificar praticamente qualquer coisa.

opção comentário divi builder.png

Cor do texto

Aqui você pode escolher o valor do seu texto. Se você estiver trabalhando com um fundo escuro, seu texto precisa ser destacado. Se você trabalha com um fundo claro, seu texto deve estar escuro.

Fonte de comentário

Você pode alterar a fonte do seu comentário, selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, todas em maiúsculas e sublinhado.

Tamanho da fonte do comentário

Aqui você pode ajustar o tamanho da sua fonte de comentário. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor de tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Cor do texto dos comentários

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do campo, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de cartas de comentário

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do seu texto de comentário, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Altura da linha de comentário

Altura da linha afeta o espaço entre cada linha do texto do comentário. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Campo policial

Você pode alterar a fonte do texto selecionando a fonte de sua preferência no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, todas em maiúsculas e sublinhado.

Tamanho da fonte do campo

Aqui você pode ajustar o tamanho do seu texto de campo. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor de tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Cor do texto do campo

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do campo, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de letras de campo

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do seu campo de texto, use o controle deslizante Intervalo para ajustar o espaço ou digite o tamanho do espaçamento desejado na direita do campo de entrada do cursor. Os campos de entrada suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em" de acordo com o seu tamanho para alterar o tipo de unidade.

text camp module comment divi.png

Altura da linha de campo

Altura da linha afeta o espaço entre cada linha de texto em seu campo. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Meta Font

Você pode alterar a fonte do seu meta-texto, selecionando a fonte de sua escolha no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, todas em maiúsculas e sublinhado.

Tamanho da fonte Meta

Aqui você pode ajustar o tamanho do seu texto meta. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor de tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Cor do meta-texto

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu meta-texto, escolha a cor de sua escolha no seletor de cores usando essa opção.

Espaçamento de letras meta

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do texto meta, use o controle deslizante Intervalo para ajustar o espaço ou digite o tamanho do espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em" de acordo com o seu tamanho para alterar o tipo de unidade.

Altura da linha meta

A altura da linha afeta o espaço entre cada linha do seu meta-texto. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Raio da borda do campo

O raio da borda afeta como os cantos de cada campo de entrada são arredondados. Quanto maior o valor, mais os quatro cantos de cada campo de entrada são arredondados. Você pode reduzir o valor para 0 para criar campos de entrada retangulares ou aumentar significativamente o valor para criar campos de entrada com arestas circulares.

border divi builder.png

Use a fronteira

Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Cor da fronteira

Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.

Largura da fronteira

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante no intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades personalizadas de medidas de suporte, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da beira

As bordas suportam oito estilos diferentes, incluindo: sólido, pontilhado, pontilhado, duplo, sulco, crista, inserção e início. Selecione o estilo de sua escolha no menu suspenso para aplicá-lo à sua borda.

Margem Personalizada

Margem é o espaço adicionado ao exterior do seu módulo, entre o módulo e o próximo elemento acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a um dos quatro lados do módulo. Para excluir uma margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Preenchimento personalizado

O preenchimento é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a um dos quatro lados do módulo. Para excluir uma margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Use estilos personalizados para botões

A ativação dessa opção revela as diferentes configurações de personalização dos botões que você pode usar para alterar a aparência do botão no seu módulo.

Tamanho do texto do botão

Essa configuração pode ser usada para aumentar ou diminuir o tamanho do texto no botão. O botão será dimensionado à medida que o tamanho do texto aumenta e diminui.

Cor do texto do botão

Por padrão, os botões assumem a cor de destaque do tema, conforme definido no personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor do botão.

Cor de fundo do botão

Por padrão, os botões têm uma cor de plano de fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

Largura da borda do botão

Todos os botões Divi possuem uma borda 2px padrão. Essa borda pode ser aumentada ou diminuída usando esse parâmetro. As bordas podem ser excluídas inserindo um valor de 0.

divisor de caixa divi builder module comment.png

Cor da borda do botão

Por padrão, as bordas dos botões assumem a cor de destaque do tema, conforme definido no personalizador do tema. Essa opção permite atribuir uma cor de borda personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor da borda do botão.

Botão de raio da borda

O raio da borda afeta como os cantos dos seus botões são arredondados. Por padrão, os botões no Divi têm um pequeno raio que arredonda os cantos dos 3 pixels. Você pode reduzi-lo a 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões circulares.

Espaçamento de letras de botão

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do texto do botão, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" de acordo com o seu tamanho para alterar seu tipo de unidade.

Botão da polícia

Você pode alterar a fonte do texto selecionando a fonte de sua preferência no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, todas em maiúsculas e sublinhado.

Adicionar ícone do botão

Desativada esta configuração irá remover os ícones do seu botão. Por padrão, todos os botões Divi exibem um ícone de seta ao passar o mouse.

Ícone de botão

Se os ícones estiverem ativados, você poderá usar essa configuração para selecionar o ícone a ser usado no seu botão. Divi tem vários ícones para escolher.

Cor do ícone do botão

Ajustar esta configuração mudará a cor do ícone que aparece no seu botão. Por padrão, a cor do ícone é igual à cor do texto de seus botões, mas essa configuração permite ajustar a cor de forma independente.

Localização do ícone do botão

Você pode optar por exibir o ícone do seu botão à esquerda ou à direita do seu botão.

Mostrar apenas o ícone de foco no botão

Por padrão, os ícones de botão são exibidos apenas durante a rolagem. Se você quiser que o ícone apareça sempre, desative essa configuração.

Cor de texto de viaduto de botão

Quando o mouse do visitante passar sobre o botão, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor de fundo do mouse

Quando o mouse do visitante passar sobre o botão, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Pairar cor da borda

Quando o mouse do visitante passar sobre o botão, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão de raio pairando

Quando o botão é executado pelo mouse de um visitante, esse valor é usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

Letras de rolagem do botão de espaçamento

Quando o botão é executado pelo mouse de um visitante, esse valor é usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Comentários Opções Avançadas

Na guia Avançado, você encontrará opções que os web designers mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar um CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

seção avançada módulo divi builder comments.png

ID CSS

Digite um ID CSS opcional para usar neste módulo. Um identificador pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema Divi Child ou no CSS personalizado que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

Um CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizada, você encontrará um campo de texto no qual poderá adicionar CSS diretamente a cada elemento. As entradas CSS nessas configurações já estão incorporadas nas tags de estilo. Você só precisa inserir regras CSS separadas por ponto e vírgula.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel, eliminando determinados elementos da página.

isso é tudo para este tutorial.

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
5 ações
ação1
chilrear1
Enregistrer3
Whatsapp