Como fazer seu logotipo cruzar as barras de menu primária e secundária dentro do cabeçalho Divi
Publicados: 2021-05-12Quando se trata de construir um cabeçalho, as possibilidades são infinitas. Você pode incluir qualquer coisa que imaginar dentro do cabeçalho Divi se usar o Divi Theme Builder. Hoje, estamos adicionando outro tutorial de design de cabeçalho altamente solicitado à sua lista de recursos. Mostraremos como fazer seu logotipo cruzar as barras de menu principal e secundária dentro de seu cabeçalho. Você também poderá baixar o arquivo JSON gratuitamente!
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 modelo de cabeçalho global GRATUITAMENTE
Para colocar suas mãos no template de cabeçalho global 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.
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.
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!
1. Crie um novo modelo de cabeçalho global
Vá para Divi Theme Builder
Comece acessando o Divi Theme Builder no backend do seu site WordPress. Uma vez lá, clique em “Add Global Header”.
Adicionar Novo Cabeçalho Global
Um menu suspenso aparecerá. Para começar a construir do zero, continue selecionando “Build Global Header”.
2. Construir Design de Cabeçalho
Adicionar Seção Especializada
Para construir este projeto, vamos usar uma seção de especialidades.
Estrutura da Coluna
Esta é a estrutura de colunas que estamos usando para nossa seção de especialidades:
Cor de fundo da coluna 1
Depois de adicionar a seção de especialidades, abra suas configurações e aplique uma cor de fundo da coluna 1.
- Cor de fundo da coluna 1: rgba (255,191,0,0,27)
Dimensionamento
Vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:
- Equalize Alturas de Coluna: Sim
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura interna: 100%
- Largura máxima interna: 2580px
Espaçamento
Modifique as configurações de espaçamento também.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
- Preenchimento superior da coluna 1: 0 px
- Preenchimento inferior da coluna 1: 0 px
- Preenchimento superior da coluna 2: 0 px
- Preenchimento inferior da coluna 2: 0 px
IDs CSS da coluna
Em seguida, vá para a guia avançada e aplique um ID CSS personalizado a ambas as colunas.
- Coluna 1 CSS ID: cabeçalho da primeira coluna
- Coluna 2 CSS ID: cabeçalho-segunda-coluna
Adicionar Módulo de Imagem à Coluna 1
Enviar Imagem
É hora de adicionar módulos, começando com um Módulo de imagem na coluna 1. Faça upload do seu logotipo.
Alinhamento
Em seguida, vá para a guia de design e altere o alinhamento da imagem.
- Alinhamento de imagem: centro
Dimensionamento
Aplique uma largura máxima às configurações de dimensionamento também.
- Largura máxima: 100 px
Visibilidade
E esconda o módulo em telas menores.
Adicione a linha # 1 à coluna 2
Estrutura da Coluna
Na coluna 2 de nossa seção de especialidades, adicionaremos uma primeira linha usando a seguinte estrutura de coluna:
Cor de fundo
Abra as configurações de linha e use a seguinte cor de fundo:
- Cor de fundo: # a163ff
Espaçamento
Vá para a guia de design da linha e altere as configurações de espaçamento da seguinte forma:
- Enchimento superior: 10 px
- Preenchimento inferior: 10 px
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Fronteira
Aplique as seguintes configurações de borda a seguir:
- Largura da borda inferior: 3px
- Largura da borda esquerda:
- Desktop: 3px
- Tablet e telefone: 0px
- Cor da borda: # 6c2eb9
CSS do elemento principal
E use as seguintes linhas de código CSS dentro do elemento principal da linha:
display: flex; justify-content: center; align-items: center;
Ocultar as colunas 1 e 2 em tamanhos de tela menores
Para simplificar o design em tamanhos de tela menores, abriremos as configurações das colunas 1 e 2 e ocultaremos ambas no tablet e telefone.
Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 1
Adicionar redes sociais
É hora de adicionar módulos, começando com um Módulo de Acompanhamento de Mídia Social na coluna 1. Adicione as redes sociais de sua escolha.
Cor de fundo da rede social individual
Modifique a cor de fundo de cada rede social individualmente.
- Cor de fundo: #ffeeba
Configurações de ícone
Volte para as configurações gerais do módulo e altere a cor do ícone.
- Cor do ícone: # 6c2eb9
Fronteira
Adicione alguns cantos arredondados às configurações de borda também.
- Todos os cantos: 100px
Adicionar Módulo de Texto à Coluna 2
Adicionar conteúdo
Em seguida, adicione um Módulo de Texto à coluna 2 com algum conteúdo de sua escolha.
Configurações de texto
Altere as configurações do módulo da seguinte forma:
- Fonte do texto: Poppins
- Alinhamento de Texto: Centro
Adicionar Módulo de Botão à Coluna 3
Adicionar cópia
Na coluna 3, o único módulo de que precisamos é um Módulo de botão. Adicione alguma cópia de sua escolha.
Alinhamento de Botão
Vá para a guia de design do módulo e altere o alinhamento do botão em diferentes tamanhos de tela.
- Alinhamento do botão:
- Desktop: Right
- Tablet e telefone: centro
Configurações de botão
Defina o estilo do botão a seguir.
- Usar estilos personalizados para botão: Sim
- Tamanho do texto do botão: 14 px
- Cor do texto do botão: # 6c2eb9
- Cor de fundo do botão: #ffeeba
- Fonte do botão: Poppins
- Peso da fonte do botão: negrito
- Estilo da fonte do botão: maiúscula
- Mostrar ícone do botão: Sim
- Posicionamento do ícone do botão: Esquerda
Espaçamento
E aplique os seguintes valores de preenchimento:
- Enchimento superior: 10 px
- Preenchimento inferior: 10 px
- Preenchimento esquerdo: 50 px
- Preenchimento direito: 30px
Adicione a linha # 2 à coluna 2
Estrutura da Coluna
A próxima e última linha de que precisamos na segunda coluna da nossa seção usa a seguinte estrutura de coluna:
Cor de fundo
Abra as configurações de linha e use a seguinte cor de fundo:
- Cor de fundo: rgba (161,99,255,0,1)
Espaçamento
Modifique as configurações de espaçamento da linha a seguir.
- Enchimento superior: 20 px
- Preenchimento inferior: 20 px
- Preenchimento esquerdo: 5%
- Preenchimento direito: 5%
Fronteira
Em seguida, aplique as seguintes configurações de borda:
- Largura da borda esquerda:
- Desktop: 3px
- Tablet e telefone: 0px
- Cor da borda esquerda: # 6c2eb9
Adicionar Módulo de Menu à Coluna
Selecione o menu
Então, apenas o módulo de que precisamos nesta linha é um Módulo de Menu. Selecione um menu de sua escolha.
Carregar logotipo no tablet e telefone
Em seguida, faça upload de um logotipo apenas no tablet e no telefone.
Remover cor de fundo
Em seguida, remova a cor de fundo do módulo.
Configurações de texto do menu
Vá para a guia de design do módulo e altere as configurações de texto do menu da seguinte forma:
- Fonte do menu: Poppins
- Cor do texto do menu: # 6c2eb9
- Tamanho do texto do menu: 16px
Configurações do menu suspenso
Aplique a seguinte cor de linha do menu suspenso a seguir:
- Cor da linha do menu suspenso: rgba (0,0,0,0)
Configurações de ícones
Em seguida, altere as configurações do ícone.
- Cor do ícone do carrinho de compras: # 6c2eb9
- Cor do ícone de pesquisa: # 6c2eb9
- Cor do ícone do menu de hambúrguer: # 6c2eb9
Dimensionamento
Aplique uma largura máxima do logotipo no tablet e no telefone.
- Largura máxima do logotipo:
- Tablet: 70px
- Telefone: 50px
Adicionar Módulo de Código à Coluna 1
Para alterar as proporções do design do nosso cabeçalho, faremos algumas pequenas modificações no CSS. Para incluir o código, adicione um Módulo de Código abaixo do Módulo de Imagem na coluna 1.
Adicionar etiquetas de estilo
Coloque algumas tags de estilo dentro da caixa de código.
Insira o código CSS entre as tags de estilo
E coloque as seguintes linhas de código CSS entre as tags de estilo:
@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}
#header-second-column {
width: 90% !important;
}
}
@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}
4. Salve as alterações do Divi Theme Builder
Agora que tudo está no lugar, a única coisa que resta a fazer é salvar todas as alterações do Divi Theme Builder e ver o resultado!
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 ser criativo com seu cabeçalho Divi. Mais especificamente, mostramos como fazer seu logotipo cruzar a barra de menu principal e secundária dentro de seu cabeçalho. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para 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.