Cabeçalho DIVI 5 Estilos de módulos criativos

Fora da caixa, o 5 Estilos de módulos de cabeçalho DIVI pode criar designs impressionantes de cabeçalhos com apenas alguns ajustes. Isso faz dele um módulo extremamente popular ao projetar cabeçalhos para o seu site em Divi. E com um pouco de criatividade, você pode criar designs realmente únicos usando apenas as configurações internas (sem CSS personalizado). Então, para aqueles de vocês que querem explorar novos designs de cabeçalhos, vou mostrar 5 estilos de módulos de cabeçalho Divi que podem inspirá-lo.Apreciar!

SNEAK PEEK DOS 5 ESTILOS DO MÓDULO DE CABEÇALHO DIVI

ESTILO # 1: O GRADIENTE ABSTRATO

módulo de cabeçalho divi

Comece a projetar o estilo # 1

ESTILO # 2: A AMEAÇA TRIPLA

módulo de cabeçalho divi
Comece a projetar o estilo # 2

ESTILO # 3: O QUADRO ARREDONDADO

módulo de cabeçalho divi
Comece a projetar o estilo # 3

ESTILO # 4: THE BLENDED LEFTY

módulo de cabeçalho divi
Comece a projetar o estilo # 4

ESTILO # 5: O TIPO DE GRANDE ESCALA

módulo de cabeçalho divi
Comece a projetar o estilo # 5

O QUE VOCÊ PRECISA PARA COMEÇAR

Para começar, você precisará do Tema Divi. Eu estarei usando o Divi Builder para construir os designs no front end. Você também precisará de algumas imagens para concluir o tutorial. Lembre-se de que você sempre pode importar as imagens de um layout pré-fabricado. Na verdade, para este tutorial, usarei imagens do Pacote de Layout da Empresa de Limpeza , do Pacote de Layout do Coach de Negócios e do Pacote de Layout do Freelancer da Web .

Vamos começar!

ESTILO # 1: O GADIENT ABSTRATO

módulo de cabeçalho divi

Este primeiro design de módulo de cabeçalho Divi é um design simples e multifuncional que usa fundos gradientes de maneira criativa.

Para começar, adicione uma nova seção de largura total com um módulo de cabeçalho de largura total.

módulo de cabeçalho divi

Atualize o conteúdo das configurações do cabeçalho com um novo título e uma imagem de cabeçalho.

módulo de cabeçalho divi

Em seguida, atualize as configurações de design da seguinte maneira:

Título Fonte: Lato
Título Tamanho do texto: 6vw
Botão Um Plano de fundo Cor: # 0c71c3
Botão Uma largura de borda: 0px
Preenchimento personalizado: 8vw superior, 8vw inferior

módulo de cabeçalho divi

Antes de adicionarmos o plano de fundo da nossa seção, primeiro devemos tornar o fundo do módulo de cabeçalho transparente e fornecer um gradiente personalizado para criar a forma de círculo no canto inferior direito. Volte para a guia de conteúdo e atualize o plano de fundo da seguinte maneira:

Cor de fundo: rgba (255,255,255,0)
Fundo Gradiente Esquerda Cor: # 0096eb
Fundo Gradiente Direita Cor: rgba (255,255,255,0)
Tipo de Gradiente:
Radial Direção Radial: Inferior Direita
Posição Inicial: 25%
Posição Final: 0%

módulo de cabeçalho divi

Salvar configurações

Em seguida, precisamos adicionar nossos designs de plano de fundo à seção que ficará atrás do nosso módulo de cabeçalho. Para fazer isso, abra as configurações da seção e atualize o seguinte:

Fundo Gradiente Esquerda Cor: # 0096eb
Fundo Gradiente Direita Cor: # 007ea1
Tipo de Gradiente:
Radial Direção Radial: Superior Esquerda
Posição Inicial: 43%
Posição Final: 0%

Dica de Design: Se você está procurando algumas cores para experimentar seus próprios gradientes de cabeçalho, sugiro puxar as cores usadas na imagem / gráfico de cabeçalho que você pode estar usando.

módulo de cabeçalho divi

Para adicionar outro elemento de design sutil ao nosso plano de fundo abstrato, podemos adicionar um divisor de seção superior e inferior. Para fazer isso, vá para a guia design e adicione os seguintes divisores:

Estilo Top Divider: veja a imagem
Top Divider Color: rgba (150,210,210,0.2)
Altura Divider superior: 8vw
Top Divider Repetição Horizontal: 0.7x
Top Divider Flip: Vertical

Estilo do Divisor de Fundo: veja a tela
Divisor de Fundo Cor: rgba (150,210,210,0,2)
Altura do Divisor de Fundo: 10vw
Divisor de Fundo Repetição Horizontal: 0,5x
Divisor de Fundo Virada: Vertical

módulo de cabeçalho divi

É isso aí! Confira o design final.

módulo de cabeçalho divi

módulo de cabeçalho divi

ESTILO # 2: A AMEAÇA TRIPLA

módulo de cabeçalho divi

Este estilo de módulo de cabeçalho do próximo divi inclui três chamadas à ação, incluindo os dois botões e o ícone de rolagem para baixo. A correspondência dos ícones de botão com o ícone de rolagem ajuda o aspecto simétrico do design. E os divisores de seção criam um belo design triangular abstrato que conduz os usuários pela página.

Crie uma nova seção de largura total com um cabeçalho de largura total.

Em seguida, atualize o texto para o título, o texto do link do botão nº 1 e o texto do link do botão nº.

módulo de cabeçalho divi

Em seguida, atualize o restante do design da seguinte maneira:

Cor do plano de fundo: # 1a1844
Texto e Logo Orientação: Center
Ícone: ver captura de tela
Scroll Down Icon Tamanho: 20px
Title Fonte: Lato
Title Fonte Peso: Heavy
Title Tamanho do texto: 5vw (desktop), 40px (tablet), 30px (smartphone)
Title Line Altura: 1.3em
Botão Dois Cor do plano de fundo: # fe4943
Botão Largura das duas bordas : 0px
Botão Dois Ícone: seta para a direita (veja a tela)
Botão Uma cor de fundo: # fe4943
Botão Uma largura Largura: 0px
Botão Um ícone: seta para a esquerda (veja imagem)
Colocação de um ícone de botão: Left
Custom Padding: 10vw top, 10vw left

módulo de cabeçalho divi

Agora, tudo o que precisamos fazer é adicionar nossos divisores de seção para criar o design de plano de fundo triangular. Abra as configurações da seção e atualize as seguintes configurações de design:

Top Divider Style: veja a imagem
Top Divider Color: rgba (255,255,255,0.3)
Altura Divider superior: 45vw

Top Divider Style: veja a imagem
Top Divider Color: rgba (255,255,255,0.1)
Altura Divider superior: 45vw

módulo de cabeçalho divi

Agora vamos conferir o design final:

módulo de cabeçalho divi

DICA DE DESIGN DE BÔNUS: AJUSTES MÓVEIS PARA BOTÕES

Eu sei que não disse CSS personalizado, mas este é um floreio extra não essencial que eu achei que alguns de vocês gostariam. Você pode notar que para cabeçalhos com dois botões, o segundo botão tem uma margem esquerda que gera o design em smartphones. Para um design mais limpo em smartphones, você pode adicionar um snippet de CSS personalizado às configurações de sua página para tornar os botões da mesma largura e sem a segunda margem do botão.

Abra as configurações da página no Divi Builder e adicione o seguinte CSS

@media (max-width550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  displayblock;
  width100%;
margin-left0px;   
  }
}

Agora olhe para o design no celular.

módulo de cabeçalho divi

ESTILO # 3: O QUADRO ARREDONDADO

módulo de cabeçalho divi

Esse design de módulo de cabeçalho divi arredondado é uma ótima maneira de enquadrar sua imagem de plano de fundo e seu conteúdo de cabeçalho para dar ainda mais foco à sua chamada à ação. Só é preciso fazer alguns ajustes no raio da borda do seu cabeçalho, uma sombra de caixa e algum espaçamento personalizado.

Para começar, crie uma nova seção de largura total com um cabeçalho de largura total.

Primeiro, vamos atualizar os elementos de conteúdo para o cabeçalho, adicionando o título, o texto do link do botão nº 1 e uma imagem do logotipo.

módulo de cabeçalho divi

Em seguida, adicione uma imagem de plano de fundo que seja grande o suficiente para abranger a altura e a largura do cabeçalho. Como esse será um cabeçalho arredondado, tente usar uma imagem com a mesma altura e largura (como 1000 px por 1000 px).

Em seguida, atualize o restante das configurações de design da seguinte maneira:

módulo de cabeçalho divi

Salvar configurações.

Em seguida, abra as configurações da seção para adicionar a cor e o espaçamento do plano de fundo da seguinte maneira:

Cor de fundo: # 000000
Preenchimento personalizado: 5vw top, 5vw bottom

módulo de cabeçalho divi

Agora confira o design final.

módulo de cabeçalho divi

módulo de cabeçalho divi

módulo de cabeçalho divi

THE BLENDED LEFTY

módulo de cabeçalho divi

Esse design de cabeçalho tem alguns recursos exclusivos de design. O módulo de cabeçalho é realmente redimensionado e alinhado à esquerda para expor a metade direita da imagem de fundo da seção. E o conteúdo do módulo de cabeçalho tem um efeito de mesclagem que expõe a imagem de plano de fundo pelo conteúdo. Para fazer isso, você precisará do tipo certo de imagem de fundo para a sua seção. Geralmente, você desejará que a imagem tenha elementos mais escuros para que o conteúdo mesclado seja mais visível.

Vamos começar.

Primeiro, crie uma nova seção de largura total com um cabeçalho de largura total.

Antes de começarmos a atualizar nossos estilos de cabeçalho, salte para as configurações da seção primeiro e adicione o seguinte plano de fundo:

Adicione uma imagem de fundo com o ponto focal da imagem à direita.

Fundo Gradiente Esquerda Cor: rgba (0,0,0,0.54)
Fundo Gradiente Direita Cor: rgba (255,255,255,0)
Gradient Direção: 90deg
Radial Direção: Bottom Right
Start Posição: 50%
Posição final: 0%
Place Gradient Above Background Image : SIM

O objetivo do gradiente é tornar o lado esquerdo da imagem mais escuro, de modo que, quando misturarmos o conteúdo do módulo de cabeçalho, ele fique mais legível. Além disso, você não poderá ver o segundo plano da seção agora porque a cor de segundo plano do cabeçalho padrão ainda está ativa. Nós vamos mudar isso a seguir.

módulo de cabeçalho divi

Abra as configurações do cabeçalho e atualize o conteúdo com um título, um texto de link do botão nº 1 e um logotipo escuro.

módulo de cabeçalho divi

Agora mude a cor de fundo para branco.

Em seguida, atualize o seguinte:

Título Fonte Peso: Ultra Negrito
Título Texto Cor: # 000000
Título texto Tamanho: 8vw
Título Altura da linha: 1.1em
Botão Tamanho do texto Tamanho: 2.7vw
Botão Um Cor do texto: # 000000
Botão Uma largura Largura: 0.2em
Botão Uma borda Cor: # edf000
Fonte Peso: Ultra Bold
Largura: 50% (desktop, tablet e smartphone)
Blend Mode: Screen

módulo de cabeçalho divi

Aqui está o desenho final.

módulo de cabeçalho divi

módulo de cabeçalho divi

ESTILO # 5: O TIPO DE GRANDE ESCALA

módulo de cabeçalho divi

Este design de módulo de cabeçalho Divi apresenta uma maneira simples e eficaz de criar texto grande que escala com a janela do navegador sem comprometer o design. Como estamos usando um módulo de cabeçalho de largura total, precisaremos expandir um pouco nossa área de conteúdo. Então precisamos usar a unidade de comprimento vw para dimensionar nosso texto. Este design seria ótimo para cabeçalhos de seção.

Para começar, crie uma nova seção de largura total com um cabeçalho de largura total.

Nas configurações de cabeçalho de largura total, atualize o seguinte:

Título:
Texto de subtítulo de consulta :
Botão de serviços nº 1 Texto de link: iniciar agora

Exclua o texto padrão na caixa de conteúdo.

Em seguida, adicione uma imagem do logotipo de luz.

módulo de cabeçalho divi

Em seguida, vamos aumentar a largura máxima do nosso contêiner de cabeçalho para criar mais espaço horizontal para o seu cabeçalho. Para fazer isso, vá para a aba avançada e adicione o seguinte CSS no container Header:

width100% ;
max-width100% ;

módulo de cabeçalho divi

Agora atualize o restante das configurações de design da seguinte maneira:

Adicione uma imagem de fundo.
Texto e Logo Orientação: Centro
Título Fonte: Cuprum
Título Fonte Peso: Negrito
Título Estilo da Fonte: TT
Texto do Título Cor: #bfbfbf
Texto do Título Tamanho: 10vw
Título da Letra Espaçamento: 0.1em
Subhead Fonte: Cuprum
Subhead Text Alinhamento: Direito (este centro de ajuda o texto com espaçamento entre letras)
Subhead Text Size: 3vw
Subhead Letter Espaçamento: 7.8vw
Botão One Border Largura: 0px
Button One Font: Cuprum
Botão One Icon: see screenshot

O truque é usar a unidade de comprimento vw para o texto. Em seguida, ajuste o espaçamento entre letras do sub-cabeçalho para alinhar com o texto do título da melhor maneira possível.

módulo de cabeçalho divi

Para maximizar nosso espaçamento horizontal, precisamos adicionar uma largura personalizada ao nosso conteúdo de cabeçalho da seguinte maneira:

Largura do Conteúdo: 80%;

Mesmo que isso seja menor do que o padrão de 100%, alterando a configuração irá substituir o padrão e ajustar com o css personalizado que adicionamos anteriormente.

Finalmente, adicione uma sombra de caixa para concluir o design:

Box Shadow: ver captura de tela
Box Shadow Blur Força: 0px
Box Shadow Spread Força: 60px

módulo de cabeçalho divi

Agora confira o resultado final.

módulo de cabeçalho divi

módulo de cabeçalho divi

TRANSFORME-OS EM CABEÇALHOS DE TELA CHEIA!

Os designs acima podem ser facilmente feitos em tela cheia com o clique de um botão. Este é um recurso poderoso do módulo de cabeçalho fullwidth. Basta ir para as configurações de design do cabeçalho e selecionar a opção “Criar tela cheia”.

módulo de cabeçalho divi

Além disso, você precisará remover o preenchimento personalizado desses designs para que o cabeçalho se encaixe perfeitamente na janela do navegador.

PENSAMENTOS FINAIS

Estas são apenas algumas das possibilidades de design de cabeçalho disponíveis com o Divi Header Module. E experimentar todas as configurações de design pode ser muito divertido. Se qualquer coisa, espero que estes exemplos sirvam de inspiração para o seu próximo projeto.

Estou ansioso para ouvir de você nos comentários abaixo.

Felicidades!

>