Como criar um menu de navegação vertical (ou cabeçalho) para o seu site Divi

Os menus de navegação vertical podem ser úteis para certos sites que precisam de mais itens de menu na linha de frente. Os menus horizontais podem ser difíceis de caber em todos os links de menu necessários, especialmente em navegadores com larguras menores. Neste tutorial, mostraremos como construir um menu de navegação vertical personalizado usando o Divi Theme Builder. Isso permitirá que você tenha mais espaço para exibir seus itens de menu do WordPress. E você terá potência total para adicionar módulos Divi adicionais ao cabeçalho vertical e projetá-los com o construtor Divi.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, 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!

Para fazer o upload do modelo, navegue até o Divi Theme Builder no backend do seu site WordPress.

Carregar modelo de site padrão global

Então, no canto superior direito, você verá um ícone com duas setas. Clique no ícone.

Navegue até a aba de importação, carregue o arquivo JSON que você conseguiu baixar neste post e clique em 'Importar Divi Theme Builder Templates'.

Salvar alterações do Divi Theme Builder

Depois de fazer upload do arquivo, você notará um novo cabeçalho e rodapé global no modelo de site padrão. Salve as alterações do Divi Theme Builder assim que quiser que o modelo seja ativado.

Vamos para o tutorial, vamos?

Parte 1: Construindo um Novo Cabeçalho Global

Para este tutorial, vamos construir o menu de navegação vertical em um cabeçalho global usando o Divi Theme Builder. No entanto, mostraremos como adicionar o mesmo menu ao corpo de um template de página no final da postagem, caso você queira usá-lo em adição ao menu principal do seu site.

Para começar, vá para o painel do WordPress e navegue até Divi> Theme Builder.

Em seguida, clique na área “Adicionar cabeçalho global” do modelo de site padrão e selecione “Criar cabeçalho global” no menu suspenso.

Em seguida, selecione a opção “Construir do zero”.

Parte 2: Projetando o Layout da Seção Vertical

Dentro do Editor de Layout de Cabeçalho Global, abra as configurações da seção regular já existente e atualize o seguinte.

• Largura (desktop): 300px
• Largura (tablet e telefone): 100%

• Altura (desktop): 100vh
• Altura (tablet e telefone): automática

• Preenchimento (desktop): 4vh superior, 0px inferior
• Preenchimento (tablet e telefone): 0 px superior, 0 px inferior

Continue o design adicionando uma sombra de caixa da seguinte maneira:

• Sombra da caixa: veja a imagem
• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 20 px
• Força de propagação da sombra da caixa: -10px
• Cor da sombra: rgba (0,0,0,0.3)

Para garantir que o menu de navegação vertical permaneça visível à esquerda conforme o usuário rola, atualize a posição para fixa e atualize o índice z da seguinte maneira:

• Cargo: Fixo
• Índice Z: 9999

Para garantir que seremos capazes de ver a navegação do submenu que se estenderá para fora da seção, adicione o seguinte CSS personalizado ao elemento principal:

overflow: visible !important;

Agora sua seção está em um layout vertical no lado esquerdo do modelo.

Parte 3: Projetando o menu vertical

Com a seção no lugar, estamos prontos para projetar o menu vertical. Para fazer isso, usaremos um módulo de menu com algum CSS personalizado para definir o estilo da navegação a ser exibida verticalmente.

Também usaremos a unidade de comprimento vh para que o menu seja bem dimensionado com diferentes alturas de navegador.

Adicionando a linha

Para começar, adicione uma linha de uma coluna à seção.

Em seguida, atualize as configurações de linha da seguinte forma:

Tamanho e acolchoamento

• Largura da calha: 1
• Largura: 100%
• Largura máxima: 80%
• Preenchimento (desktop): 3vh superior, 3vh inferior
• Preenchimento (tablet e telefone): 0 px superior, 0 px inferior

Fronteira

• Largura da borda: 1px
• Cor da borda: #eeeeee

Adicionando o Módulo de Menu

Dentro da linha de uma coluna, adicione um novo Módulo de Menu.

Selecione um menu a ser exibido sob a alternância de conteúdo.

Em seguida, adicione o logotipo do seu site como conteúdo dinâmico sob a alternância de logotipo.

Na guia de design, atualize o seguinte:

• Estilo: centrado
• Fonte do Menu: Nunito Sans
• Cor do texto do menu: # 535b7c
• Tamanho do texto do menu: 18 px (desktop), 14 px (tablet e telefone)
• Altura da linha do menu: 2em
• Cor da linha do menu suspenso: # 535b7c
• Cor do link ativo do menu suspenso: # 535b7c

• Cor do ícone do carrinho de compras: # 535b7c
• Cor do ícone de pesquisa: # 535b7c
• Cor do ícone do menu de hambúrguer: # 535b7c

• Preenchimento (desktop): 2vh superior, 2vh inferior
• Preenchimento (desktop): 10px superior, 10px inferior

Parte 4: Adicionando o CSS personalizado para o menu

O menu precisa de algum CSS personalizado para obter a navegação vertical que pretendemos alcançar. Para começar, vá para a guia avançado e adicione o seguinte CSS personalizado ao link do menu e ao logotipo do menu.

CSS do link do menu (desktop):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

CSS do link do menu (tablet):

width: auto;
border:none;

CSS do logotipo do menu:

margin-bottom: 20px;

Em seguida, adicione uma classe CSS personalizada ao módulo de menu da seguinte maneira:

Classe CSS: et-vert-menu

O será usado para direcionar este menu específico em nosso CSS personalizado externo que adicionaremos usando um módulo de código.

Adicionando CSS Personalizado com Módulo de Código

No módulo de menu, adicione um novo módulo de código.

Em seguida, cole o seguinte código na caixa de código (certifique-se de colocá-lo entre as tags de estilo):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

Parte 5: Projetando o botão e ícones de acompanhamento de mídia social

Agora que o menu está completo, podemos adicionar um botão e alguns links para seguir as mídias sociais para completar o cabeçalho vertical.

Adicionando a linha

Adicione uma nova linha de uma coluna na linha atual.

Adicionando o Botão

Em seguida, adicione um novo módulo de botão à linha.

Atualize as configurações do botão da seguinte forma:

• Alinhamento do botão: centro
• Tamanho do texto do botão: 18 px (desktop), 14 px (tablet e telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 535b7c
• Largura da borda do botão: 0 px

Em seguida, vá para a guia avançada e cole o seguinte CSS personalizado no elemento principal:

CSS do elemento principal (desktop)

display:block;
width: 100%;

CSS do elemento principal (tablet)

display:inherit;

Adicionando os ícones de acompanhamento de mídia social

Abaixo do botão, adicione um módulo Acompanhamento de mídia social.

Adicione as redes sociais que você deseja na guia de conteúdo.

Na guia Design, atualize o seguinte:

• Alinhamento do Módulo: Centro
• Cor do ícone: # 535b7c

Em seguida, abra as configurações de cada uma das redes e exclua a cor de fundo.

Em seguida, adicione um pouco de margem superior da seguinte forma:

• Margem: 3vh superior

Atualizar configurações de linha

Depois que os ícones de acompanhamento de mídia social estiverem completos, abra as configurações de linha e ajuste o seguinte:

• Largura da calha: 1
• Preenchimento (desktop): 3vh superior, 0px inferior
• Preenchimento (tablet e telefone): 10px superior

Salvar layout e modelo

Uma vez feito isso, salve o layout e o modelo.

Resultado final

Aqui está o resultado final em uma página ao vivo.

Como adicionar o menu de navegação vertical à área do corpo de um modelo de página

Se você deseja adicionar o menu de navegação vertical a um layout de página (em vez de seu cabeçalho global), você deve primeiro salvar o layout da seção na Biblioteca Divi.

Para fazer isso, abra o Global Header Layout Editor e salve a seção vertical (contendo o menu) na sua biblioteca Divi.

Em seguida, saia do editor de layout e crie um novo modelo e atribua-o à (s) página (s) que desejar. O clique para construir um corpo personalizado para o modelo de página.

Selecione para construí-lo do zero.

Adicione uma nova seção de largura total ao layout.

Em seguida, adicione um Módulo de Postagem de Largura Completa à seção.

Exclua a seção regular padrão na parte superior da página e, em seguida, abra as configurações da seção de largura total e adicione o seguinte CSS personalizado ao elemento principal:

CSS do elemento principal (desktop)

width: calc(100% - 300px);
margin-left:300px !important;

CSS do elemento principal (tablet)

width: 100%;

Na seção regular, clique para adicionar uma nova seção e, na guia Adicionar da biblioteca, selecione a seção do menu vertical que você salvou anteriormente na biblioteca.

Como não queremos que a seção seja exibida no celular, abra as configurações da seção e desative a visibilidade da seção no tablet e no telefone.

Em seguida, abra o módulo de código dentro do layout da seção e substitua este trecho de código ...

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Com isso…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

Isso moverá o cabeçalho principal e o rodapé para caber no menu vertical fixo à esquerda do modelo de página. Aqui está o que parece em uma página ativa usando o cabeçalho e rodapé padrão do Divi.

Pensamentos finais

O menu de navegação vertical apresentado aqui recebeu uma posição fixa. No entanto, se precisar de mais espaço para itens de menu ou conteúdo adicionais, você pode alterar a posição da seção para absoluta. Você também pode alterar o estouro vertical para rolar a fim de dar ao usuário a capacidade de rolar pelos itens de menu (observe que você não poderá ver / usar submenus com essa configuração de estouro).

A configuração da seção vertical abre a porta para a criação de algumas barras laterais personalizadas também. Espero que isso seja útil para projetos futuros.

Estou ansioso para ouvir de você nos comentários.

Saúde!