Como criar uma barra lateral fixa para o modelo de postagem do seu blog com Divi

Ao criar qualquer tipo de site, são grandes as chances de você querer ocasionalmente blogar nesse site também. Além de precisar de uma página de blog que apresenta todas as suas postagens em uma forma de lista, você desejará ter um modelo de postagem de blog que pode ser atribuído automaticamente às novas postagens de blog que você criar. Projetar um modelo de postagem de blog com o Divi's Theme Builder é incrivelmente fácil. E agora, com as novas opções de aderência do Divi, você também pode ativar sua barra lateral imediatamente! No tutorial de hoje, mostraremos exatamente como fazer isso e você também poderá baixar o arquivo JSON do modelo de postagem do blog 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 os Modelos de Postagem de Blog da The Sticky Sidebar GRATUITAMENTE

Para colocar suas mãos nos modelos de postagem de blog da barra lateral aderente, 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.

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!

https://youtu.be/8hTA3ogf3ZQ

Inscreva-se no nosso canal no Youtube

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

Vá para Divi Theme Builder e adicione um novo modelo

Comece acessando o Divi Theme Builder e adicionando um novo modelo.

Use o modelo em todas as postagens

Use este novo modelo em todas as postagens.

• Use em: todas as postagens

Comece a construir o corpo do modelo

Em seguida, comece a construir o corpo personalizado do seu modelo de postagem.

2. Comece a construir o corpo da postagem do blog (barra lateral direita)

Seção # 1 Configurações

Fundo Gradiente

Uma vez dentro do editor de modelos, você pode começar a construir o design. Abra a seção que você pode observar na parte superior do modelo e aplique um fundo gradiente.

• Cor 1: # 8995ff
• Cor 2: # 6163b5
• Direção do gradiente: 150deg

Espaçamento

Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique uma cor de fundo.

• Cor de fundo: # 8995ff

Dimensionamento

Vá para a guia de design da linha e modifique as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione um pouco de preenchimento esquerdo e direito a seguir.

• Preenchimento esquerdo: 3%
• Preenchimento direito: 3%

Fronteira

Em seguida, inclua alguns cantos arredondados nas configurações de borda.

• Todos os cantos: 20px

Sombra da caixa

Aplique uma sombra de caixa também.

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

Transformar Traduzir

E conclua as configurações de linha, modificando as configurações de conversão de transformação de acordo:

• Certo: 50px

Adicionar Módulo de Texto à Coluna 1

Conteúdo Dinâmico

Adicione um primeiro Módulo de texto à coluna 1 e selecione o seguinte conteúdo dinâmico:

• Conteúdo dinâmico: categorias de postagem

Configurações de texto

Vá para a guia de design do módulo e estilize o texto de acordo:

• Fonte do Texto: Alata
• Cor do texto: #ffffff
• Tamanho do Texto: 1rem
• Espaçamento entre letras do texto: 1px
• Altura da linha de texto: 2em

Configurações de texto de link

Altere a cor do texto do link também.

• Cor do texto do link: #ffffff

Clone o módulo de texto duas vezes e coloque duplicatas nas colunas restantes

Depois de concluir o primeiro Módulo de texto, você pode clonar o módulo inteiro duas vezes e colocar as duplicatas nas duas colunas restantes da linha.

Alterar conteúdo dinâmico

Altere o conteúdo dinâmico de cada uma das duplicatas.

• Primeira duplicata: data de publicação da postagem

• Segunda duplicata: contagem de comentários de postagem
• Depois: comentários
• Link para a área de comentários: Sim

Adicionar Seção # 2

Espaçamento

Adicione outra seção logo abaixo da anterior. Abra as configurações da seção e aplique os seguintes valores de preenchimento superior e inferior:

• Preenchimento superior: 0 px
• Preenchimento inferior: 150 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Largura: 90%
• Largura máxima: 2580 px

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem superior: 100px
• Margem inferior:
  • Desktop: 100px
  • Tablet e telefone: 50px

Configurações da coluna 1

Espaçamento

Em seguida, abra as configurações da coluna 1 e aplique algum preenchimento esquerdo e direito.

• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Configurações da coluna 2

Cor de fundo

Passe para as configurações da coluna 2 e aplique uma cor de fundo branca.

• Cor de fundo: #ffffff

Espaçamento

Inclua alguns valores de preenchimento personalizados também.

• Enchimento superior: 5%
• Estofamento inferior: 5%
• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Fronteira

Em seguida, vá para as configurações de borda e aplique as seguintes configurações:

• Todos os cantos: 20px
• Borda superior:
  • Largura da borda superior:
    • Desktop: 0px
    • Tablet e telefone: 5px
  • Cor da borda superior: # 8995ff
• Borda Esquerda:
  • Largura da borda esquerda:
    • Desktop: 5px
    • Tablet e telefone: 0px
  • Cor da borda esquerda: # 8995ff

Sombra da caixa

Conclua as configurações da coluna aplicando a seguinte sombra de caixa:

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

Adicione o Módulo de Texto # 1 à Coluna 1

H1 Dynamic Content

É hora de adicionar módulos, começando com um Módulo de Texto na coluna 1. Selecione o seguinte conteúdo dinâmico:

• Conteúdo Dinâmico: Postagem / Título do Arquivo
• Antes: <H1>
• Depois: </H1>

Configurações de texto H1

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

• Fonte do título: Alata
• Tamanho do texto do título:
  • Desktop: 4.8rem
  • Tablet: 3.2rem
  • Telefone: 2.3rem
• Espaçamento entre letras do cabeçalho: -2 px

Espaçamento

Adicione algumas margens superior e inferior personalizadas também.

• Margem superior: 50px
• Margem inferior: 100px

Adicione o Módulo de Texto # 2 à Coluna 1

Deixe a caixa de conteúdo vazia

Adicione outro Módulo de Texto à coluna 1 e deixe a caixa de conteúdo vazia.

Imagem Dinâmica de Fundo

Em vez disso, estamos usando o Módulo de Texto para mostrar a imagem dinâmica em destaque do post como imagem de fundo.

• Imagem de fundo dinâmica: imagem em destaque
• Tamanho da imagem de fundo: capa

Espaçamento

Vá para a guia de design do módulo e aplique os seguintes valores de preenchimento:

• Enchimento superior: 250px
• Preenchimento inferior: 250 px

Fronteira

Em seguida, vá para as configurações de borda e adicione alguns cantos arredondados.

• Todos os cantos: 20px

Sombra da caixa

Conclua as configurações do módulo aplicando as seguintes configurações de sombra da caixa:

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

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

Configurações do corpo do texto

O próximo módulo que precisamos em nosso modelo de postagem é o Módulo de Conteúdo de Postagem. Este módulo representa o conteúdo dinâmico de sua postagem no blog. Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:

• Fonte do texto: Lato
• Tamanho do Texto: 1.1 Rem
• Altura da linha de texto: 2.3em

Configurações de texto de título

Altere a fonte do título também.

• Fonte do título: Alata

Espaçamento

E remova a margem inferior padrão.

• Margem inferior: 0px

Classe CSS

Por último, mas não menos importante, vá para a guia avançada e aplique a seguinte classe CSS:

• Classe CSS: blog-post-content

Adicionar Módulo de Código à Coluna 1

Adicionar código CSS para espaço entre títulos e conteúdo do parágrafo

Estamos usando a classe CSS que atribuímos ao Módulo Post Content para adicionar algum espaço entre títulos e parágrafos. Adicione um Módulo de Código logo abaixo do Módulo de Postagem e coloque o seguinte código CSS dentro do módulo:

<style>
.blog-post-content p,
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Adicionar Módulo da Barra Lateral à Coluna 2

Layout

Para a próxima coluna. Lá, vamos adicionar um módulo de barra lateral. Vá para a guia de design do módulo e oculte o separador de borda.

• Mostrar separador de borda: Não

Configurações de texto do título

Altere a fonte do título a seguir.

• Fonte do título: Alata

Configurações do corpo do texto

Junto com a fonte do corpo.

• Fonte do corpo: Lato

Adicionar Módulo de Aceitação de Email à Coluna 2

Adicionar conteúdo

Logo abaixo do Módulo da Barra Lateral, adicionaremos um Módulo de Aceitação de Email. Adicione alguma cópia de sua escolha.

Adicionar Conta

Em seguida, vincule sua conta de e-mail.

Remover cor de fundo

Em seguida, remova a cor de fundo.

Configurações de campos

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

• Fonte dos Campos: Lato

• Sombra da caixa: primeira opção
• Cor da sombra: rgba (0,0,0,0,06)

Configurações de texto

Estamos mudando a cor do texto nas configurações de texto também.

• Cor do Texto: Escuro

Configurações de texto do título

Em seguida, vamos alterar as configurações de texto do título.

• Nível do título do título: H3
• Fonte do título: Alata
• Tamanho do texto do título: 1,5 rem.

Configurações de botão

A seguir, definiremos o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 20 px
• Cor do texto do botão: #ffffff
• Gradient Color 1: # 8995ff
• Gradient Color 2: # 6163b5
• Tipo de gradiente: Linear
• Direção do gradiente: 150deg
• Largura da borda do botão: 0 px

• Raio da borda do botão: 5px
• Fonte do botão: Lato

Espaçamento

E vamos completar as configurações do módulo removendo os valores de preenchimento padrão nas configurações de espaçamento.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 0px
• Preenchimento direito: 0 px

Adicionar Seção # 3

Fundo Gradiente

Para a próxima e última seção. Adicione o seguinte fundo gradiente:

• Cor 1: # 8995ff
• Cor 2: # 6163b5
• Tipo de gradiente: Linear
• Direção do gradiente: 150deg

Espaçamento

Vá para a guia de design da seção e remova o preenchimento superior padrão.

• Preenchimento superior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e aplique uma cor de fundo.

• Cor de fundo: # 8995ff

Dimensionamento

Vá para a guia de design da linha e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Largura: 90%
• Largura máxima: 2580 px

Espaçamento

Modifique os valores de preenchimento de acordo:

• Enchimento superior: 100px
• Preenchimento inferior: 100px
• Preenchimento esquerdo: 5%
• Preenchimento direito: 5%

Fronteira

Em seguida, adicione alguns cantos arredondados.

• Todos os cantos: 20px

Sombra da caixa

Vamos adicionar uma sombra de caixa também.

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

Transformar Traduzir

E concluiremos as configurações de linha aplicando os seguintes valores de conversão de transformação:

• Certo: -100px

Adicionar Módulo de Comentários à Coluna

Configurações de campos

O único módulo de que precisamos na linha é um Módulo de comentários. Vá para a guia de design do módulo e defina o estilo dos campos:

• Cor de fundo dos campos: rgba (255,255,255,0,09)
• Cor do texto dos campos: #ffffff
• Fonte dos Campos: Lato

• Campos arredondados: 10px (todos os cantos)
• Largura da borda inferior dos campos: 5 px
• Cor da borda inferior dos campos: #ffffff

• Sombra da caixa de campos: primeira opção
• Cor da sombra: rgba (0,0,0,0,06)

Configurações de imagem

Altere também as configurações de imagem.

• Cantos arredondados da imagem: 100 px (todos os cantos)

Configurações de texto

Em seguida, modifique a cor do texto nas configurações de texto.

• Cor do Texto: Claro

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

Também estamos modificando 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: Alata
• Tamanho do texto da contagem de comentários: 2rem
• Altura da linha de contagem de comentários: 1,4em

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

Junto com 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: Alata

Configurações de meta texto

Em seguida, as configurações de meta texto.

• Meta Font: Alata
• Tamanho do Meta-Texto: 1.2 Rem

Configurações de texto de comentário

Também modificaremos as configurações de texto do comentário.

• Fonte do comentário: Lato
• Tamanho do texto do comentário: 1.1 rem.
• Altura da linha de comentário: 2em

Configurações de botão

E definiremos o estilo do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1.1 rem.
• Cor do texto do botão: # 8995ff
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 5px

• Espaçamento entre letras dos botões: 1px
• Fonte do botão: Lato

• Preenchimento da parte superior do botão: 20 px
• Preenchimento inferior do botão: 20 px

CSS do corpo do comentário

Por último, mas não menos importante, concluiremos as configurações do módulo aplicando a seguinte linha de código CSS ao corpo do comentário na guia avançada:

margin-top: 50px;

3. Aplicar efeito de aderência à coluna da barra lateral

Abrir coluna da barra lateral

Agora que o design de nosso modelo de postagem de blog foi concluído, vamos tornar a coluna da barra lateral fixa usando as opções de adesivo do Divi. Abra as configurações da coluna 2.

Aplicar efeito pegajoso

Vá para a guia avançada da coluna e aplique as seguintes configurações fixas:

• Posição pegajosa:
  • Desktop: Fique no topo
  • Tablet e telefone: não fixe
• Limite inferior aderente: linha
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

4. Coloque a barra lateral no lado esquerdo

Arraste a coluna da barra lateral acima da coluna 1

Se você quiser colocar a barra lateral no lado esquerdo do seu modelo, abra as configurações de linha e arraste a segunda coluna para o topo.

Alterar borda da coluna da barra lateral

Abra a coluna que contém a barra lateral e modifique as configurações de borda de acordo:

• Largura da borda direita:
  • Desktop: 5px
  • Tablet e telefone: 0px
• Cor da borda direita: # 8995ff
• Largura da borda esquerda: Nenhuma

Aplicar coluna reversa se desejado

Se você decidir ir para uma barra lateral fixa no lado esquerdo do modelo de postagem do seu blog, você pode colocar a barra lateral abaixo do conteúdo da postagem em telas menores. Para conseguir isso, você pode usar a segunda abordagem dentro deste tutorial Divi sobre como reverter a ordem de empilhamento das colunas Divi.

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 obter o máximo do design do modelo de postagem do seu blog que você construiu usando o Divi's Theme Builder. Mais especificamente, mostramos passo a passo como incluir uma barra lateral adesiva que é possível graças às opções adesivas do Divi. A barra lateral aderente seguirá seus visitantes enquanto eles lêem o conteúdo da postagem, o que permite que eles vejam postagens relacionadas, sua opção de e-mail ou qualquer outra coisa que você decida colocar em sua barra lateral aderente. Você também conseguiu baixar o arquivo JSON de modelo 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.