Como substituir a barra de menu principal pelo módulo de menu de largura total da Divi
Publicados: 2018-08-29A barra de menu principal facilita a navegação para os visitantes. Além da barra de menu principal padrão que estamos acostumados no WordPress, você provavelmente já encontrou o Módulo de Menu Fullwidth que o Divi oferece também. Normalmente, ele é usado para exibir outros menus em seu site que são diferentes do menu principal que você tem no topo de cada página.
Mas você também pode usar facilmente o Módulo de menu Fullwidth para substituir sua barra de menu principal. Isso lhe dá a liberdade de colocar o menu onde você quiser na página, sem lidar com um menu duplicado na parte superior da página. Você também pode usar as opções integradas do Divi para estilizar o menu da maneira que desejar, o que significa que você pode criar resultados impressionantes usando as opções de borda e divisória, por exemplo.
Neste tutorial, mostraremos como substituir sua barra de menu principal pelo Módulo de menu de largura total usando o Carpenter Layout Pack da Divi. Isso faz parte de nossa iniciativa contínua de design Divi. Você pode escolher se deseja que esse método se aplique a todas as páginas ou apenas a algumas delas. Vamos lá!
Antevisão
Antes de mergulharmos no tutorial de caso de uso, vamos dar uma olhada rápida no resultado final em diferentes tamanhos de tela.
Desativar barra de navegação fixa
Vá para as opções de tema do Divi
A primeira coisa que precisamos fazer é desativar a opção de navegação fixa nas opções de tema do Divi. Estamos fazendo isso para eliminar o espaço do menu principal no topo de nossa página. Para fazer isso, vá para o painel do WordPress> Divi> Opções de tema.
Desativar barra de navegação fixa
Abra a guia geral e desative a opção Barra de navegação fixa.
Criar Menu Principal
Vá para os menus
A próxima coisa que faremos é criar nosso menu principal. Usaremos este menu principal para a Barra de menus principal padrão na parte superior e para o Módulo de menus de largura total. Para adicionar seu menu, vá para o Painel do WordPress> Aparência> Menus.
Adicionar Novo Menu Principal
Adicione um novo menu, dê um nome ao seu menu e torne-o o seu Menu Principal.
Adicionar páginas e salvar menu
Por último, mas não menos importante, adicione todas as suas páginas e salve seu menu.
Estilo da barra de menu principal no personalizador de temas
Vá para o Customizador de Tema
Dependendo se você deseja ocultar a barra de menu principal padrão em todas as páginas ou não, você pode querer estilizar a barra de menu principal padrão primeiro. Você só precisa fazer isso se estiver planejando usá-lo em algumas páginas. Se você deseja remover a barra de menu principal de todos os lugares, pode pular esta etapa.
Configurações da barra de menu principal
Para combinar com o pacote de layout, aplicamos as seguintes alterações:
- Estilo da fonte: negrito e maiúsculas
- Cor do texto: #FFFFFF
- Cor do link ativo: #FFFFFF
- Cor de fundo: # f25b3a
- Cor de fundo do menu suspenso: # f25b3a
Ocultar barra de menu principal
Uma página
Vá para a página de escolha e habilite o Visual Builder
Para ocultar a barra de menu principal no topo de nossas páginas, precisaremos usar um pouco de código CSS. Observe que é importante ter desativado a opção Barra de navegação fixa (uma das etapas anteriores). Caso contrário, o espaço ocupado pela barra de menu principal ficará em branco e não desaparecerá completamente. Se você for ocultar a Barra de Menu Principal em uma página, em particular, vá para essa página e habilite o Construtor Visual.
Abra as configurações da página
Abra as configurações da página a seguir clicando no seguinte ícone na parte inferior da página:
Adicionar código CSS
Alterne para a guia Avançado e adicione o seguinte código CSS à caixa CSS personalizada:
#main-header {
display: none;
}
Site inteiro
Vá para as opções de tema do Divi
Se quiser se livrar da barra de menu principal em todo o seu site, você também pode fazer isso. Você não precisa adicionar o código a cada página manualmente. Em vez disso, você pode simplesmente ir para o Painel do WordPress> Divi> Opções de tema.
Adicionar código CSS
Continue rolando para baixo até encontrar a caixa Custom CSS e adicionar o mesmo código CSS lá:
#main-header {
display: none;
}
Adicionar barra de menu principal à página
Abra a página de destino com o Visual Builder
Agora que ocultamos a barra de menu principal, podemos começar a adicionar o módulo de menu de largura total à nossa página. Para fazer isso, vá para a sua página de aterrissagem, por exemplo, e habilite o Visual Builder.
Adicionar seção de largura total
Continue adicionando uma seção Fullwidth logo abaixo de sua seção de herói.
Borda Superior
Você pode usar todas as opções integradas do Divi para criar o design exato que deseja. Vamos mantê-lo bem limpo. A única coisa que adicionaremos às nossas opções de seção é uma borda superior:
- Largura da borda superior: 7 px
- Cor da borda superior: # f25b3a
Adicionar módulo de menu de largura total
Em seguida, adicione o Módulo de menu Fullwidth à sua seção.
Selecione o menu principal
Selecione seu menu principal como o menu que você deseja exibir.
Cor de fundo
Continue dando ao seu módulo uma cor de fundo preta.
Configurações de links
Em seguida, abra as configurações de Links e aplique as seguintes alterações:
- Cor do link ativo: #FFFFFF
- Cor do texto do menu suspenso: #FFFFFF
- Cor do texto do menu móvel: #FFFFFF
- Orientação do Texto: Esquerda
- Cor do Texto: Claro
Configurações do menu suspenso
Altere as configurações do menu suspenso a seguir:
- Cor de fundo do menu suspenso: # 000000
- Cor da linha do menu suspenso: # 000000
- Cor de fundo do menu móvel: # 000000
Configurações de texto do menu
Por último, vamos fazer com que as configurações de texto correspondam ao pacote de layout:
- Peso da fonte do menu: Ultra negrito
- Estilo da fonte do menu: maiúscula
Torne a seção de largura total global e use também em outras páginas
Salvar como seção global
Terminamos de criar nosso novo menu principal! Se você está planejando usá-lo em outras páginas também, vá em frente e adicione-o à sua Biblioteca Divi como um item global.
Adicionar a outras páginas sem barra de menu principal
Agora você pode adicionar facilmente este menu Fullwidth a outras páginas. Você pode escolher sua posição e ficar livre para brincar com as opções de design integradas que vêm junto com ele!
Antevisão
Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Pensamentos finais
Nesta postagem de blog de caso de uso, mostramos como substituir a barra de menu principal no topo de suas páginas pelo módulo de menu de largura total. A aplicação deste método dá a você a liberdade de colocar seu menu onde você quiser em sua página. Além disso, você também pode usar as opções integradas do Divi para estilizá-lo. Se você tiver dúvidas ou sugestões, certifique-se de deixar um comentário na seção de comentários abaixo.