Precisa criar um cabeçalho global para o seu site com Divi?
Um cabeçalho global aparecerá em todos os lugares do seu site da Web, a menos que você tenha atribuído um cabeçalho diferente a uma página ou postagem.
Vamos começar!
Visão geral
Aqui está uma prévia do cabeçalho global que vamos projetar.
Configure seu menu principal
Comece criando seu menu nas configurações de aparência do seu site WordPress.
Acesse a opção Theme Builder em Divi
Nas opções de Tema Divi, clique em Construtor de temas. Uma vez lá, você notará um modelo de site padrão.
Adicionar e criar um cabeçalho global
Le 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 de seção
dimensionamento
Abra as configurações da seção que você encontrará na página, na guia Estilo, altere as dimensões em diferentes tamanhos de tela.
- Largura máxima: 100%
- Largura máxima: 1280px (para PC e tablet), 100% (para celular)
espaçamento
Remova todas as margens internas superiores e inferiores
- Vértice da margem interna: 0px
- Margem interna inferior: 0px
fronteira
Agora adicione um raio de borda aos cantos inferiores esquerdo e direito da seção.
- Inferior esquerdo: 50px
- Parte inferior direita: 50px
Caixa de sombra
Vamos também adicionar uma sombra de caixa sutil.
- Intensidade do desfoque de sombra da caixa: 60px
- Cor da fonte da legenda: rgba(0,0,0,0.13)
visibilidade
- Excesso horizontal: Visível
- Estouro vertical: visível
Dedique uma nova linha ao cabeçalho
Agora que concluímos 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 a exibição de itens de menu. Começaremos com o cabeçalho adicionando uma nova linha usando a seguinte estrutura de colunas:
Configurações de linha
Configurações de fundo
Sem adicionar nenhum módulo à linha, abra as configurações de linha e altere a cor de fundo.
- Plano de fundo: #38383F
dimensionamento
Em seguida, modifique os parâmetros de dimensionamento de linha.
- Use a largura da calha personalizada: SIM
- Espaçamento de coluna: 1
- Largura máxima: 100%
- Largura máxima: 100%
Visualizando
Agora vamos garantir que as colunas apareçam próximas umas das outras em telas menores adicionando esta linha de código CSS ao elemento de linha principal.
01
display: flex;
Adicionar módulo de imagem na coluna 1
Baixar logo
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.
alignement
Vá para a guia Estilo e alinhe a imagem à esquerda.
dimensionamento
Modifique também a largura do módulo.
espaçamento
Adicione também valores de margem personalizados.
Adicionar módulo de rastreamento de mídia social na coluna 2
Adicionar redes sociais
Vamos para a segunda coluna. Lá precisaremos de um módulo de rastreamento de mídia social. Adicione as redes sociais de sua escolha. Você pode adicionar quantas redes sociais quiser.
Cor de fundo da rede social
Em seguida, abra cada rede social individualmente e altere a cor de fundo para uma cor completamente transparente.
- Cor de fundo: rgba (0,0,0,0)
alignement
Volte para as configurações normais do módulo e altere o alinhamento completo do módulo.
ícone
Altere as configurações do ícone também.
- Cor do ícone: #FFFFFF
- Usar tamanho de ícone personalizado: Sim
- Tamanho da fonte do ícone: 16px (PC e tablet), 12px (telefone)
espaçamento
Adicione uma margem superior.
Adicione o módulo Button na coluna 3
Vá para a terceira coluna e adicione um módulo Button contendo um texto de sua escolha.
alignement
Altere o alinhamento do botão na guia Estilo.
Configurações do botão
Personalize as configurações do botão da seguinte forma:
- Usar estilos personalizados para o botão: Sim
- Tamanho do texto do botão: 12px (computador), 10px (tablet), 8px (telefone)
- Cor do texto do botão: #ffffff
- Botão de fundo: #ffae25
- Largura da borda do botão: 0 pixels
- Botão de raio da borda: 0 pixels
- Espaçamento entre letras do botão: 5 px (desktop), 3 px (tablet e telefone)
- Botão Fonte: Abrir Nenhum
- Botão de luz suave: texto em negrito
- Copiar estilo do botão: TT
espaçamento
Personalize valores de margem.
Dedique uma nova linha à barra de menus
Depois de preencher a linha dedicada ao cabeçalho global, você pode adicionar outra linha logo abaixo.
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 Estilo.
espaçamento
Em seguida, remova todas as margens inferior e superior.
Adicionar um módulo de menu à coluna
Selecione o menu
Em seguida, adicione um módulo Menu à coluna e selecione o menu que você criou na primeira parte deste tutorial.
Provisão
Alterne para a guia Estilo e altere as configurações de layout da seguinte forma:
Conexões
Altere também a cor do link ativo na guia Estilo.
- 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 suspensa: #ffae25
ícone
- Cor do ícone do menu de hambúrguer: #ffae25
Texto do menu
Com configurações de texto de menu.
- Fonte do menu: Prata
- Cor do texto do menu: #000000
Faça com que o cabeçalho e a barra de menus fiquem no topo
Abrir as configurações da seção
Depois de concluir a segunda linha, tudo o que você precisa fazer é garantir que a seção permaneça no topo de nossas páginas e postagens. Para fazer isso, abriremos 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.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Salvar opções globais de cabeçalho e construtor de temas
Depois de concluir todo o design do cabeçalho global, salve o design antes de sair do layout do modelo. Quando estiver fora do layout do modelo, salve todas as alterações do construtor de temas e pronto!
Visão geral
Agora que passamos por todas as etapas, vamos dar uma última olhada no resultado.
Conclusão
Neste artigo, mostramos como criar um cabeçalho global personalizado com o novo criador de temas da Divi. Este tutorial mostra como é fácil criar lindos cabeçalhos e aplicá-los em todo o seu site da Web ou tipos de postagem personalizados específicos.
Esperamos que ajude você a personalizar seu site com o Theme Builder.
Se você tiver alguma dúvida ou sugestão, por favor, deixe-nos um comentário no seção de comentários abaixo.
...
