O Divi Header Module está pronto para ser usado para criar designs de cabeçalho exclusivos com apenas alguns ajustes. Isso o torna um módulo extremamente popular ao projetar cabeçalhos para o seu site da Web com Divi. E com um pouco de reflexão, você pode criar designs verdadeiramente exclusivos usando as configurações integradas (não o CSS personalizado). Portanto, para aqueles que desejam explorar novos designs de cabeçalho, mostrarei 3 estilos de módulos de cabeçalho Divi que podem inspirá-lo.

Visão geral dos 3 estilos de módulos de cabeçalho Divi

Estilo # 1: O gradiente abstrato

Estilo gradiente abstrato

Estilo # 2: A ameaça tripla

ameaça tripla divi en tete.png

Estilo # 3: o quadro arredondado

moldura arredondada divi.png

O que você precisa para começar

Para começar, você precisará do Tema Divi. Usarei o Divi Builder para criar os desenhos no frontend (área pública). Você também precisará de algumas imagens para concluir o tutorial. Não se esqueça que você ainda pode importar imagens de um layout predefinido. Na verdade, para este tutorial, usarei imagens do Pacote de apresentação da empresa de limpeza, Pacote de apresentação do Business Coach e Pacote de apresentação da Web Freelancer.

Estilo # 1: o gadget abstrato

Estilo abstrato de gadget

Este primeiro design de módulo de cabeçalho Divi é um design simples e versátil que usa fundos gradientes de maneiras criativas.

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

Na divisão principal em tela cheia

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

In head divi, exemplo 1

Atualize os parâmetros de design da seguinte maneira:

Polícia de Titulo: Lato
Tamanho do texto do título: 6vw
Cor do plano de fundo do botão um: #0c71c3
Botão de uma largura de borda: 0px
Estofamento personalizado: 8vw na parte superior, 8vw na parte inferior

Personalização de fonte no primeiro exemplo 1 divi

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

Cor de fundo: rgba (255,255,255,0)
Gradiente de fundo esquerdo Cor: #0096eb
Gradiente de fundo direito Cor: rgba (255,255,255,0)
Tipo de gradiente:
Direção radial radial: canto inferior direito
Posição inicial: 25%
Posição final: 0%

Configuração do gradiente na cabeça 1 divi

Salve as configurações

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

Gradiente de fundo esquerdo Cor: #0096eb
Gradiente de fundo direito Cor: #007ea1
Tipo de gradiente: Radial
Direção radial: esquerda superior
Posição inicial: 43%
Posição final: 0%

Dica criativa: se você está procurando cores para experimentar seu próprio sombreamento de cabeçalho, sugiro que você remova as cores usadas na imagem / gráfico do cabeçalho que possa estar usando.

Resultado final com gradiente divi

Para adicionar outro elemento de design sutil ao nosso 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 do divisor superior: veja a captura de tela
Cor do separador superior: rgba (150,210,210,0.2)
Altura do separador
superior: 8vw Repetição do topo da divisória horizontal: 0,7x
Vire do topo do divisor: vertical

Estilo do divisor inferior: veja a captura de tela
Cor do separador inferior: rgba (150,210,210,0.2)
Altura do separador
inferior: 10vw Divisor inferior repetido horizontalmente: 0,5x Vire a partir do divisor inferior
: vertical

Adicione divisores na cabeçaIsso é tudo! Confira o design final.

Exemplo de design final 1 divi

Estilo # 2: A ameaça tripla

Divi do cabeçalho 2

Este estilo de módulo de cabeçalho divi apresenta três chamadas à ação, incluindo os dois botões e o ícone de rolagem para baixo. A correspondência de ícones de botão com o ícone de rolagem melhora a aparência simétrica do desenho. E as divisórias de seção criam um belo padrão triangular abstrato que orienta os usuários até o final da página.

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

Atualize o texto do título, o texto do link do botão 1 e o texto do link do botão 2.

Instalação na cabeça 2 diviAtualize o restante do design da seguinte maneira:

Cor de fundo: #1a1844
Orientação de texto e logotipo: Centro
Ícone: veja a imagem
Role para baixo o ícone Tamanho: 20px
Polícia de Titulo: Lato
Título Peso da fonte: pesado
Tamanho do texto do título: 5vw (desktop), 40px (tablet), 30px (smartphone)
Linha de título Altura do fundo: 1.3em
Cor de fundo do botão 2: #fe4943
Largura do botão 2: 0px
Ícone do botão 2: seta para a direita (veja a imagem)
Cor de fundo do botão 1: #fe4943
Largura do botão 1 para a borda: 0px
Botão 1: seta para a esquerda (veja a imagem)
Botões 1 Localização: Esquerda
Preenchimento personalizado: 10vw na parte superior, 10vw na esquerda

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

Estilo de
separador
topo: veja a captura de tela Cor do divisor superior: rgba (255,255,255,0.3) Altura do divisor superior: 45vw

Estilo de
separador
topo: veja a captura de tela Cor do divisor superior: rgba (255,255,255,0.1) Altura do divisor superior: 45vw

Adicione um separador divi, exemplo 2

Agora vamos ver o design final:

Exemplo de visualização de design completo 2

Estilo # 3: o quadro arredondado

Exemplo 3 na divisão principal

Este design de módulo de cabeçalho divi arredondado é uma ótima maneira de enquadrar sua imagem de plano de fundo e o conteúdo do cabeçalho para chamar mais atenção para sua frase de chamariz. Basta alguns ajustes para o raio da borda do cabeçalho, alguma caixa de sombra e espaçamento personalizado.

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

Vamos começar atualizando os elementos de conteúdo do cabeçalho adicionando o título, o texto do link do botão nº 1 e uma imagem de logotipo.

Projeto da cabeça 2 divi

Em seguida, adicione uma imagem de fundo grande o suficiente para cobrir a altura e a largura do cabeçalho. Como este é um cabeçalho arredondado, tente usar uma imagem com a mesma altura e largura (como 1000px por 1000px).

Atualize o restante dos parâmetros de design da seguinte maneira:

Objetivo para alcançar divi

Salve as 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 na parte superior, 5vw na parte inferior

divi do módulo de cabeçalho

Agora, verifique o design final.

Verifique o cabeçalho de design final 3

Isso é tudo para este tutorial sobre como projetar 3 cabeçalhos exclusivos com Divi. Se você tiver alguma dúvida, sinta-se à vontade para perguntar na seção de comentários.