Como criar uma navegação vertical transparente que se sobrepõe ao seu site Divi

Publicados: 2017-07-26

No tutorial Divi de hoje, vamos nos concentrar principalmente em fazer algo especial com a navegação vertical em seu site. A navegação vertical é uma opção frequentemente esquecida que o tema Divi oferece. Embora não seja usado com frequência, ele pode alterar a aparência completa do seu site e trazê-lo para o nível desejado. Para ajudá-lo a tornar sua navegação vertical ainda mais especial do que já é, vamos torná-la transparente. Além disso, também vamos garantir que o menu transparente se sobreponha ao resto do seu site.

Atualmente, não vemos muitos sites com navegação vertical por aí. Mas, em certos casos, pode fornecer resultados impressionantes. Em um de nossos posts anteriores, mostramos 12 exemplos de sites da Divi que usam a navegação vertical para aprimorar seu design.

Quando você está fazendo a navegação vertical se sobrepor ao seu site, é importante usar uma cor de fundo transparente. Se você não estiver usando uma cor de fundo transparente, a navegação vertical pode se sobrepor a algum conteúdo do seu site. Você não quer se livrar do foco principal no conteúdo do seu site e não quer absolutamente sobrepô-lo.

Para demonstrar o que queremos dizer exatamente, fizemos um exemplo elegante e simplista que mostraremos como fazer. Passo a passo, iremos guiá-lo através das diferentes etapas necessárias para alcançar os resultados a seguir.

Resultado final de hoje: um menu vertical simples e elegante

Navegação vertical transparente

Na imagem acima, você pode perceber a simplicidade que uma navegação vertical transparente pode trazer para o seu site. Além de mostrar como criar o menu vertical transparente, também daremos algumas dicas gerais de design que você pode usar ao recriá-lo para corresponder ao seu próprio site.

Criando o Design no Divi

Inscreva-se no nosso canal no Youtube

Configurações Gerais

Antes de mergulharmos no exemplo que fizemos, vamos fornecer algumas informações gerais (e linhas de código CSS) que ajudam a integrar a navegação transparente de uma forma simples (sem todas as outras modificações que fizemos no exemplo) .

Ativar navegação vertical

Para começar, você precisa habilitar a navegação vertical em seu site. Para fazer isso, vá para o Painel do WordPress> Aparência> Personalizar> Cabeçalho e navegação> Formato do cabeçalho> e ative a Navegação vertical.

Escolha suas configurações de design no personalizador de temas

Agora que você ainda está no Theme Customizer, você pode ajustar todas as configurações de sua navegação vertical da mesma forma que altera sua navegação superior. Volte para Cabeçalho e navegação> Menu principal> E faça todas as modificações que deseja fazer no menu principal.

Nesta parte, é importante fornecer uma cor de fundo ao menu que tenha uma opacidade menor que 1. De preferência, ainda menor que 0,5. Certifique-se de que isso se aplica à cor de fundo. Se você deseja que o mesmo se aplique à cor de fundo do menu suspenso, escolha a mesma cor lá também.

Adicione o código CSS

Depois de fazer todas as alterações desejadas na parte do design de sua navegação vertical, você pode passar para a parte CSS. Como já estamos no Theme Customizer, vamos adicionar o código CSS personalizado ali. Você pode, é claro, adicionar o código CSS a uma página em particular também ou por meio das Opções de tema.

O código CSS que forneceremos a você faz duas coisas. Em primeiro lugar, garante que a navegação vertical transparente e o site se sobreponham. Em segundo lugar, ajuda a ajustar a largura de sua navegação vertical. Se você não quiser alterar a largura de forma alguma, pode deixar esse trecho de código fora do seu site e apenas fazer a navegação vertical transparente e a sobreposição do seu site.

Essas alterações se aplicarão apenas à versão desktop do seu site. Em telas com largura menor que 981 px, as modificações não se aplicam.

Adicionar código CSS no personalizador de tema

Em primeiro lugar, temos o código que garante que o seu site ocupe toda a largura do seu navegador. Copie e cole o seguinte código na guia CSS Adicional do Customizador de Tema: 

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

Além disso, se você deseja ajustar a largura de sua navegação vertical, copie e cole as seguintes linhas de código CSS: 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

Recriando a navegação vertical simplista

Agora que tratamos das etapas necessárias para criar uma navegação vertical transparente que se sobrepõe ao seu site, vamos recriar o exemplo. O exemplo, mais uma vez, tem a seguinte aparência:

Navegação vertical transparente

Dicas gerais de design

Antes de começarmos, compartilharemos algumas dicas gerais de design e pensamentos que você deve manter em mente. Essas dicas o ajudarão a obter o melhor do site elegante e simplista que você está criando. Vamos dar uma olhada nas duas dicas que definitivamente queremos enfatizar.

Centralize tudo

Em primeiro lugar, certifique-se de centralizar o conteúdo em seu site. É evidente, mas vale a pena mencionar. Se você estiver usando uma navegação vertical transparente que se sobrepõe ao seu site, centralizar seu conteúdo será a melhor opção. Se você, em vez disso, alinhar tudo ao lado esquerdo do seu site, é mais provável que a navegação vertical transparente e o conteúdo se misturem. Provavelmente, esse não é o resultado que você deseja alcançar. Você deseja priorizar a simetria e a legibilidade em seu site.

Se você optar por conteúdo com alinhamento diferente, certifique-se de verificar o preenchimento e as margens do conteúdo. Se você modificar as margens e preenchimentos de acordo, os resultados ainda podem ser excelentes. Porém, você provavelmente terá que fazer muitas modificações manuais.

Fundo da mesma cor em todos os lugares

Se você estiver usando uma cor de fundo totalmente transparente para sua navegação vertical, como estamos usando neste exemplo, é importante manter uma certa consistência. Você deseja que a cor em sua navegação vertical seja legível e perceptível, porque as pessoas devem ser capazes de navegar facilmente em seu site.

Se você estiver escolhendo uma cor de fonte clara em sua navegação vertical transparente, certifique-se de que suas imagens ou cores de fundo contenham cores escuras. Da mesma forma, se você estiver usando uma fonte de cor escura, certifique-se de que as imagens ou cores de fundo que você usa tenham cores claras.

Comece a criar o exemplo

Sem fazer mais nada, vamos começar a recriar o exemplo que mostramos a você. Em primeiro lugar, crie uma nova página e adicione uma seção de largura total a ela. Vamos apenas mostrar como recriar uma seção da página. Claro, você pode continuar e adicionar quantas seções quiser. O menu permanecerá exatamente o mesmo durante a rolagem.

Criar cabeçalho de largura total

Na seção Fullwidth, adicione um cabeçalho Fullwidth. Em seguida, vá para a guia Design, coloque Text & Logo Orientation em 'Center' e habilite o modo fullscreen de seu Fullwidth Header também.

Configurações de título

Além disso, role para baixo na mesma guia e faça as seguintes alterações na subcategoria do Texto do Título:

  • Fonte do título: Lato Light
  • Estilo da fonte do título: maiúsculas
  • Estilo da fonte do título: 60 (desktop), 50 (tablet), 40 (telefone)
  • Cor do texto do título: #FFFFFF

Configurações de subhead

Além disso, continue a rolar e certifique-se de que as configurações da subcategoria Texto do subtítulo são as seguintes:

  • Fonte do subtítulo: Lato Light
  • Tamanho da fonte do subtítulo: 22 px (desktop e tablet), 19 (telefone)
  • Cor do texto do subtítulo: # c4c4c4

Configurações de botão

Por fim, faça as seguintes alterações na subcategoria Botão da guia Design:

  • Use estilos personalizados para o botão um: Sim
  • Tamanho do texto do botão um: 15 (desktop e tablet), 12 (telefone)
  • Botão Um Cor do Texto: # 000000
  • Cor de fundo do botão um: #FFFFFF
  • Fonte do botão um: Lato Light
  • Estilo de fonte de um botão: negrito e maiúsculas

Configurações de fundo gradiente

Em seguida, abra as configurações da Seção de largura total para adicionar uma imagem de fundo com sobreposição de gradiente na subcategoria Fundo da guia Conteúdo. Dependendo do tipo de plano de fundo e cores que você está usando, adicione cores correspondentes.

Em nosso exemplo, estamos usando fundos escuros. Portanto, começaremos com uma cor preta no gradiente. A outra cor que combinamos com a imagem de fundo é 'rgba (0,49,109,0,43)'.

Além disso, as configurações que usamos para as cores do gradiente são as seguintes:

  • Tipo de gradiente: Linear
  • Direção do gradiente: 87deg
  • Posição inicial: 0%
  • Posição final: 62%

Continuando, adicione uma imagem de fundo e aplique as seguintes configurações:

  • Tamanho da imagem de fundo: capa
  • Posição da imagem de fundo: centro
  • Repetição da imagem de fundo: sem repetição
  • Mistura de imagem de fundo: sobreposição

Mudanças no Customizador de Tema

Para a próxima etapa, precisaremos fazer algumas outras modificações no Customizador de Tema. Se você estiver no painel do WordPress, vá para Aparência> Personalizar> Cabeçalho e navegação> Barra de menu principal> e faça as seguintes alterações:

  • Altura máxima do logotipo: 83
  • Tamanho do texto: 14
  • Espaçamento entre letras: 0
  • Fonte: Lato Light
  • Estilo da fonte: maiúsculas
  • Cor do texto: #FFFFFF
  • Cor do link ativo: #FFFFFF
  • Cor de fundo: #FFFFFF
  • Cor de fundo do menu suspenso: rgba (221,153,51,0)
  • Cor da linha do menu suspenso: # 1E73BE
  • Cor do texto do menu suspenso: #FFFFFF

Adicionar código CSS personalizado no personalizador de tema

Enquanto você ainda está no Theme Customizer, vamos adicionar as linhas de código CSS necessárias para fazer o layout ter a aparência que tem.

A primeira parte do código remove a margem esquerda do site ao usar uma navegação vertical. A segunda parte coloca o menu mais próximo à esquerda. A terceira parte coloca uma margem superior e uma borda inferior em cada página do menu. A quarta parte adiciona uma margem superior ao logotipo e remove a margem após o logotipo. E, finalmente, garantimos que o menu mantenha a mesma distância entre o logotipo e os itens de menu, removendo o preenchimento superior. Essas alterações também se aplicam ao menu durante a rolagem. Portanto, o menu terá a mesma aparência em todo o site. 

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

Resultado final

Como resultado de todas as etapas que você seguiu ao longo desta postagem, você deve ter o seguinte resultado no site em que está trabalhando:

Navegação vertical transparente

Empacotando

Nesta postagem, mostramos como fazer uma navegação vertical transparente que se sobrepõe ao seu site. Além disso, também compartilhamos um design elegante e simplista que você pode usar para o seu próprio site, se seguir passo a passo este post. Se você tiver alguma dúvida ou solicitação, deixe um comentário na seção de comentários abaixo para que possamos entrar em contato!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!