Como criar um cabeçalho global personalizado com o Divi's Theme Builder

Agora que o Theme Builder está aqui, mal podemos esperar para mergulhar em novos tutoriais que o ajudarão a configurar seu site de A a Z. Isso inclui a criação de cabeçalhos personalizados usando a opção integrada do Divi. Neste tutorial, vamos nos concentrar na criação de um cabeçalho global usando o Divi's Theme Builder. Um cabeçalho global aparecerá em todos os lugares do seu site, a menos que você tenha atribuído um cabeçalho diferente a essa página ou postagem.

Vamos lá!

Antevisão

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

Área de Trabalho

Móvel

Baixe o design do cabeçalho personalizado GRATUITAMENTE

Para colocar as mãos no design de cabeçalho global personalizado gratuito, primeiro você precisa fazer o download 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. Configure o seu menu principal

Comece criando seu menu nas configurações de aparência do seu site WordPress.

2. Vá para as opções do Theme Builder

Em seguida, navegue até o Theme Builder em Divi's Theme Options. Uma vez lá, você notará um modelo de site padrão vazio.

3. Adicionar e construir cabeçalho global

O modelo de site padrão é onde você pode começar a criar seu cabeçalho global personalizado, corpo global e rodapé global. Clique em 'Adicionar Cabeçalho Global' e continue clicando em 'Criar Cabeçalho Global' para iniciar o processo.

Configurações da seção

Dimensionamento

Abra a seção que você pode observar na página, vá para a guia de design e altere a largura em diferentes tamanhos de tela.

• Largura: 100%
• Largura máxima: 1280 px (desktop), 100% (tablet e telefone)

Espaçamento

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

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

Fronteira

Adicione algum raio de borda aos cantos inferior esquerdo e direito da próxima seção.

• Inferior esquerdo: 50px
• Inferior direito: 50px

Sombra da caixa

Também estamos adicionando uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 60 px
• Cor da sombra: rgba (0,0,0,0.13)

Visibilidade

Em seguida, vá para a guia avançada e oculte os transbordamentos. Aumente o índice z também, isso ajudará a garantir que a seção permaneça no topo de todo o conteúdo da página.

• Excesso horizontal: visível
• Estouro vertical: visível
• Índice Z: 99999

4. Dedicar nova linha ao cabeçalho

Agora que completamos as configurações gerais da seção, podemos começar a adicionar linhas. No total, precisaremos de duas linhas; um que é dedicado ao cabeçalho e outro que permite que os itens do menu sejam exibidos. Começaremos com o cabeçalho adicionando uma nova linha usando a seguinte estrutura de coluna:

Configurações de linha

Cor de fundo

Sem adicionar nenhum módulo à linha, abra as configurações da linha e altere a cor de fundo.

• Cor de fundo: # 38383f

Dimensionamento

Modifique as configurações de dimensionamento da linha a seguir.

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

Exibição

E certifique-se de que as colunas apareçam lado a lado em tamanhos de tela menores, adicionando uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo de Imagem à Coluna 1

Carregar logotipo

Depois de concluir as configurações de linha, é hora de começar a adicionar módulos. Adicione um Módulo de imagem à coluna 1 e carregue seu logotipo.

Alinhamento

Vá para a guia de design e certifique-se de usar o alinhamento de imagem à esquerda.

• Alinhamento de imagem: esquerda

Dimensionamento

Modifique a largura do módulo também.

• Largura: 100px

Espaçamento

E adicione alguns valores de margem personalizados em diferentes tamanhos de tela.

• Margem superior: 5px
• Margem esquerda: 50 px (desktop), 20 px (tablet e telefone)

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

Adicionar redes sociais

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

Cor de fundo da rede social

Em seguida, abra cada rede social individualmente e mude a cor de fundo para uma completamente transparente.

• Cor de fundo: rgba (0,0,0,0)

Alinhamento

Volte para as configurações normais do módulo e altere todo o alinhamento do módulo a seguir.

• Alinhamento do Módulo: Centro

Ícone

Modifique as configurações do ícone também.

• Cor do ícone: #ffffff
• Usar tamanho de ícone personalizado: Sim
• Tamanho da fonte do ícone: 16px (desktop e tablet), 12px (telefone)

Espaçamento

E adicione alguma margem superior.

• Margem superior: 10px

Adicionar Módulo de Botão à Coluna 3

Adicionar cópia

Passe para a terceira coluna e adicione um Módulo de Botão com alguma cópia de sua escolha.

Alinhamento

Altere o alinhamento do botão na guia de design.

• Alinhamento do Botão: Direito

Configurações de botão

Defina o estilo das configurações do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 12 px (desktop), 10 px (tablet), 8 px (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # ffae25
• Largura da borda do botão: 0 px

• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: 5 px (desktop), 3 px (tablet e telefone)
• Fonte do botão: Open Sans
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: maiúscula

Espaçamento

E adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Enchimento superior: 20 px
• Preenchimento inferior: 20 px
• Preenchimento esquerdo: 50 px (desktop e tablet), 15 px (telefone)
• Preenchimento direito: 50 px (desktop e tablet), 15 px (telefone)

5. Dedique Nova Linha à Barra de Menu

Depois de preencher a linha dedicada ao cabeçalho global, você pode adicionar outra linha logo abaixo dela usando a seguinte estrutura de coluna:

Configurações de linha

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento na guia de design.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• 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

Adicionar Módulo de Menu à Coluna

Selecione o menu

Em seguida, adicione um Módulo de Menu à coluna e selecione o menu que você criou na primeira parte deste tutorial.

Layout

Vá para a guia de design e altere as configurações de layout da seguinte forma:

• Estilo: centrado
• Direção do menu suspenso: para baixo

Links

Modifique a cor do link ativo na guia de design também.

• Cor do link ativo: # ffae25

Menu suspenso

Faça o mesmo para a cor da linha do menu suspenso nas configurações do menu suspenso.

• Cor da linha do menu suspenso: # ffae25

Ícones

Modifique a cor do ícone do menu de hambúrguer a seguir.

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

Texto do Menu

Junto com as configurações de texto do menu.

• Fonte do Menu: Prata
• Cor do texto do menu: # 000000

6. Faça com que o cabeçalho e a barra de menus fiquem no topo

Abra as configurações da seção

Depois de preencher a segunda linha, a única coisa que resta a fazer é manter a seção no topo de nossas páginas e postagens. Para fazer isso, vamos abrir as configurações da seção novamente.

Adicionar CSS personalizado ao elemento principal

Em seguida, iremos para a guia avançada e adicionaremos algumas linhas de código CSS ao elemento principal da seção.

position: fixed;
top: 0;
left: 0;
right: 0;

7. Salvar opções de Cabeçalho Global e Criador de Tema

Depois de concluir todo o design do cabeçalho global, certifique-se de salvar o design antes de sair do layout do modelo. Assim que estiver fora do layout do modelo, salve as alterações de todo o seu construtor de tema e pronto!

Antevisão

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

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como criar um cabeçalho global personalizado com o novo Theme Builder da Divi. Este tutorial mostra como é fácil criar cabeçalhos bonitos e aplicá-los a todo o seu site ou a tipos específicos de postagens personalizadas. Esperamos que este tutorial inspire você a começar a usar o Theme Builder imediatamente! Se você tiver alguma dúvida ou sugestão, certifique-se de deixar um comentário na seção de comentários abaixo.

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.