Como incluir uma barra lateral fixa de altura total em seu modelo de postagem de blog

A escolha de adicionar uma barra lateral às postagens do blog é inteiramente sua. Alguns blogueiros optam por não usar uma barra lateral. Este tutorial é para aqueles que preferem usar uma barra lateral, mas querem torná-la um pouco diferente. Normalmente, as barras laterais são posicionadas estaticamente, mas se o conteúdo da postagem for longo, isso significa que o leitor terá que rolar para cima para ver a barra lateral.

Neste design de modelo de postagem de blog, criamos uma barra lateral fixa de altura total que permanece no lugar enquanto rola para baixo o conteúdo da postagem. Ao recriar o tutorial, mantenha duas guias abertas dentro de seu navegador: uma para o criador de temas e outra para uma visualização de postagem do blog. Dessa forma, você pode ver as mudanças à medida que avança.

Vamos começar!

Antevisão

Antes de começar, vamos dar uma olhada na barra lateral fixa de altura total.

Área de Trabalho

Móvel

Baixe o modelo de barra lateral fixa de altura total GRATUITAMENTE

Para colocar as mãos no modelo gratuito de barra lateral fixa de altura total, 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!

Criar widget da barra lateral

Antes de começar com o modelo de barra lateral fixa de altura total, crie um widget de barra lateral personalizado. Vamos, mais tarde, incluir isso em nossa barra lateral dentro do modelo.

Abrir Construtor de Widget

Clique em 'Aparência' e selecione 'Widgets'.

Adicionar elementos ao widget da barra lateral

Arraste os elementos 'Postagens recentes' e 'Categorias' para o widget da barra lateral.

Ajustar as configurações do elemento no widget

Escolha mostrar apenas 3 postagens recentes e adicione um título. Adicione um título ao widget de categorias também e não se esqueça de clicar em 'Salvar' em ambas as caixas quando terminar.

• Título de postagens recentes: Leia mais:
• Título das categorias: Navegar

2. Comece a usar o Theme Builder

Abrir Construtor de Tema / Adicionar Novo Modelo

É hora de começar a recriar o modelo fixo de barra lateral de altura total! Primeiro, abra seu construtor de tema e inclua um novo modelo.

Definir configurações de modelo

Nas configurações do modelo, selecione 'Todas as postagens do blog'. Se você gosta de usar o modelo para uma categoria ou tag específica, modifique as configurações do modelo de acordo.

Adicionar corpo personalizado

Em seguida, clique em 'Adicionar corpo personalizado'.

Selecione Construir Corpo Personalizado

Vamos recriar este modelo do zero, então vá em frente e escolha 'Build Custom Body'.

Construir do zero

Uma vez dentro do construtor visual, selecione a opção de construir do zero mais uma vez.

Recrie o modelo com barra lateral fixa de altura total

Configurações da seção

Fundo

Abra a seção existente dentro do seu editor de modelo e adicione um fundo gradiente.

• Gradiente de Fundo
  • Cor 1: Branco #ffffff
  • Cor 2: cinza claro #eaeaea

Espaçamento

Adicione um pouco de preenchimento também.

• Preenchimento superior: 55 px

Adicionar nova linha

Estrutura da Coluna

Agora adicione uma linha com uma estrutura de colunas de 3/4 - 1/4.

Dimensionamento

Ajuste o tamanho da linha da seguinte maneira.

• Largura de calha personalizada: 2
• Largura:
  • Desktop e tablet: 90%
  • Telefone: 100%
• Largura máxima:
  • Desktop: 1920px
• Altura mínima: 100vh

Configurações da coluna 1

Espaçamento

Antes de adicionar módulos, ajuste as configurações da coluna. Coluna 1 primeiro.

• Preenchimento esquerdo e direito
  • Tablet: 2%
  • Telefone: 8%

Configurações da coluna 2

Fundo

Em seguida, adicione uma cor de fundo à coluna 2.

• Cor de fundo: branco #ffffff

Espaçamento

Inclua algum espaçamento também.

• Preenchimento esquerdo e direito
  • Desktop: 3%
  • Tablet e telefone: 14%

Fronteira

Em seguida, dê cantos arredondados à coluna.

• Cantos arredondados
  • Tablet e Desktop: 15px

CSS customizado

Vá para a guia avançada e adicione algumas linhas de código CSS ao elemento principal. Isso nos ajudará a criar a barra lateral de altura total na área de trabalho.

• Elemento Principal
  • altura mínima: 100%

min-height: 100%;

Posição

Por último, mas não menos importante, para criar o efeito de barra lateral fixa, adicione uma posição fixa à coluna.

• Posição
  • Desktop: Fixo
  • Tablet e telefone: padrão
• Localização: Cima direita

Adicionar Módulo de Título de Postagem nº 1

Elementos

É hora de adicionar módulos! Comece com um primeiro módulo de título de postagem na coluna 1 e habilite apenas o título.

• Mostrar Título: Sim

Imagem Dinâmica de Fundo

Em seguida, vá para as configurações de fundo e use a imagem em destaque como uma imagem de fundo dinâmica.

Texto do Título

Defina o estilo das configurações de texto do título.

• Fonte do título: Bai Jamjuree
• Estilo da fonte do título: maiúsculas
• Cor do texto do título: # e98074
• Tamanho do texto do título:
  • Desktop: 45px
  • Tablet: 35px
  • Telefone: 25px
• Espaçamento entre letras de título: 3px
• Altura da linha do título: 1,3em

Espaçamento

Em seguida, adicione algum preenchimento personalizado superior e inferior.

• Enchimento superior: 20%
• Estofamento inferior: 20%

Fronteira

Inclua também alguns cantos arredondados.

• Todos os cantos: 15px

Título CSS

E conclua as configurações do módulo adicionando três linhas de código CSS ao elemento de título do módulo na guia avançada.

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

Adicionar Módulo de Título de Postagem nº 2

Elementos

Agora adicione outro módulo de título de postagem. Selecione os seguintes elementos.

• Meta
• Autor
• Categorias de postagem

Meta Texto

Abra a guia de design e estilize o metatexto.

• Fonte: Bai Jamjuree
• Peso: Médio
• Cor: Cinza # 8e8d8a
• Tamanho
  • Desktop: 20px
  • Tablet e telefone: 15px
• Espaçamento entre letras: 2px

Dimensionamento

Ajuste o tamanho também.

• Largura: 90%
• Alinhamento do Módulo: Centro

Espaçamento

Complete as configurações deste módulo com algum espaçamento.

• Enchimento superior: 15px

Adicionar módulo de conteúdo de postagem

Fundo

Em seguida, adicione um módulo de conteúdo de postagem com um fundo branco.

• Cor de fundo: branco #ffffff

Texto

Agora, estilize o corpo do texto.

• Fonte: Lato
• Cor: Cinza # 8e8d8a
• Tamanho: 16px

Texto do Título

Continue definindo o estilo de todos os estilos de texto do título.

• H1
  • Fonte: Bai Jamjuree
  • Peso: Médio
  • Cor: Coral # e98074
  • Tamanho
    • Desktop: 45px
    • Tablet: 33px
    • Telefone: 30px
  • Espaçamento entre letras: 1px
• H2
  • Fonte: Bai Jamjuree
  • Peso: Médio
  • Cor: Coral # e98074
  • Tamanho
    • Desktop: 35px
    • Tablet e telefone: 25px
  • Espaçamento entre letras: 1px
• H3
  • Fonte: Bai Jamjuree
  • Peso: Regular
  • Cor: Cinza Escuro # 606060
  • Tamanho
    • Desktop: 25px
    • Tablet e telefone: 22px
  • Espaçamento entre letras: 1px
• H4
  • Fonte: Bai Jamjuree
  • Peso: Regular
  • Cor: Cinza Escuro # 606060
  • Tamanho
    • Desktop: 22px
    • Tablet: 20px
    • Telefone: 18px
  • Espaçamento entre letras: 1px
• H5
  • Fonte: Bai Jamjuree
  • Peso: Médio
  • Cor: Cinza Escuro # 606060
  • Tamanho: 16px
  • Espaçamento entre letras: 1px
• H6
  • Fonte: Bai Jamjuree
  • Peso: Regular
  • Cor: Cinza Escuro # 606060
  • Tamanho: 16px
  • Espaçamento entre letras: 1px

Espaçamento

Adicione algumas configurações de espaçamento também.

• Margem superior: 40px
• Enchimento superior: 10%
• Estofamento inferior: 10%
• Preenchimento esquerdo: 10%
• Preenchimento direito: 10%

Fronteira

Por último, mas não menos importante, adicione alguns cantos arredondados.

• Borda arredondada: 15px

Adicionar Módulo de Comentários

Elementos

Para completar a primeira coluna, adicione um módulo de comentários. Ative os seguintes elementos:

• Botão de Resposta
• Contagem de comentários

Campos

Na guia de design, defina o estilo dos campos.

• Cor de fundo: cinza claro # f7f7f7
• Cor do texto: cinza # 8e8d8a
• Fonte: Bai Jamjuree
• Tamanho do texto: 17px
• Cantos arredondados: 15px

Texto de contagem de comentários

Defina também o estilo do texto de contagem de comentários.

• Nível de direção: H3
• Fonte: Bai Jamjuree
• Cor: Coral # e98074
• Tamanho: 22px
• Espaçamento entre letras: 1px

Texto do Título do Formulário

Em seguida, o título do formulário.

• Nível de direção: H3
• Fonte: Bai Jamjuree
• Cor: Coral # e98074
• Tamanho: 18 px
• Espaçamento entre letras: 1px

Meta Texto

Defina também o estilo do metatexto.

• Fonte: Bai Jamjuree
• Cor: # 606060
• Tamanho: 14px
• Espaçamento entre letras: 1px

Texto do Comentário

Não se esqueça do texto do comentário.

• Fonte: Bai Jamjuree
• Tamanho: 1px

Botão

Agora defina o estilo dos botões.

• Estilos Personalizados
• Tamanho do texto: 18 px
• Cor do Texto: Branco #ffffff
• Cor de fundo: Coral # e98074
• Raio da borda do botão: 15px
• Fonte do botão: Bai Jamjuree

Dimensionamento

Ajuste o tamanho da linha também.

• Largura: 90%

Espaçamento

Bem como as configurações de espaçamento.

• Enchimento superior: 8%
• Preenchimento esquerdo e direito: 4%

Adicionar Módulo Pessoa

Texto

Passe para a coluna da barra lateral fixa e adicione um módulo de pessoa.

• Nome: Autor de Postagem Dinâmica
• Antes: Escrito por:

Texto do Título

Na guia de design, defina o estilo do texto do título da seguinte maneira:

• Nível de direção: H4
• Fonte: Bai Jamjuree
• Cor: Coral # e98074
• Tamanho: 2vh
• Espaçamento entre letras: 2px

Dimensionamento

Ajuste o tamanho a seguir.

• Altura mínima:
  • Desktop: 3vh
  • Tablet e telefone: automático
• Altura máxima:
  • Desktop: 3vh
  • Tablet e telefone: automático

Espaçamento

Adicione algum espaçamento personalizado também.

• Margem Superior
  • Desktop: 6vh
  • Tablet e telefone: 10vh

Adicionar Módulo de Imagem

Imagem

Agora, adicione um módulo de imagem. Selecione o conteúdo dinâmico para a foto do autor.

• Imagem: Foto de Perfil de Autor Dinâmico

Alinhamento

Vá para a guia de design e escolha o seguinte alinhamento:

• Alinhamento de imagem: esquerda

Dimensionamento

Ajuste o tamanho do módulo a seguir.

• Largura máxima: 15vh
• Alinhamento do Módulo: Esquerda
• Altura máxima
  • Desktop: 15vh

Fronteira

Finalmente, adicione alguns cantos arredondados às configurações de borda.

• Cantos arredondados: 15px

Adicionar Módulo de Barra Lateral

Contente

Agora é hora de adicionar os widgets da barra lateral usando o módulo da barra lateral.

• Área do widget: barra lateral

Layout

Ajuste o layout primeiro.

• Mostrar separador de borda: Não

Texto do Título

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

• Fonte: Bai Jamjuree
• Peso: Médio
• Cor: Coral # e98074
• Tamanho: 2vh
• Espaçamento entre letras: 2px

Texto de corpo

Continue com o corpo do texto.

• Fonte: Bai Jamjuree
• Peso: leve
• Cor: Cinza Escuro # 7f7f7f
• Hover Color: Coral # e98074
• Tamanho: 1,5 Vh
• Espaçamento entre letras: 1px
• Altura da linha: 1.8em

Dimensionamento

Ajuste o tamanho do módulo também.

• Altura Mínima
  • Desktop: 12vh
  • Tablet e telefone: automático
• Altura máxima
  • Desktop: 12vh
  • Tablet e telefone: automático

Espaçamento

Não se esqueça de adicionar algum espaçamento.

• Top Padding
  • Desktop: 1vh
  • Tablet e telefone: 3vh

CSS customizado

Por último, mas não menos importante, inclua algumas linhas de código CSS na guia avançada.

• Widget: padding-bottom: 0vh;

padding-bottom: 0vh;

• Título: padding-bottom: 2vh;

padding-bottom: 2vh;

Adicionar Email Optin

Texto

O próximo módulo de que precisamos em nossa barra lateral é um módulo de aceitação de e-mail. Adicione algum conteúdo de sua escolha.

• Título: Atualizações
• Botão: Inscrever-se

Conta de e-mail

Conecte seu e-mail ao próximo formulário.

• Provedor de serviços: seu provedor de e-mail
• Lista: sua lista escolhida

Campos

Estamos usando apenas o campo de nome nas configurações de campos.

• Mostrar campo de nome

Fundo

Em seguida, desative o plano de fundo padrão.

• Usar cor de fundo: Não

Layout

Vá para a guia de design e modifique as configurações de layout.

• Layout: corpo na parte superior, formulário na parte inferior
• Largura total do nome: Não
• Largura total do email: Não

Campos

Em seguida, defina o estilo dos campos da seguinte maneira:

• Cor de fundo: cinza claro # f7f7f7
• Cor do texto: # 606060
• Preenchimento superior e inferior: 1vh
• Preenchimento esquerdo: 1vh
• Fonte: Bai Jamjuree
• Tamanho do texto: 1,5 vh
• Espaçamento entre letras: 1px
• Cantos arredondados: 15px

Texto do Título

Defina também o estilo do texto do título.

• Nível de direção: H4
• Fonte: Bai Jamjuree
• Cor: Coral # e98074
• Tamanho: 2vh
• Espaçamento entre letras: 2px
• Altura da linha: 1em

Botão

Então, o botão.

• Estilos Personalizados
• Tamanho do texto: 1,5 vh
• Cor do Texto: Branco #ffffff
• Cor de fundo: Coral # e98074
• Raio da borda: 15px
• Espaçamento entre letras: 2px
• Fonte: Bai Jamjuree
• Preenchimento superior e inferior: 1vh

Espaçamento

E complete as configurações do módulo e o tutorial adicionando alguns valores de espaçamento personalizados ao módulo. É isso! Certifique-se de salvar todas as alterações do construtor de tema quando terminar de criar o corpo do modelo.

• Top Padding
  • Desktop e Tablet: 0vh
• Padding Inferior
  • Desktop: 2vh
  • Tablet e telefone: 6vh
• Preenchimento esquerdo e direito
  • Desktop e Tablet: 0vh

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

Isso é um embrulho!

Acabamos de recriar a barra lateral fixa de altura total para os modelos de postagem do seu blog. Se você baixou o modelo do link acima, não se esqueça de configurar os widgets da barra lateral conforme mostrado na primeira parte deste tutorial.

Você é um tipo de pessoa com barra lateral ou nenhum tipo de barra lateral? Deixe-nos saber nos comentários se você tiver alguma dúvida ou opinião!