Como estilizar o módulo de comentários da Divi dentro de um modelo de postagem de blog
Publicados: 2020-01-11Projetar um modelo de postagem de blog é muito fácil com o criador de temas Divi. Mas há uma coisa que tende a ser esquecida ao projetar modelos de blog: a seção de comentários. Felizmente, Divi tem um módulo de comentários personalizável que pode ser facilmente adicionado a um modelo de postagem de blog. Nesta postagem, mostraremos como criar dois designs de seção de comentários personalizados que você pode incluir em qualquer modelo de blog. Você também poderá baixar o arquivo JSON gratuitamente!
Vamos lá.
Antevisão
Vamos dar uma olhada na aparência dos designs de layout de comentários em diferentes tamanhos de tela. O primeiro design é um estilo minimalista em preto e branco e o segundo é mais colorido.
Área de Trabalho
Tábua
Telefone
Área de Trabalho
Tábua
Móvel
Baixe os modelos de módulo de comentários GRATUITAMENTE
Para colocar as mãos nos modelos de módulo de comentários gratuitos, primeiro você precisa baixá-los usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Vamos recriar o design do módulo de comentários nº 1
Criar Design de Fundo
A primeira etapa para recriar o modelo de layout de comentários em preto e branco é projetar o fundo dos pontos. Um para a visualização da área de trabalho e outro para telas responsivas. Se você quiser criar isso, precisará da ferramenta de criação de padrões do Adobe Illustrator. Caso contrário, você pode obter um padrão semelhante da Internet ou usar aquele que está incluído no arquivo .zip para download acima.
- No Adobe Illustrator, crie uma prancheta em branco com cerca de 1920 px de altura + 670 px de largura.
- Crie um círculo preto dentro de um quadrado branco com margens com cerca da metade do tamanho do círculo.
- Selecione ambas as formas e faça um padrão clicando em objeto> padrão> fazer.
- No criador de padrões, escolha 'tijolo por coluna' e salve como uma amostra de padrão.
- Crie uma forma do tamanho da prancheta e aplique o padrão.
- Para tamanhos de tela responsivos, reduza a forma para a metade do tamanho. Pressione shift para manter a proporção dos círculos.
- Copie e cole a forma padronizada ao lado da primeira e agora você terá o mesmo padrão com círculos menores.
- Baixe ambos separadamente.
Abra o Theme Builder e adicione um novo modelo
Agora é hora de abrir o criador de temas. Adicione um novo modelo.
Selecione o modelo para todas as postagens
Use o novo modelo em todas as postagens.
Adicionar corpo personalizado e construir do zero
Por último, mas não menos importante, comece a construir o corpo personalizado do modelo.
Adicionar nova seção
Fundo
Agora, podemos começar a construir o design do layout de comentários. Dentro do editor de template, você notará uma seção. Abra as configurações da seção e carregue as imagens de fundo do padrão. Adicione uma sobreposição de gradiente também.
- Fundo: Gradiente
- Cor 1: Branco semitransparente rgba (255,255,255,0,96)
- Cor 2: Branco #ffffff
- Colocar gradiente acima da imagem de fundo: Sim
- Imagem:
- Desktop: Imagem 1 do padrão de pontos
- Tablet e telefone: padrão de pontos - imagem 2
Adicionar nova linha
Estrutura da Coluna
Agora, adicione uma nova linha com duas colunas.
Dimensionamento
Em seguida, ajuste o tamanho da linha.
- Largura de calha personalizada: 2
- Largura: 80%
- Largura máxima: 100%
Configurações da coluna 2
Fronteira
Nas configurações das colunas, adicione uma borda superior à segunda coluna.
- Estilo: Top apenas
- Largura: 3px
- Cor: Preto #ffffff
Adicionar Módulo de Texto à Coluna 1
Contente
Adicione o primeiro módulo de texto à coluna 1 com algum conteúdo H3 de sua escolha.
- Texto: Parágrafo
Texto do Título
Em seguida, na guia de design, defina o estilo do texto do título.
- Nível de direção: H3
- Fonte: GFS Didot
- Cor: Preto # 000000
- Tamanho:
- Desktop: 5vw
- Tablet: 9vw
- Telefone: 13vw
Espaçamento
Além disso, ajuste o espaçamento.
- Padding Inferior
- Desktop: 3vw
- Tablet e telefone: 7vw
Adicionar Módulo de Depoimento à Coluna 1
Contente
Agora, adicione um módulo de testemunho à coluna 1 com algum conteúdo de sua escolha. Faça upload de uma imagem também.
- Autor: Loyal Reader
- Cargo: Diretor de Marketing de Conteúdo
- Empresa: Tiger Media Company
- Corpo: Texto do parágrafo
- Imagem: Foto de Retrato
Fundo
Certifique-se de que o fundo seja transparente
- Cor de fundo: transparente
Elementos
Na guia de elementos, selecione para mostrar o ícone de citação.
- Mostrar ícone de citação: Sim
Ícone de citação
Em seguida, defina o estilo do ícone de citação da seguinte maneira.
- Cor: Preto # 000000
- Plano de fundo: branco #ffffff
- Tamanho da fonte do ícone:
- Desktop: 2vw
- Tablet: 5vw
- Telefone: 9vw
Imagem
Altere as configurações de imagem a seguir.
- Largura e altura:
- Desktop: 110px
- Tablet e telefone: 90px
- Cantos arredondados: 90px
- Cor da borda: transparente
Texto
Altere o alinhamento do texto também.
- Alinhamento: Centro
Texto de corpo
Em seguida, defina o estilo do texto do corpo.
- Fonte: Verdana
- Cor preta
- Tamanho:
- Desktop: 0.7vw
- Tablet: 2vw
- Telefone: 3vw
Texto do Autor
Continue definindo o estilo do texto do autor.
- Fonte: GFS Didot
- Peso: Negrito
- Cor: Preto #ffffff
- Tamanho:
- Desktop: 1.2vw
- Tablet: 2,5vw
- Telefone: 4vw
- Espaçamento entre letras: 1px
Texto de Posição
Em seguida, o texto da posição.
- Fonte: GFS Didot
- Cor: Preto #ffffff
- Tamanho:
- Desktop: 0.9vw
- Tablet: 2vw
- Telefone: 3vw
- Altura da linha: 2em
Texto da Empresa
Além disso, o texto da empresa.
- Fonte: GFS Didot
- Cor: Preto #ffffff
- Tamanho:
- Desktop: 0.7vw
- Tablet: 2vw
- Telefone: 3vw
- Altura da linha: 2em
Dimensionamento
Continue ajustando o tamanho do módulo.
- Largura:
- Desktop: 60%
- Tablet: 65%
- Telefone: 75%
- Alinhamento do Módulo: Centro
Espaçamento
Além disso, ajuste o espaçamento.
- Enchimento superior:
- Desktop: 1.5vw
- Tablet: 5vw
- Telefone: 6vw
Fronteira
Finalmente, adicione uma borda superior ao módulo.
- Estilos de borda: apenas superior
- Largura: 2 px
- Cor: Preto #ffffff
Adicionar Módulo de Comentários à Coluna 2
Elementos
Seguindo para a coluna 2, adicione um módulo de comentários. Altere as configurações dos elementos como segue.
- Mostrar Avatar do Autor: Não
- Mostrar botão de resposta: Sim
- Mostrar contagem de comentários: Não
Campos
Vá para a guia de design do módulo e altere as configurações dos campos.
- Cor do Texto: Preto #oooooo
- Cor de fundo: cinza claro # f7f7f7
- Cor do Texto do Foco: Preto #oooooo
- Cor de fundo do foco: cinza claro # f7f7f7
- Fonte: GFS Didot
- Tamanho do texto:
- Desktop: 0.9vw
- Tablet: 1,5vw
- Telefone: 2,5vw
- Espaçamento entre letras: 1px
Texto do Título do Formulário
Modifique as configurações de texto do título do formulário a seguir.
- Fonte: GFS Didot
- Cor: Preto #ffffff
- Tamanho:
- Desktop: 0.9vw
- Tablet: 2,5vw
- Fonte: 3,5vw
Meta Texto
Continue estilizando o metatexto.
- Fonte: GFS Didot
- Cor: Preto #ffffff
- Tamanho:
- Desktop: 1.3vw
- Tablet: 3vw
- Telefone: 4vw
Texto do Comentário
Além disso, o texto do comentário.
- Fonte: Verdana
- Cor: Preto #ffffff
- Tamanho:
- Desktop: 0.7vw
- Tablet: 1.7vw
- Telefone: 2.7vw
- Espaçamento entre letras: 1px
- Altura da linha: 1.8em
Botão
Continuando, estilize os botões.
- Tamanho do texto:
- Desktop: 0.9vw
- Tablet: 2,5vw
- Telefone: 3,5vw
- Cor do Texto: Branco # 000000
- Plano de fundo: Preto #ffffff
- Espaçamento entre letras: 1px
- Fonte: GFS Didot
Dimensionamento
Em seguida, ajuste as configurações de dimensionamento do módulo.
- Largura: 90%
- Alinhamento do Módulo: Centro
Espaçamento
Finalmente, o espaçamento também.
- Enchimento superior:
- Desktop: 4vw
- Tablet e telefone: 8vw
- Preenchimento esquerdo e direito: 3vw
Vamos recriar o projeto do módulo de comentários nº 2
Criar Design de Fundo
A primeira etapa para recriar o layout do módulo de comentários dos círculos coloridos é preparar um design de plano de fundo. Você pode criar um desenho de círculo simples dentro de seu editor gráfico favorito. Estas são as etapas que você precisa seguir para criar a imagem de fundo:
- Crie uma tela de 1800 px de largura e cerca de 1800 px de altura.
- Adicione dois círculos, um maior que o outro.
- Pinte os círculos e adicione alguma transparência.
- Coloque os dois círculos um pouco sobrepostos na parte superior esquerda da tela.
- Agrupe os círculos como um objeto e duplique-os.
- Vire os círculos e coloque-os diagonalmente para baixo e à direita dos dois primeiros.
- Certifique-se de deixar espaço na parte superior e inferior. Quando houver muitos comentários, a imagem será repetida e exibida verticalmente.
O design de plano de fundo que criamos para este modelo de layout de comentário também está disponível na pasta compactada que você pode baixar no início do tutorial.
Abra o Theme Builder e adicione um novo modelo
Agora é hora de abrir o criador de temas. Adicione um novo modelo.
Selecione o modelo para todas as postagens
Aplique o modelo a todas as postagens.
Adicionar corpo personalizado e construir do zero
E comece a construir o corpo personalizado do modelo.
Adicionar nova seção
Uma vez no editor de modelos, você notará uma seção. Abra essa seção e carregue a imagem de fundo. Inclui também uma sobreposição de cor gradiente.
Fundo
- Fundo: Gradiente
- Cor gradiente 1: branco transparente rgba (255,255,255,0,55)
- Gradient Color 2: Transparent White rgba (255,255,255,0,55)
- Imagem: Fundo dos Círculos
Espaçamento
Além disso, ajuste o espaçamento da seção antes de adicionar uma linha.
- Preenchimento superior e inferior: 200 px
Adicionar nova linha
Estrutura da Coluna
Agora adicione uma linha com três colunas.
Dimensionamento
Antes de adicionar módulos, ajuste o tamanho da linha.
- Largura de calha personalizada: 2
- Largura: 80%
- Largura máxima: 100%
Configurações da coluna 2
Fundo
Agora, estilize a segunda coluna adicionando um fundo azul.
- Cor de fundo: Azul # 51a2ff
Fronteira
Continue arredondando as bordas.
- Cantos arredondados: 1vw todos os quatro cantos
Sombra da caixa
Finalmente, adicione uma sombra de caixa também.
- Sombra: Terceira Opção
- Força do borrão: 80px
- Cor: rgba (0,0,0,0.13)
Adicionar Módulo de Pessoa à Coluna 1
Contente
É hora de adicionar os módulos. Comece com um módulo de pessoa na coluna 1 e adicione o conteúdo.
- Nome: Jenny McAbee
- Cargo: Colaborador Regular
- Corpo: Texto do Parágrafo
- Imagem: Foto de Retrato
Fundo
Adicione um fundo branco ao módulo.
- Cor de fundo: Branco # 000000
Imagem
Na guia de design, estilize a borda da imagem da seguinte maneira.
- Cantos arredondados: 0,5vw no canto superior esquerdo e no canto superior direito
- Estilos de borda: borda inferior
- Largura: 5px
- Cor: Azul # 51a2ff
Texto do Título
Continue definindo o estilo do texto do título.
- Nível de direção: H4
- Fonte: Alegreya Sans SC
- Estilo: TT
- Cor: # 021859
- Tamanho:
- Desktop: 1vw
- Tablet: 3vw
- Telefone: 5vw
- Espaçamento entre letras: 1px
- Altura da linha: 1,6em
Texto de corpo
Depois, também, o corpo do texto.
- Fonte: Lato
- Cor: Azul # 1a1f73
- Tamanho:
- Desktop: 0.7vw
- Tablet: 2vw
- Telefone: 3vw
- Altura da linha: 2em
Texto de Posição
Continue com o texto da posição.
- Fonte: Lato
- Estilo: Itálico
- Cor: # 021859
- Tamanho:
- Desktop: 0.8vw
- Tablet: 3vw
- Telefone: 3,5vw
Dimensionamento
Em seguida, ajuste o tamanho.
- Largura:
- Desktop: 100%
- Tablet: 50%
- Telefone: 70%
- Alinhamento do Módulo: Centro
Espaçamento
Além disso, o espaçamento.
- Preenchimento superior e inferior: 4vw
Fronteira
Em seguida, adicione alguns cantos arredondados.
- Cantos arredondados: o.5vw nos quatro cantos
- Estilos de borda: 24 px nos quatro lados
- Cor: Branco #ffffff
Sombra da caixa
Finalmente, adicione uma sombra de caixa.
- Sombra: Terceira Opção
- Força do borrão: 80px
- Cor: rgba (0,0,0,0.13)
Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 1
Redes
Abaixo do módulo de pessoa, adicione um módulo de acompanhamento de mídia social com três redes sociais.
Configurações de rede
Aplique uma cor de fundo transparente a cada rede social. Você precisa fazer isso um por um.
- Fundo: Transparente
Alinhamento
Nas configurações de design principal, centralize o alinhamento do módulo.
- Alinhamento do Módulo: Centro
Ícone
Finalmente, pinte os ícones de azul.
- Cor: Azul # 51a2ff
- Tamanho:
- Desktop: 1vw
- Tablet e telefone: 4vw
Adicionar Módulo de Texto à Coluna 2
Contente
Passe para a coluna 2. Adicione um módulo de texto com algum conteúdo h3 de sua escolha.
- Texto: Deixe-nos um comentário
Fundo
Adicione um fundo branco.
- Cor de fundo: branco #ffffff
Texto do Título
Em seguida, vá para a guia de design e estilize o texto do título.
- Nível de direção: H3
- Fonte: Alegreya Sans SC
- Peso: Negrito
- Estilo da fonte: TT
- Cor: Azul # 021859
- Tamanho:
- Desktop: 2vw
- Tablet e telefone: 5.5vw
Espaçamento
Finalmente, ajuste o espaçamento.
- Enchimento superior:
- Desktop: 3vw
- Tablet: 2vw
- Telefone: 6vw
- Padding Inferior
- Desktop e Tablet: 3vw
- Preenchimento esquerdo e direito:
- Desktop e Tablet: 1vw
Adicionar Módulo de Comentários à Coluna 2
Elementos
Agora adicione o módulo de comentários à coluna 2. Habilite todos os elementos.
- Mostrar Avatar do Autor: Sim
- Mostrar botão de resposta: Sim
- Mostrar contagem de comentários: Sim
Fundo
Adicione um fundo branco ao módulo de comentários.
- Cor de fundo: branco #ffffff
Campos
Em seguida, comece a estilizar o módulo ajustando as configurações dos campos da seguinte forma
- Cor de fundo: branco #ffffff
- Cor do Texto: Azul # 1a1f73
- Cor de fundo do foco: Branco #ffffff
- Cor do texto do foco: Azul # 1a1f73
- Fonte: Alegreya Sans SC
- Estilo: TT
- Tamanho:
- Desktop: 1vw
- Tablet: 3vw
- Telefone: 4vw
- Cantos arredondados: 5px em todos os cantos
Imagem
Altere também as configurações de imagem.
- Cantos arredondados: 5px
- Estilo de borda: todos os lados
- Largura: 3px
- Cor: Azul # 1a1f73
Texto de contagem de comentários
Em seguida, o texto da contagem do comentário.
- Nível de direção: H3
- Fonte: Alegreya Sans SC
- Estilo da fonte: TT
- Cor: Azul # 021859
- Tamanho:
- Desktop: 1.3vw
- Tablet: 3vw
- Telefone: 5vw
- Altura da linha: 2 em
Texto do Título do Formulário
Além disso, defina o estilo do texto do título do formulário.
- Nível de direção: H3
- Fonte: Alegreya Sans SC
- Estilo da fonte: TT
- Cor: Azul # 021859
- Tamanho:
- Desktop: 1vw
- Tablet: 3vw
- Telefone: 5vw
- Altura da linha: 2 em
Meta Texto
Passe para o meta texto e estilo da seguinte maneira.
- Fonte: Lato
- Cor: # 021859
- Tamanho:
- Desktop: 1vw
- Tablet: 2.7vw
- Telefone: 3,5vw
Texto do Comentário
Em seguida, o texto do comentário.
- Fonte: Lato
- Cor: # 021859
- Tamanho:
- Desktop: 0.9vw
- Tablet: 1.8vw
- Telefone: 2,5vw
Botão
Não se esqueça de estilizar os botões também.
- Tamanho do texto:
- Desktop: 0.9vw
- Tablet: 2,5vw
- Telefone: 3,5vw
- Cor do Texto: Branco #ffffff
- Raio da borda: 5px
- Fonte: Lato
Espaçamento
Além disso, o espaçamento do módulo de comentários.
- Margem superior:
- Desktop: -1vw
- Tablet e telefone: -3,3vw
- Enchimento superior:
- Desktop e Tablet: 3vw
- Telefone: 4vw
- Preenchimento inferior:
- Desktop: 3vw
- Telefone e Tablet: 0vw
- Preenchimento esquerdo e direito:
- Desktop: 2vw
- Tablet: 4vw
- Telefone: 7vw
Fronteira
Finalmente, adicione alguns cantos arredondados ao módulo de comentários.
- Estilos de borda: 2px nos quatro lados
- Cor: Azul # 1a1f73
Adicionar Módulo de Aceitação de Email à Coluna 3
Contente
Passe para a coluna 3 e um módulo de adesão por e-mail. Dê um título ao módulo.
- Texto: Obtenha atualizações regulares
- Corpo: Texto do Parágrafo
Conta de e-mail
Configure seu provedor de e-mail na guia da conta de e-mail. Escolha uma lista e adicione sua chave de API.
- Provedor de Email
- Lista
- Chave API
Campos
Em seguida, selecione para usar apenas um único campo de nome.
- Use o campo de nome único: Sim
Fundo
Adicione um fundo branco ao módulo.
- Cor de fundo: branco
Layout
Passe para o design ta e altere as configurações de layout como segue.
- Layout: corpo à esquerda, formulário à direita
- Largura total do nome: Sim
- Largura total do nome: Sim
- Largura total do sobrenome: Sim
- Largura total do email: Sim
Campos
Em seguida, defina o estilo das configurações dos campos.
- Cor do Texto: Azul # 1a1f73
- Cor de fundo: branco #ffff
- Cor do texto do foco: Azul # 1a1f73
- Cor de fundo do foco: Branco #ffff
- Fonte: Lato
- Tamanho do texto:
- Desktop: 0.7vw
- Tablet: 2.2vw
- Telefone: 3.2vw
- Espaçamento entre letras: 1px
- Cantos arredondados: 0,2vw em todos os cantos
- Estilos de borda: todos os quatro lados
- Largura: 2 px
- Cor: Azul # 1a1f73
Texto do Título
Seguido pelo texto do título.
- Nível de direção: H4
- Fonte: Alegreya Sans SC
- Peso: Médio
- Estilo da fonte: TT
- Cor: Azul # 1a1f73
- Tamanho:
- Desktop: 1vw
- Tablet: 4vw
- Telefone: 5vw
- Espaçamento entre letras: 1px
Texto de corpo
Além disso, o corpo do texto.
- Fonte: Lato
- Cor: Azul # 1a1f73
- Tamanho:
- Desktop: 0.7vw
- Tablet: 2.3vw
- Telefone: 3vw
Texto da Mensagem do Resultado
Não se esqueça do texto da mensagem de resultado.
- Fonte: Lato
- Cor: Azul # 1a1f73
- Tamanho:
- Desktop: 0.7vw
- Tablet: 2.3vw
- Telefone: 3vw
Botão
Além disso, defina o estilo do botão.
- Tamanho do texto:
- Desktop: 0.7vw
- Tablet: 2.3vw
- Telefone: 3vw
- Cor do Texto: Branco #ffffff
- Cor de fundo: Azul # 51a2ff
- Fonte: Lato
Espaçamento
Ajuste o espaçamento.
- Preenchimento superior e inferior: 4vw
Fronteira
Em seguida, adicione alguns cantos arredondados.
- Cantos arredondados: o.5vw nos quatro cantos
Sombra da caixa
Finalmente, adicione uma sombra de caixa.
- Sombra: Terceira Opção
- Força do borrão: 80px
- Cor: rgba (0,0,0,0.13)
Antevisão
Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado deste tutorial.
Área de Trabalho
Tábua
Telefone
Área de Trabalho
Tábua
Móvel
É um envoltório do módulo de comentários!
É isso! Você acabou de adicionar uma seção de comentários personalizados ao modelo de postagem do seu blog. Esperamos que esses designs inspirem suas próprias criações de construtores de temas Divi. Você conseguiu baixar os arquivos JSON de ambos os designs no início deste tutorial. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!