Como animar seu cabeçalho global com Divi

Seu cabeçalho é uma das partes mais importantes do seu site. Ele conecta suas páginas, posts e apelos à ação. É também uma das coisas que seus visitantes procuram automaticamente, para que não percam tempo encontrando o que procuram. Se você está procurando uma maneira de enfatizar o seu cabeçalho, vai gostar desta postagem. Mostraremos como animar seu cabeçalho global personalizado usando o Divi's Theme Builder. As possibilidades são infinitas, mas mostraremos dois exemplos de animação com os quais você pode começar imediatamente. Você também poderá baixar os arquivos JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida nos dois exemplos em diferentes tamanhos de tela.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Baixe o Animated Global Header GRATUITAMENTE

Para colocar as mãos no cabeçalho global animado gratuito, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Inscreva-se no nosso canal no Youtube

1. Vá para Divi Theme Builder e comece a construir o cabeçalho global

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder no back-end do WordPress.

Construir cabeçalho global do zero

Clique em 'Adicionar Cabeçalho Global' e continue selecionando 'Criar Cabeçalho Global'.

2. Construir Projeto de Bloco de Cabeçalho Global

Configurações da seção

Espaçamento

Uma vez dentro do editor de template, você pode começar a construir o cabeçalho global. Estamos nos certificando de que temos um design de 'bloco' em andamento para que possamos, mais tarde, adicionar animações a dois contêineres diferentes; coluna + módulo. Abra a seção que você pode observar dentro do editor de modelos e remova todos os preenchimentos padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

Adicione uma sombra de caixa a seguir.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (13,60,216,0,24)

Índice Z

E certifique-se de aumentar o índice z da seção na guia avançada também. Isso garantirá que o conteúdo do cabeçalho global apareça no topo de todo o conteúdo da página / postagem.

• Índice Z: 99999

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Visibilidade

Certifique-se de definir os transbordamentos da linha como 'visíveis' também.

• Excesso horizontal: visível
• Estouro vertical: visível

Configurações de coluna (todos os três)

Cor de fundo

Depois de concluir as configurações de linha, você também precisará estilizar as colunas. Abra cada uma das colunas e altere a cor de fundo de acordo:

• Cor de fundo da coluna 1: #efefef
• Cor de fundo da coluna 2: # ffcb0f
• Cor de fundo da coluna 3: # 2848ff

Espaçamento

Adicione também algum preenchimento personalizado superior e inferior a cada coluna.

• Preenchimento superior: 0,5vw (desktop), 1vw (tablet e telefone)
• Preenchimento inferior: 0,5vw (desktop), 1vw (tablet e telefone)

Elemento Principal

E para garantir que todo o conteúdo da coluna esteja centralizado verticalmente, adicionaremos três linhas de código CSS ao elemento principal de cada coluna.

display: flex;
flex-direction: column;
justify-content: center;

Índice Z da coluna 1

Por último, mas não menos importante, abra as configurações da coluna 1 e aumente o índice z nas configurações de visibilidade.

• Índice Z: 10

Adicionar Módulo de Menu à Coluna 1

Selecione o menu

É hora de adicionar módulos, começando com um Módulo de Menu na coluna 1. Selecione um menu de sua escolha.

Carregar logotipo

Faça upload do seu logotipo em seguida.

Remover imagem de fundo

Continue removendo a cor de fundo do módulo.

Layout

Vá para a guia de design e certifique-se de que as seguintes configurações se apliquem ao layout:

• Estilo: alinhado à esquerda
• Direção do menu suspenso: para baixo

Configurações de texto do menu

Defina o estilo das configurações de texto a seguir:

• Fonte do menu: Montserrat
• Cor do texto do menu: # 000000
• Tamanho do texto do menu: 0,7vw (desktop), 2vw (tablet), 3vw (telefone)

Configurações do menu suspenso

Junto com as configurações do menu suspenso.

• Cor da linha do menu suspenso: #ffffff

Configurações de ícones

E mude a cor do ícone do menu de hambúrguer também.

• Cor do ícone do menu de hambúrguer: # 2848ff

Dimensionamento

Continue alterando a largura máxima do logotipo em diferentes tamanhos de tela.

• Largura máxima do logotipo: 6vw (desktop), 9vw (tablet), 13vw (telefone)

Espaçamento

E complete as configurações do módulo adicionando alguma margem esquerda e direita.

• Margem esquerda: 2vw
• Margem direita: 2vw

Adicionar Módulo de Código à Coluna 1

Insira o código CSS para a capacidade de resposta do VW

Agora, no módulo de menu, usamos a unidade de largura da janela de visualização para o tamanho do texto e valores de espaçamento. Fizemos isso para garantir que você possa colocar até 8 itens de menu em diferentes tamanhos de tela da área de trabalho, sem dividir em duas linhas. Precisamos nos certificar de que o espaço entre os itens do menu também seja criado com a unidade vw. Para fazer isso, adicionaremos um Módulo de Código à coluna 1 e inseriremos as seguintes linhas de código CSS:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 2

Adicionar redes sociais

Para a próxima coluna, precisaremos de um Módulo de Acompanhamento de Mídia Social. Adicione as redes sociais de sua escolha.

Redefinir estilos de rede social individualmente

Continue redefinindo as configurações de cada rede.

Alinhamento

Conclua as configurações do módulo alterando o alinhamento do módulo.

• Alinhamento do Módulo: Centro

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Passe para a próxima e última coluna. Lá, precisaremos apenas de um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento

Vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

Conclua as configurações do módulo definindo o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 1.2vw (tablet), 2vw (telefone)
• Cor do texto do botão: #ffffff
• Largura da borda do botão: 0 px

• Raio da borda do botão: 0 px
• Fonte do botão: Montserrat
• Peso da fonte do botão: ultra negrito
• Estilo da fonte do botão: maiúscula

3. Adicionar animação correspondente aos elementos

Global Header Animation Combo # 1

Animação da coluna 1

Agora que construímos o cabeçalho global, é hora de adicionar as animações! Para recriar a primeira animação, abra as configurações da coluna 1 e adicione a seguinte animação:

• Estilo de Animação: Zoom
• Direção da animação: para cima
• Opacidade inicial da animação: 100%

Animação da coluna 2

Adicione as seguintes configurações de animação à coluna 2 a seguir:

• Estilo de Animação: Zoom
• Direção da animação: baixo
• Atraso de animação: 500ms
• Opacidade inicial da animação: 100%

Animação da coluna 3

Conclua as configurações da coluna atribuindo a seguinte animação à coluna 3:

• Estilo de Animação: Zoom
• Direção da animação: para cima
• Atraso de animação: 1000 ms
• Opacidade inicial da animação: 100%

Animações do módulo (todos os três módulos)

Depois de concluir as configurações da coluna, abra cada um dos módulos individualmente e use a seguinte animação para eles:

• Estilo de animação: Fade
• Atraso de animação: 1500ms

Global Header Animation Combo # 2

Animação da coluna 1

Quer recriar o segundo conjunto de animação em vez disso? Abra as configurações da coluna 1 e adicione a seguinte animação:

• Estilo de animação: slide
• Direção da animação: para cima
• Opacidade inicial da animação: 100%

Animação da coluna 2

Use as seguintes configurações de animação para a coluna 2 a seguir:

• Estilo de animação: slide
• Direção da animação: para cima
• Atraso de animação: 500ms
• Opacidade inicial da animação: 100%

Animação da coluna 3

E conclua as configurações da coluna aplicando as seguintes configurações de animação à coluna 3:

• Estilo de animação: slide
• Direção da animação: para cima
• Atraso de animação: 1000 ms
• Opacidade inicial da animação: 100%

Animações do módulo (todos os três módulos)

Em seguida, abra cada módulo individualmente e adicione a seguinte animação:

• Estilo de animação: slide
• Direção da animação: baixo
• Atraso de animação: 1500ms

4. Salvar as alterações do construtor e visualizar o resultado

Depois de concluir as configurações de animação, você pode salvar o cabeçalho global, sair do Theme Builder e visualizar o resultado em seu site!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final nos exemplos em diferentes tamanhos de tela.

Exemplo 1

Área de Trabalho

Móvel

Exemplo # 2

Área de Trabalho

Móvel

Pensamentos finais

Neste tutorial, mostramos como animar seu cabeçalho global usando as opções integradas do Divi e o Theme Builder. Essa é uma ótima maneira de chamar a atenção para o cabeçalho do seu site. Com as opções de animação integradas do Divi, as possibilidades são infinitas. Para ajudá-lo a começar, mostramos dois exemplos diferentes. Você também pode baixar os arquivos JSON gratuitamente!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.