Como criar uma barra de navegação fixa de baixo para cima no Divi
Publicados: 2021-09-06No tutorial do Divi de hoje, mostraremos, passo a passo, como criar uma barra de navegação aderente de baixo para cima no Divi. Isso permitirá que a barra de navegação se fixe na parte inferior da página inicialmente para um layout acima da dobra exclusivo. Depois que você rolar para além da seção acima da dobra da página, a barra de navegação se fixará no topo da página e permanecerá lá por todo o resto da página. Você poderia dizer que a página “pegará” o menu na parte inferior da tela e trará um efeito de interação agradável para o seu menu principal e para o seu site.
Vamos começar!
Espiada
Para ajudá-lo a visualizar o resultado que estamos tentando alcançar, vamos dar uma olhada no resultado final:
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.
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!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Criando uma barra de navegação fixa de baixo para cima na Divi
Parte 1: Criando a seção acima da dobra e o cabeçalho
Para a primeira parte deste tutorial, vamos criar a seção acima da dobra e o título que servirá como a seção do cabeçalho principal de nossa página. A seção ficará em tela inteira na área de trabalho para garantir que ocupe toda a janela de visualização.
Adicionar linha
Para começar, adicione uma linha de uma coluna à seção padrão.
Configurações da seção
Antes de adicionar um módulo, abra as configurações da seção e adicione um plano de fundo da seguinte maneira:
- Cor de fundo: # e9f9ff
- Imagem de fundo: [adicionar imagem]
Na guia de design, atualize a altura mínima e o preenchimento.
- Altura mínima: 100vh (desktop), automático (tablet e telefone)
- Preenchimento: 20vh superior, 20vh inferior
Texto do Título
Para criar o texto do título, adicione um novo módulo de texto à linha.
Em seguida, atualize o conteúdo com o seguinte título H1:
<h1>Above the Fold</h1>
Configurações de texto
Na guia de design das configurações de texto, atualize os estilos de fonte do título da seguinte maneira:
- Fonte do título: Rubik
- Peso da fonte do cabeçalho: Semi negrito
- Estilo da fonte do cabeçalho TT
- Alinhamento do Texto do Título: Centro
- Cor do texto do título: # 302ea7
- Tamanho do texto do título: 130 px (desktop), 70 px (tablet), 40 px (telefone)
- Espaçamento entre letras do cabeçalho: 2px
- Altura da linha de direção: 1,3em
Parte 2: Criando a seção abaixo da dobra
Para demonstrar a funcionalidade da barra de navegação aderente, precisamos adicionar uma seção abaixo da dobra para que possamos ter algum espaço para rolar.
Para criar a seção, duplique a seção acima da dobra que acabamos de criar.
Atualize o fundo da seção duplicada.
- Cor de fundo: # f4def1
Em seguida, dê à seção uma grande altura mínima para que tenhamos espaço para rolar a página para baixo. Esta é apenas uma seção de preenchimento no lugar do conteúdo real de uma página.
- Altura mínima: 200vh
Em seguida, atualize o conteúdo do módulo de texto substituindo a palavra “Abaixo” por “Acima”.
Parte 3: Criando a Barra de Navegação Fixa
Para criar a barra de navegação fixa de baixo para cima, nosso primeiro passo é criar uma nova seção com uma linha de uma coluna.
Adicionar nova seção e linha
Adicione uma nova seção regular diretamente abaixo da seção acima da dobra.
Em seguida, adicione uma linha de uma coluna à seção.
Plano de fundo e preenchimento da seção
Abra as configurações da seção e atualize a cor de fundo.
- Cor de fundo: # 302ea7
Em seguida, retire o preenchimento superior e inferior para que a barra de navegação tenha menos altura.
- Preenchimento: 0 px superior, 0 px inferior
Adicionar estouro visível
Para garantir que os menus suspensos permanecerão visíveis, atualize as opções de visibilidade da seguinte forma:
- Excesso horizontal: visível
- Estouro vertical: visível
Dê à seção uma posição absoluta no celular
O menu suspenso do celular será aberto abaixo do ícone de hambúrguer por padrão. Se mantivermos a barra de navegação na parte inferior, isso ocultará o menu suspenso se o usuário clicar nele na posição inferior. Para uma melhor experiência do usuário, queremos que a barra de navegação comece na parte superior da página na tela do tablet e do telefone.
Para fazer isso, dê à seção uma posição absoluta no tablet e no telefone.
- Posição: Relativa (desktop), Absoluta (tablet e telefone)
Adicionar posição fixa para desktop e celular
Para adicionar a posição fixa à seção da barra de navegação, atualize o seguinte:
- Posição de aderência: aderir à parte superior e inferior (desktop), aderir à parte superior (tablet e telefone)
Atualizar preenchimento de linha
Assim que a seção aderente for concluída, abra as configurações para a linha dentro da seção e atualize o preenchimento da seguinte forma:
- Preenchimento: 10px superior, 10px inferior
Criar Menu de Navegação
Com a seção e a linha no lugar, estamos prontos para criar o menu de navegação.
Comece adicionando um módulo de menu à linha de uma coluna.
Conteúdo do Menu
Atualize o conteúdo do menu da seguinte forma:
- selecione o menu na lista suspensa
- adicionar imagem de logotipo (estou usando uma imagem de 122 x 52 pixels)
- tire a cor de fundo padrão
Na guia de design, atualize o seguinte texto de menu e configurações de ícone:
- Cor do link ativo: #fff
- Fonte do Menu: Rubik
- Estilo da fonte do menu: TT
- Cor do texto do menu: #fff
- Tamanho do texto do menu: 16px
- Alinhamento de Texto: Direito
- Cor da linha do menu suspenso: # e19dff
- Cor do texto do menu móvel: # 302ea7
- Cor do ícone do carrinho de compras: #fff
- Cor do ícone de pesquisa: #fff
- Cor do ícone do menu de hambúrguer: #fff
Usando uma borda para compensar a posição absoluta da barra de navegação no celular
Como a seção da barra de navegação tem uma posição absoluta no celular, a barra ficará acima (e cortará) a seção superior da página. Para corrigir isso, precisamos deslocar a seção superior usando uma borda superior que tenha a mesma altura da barra / seção de navegação.
Inspecione a altura da seção da barra de navegação no celular
Para determinar a altura da barra de navegação no celular, abra uma versão ao vivo da página em uma nova janela do navegador. Em seguida, você pode reduzir a largura do navegador para menos de 980 px para ver o menu móvel. Clique com o botão direito na seção que contém o menu e escolha a opção inspecionar elemento no menu do botão direito do navegador. Você deve ver uma caixa de ferramentas abaixo da seção mostrando as dimensões (incluindo a altura) da seção. Para este exemplo, a altura da seção da barra de navegação é 72px.
Adicionar Deslocamento da Borda Superior à Seção Acima da Dobra
Agora que determinamos a altura da seção, abra as configurações da seção superior (acima da dobra).
Na guia de design, adicione a seguinte borda superior no tablet e telefone:
- Largura da borda superior: 72 px (tablet e telefone)
- Cor da borda superior: # 302ea7
Como a borda tem a mesma altura da seção com a posição absoluta, você não conseguirá ver a borda porque ela serve apenas para empurrar a seção para baixo para que não seja cortada.
Resultado final
Confira o resultado final!
Pensamentos finais
A criação de uma barra de navegação adesiva de baixo para cima pode ser facilmente realizada usando a posição integrada do Divi e as opções adesivas. A chave é dar à seção acima da dobra uma altura de 100vh e, em seguida, adicionar a seção da barra de navegação abaixo que adere à parte inferior e superior do navegador. Esperançosamente, isso ajudará a adicionar uma parte superior da dobra mais exclusiva e envolvente ao seu site.
Esta barra de navegação aderente funciona melhor para um design de página única, em vez de um modelo global. Dito isso, você pode facilmente escolher usar isso como um design de página inicial e usar um cabeçalho global para o resto das páginas usando o construtor Divi Theme.
Estou ansioso para ouvir de você nos comentários.
Saúde!