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 interessantes em posts de blog. 

Mesmo que a imagem exibida ocupe a tela inteira, existem muitas opções de design para posicionar o título e o texto meta. É fácil fazer isso com o Criador de temas Divi . 

Neste artigo, vamos analisar 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 postagens de blog para sua seção Hero em tela cheia

Você pode criar o modelo de postagem do blog do zero no Divi Theme Builder ou baixar um modelo do blog da Elegant Themes. Para encontrá-los, basta pesquisar no blog. "Modelo de postagem de blog gratuito". 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 gratuito Designer de Moda Cabeçalho e Rodapé .

Baixe ou crie seu modelo de postagem de blog para a seção Hero em tela cheia.

Você pode baixar o modelo de postagem do blog ou criar um do zero. Nós vamos baixar um, mas o processo para criar uma seção Hero 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 Essa é uma boa opção se você quiser exibir todas as informações juntas. Depois de criar seu modelo, selecione o ícone de edição para abri-lo.

O modelo que baixamos tem uma seção com a imagem em destaque. Vamos remover essa seção e adicionar uma 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 estão selecionados por padrão. Deixe-os ativados. Role para baixo até Posicionamento de imagem em destaque e selecione Título Acima.

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

Deslize para baixo até 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

Deslize para baixo até 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, defina o tamanho da fonte para 14px, para a versão mobile para 10px, o espaçamento entre letras para 1px e a altura da linha para 1,6em. Feche as configurações e salve o 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 retorne à aba. 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

Deslize para baixo até Contexto e selecione Gradiente de FundoDefina a cor da esquerda para #fff9f2, a cor da direita para rgba (255,255,255,0), a direção para 90 graus, a posição inicial para 30% e selecione Sim para sobrepor o gradiente à 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 sua informação. É uma boa opção se você quiser exibir todos os elementos em locais diferentes. 

Primeiro, baixe o modelo e exclua a primeira seção. Recriaremos os módulos e suas configurações na coluna da esquerda, mas primeiro vamos analisá-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 role para baixo 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.

Escolha Imagem em destaque nas opções.

Selecione a guia Designe role para baixo até Tamanho. 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 seu conteúdo, selecione Usar conteúdo dinâmico.

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

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

Acesse 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

Deslize para baixo até 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. Fechar 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 Desça até Texto do Título. Selecione H4. Escolha Playfair Display como fonte e defina-a como média, maiúsculas, alinhada à direita para a versão desktop e alinhada à esquerda para a versão mobile. Escolha #7b7975 como 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 14px na versão para desktop, 10px na versão para dispositivos móveis, o espaçamento entre letras para 1px e a altura da linha para 1,6em. Feche as configurações e salve o modelo.

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

Deslize para baixo até 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 .

Escolha 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 aí! Esta é a nossa versão de como adicionar uma seção Hero em tela cheia ao seu modelo de postagem de blog Divi. 

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

Utilizando esses métodos, você pode adicionar uma seção Hero em tela cheia a qualquer modelo de postagem de blog do 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.

...