Divi: Como adicionar uma seção Hero a uma postagem de blog

Você gostaria de melhorar as postagens do seu blog? Divi adicionando uma seção Hero a ele?

As seções Hero em tela cheia ficam ótimas em qualquer página da Web, mas são especialmente ótimas em postagens de blog. 

Mesmo que a imagem em destaque esteja em tela cheia, há muitas opções de design para colocar o título e o metatexto. É fácil fazer com o Criador de temas Divi . 

Neste artigo, veremos várias maneiras de adicionar uma seção Hero em tela cheia ao seu modelo de postagem de blog. Divi.

Vamos começar.

Visão geral

Aqui está uma prévia do que projetaremos neste tutorial.

Leia também: Divi: Como usar o "Gradient Builder" para embelezar suas imagens

Seção de herói com módulo de versão para desktop de título de postagem

Seção Hero com o módulo de versão móvel Post Title

Layout alternativo da seção Hero com o módulo de versão desktop Post Title

Baixe o DIVI agora!!!

Layout alternativo da seção Hero com o módulo Mobile Post Title

Seção de herói com metadados Versão para desktop

Seção Hero com versão móvel de metadados

Baixe o DIVI agora!!!

Modelos de postagem de blog para sua seção de herói em tela cheia

Você pode criar o modelo de postagens de blog em Divi Theme Builder do zero ou baixe um modelo do blog Elegant Themes. Para encontrá-los, pesquise no blog “modelo de postagem de blog grátis”. Se você baixar um modelo, certifique-se de descompactá-lo.

Para nossos exemplos, usaremos o  Modelo de postagem de blog grátis para o pacote de layout de designer de moda da Divi . Também usamos o pacote de layout livre Designer de Moda Cabeçalho e Rodapé .

Faça o download ou crie seu modelo de postagem de blog para a seção Herói em tela cheia

Você pode baixar o modelo de postagem do blog ou criar um do zero. Enviaremos um, mas o processo para criar uma seção de Herói em tela cheia é o mesmo.

Veja também: Divi: como usar máscaras e padrões de fundo para uma seção de herói

Método 1: Módulo de título de postagem em tela cheia

Este método usará o Módulo PostTitle . É uma boa escolha se você deseja exibir todas as informações juntas. Depois de ter seu modelo, selecione o ícone de edição para abri-lo.

O modelo que carregamos tem uma seção com a imagem em destaque. Vamos remover esta seção e adicionar um Seção de largura total em seu lugar.

selecionar Título da postagem de largura total na lista de módulos de largura total.

Todos os itens são selecionados por padrão. Deixe-os ativados. Role para Posicionamento de imagem em destaque e selecione Título Acima.

• Posicionamento da imagem em destaque: acima do título

Role para Cor de fundo e defina a cor como #fff9f2

• Plano de fundo: #fff9f2

Texto do título

Selecione a guia Projeto. Para o texto do título, mantenha H1 e escolha Playfair Display. Defina como Justificado à Esquerda e escolha #34332e para a cor.

• Título:
  • Nível de título: H1
  • Fonte: Exibição Playfair
  • Alinhamento do texto: justificado à esquerda
  • Cor do texto: #34332e

Para Tamanho do texto , defina a versão para desktop como 65px, a versão móvel para 42px e a altura da linha para 1,2em.

• Tamanho do texto do título (desktop): 65px (desktop), 42px (telefone)
• Altura da linha de título: 1,2 cm

Metatexto

Role para Meta Texto. Selecione Montserrat para a fonte e defina-a como média, maiúscula, alinhamento à direita para a versão desktop e alinhamento à esquerda para a versão móvel. Escolha #7b7975 para a cor.

• MetaFonte:
  • Fonte: Montserrat
  • Peso: Médio
  • Estilo: TT
• Metatexto:
  • Alinhamento: direita (desktop), esquerda (telefone)
  • Cor: #7b7975

Defina a tamanho da fonte para a versão desktop em 14 px, para a versão mobile em 10 px, o espaçamento entre letras em 1 px e a altura da linha em 1,6 em. Feche suas configurações e salve seu modelo.

• Metatexto:
  • Tamanho (desktop): 14px
  • Tamanho (Telefone): 10px
• Espaçamento entre letras: 1px
• Altura da linha: 1,6 cm

Título na imagem de fundo

Se você decidir que deseja que o título apareça na imagem selecionada, use as mesmas configurações de design e volte para a guia Conteúdo. 

selecionar Título/Metaimagem de plano de fundo  para Posicionamento de imagem em destaque.

• Posicionamento da imagem em destaque: título/metaimagem de plano de fundo

Role para BACKGROUND e selecione Gradiente de Fundo. Defina a cor esquerda como #fff9f2, cor direita como rgba(255,255,255,0), direção como 90 graus, posição inicial como 30% e escolha sim para colocar o gradiente acima da imagem de fundo. Feche e salve suas configurações.

• Paradas de gradiente:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• Direção do gradiente: 90 graus
• Gradiente quadrado acima da imagem de fundo: SIM

Método 2: seção Hero em tela cheia com metadados

Este método usará módulos de texto com conteúdo dinâmico para informação. Esta é uma boa opção se você deseja exibir todos os itens em lugares diferentes. 

Primeiro, baixe o modelo e exclua a primeira seção. Iremos recriar os módulos e suas configurações na coluna da esquerda, mas iremos percorrê-los para que você possa configurá-los.

Configurações da seção Hero em tela cheia com metadados

Abra as configurações do seção e vá até Imagem de fundo. Selecione Gradiente de Fundo e altere as configurações da seguinte forma:

• Paradas de gradiente:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• Direção do gradiente: 90 graus
• Gradiente quadrado acima da imagem de fundo: SIM

selecionar Imagem de fundo e escolha a opção Usar conteúdo dinâmico.

Escolher Imagem em destaque nas opções.

Selecione a guia Designe vá até Dimensionamento. Adicione 100vh à altura mínima. Feche as configurações da seção.

• Altura mínima: 100vh

Configurações da seção Hero em tela cheia com metadados

Em seguida, adicione uma linha de coluna dupla à seção.

Adicione um módulo de texto na coluna certa.

Para o seu conteúdo, selecione Usar conteúdo dinâmico.

Escolher Postagem / Título do Arquivo na lista de opções.

• Conteúdo dinâmico: título da postagem/arquivo

Ir para a aba Design.

• Cabeçalho:
  • Texto: H1
  • Fonte: Exibição Playfair
  • Alinhamento do texto: justificado à esquerda
  • Cor do texto: #34332e

Para o tamanho de textos , definido para versão de desktop para 65px, para versão móvel para 42px e altura da linha para 1,2em.

• Cabeçalho:
  • Tamanho do texto: 65px(Desktop), 42px(Telefone)
  • Altura da linha: 1,2 cm

Role para Espaçamento e digite 50% para preenchimento superior. Feche as configurações.

• Preenchimento: 50% (superior)

Você também pode ler este artigo sobre: Como criar uma seção de herói com o módulo de cabeçalho de largura total do Divi

Seção de herói com categoria de metadados

Adicionar uma nova seção regular na seção Herói.

Abra suas configurações e defina o couleur plano de fundo em #fff9f2. Feche as configurações.

• Cor de fundo: #fff9f2

Em seguida, adicione um linha de 4 colunas para a nova seção.

Herói de tela cheia com texto de categoria de metadados

Adicione um módulo de texto na coluna da esquerda.

Abra as configurações do módulo e selecione Usar conteúdo dinâmico para o corpo do texto.

selecionar Categorias anteriores na lista.

• Conteúdo dinâmico: categorias de postagem

Selecione a guia Design e role para baixo até Texto do título. Selecione H4. Escolha Playfair Display para a fonte e defina-a como média, maiúscula, alinhamento à direita para a versão desktop e alinhamento à esquerda para a versão para telefone. Escolha #7b7975 para a cor.

• Cabeçalho:
  • Exibição de texto
  • Fonte: Exibição Playfair
  • Peso da fonte: médio
  • Estilo: TT
  • Alinhamento de Texto: Centro
  • Cor do texto: #7b7975

Defina o tamanho da fonte para a versão desktop para 14 px, para a versão móvel para 10 px, espaçamento entre letras para 1 px e altura da linha para 1,6 em. Feche suas configurações e salve seu modelo.

• Título 4:
  • Tamanho (desktop): 14px
  • Tamanho (Telefone): 10px
  • Espaçamento entre letras: 1px
  • Altura da linha: 1,6 cm

Role para Espaçamento e adicione 0px à margem inferior. Feche as configurações.

• Margem (Inferior): 0px

Seção Fullscreen Hero com metadados Meta Text

Em seguida, copie o módulo Categoria e arraste-o para a próxima coluna. Cada um dos módulos Meta tem as mesmas configurações. Mostraremos como criar o primeiro módulo e depois copiá-lo duas vezes para criar os outros módulos.

Auteur

Abra as configurações e exclua o conteúdo dinâmico.

Clique Usar conteúdo dinâmico e escolher Post Autor.

• Conteúdo dinâmico: autor da postagem

na aba Design, Altere as seguintes configurações. 

• Título 4:
• Fonte: Montserrat
• Peso da fonte: médio
• Estilo: TT
• Alinhamento de Texto (Desktop): Centro
• Alinhamento de Texto (Telefone): Esquerda
• Cor: #7b7975

Os parâmetros de tamanho da fonte incluir:

• Tamanho do texto: 14px (desktop), 10px (telefone)
• Espaçamento entre letras: 1px
• Altura da linha: 1,6 cm

La margem inferior deve ter 0px.

• Margem (Inferior): 0px

Data

cópia o módulo Autor e arraste-o para a próxima coluna.

Delete isso conteúdo dinâmico atual, escolha Usar conteúdo dinâmico e selecione Data de publicação da postagem. Feche as configurações.

• Conteúdo Dinâmico: Data de Pós-Publicação

Comentários

Enfin, copiar o módulo Post Publish Date e arraste-o para a última coluna.

Assim como em outros módulos, remova o conteúdo dinâmico e selecione Usar conteúdo dinâmico .

Escolher Contagem de comentários de postagem das suas escolhas.

• Conteúdo dinâmico: contagem de comentários de postagem

Desta vez adicione um espaço e a palavra Comentários no campo Depois de . Feche o pequeno modal e feche as configurações. Salve seu trabalho.

• Depois: Comentários

Leia também: Divi: Como exibir o módulo Fullwidth Header em tela cheia

Résultats

Seção de herói com módulo de versão para desktop de título de postagem

Seção Hero com o módulo de versão móvel Post Title

Layout alternativo da seção Hero com o módulo de versão desktop Post Title

Layout alternativo da seção Hero com o módulo Mobile Post Title

Seção de herói com metadados Versão para desktop

Seção Hero com metadados da versão móvel

Baixe o DIVI agora!!!

Conclusão

É isso é tudo! Esta é a nossa visão sobre como adicionar uma seção Hero em tela cheia ao seu modelo de postagem de blog. Divi. 

Módulos Divi e o Theme Builder oferecem várias opções para criar seções Hero em tela inteira. Todos os métodos funcionam muito bem e todos têm suas vantagens. 

Usando esses métodos, você pode adicionar uma seção Hero em tela cheia a qualquer modelo de postagem de blog Divi.

Esperamos que este tutorial o inspire para seus próximos projetos Divi. Se você tiver alguma dúvida ou sugestão, encontre-nos em a seção de comentários para discutir isso.

Você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet.

Não hesite em consultar também o nosso guia sobre o Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...