Baixe um modelo GRATUITO de postagem no blog da barra lateral dupla com a Divi

Embora as barras laterais já existam há muito tempo, ainda são usadas com frequência na web. Eles ajudam a mostrar diferentes elementos que estão ligados à postagem, como postagens recomendadas e formulários de adesão por e-mail, sem descuidar do foco principal, que é o conteúdo da postagem propriamente dita. Agora, com o Divi's Theme Builder, existem várias maneiras de criar o modelo de postagem do seu blog. Neste tutorial, mostraremos como adicionar uma barra lateral dupla ao seu modelo de postagem. Você também poderá baixar o arquivo JSON 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

Inscreva-se no nosso canal no Youtube

Baixe o modelo de postagem do blog GRATUITAMENTE

Para colocar suas mãos no modelo de postagem de blog gratuito, 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

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

Estamos usando este novo modelo em todas as postagens.

• Use em: todas as postagens

Comece a construir o corpo do modelo

Bem, então, comece a construir o corpo do modelo.

2. Comece a construir o corpo da postagem do blog

Adicionar nova seção

Cor de fundo

Uma vez dentro do Divi Theme Builder, você notará uma seção. Abra essa seção e mude a cor de fundo.

• Cor de fundo: # f4f4f4

Espaçamento

Modifique os valores de espaçamento da seção em diferentes tamanhos de tela também.

• Preenchimento superior: 50 px (desktop), 20 px (tablet), 10 px (telefone)
• Preenchimento inferior: 50 px (desktop), 20 px (tablet), 10 px (telefone)

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: 100%
• Largura máxima: 95%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

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

Coluna 2

Cor de fundo

Em seguida, abra as configurações da coluna 2 e altere a cor de fundo para branco.

• Cor de fundo: #ffffff

Sombra da caixa

Adicione também uma sombra de caixa à coluna.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -21px
• Cor da sombra: rgba (0,0,0,0,08)

Adicionar Módulo de Imagem à Coluna 2

Conteúdo Dinâmico

É hora de começar a adicionar módulos! Na segunda coluna, colocaremos todos os módulos relevantes para a postagem do blog em si, começando com um Módulo de Imagem. Use o conteúdo dinâmico da imagem em destaque.

• Imagem: Imagem em destaque

Dimensionamento

Em seguida, vá para a guia de design do módulo e force a largura total no Módulo de imagem.

• Forçar largura total: Sim

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

Elementos

No segundo módulo, que é o Módulo de Título de Postagem. Desative a imagem em destaque nas configurações dos elementos.

• Mostrar imagem em destaque: Não

Configurações de texto do título

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

• Fonte do título: oxigênio
• Tamanho do texto do título: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Altura da linha de título: 1,2em

Configurações de meta texto

Faça algumas alterações nas configurações de metatexto a seguir.

• Meta Fonte: Open Sans
• Meta Cor do Texto: # ffc023
• Meta do tamanho do texto: 1vw (desktop), 2vw (tablet), 3vw (telefone)

Espaçamento

Modifique os valores de espaçamento também.

• Margem superior: 100px
• Margem esquerda: 4vw
• Margem direita: 4vw

Título CSS

E complete as configurações do módulo adicionando alguma margem inferior ao elemento CSS do título na guia avançada.

margin-bottom: 20px;

Adicionar Módulo de Postagem à Coluna 2

Configurações de texto

Passe para o próximo módulo, que é o Módulo de Conteúdo de Postagem que contém todo o conteúdo de postagem de blog dinâmico. Altere as configurações de texto do módulo de acordo:

• Fonte do texto: Open Sans
• Tamanho do texto: 0,9vw (desktop), 1,8vw (tablet), 3vw (telefone)
• Altura da linha de texto: 2.2em

Configurações de texto de título

Em seguida, faça algumas alterações nas configurações do texto do título também.

• Fonte do cabeçalho: Oxigênio
• Tamanho do texto H2: 1,5 vw (desktop), 3vw (tablet), 4vw (telefone)
• H3, H4, H5 e H6 Tamanho do texto: 1,3vw (desktop), 2,5vw (tablet), 3,5vw (telefone)

Espaçamento

Estamos usando algumas margens personalizadas e valores de preenchimento também.

• Margem esquerda: 4vw
• Margem direita: 4vw
• Enchimento superior: 50 px
• Preenchimento inferior: 100px

Classe CSS

Conclua as configurações do módulo adicionando uma classe CSS. Na próxima parte deste tutorial, usaremos esta classe CSS para adicionar algum espaçamento aos títulos e parágrafos.

• espaçamento pós-conteúdo

Adicionar Módulo de Código à Coluna 2

Insira o código CSS

Conforme mencionado na etapa anterior deste post, usaremos algum CSS personalizado para adicionar espaço entre títulos e parágrafos. Para isso, usaremos um Módulo de Código na coluna 2. Insira as seguintes linhas de código CSS:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

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

Adicionar conteúdo

É hora de começar a adicionar os elementos da barra lateral! Você pode adicionar qualquer módulo que desejar. Começaremos com um Módulo de Aceitação de Email na coluna 3. Use uma cópia de sua escolha.

Conta de e-mail

Continue vinculando uma conta de e-mail ao módulo.

Campos

Em seguida, desative o campo de sobrenome nas configurações dos campos.

• Mostrar campo de sobrenome: Não

Cor de fundo

Altere a cor de fundo de acordo:

• Cor de fundo: # ffc023

Configurações de campos

Vá para a guia de design do módulo e modifique as configurações dos campos da seguinte forma:

• Fonte dos Campos: Open Sans
• Tamanho do texto dos campos: 0.8vw (desktop), 1.8vw (tablet), 3vw (telefone)

Configurações de texto do título

Faça algumas alterações nas configurações do texto do título também.

• Fonte do título: oxigênio
• Peso da fonte do título: negrito
• Tamanho do texto do título: 1vw (desktop), 3vw (tablet), 5vw (telefone)
• Altura da linha de título: 1,5em

Configurações de botão

Continue definindo o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,9vw (desktop), 1,8vw (tablet), 3vw (telefone)
• Cor do texto do botão: # ffc023
• Cor de fundo do botão: # f4f4f4
• Largura da borda do botão: 0 px

• Raio da borda do botão: 0 px
• Fonte do botão: Oxigênio

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

Sombra da caixa

E complete as configurações do módulo adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -21px
• Cor da sombra: rgba (0,0,0,0,08)

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 3

Adicionar redes sociais de escolha

O próximo módulo de que precisamos na coluna 3 é um Módulo de Acompanhamento de Mídia Social. Adicione algumas redes sociais de sua escolha.

Redefinir estilos de rede social individualmente

Continue redefinindo os estilos de item para cada rede social individualmente.

Configurações de ícone

Em seguida, volte às configurações gerais do módulo e altere a cor do ícone.

• Cor do ícone: # ffc023

Adicionar Módulo de Blog à Coluna 1

Elementos

Na coluna 1, o único módulo que estamos adicionando é um Módulo de Blog. Desative o autor nas configurações dos elementos.

• Mostrar Autor: Não

Layout

Em seguida, vá para a guia de design do módulo e altere o layout.

• Layout: Grade

Configurações de texto do título

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

• Fonte do título: oxigênio
• Peso da fonte do título: negrito
• Tamanho do texto do título: 1vw (desktop), 3vw (tablet), 5vw (telefone)
• Altura da linha de título: 1,5em

Configurações do corpo do texto

Faça algumas alterações nas configurações do corpo do texto também.

• Fonte do corpo: Open Sans
• Tamanho do corpo do texto: 0,7vw (desktop), 1,8vw (tablet), 3vw (telefone)
• Altura da linha corporal: 2,2em

Configurações de meta texto

Em seguida, defina o estilo das configurações de metatexto de acordo:

• Meta Fonte: Open Sans
• Meta Cor do Texto: # ffc023
• Tamanho do metatexto: 0.8vw (desktop), 1.8vw (tablet), 3vw (telefone)

Fronteira

Remova a borda padrão do módulo também.

• Largura da borda do layout da grade: 0 px

Sombra da caixa

E use uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 80 px
• Força de propagação da sombra da caixa: -21px
• Cor da sombra: rgba (0,0,0,0,08)

Visibilidade

Agora, queremos que o Módulo de Blog apareça na coluna 1 quando alguém estiver visualizando a postagem no desktop. Em telas menores, no entanto, queremos que o conteúdo da postagem venha primeiro. É por isso que ocultaremos todo o módulo no tablet e no telefone.

Clonar Módulo de Blog e Colocar Duplicado na Coluna 3

Vamos, então, clonar o Módulo Blog e colocar a duplicata na terceira coluna.

Alterar Visibilidade

Queremos que este módulo apareça na coluna 3 apenas em dispositivos menores, é por isso que ocultaremos o módulo inteiro na área de trabalho.

3. Salvar todas as alterações do Theme Builder e o resultado da visualização

Depois de concluir o modelo de postagem do blog (certifique-se de adicionar um Módulo de comentários também!), Você pode salvar todas as alterações do Theme Builder e visualizar o resultado em seu site!

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 adicionar uma barra lateral dupla ao modelo de postagem do seu blog usando o Divi's Theme Builder. Além disso, compartilhamos o arquivo JSON do layout gratuitamente para que você possa mantê-lo por perto caso precise em projetos futuros! Se você tiver alguma dúvida, sinta-se à 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.