Como Criar Seções de Heróis Detonantes com Divi

Seções de heróis; eles servem a todos os tipos de propósitos. Eles são a primeira coisa que os visitantes veem quando visitam seu site, eles mostram imediatamente o estilo do seu site e influenciam a maneira como os visitantes se sentem e se comportam em seu site. Já estamos acostumados com todos os tipos de seções de heróis por aí, mas a maioria deles inclui uma imagem de herói, um slogan e uma chamada para ação. No entanto, também existem outras possibilidades. Neste post, mostraremos outra abordagem nas seções de heróis e a seguiremos com um exemplo que você pode recriar usando Divi.

Exemplo

O exemplo que mostraremos a você como recriar com Divi se parece com este no desktop:

E assim no celular:

Como fazer sua seção de herói se destacar

Antes de mostrarmos como recriar o exemplo, vamos dar uma olhada em alguns dos fatores que diferenciam esta seção de herói de outras.

1. Logotipo grande, descritivo e centralizado

A primeira coisa que estamos usando em nosso exemplo, para ajudar a destacar nossa seção de herói, é um formato de cabeçalho centralizado em vez do padrão. Junto com isso, também estamos usando um menu transparente que ajudará a sobrepor os itens do menu com o design da seção do herói. O link entre o logotipo, o menu e o site é mais claro ao usar um fundo transparente, pois há uma divisão a menos na seção do herói.

2. Concentre o conteúdo escrito

Outra coisa que você pode fazer para destacar sua seção de heróis é concentrar o conteúdo escrito que você tem. Dessa forma, você chamará a atenção dos visitantes para um ponto da tela que aumenta a chance de eles lerem. Se você, por outro lado, estiver dividindo o conteúdo escrito em toda a seção do herói, é mais provável que as mudanças percam parte da mensagem que você está tentando transmitir.

3. Destacar propostas de venda exclusivas

Normalmente, uma seção hero contém Módulos de Texto normais que compartilham o slogan de um produto ou empresa. No entanto, você também pode usar os Módulos do Blurb na seção de heróis. Esses Módulos Blurb são perfeitos se você deseja compartilhar as propostas de venda exclusivas de seu produto ou serviço imediatamente. Além disso, você também pode escolher se deseja ou não incluir frases de chamariz imediatamente. Em nosso exemplo, essas frases de chamariz são integradas aos próprios módulos do blurb.

4. Limpe a imagem do produto

Para completar, e para equilibrar o conteúdo escrito que você forneceu, recomendamos o uso de uma imagem de produto limpa como imagem de fundo da seção do herói. Você quer que sua imagem de herói seja o mais qualitativa e autoexplicativa possível, sem assumir o controle de toda a seção de herói.

Como Criar Seções de Heróis Detonantes com Divi

Inscreva-se no nosso canal no Youtube

Recrie o exemplo com Divi

Agora que examinamos o lado teórico, é hora de começarmos a recriá-lo.

Formato de cabeçalho

A primeira coisa que você precisa fazer é escolher 'Centrado' como estilo de cabeçalho acessando o painel do WordPress> Personalizar> Cabeçalho e navegação> Formato de cabeçalho> E escolher 'Centrado' como estilo de cabeçalho '.

Configurações da barra de menu principal

Em seguida, volte para Cabeçalho e navegação> Bardo do menu principal> E faça os seguintes ajustes:

• Altura do menu: 211 px
• Altura máxima do logotipo: 100 px
• Tamanho do texto: 16
• Espaçamento entre letras: 2
• Fonte: Lato Light
• Estilo da fonte: maiúsculas
• Cor do texto: #FFFFFF
• Cor do link ativo: #FFFFFF
• Cor de fundo: rgba (255,255,255,0)
• Cor de fundo do menu suspenso: rgba (255,255,255,0)

Adicionar nova seção

Uma vez feito isso, adicione uma nova página, habilite o Divi Builder, habilite o Visual Builder e adicione uma nova seção padrão.

Fundo Gradiente

Use o seguinte fundo gradiente para esta seção:

• Primeira cor: # e2e2e2
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente: Linear
• Direção do gradiente: 180 graus
• Posição inicial: 40%
• Posição final: 40%

Imagem de fundo

Em seguida, carregue a imagem de fundo e escolha 'Multiplicar' como a mesclagem da imagem de fundo.

Adicionar linha de duas colunas

Cor de fundo

Adicione uma linha de duas colunas à seção que você acabou de criar e use '# b7afa1' como cor de fundo.

Fundo Gradiente da Coluna 1

Role para baixo e use o seguinte fundo gradiente para a primeira coluna:

• Primeira cor: rgba (255,255,255,0,43)
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente da coluna 1: Radial
• Direção do gradiente da coluna 1: canto superior esquerdo
• Posição inicial da coluna 1: 49%
• Posição final da coluna 1: 49%

Fundo Gradiente da Coluna 2

E use o seguinte fundo gradiente para a segunda coluna:

• Primeira cor: rgba (255,255,255,0,43)
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente da coluna 2: Radial
• Direção radial da coluna 2: parte inferior direita
• Posição inicial da coluna 2: 49%
• Posição final da coluna 2: 49%

Dimensionamento

Vá para a guia Design, ative a opção 'Usar largura da medianiz personalizada' e use '1' para a largura da medianiz.

Espaçamento

Abra a subcategoria Spacing e use o seguinte preenchimento e margem:

• Preenchimento superior: 0 px (desktop), 20 px (tablet e telefone)
• Preenchimento direito: 25px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 25px
• Margem inferior: 200px

Primeiro Módulo Blurb

Habilitar ícone

Adicione um Módulo Blurb à primeira coluna da linha, habilite a opção 'Usar ícone' e escolha um ícone.

Configurações de ícone

Em seguida, vá para as configurações de Design e faça as seguintes alterações na subcategoria Imagem e Ícone:

• Cor do ícone: #FFFFFF
• Posicionamento de imagem / ícone: esquerda
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 40px

Configurações de texto do cabeçalho

Em seguida, faça com que as seguintes configurações se apliquem à subcategoria Texto do cabeçalho:

• Fonte do cabeçalho: Roboto Light
• Estilo da fonte: negrito
• Tamanho da fonte do cabeçalho: 25px
• Cor do texto do cabeçalho: #FFFFFF
• Altura da linha de cabeçalho: 1,5em

Configurações do corpo do texto

A subcategoria do corpo do texto precisará das seguintes alterações:

• Fonte do corpo: Lato Light
• Tamanho da fonte do corpo: 13px
• Cor do corpo do texto: #FFFFFF

Dimensionamento

Em seguida, use '300px' como a largura do conteúdo.

Espaçamento

Por último, use a seguinte margem e preenchimento para o Módulo Blurb:

• Margem superior: -50px (desktop), 0px (tablet e telefone)
• Enchimento superior: 100px
• Preenchimento direito: 10 px
• Padding Bototm: 30px
• Preenchimento esquerdo: 10 px

Clone o módulo do Blurb e coloque na segunda coluna

Continue clonando o Módulo Blurb criado anteriormente e colocando-o na outra coluna também.

Mudar a cor do fundo

A primeira coisa que você terá que alterar neste Módulo Blurb clonado é a cor de fundo. Mude para 'rgba (89,60,31,0.5)'.

Alterar ícone

A próxima e última coisa que você precisará alterar é o ícone na guia de conteúdo.

Extra: Adicionar nova opção de sombra de caixa do Divi à linha

Com a atualização recente, agora você também pode adicionar sombras de caixa a linhas, módulos e seções. Para este exemplo, vamos adicionar alguma sombra de caixa à linha. Isso ajudará a criar alguma profundidade e enfatizar o conteúdo escrito em nossa seção de heróis.

• Posição horizontal da sombra da caixa: -3px
• Posição vertical da sombra da caixa: 31 px
• Força do desfoque de sombra da caixa: 79 px
• Força de propagação da sombra da caixa: -4px
• Cor da sombra: # 424242
• Posição da sombra da caixa: sombra externa

Resultado

Vamos dar outro resultado rápido no resultado que você deve ser capaz de obter no desktop depois de seguir esta postagem:

E no celular:

Pensamentos finais

Nesta postagem, mostramos uma abordagem diferente nas seções de heróis. Demos a você algumas dicas e elaboramos essas dicas mostrando como recriar um exemplo que fizemos com antecedência com Divi. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Ellagrin / shutterstock.com