Como projetar uma caixa de autor dinâmica para o modelo de postagem do seu blog com a Divi

Mencionar o autor da postagem nas postagens do seu blog é essencial. Agora, com o Divi's Theme Builder, você pode adicionar uma caixa de autor dinâmica em todo o site às suas postagens. Você também pode estilizar a caixa do autor usando as opções integradas do Divi, o que pode resultar em um belo design da web. Neste tutorial, mostraremos exatamente como criar uma bela caixa de autor dinâmica dentro do seu modelo de postagem. Você também poderá baixar o arquivo JSON do modelo de postagem gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o modelo de postagem GRATUITAMENTE

Para colocar as mãos no modelo de postagem gratuita, primeiro você precisa baixá-lo 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.

Baixe os arquivos

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.

DOWNLOAD

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!

1. Vá para Divi Theme Builder e adicione um novo modelo de postagem

Vá para Divi Theme Builder e adicione um novo modelo

Comece acessando o Divi Theme Builder. Uma vez lá, adicione um novo modelo.

Use o modelo em todas as postagens

Use o novo modelo em todas as suas postagens.

• Use em: todas as postagens

Comece a construir o corpo do modelo

E comece a construir o corpo do modelo.

2. Construir corpo do modelo de postagem do blog

Configurações da seção

Cor de fundo

Dentro do editor de template, você notará uma seção. Abra as configurações da seção e adicione uma cor de fundo.

• Cor de fundo: # 270fff

Imagem de fundo

Faça upload da imagem de fundo que você encontra na pasta compactada que você baixou no início deste post.

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações da linha e altere a largura máxima nas configurações de dimensionamento.

• Largura máxima: 1380 px

Adicionar Módulo de Título de Postagem à Coluna

Elementos

O único módulo de que precisamos nesta linha é um Módulo de Título de Postagem. Estamos desativando a imagem em destaque do post nas configurações de elementos.

• Mostrar imagem em destaque: Não

Configurações de texto

Vá para a guia de design do módulo e altere a cor do texto nas configurações gerais de texto.

• Cor do Texto: Claro

Configurações de texto do título

Modifique as configurações de texto do título a seguir.

• Fonte do título: Work Sans
• Tamanho do texto do título: 7rem (desktop), 4rem (tablet), 2rem (telefone)
• Espaçamento entre letras de título: -2 px

Configurações de meta texto

Junto com as configurações de meta texto.

• Meta Font: Work Sans
• Tamanho do Meta-Texto: 1rem

Adicionar nova seção

Espaçamento

Adicione uma nova seção regular ao corpo do modelo, abra as configurações da seção e remova todo o preenchimento superior padrão.

• Preenchimento superior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura máxima: 1380 px

Espaçamento

Remova também todo o preenchimento superior padrão.

• Preenchimento superior: 0 px

Configurações da coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 200 px (desktop), 50 px (tablet), 20 px (telefone)
• Preenchimento inferior: 200 px (desktop), 50 px (tablet), 20 px (telefone)
• Preenchimento esquerdo: 100 px (desktop), 50 px (tablet), 20 px (telefone)
• Preenchimento direito: 100 px (desktop), 50 px (tablet), 20 px (telefone)

Sombra da caixa

Adicione também uma sombra de caixa à primeira coluna.

• Força do desfoque de sombra da caixa: 60 px
• Cor da sombra: rgba (0,0,0,0.09)

Adicionar módulo de conteúdo de postagem à coluna 1

Configurações de texto

É hora de começar a adicionar módulos! Coloque o Módulo de Postagem na coluna 1 e altere as configurações de texto de acordo:

• Fonte do Texto: Work Sans
• Tamanho do texto: 1rem (desktop), 0.9rem (tablet e telefone)
• Altura da linha de texto: 2.3em

Configurações de texto de título

Modifique também as diferentes configurações de texto do título.

• Fonte do cabeçalho: Work Sans
• Cabeçalho 2 Tamanho do texto: 1,6 rem (H2), 1,5 rem (H3), 1,4 rem (H4), 1,3 rem (H5), 1,2 rem (H6)
• Altura da linha de direção: 1,3em

ID CSS

Conclua as configurações do módulo adicionando um ID CSS.

• CSS ID: blog-post-content

Adicionar Módulo de Código à Coluna 1

Insira o código CSS do cabeçalho

Para adicionar algum espaço entre os diferentes elementos de conteúdo da postagem, adicionaremos um Módulo de Código à coluna 1 e inseriremos as seguintes linhas de código CSS:

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Adicionar Módulo de Pessoa à Coluna 2

Conteúdo Dinâmico

Na segunda coluna, o único módulo de que precisamos é um Módulo Pessoa. Selecionaremos o seguinte conteúdo dinâmico:

• Nome: Autor da postagem
• Cargo: Autor
• Corpo: Biografia do Autor

Conteúdo Dinâmico de Imagem

Adicione a imagem de perfil dinâmico do autor ao módulo também.

• Imagem: Foto do Perfil do Autor

Hover Background Color

Em seguida, adicione uma cor de fundo branca ao pairar.

• Cor de fundo: #ffffff

Configurações de texto do título

Vá para a guia de design do módulo e altere as configurações de texto H3 de acordo:

• Nível do título do título: H3
• Fonte do título: Work Sans
• Tamanho do texto do título: 1.1 rem.

Configurações do corpo do texto

Modifique as configurações do corpo do texto também.

• Fonte do corpo: Work Sans
• Tamanho do corpo do texto: 0,9 rem.
• Altura da linha corporal: 2em

Configurações de posição de texto

Em seguida, altere as configurações de texto da fonte de posição.

• Fonte de posição: Work Sans
• Tamanho do texto da posição: 0,9 rem.

Dimensionamento Padrão

Modifique a altura nas configurações de dimensionamento.

• Altura: 160 px (desktop), automático (tablet e telefone)

Hover Sizing

E traga de volta a altura para flutuar automaticamente.

• Altura: auto

Espaçamento

Em seguida, estamos adicionando algum espaço ao redor do módulo usando preenchimento personalizado.

• Enchimento superior: 50 px
• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Borda Padrão

E usaremos uma borda também.

• Largura da borda esquerda: 0 px (desktop), 4 px (tablet e telefone)
• Cor da borda esquerda: # 270fff

Hover Border

Modifique a largura da borda ao pairar.

• Largura da borda esquerda: 4px

Sombra de caixa padrão

Em seguida, adicione uma sombra de caixa.

• Força do desfoque de sombra da caixa: 60 px
• Cor da sombra: rgba (0,0,0,0) (desktop), rgba (0,0,0,0.11) (tablet e telefone)

Hover Box Shadow

Altere a cor da sombra ao pairar.

• Cor da sombra: rgba (0,0,0,0.11)

Filtros padrão

Continuando, vamos mudar a opacidade.

• Opacidade: 41% (desktop), 100% (tablet e telefone)

Filtros Hover

Traga de volta a opacidade para 100% ao pairar.

• Opacidade: 100%

CSS do elemento principal

Para adicionar o efeito pegajoso que você notou na visualização deste post, adicionaremos algumas linhas de CSS customizado ao elemento principal do módulo.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

CSS da imagem do membro

Estamos garantindo que a imagem do perfil do autor seja alinhada à esquerda, adicionando uma única linha de código CSS à imagem do membro do módulo.

text-align: left;

Visibilidade padrão

Para ocultar o conteúdo do módulo na área de trabalho, vamos alterar os overflows na guia avançada.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Hover Visibility

Faremos o conteúdo aparecer ao passar o mouse, alterando os overflows para visíveis.

• Excesso horizontal: visível
• Estouro vertical: visível

Adicionar nova seção

Adicione outra seção ao seu design.

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura máxima: 1380 px

Adicionar Módulo de Comentários à Coluna

Configurações de campos

O único módulo de que precisamos nesta linha é um Módulo de Comentários. Altere as configurações dos campos da seguinte forma:

• Cor de fundo dos campos: #ffffff
• Preenchimento superior dos campos: 20 px
• Preenchimento inferior dos campos: 20 px
• Fonte dos Campos: Work Sans
• Tamanho do texto dos campos: 1rem

Configurações de texto de contagem de comentários

Modifique também as configurações de texto da contagem de comentários.

• Nível de cabeçalho de contagem de comentários: H2
• Fonte de contagem de comentários: Work Sans
• Tamanho do texto da contagem de comentários: 1,5 rem.

Configurações de texto do título do formulário

Em seguida, altere as configurações de texto do título do formulário.

• Nível de cabeçalho do título do formulário: H3
• Fonte do título do formulário: Work Sans
• Tamanho do texto do título do formulário: 1.2; rem

Configurações de meta texto

Modifique as configurações de meta texto também.

• Meta Font: Work Sans
• Tamanho do Meta-Texto: 1rem

Configurações de texto de comentário

Estamos alterando as configurações de texto do comentário também.

• Fonte do comentário: Work Sans
• Tamanho do texto do comentário: 1rem
• Altura da linha de comentário: 2.3em

Configurações de botão

Conclua as configurações do módulo definindo o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1rem
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 270fff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px

• Fonte do botão: Work Sans

3. Salvar alterações do Theme Builder e visualizar o resultado

Depois de concluir o modelo, certifique-se de salvar todas as alterações, saia do Theme Builder e veja o resultado em suas postagens!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como projetar uma bela caixa de autor dinâmica usando as opções integradas do Divi, o recurso dinâmico e o Theme Builder. Com essas três coisas combinadas, agora é mais fácil do que nunca personalizar o modelo de postagem do seu blog e creditar o autor da postagem de forma criativa. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.