[Ad_1]

No tutorial do Divi de hoje, mostraremos passo a passo como criar uma barra de navegação fixa de baixo para cima no Divi. Isso permitirá que a barra de navegação permaneça na parte inferior da página inicialmente para um layout exclusivo acima da dobra. Então, quando você passar pela seção acima da dobra da página, a barra de navegação permanecerá no topo da página e permanecerá lá pelo resto da página. Você poderia dizer que a página vai "tomar conta" do menu na parte inferior da tela e trazer um efeito de interação legal para o seu menu principal e seu site da Web.

Vamos começar!

Visão geral

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 as mãos nos designs deste tutorial, primeiro você precisa baixá-lo usando o botão abaixo. Para acessar o download, você precisará se inscrever em nossa lista de discussão Divi Daily usando o formulário abaixo de. Como novo assinante, você receberá ainda mais benefícios Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será "reinscrito" ou receberá e-mails adicionais.

Para importar o layout da seção para sua biblioteca Divi, vá para a biblioteca Divi.

Clique no botão Importar.

Na janela pop-up de portabilidade, selecione a guia de importação e escolha o arquivo para baixar de seu computador.

Em seguida, clique no botão importar.

caixa de notificação divi

Feito isso, o layout das seções estará disponível no Divi Builder.

Vá para o tutorial, sim?

O que você precisa para começar

estender abas de canto

Para começar, você precisará fazer o seguinte:

  1. Se ainda não o fez, instale e ative o Tema Divi.
  2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front-end (construtor visual).
  3. Escolha a opção "Construir do zero".

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Crie uma barra de navegação fixa de baixo para cima no Divi

Parte 1: Criando a seção e o cabeçalho acima da linha d'água

Para a primeira parte deste tutorial, criaremos a seção e o cabeçalho acima da linha de corte que servirão 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.

Adicionar linha

Para começar, adicione uma linha a uma coluna na seção padrão.

barra de navegação divi pegajosa de baixo para cima

Configurações de seção

Antes de adicionar um módulo, abra as configurações da seção e adicione um plano de fundo da seguinte forma:

  • Cor de fundo: # e9f9ff
  • Imagem de fundo: [adicionar imagem]

barra de navegação divi pegajosa de baixo para cima

Na guia Design, atualize a altura mínima e o preenchimento.

  • Altura mínima: 100 vh (computador desktop), automático (tablet e telefone)
  • Preenchimento: 20vh superior, 20vh inferior

barra de navegação divi pegajosa de baixo para cima

Texto do Cabeçalho

Para criar o texto do cabeçalho, adicione um novo módulo de texto à linha.

barra de navegação divi pegajosa de baixo para cima

Em seguida, atualize o conteúdo com o seguinte cabeçalho H1:

<h1>Above the Fold</h1>

barra de navegação divi pegajosa de baixo para cima

Configurações de texto

Na guia Design de Configurações de texto, atualize os estilos de fonte do título da seguinte forma:

  • Fonte do título: Rubik
  • Peso da fonte do cabeçalho: Semi negrito
  • Estilo da fonte do cabeçalho TT
  • Alinhamento do Texto do Cabeçalho: 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,3 em

barra de navegação divi pegajosa de baixo para cima

Parte 2: Criando a seção sob a dobra

Para demonstrar a funcionalidade da barra de navegação aderente, precisamos adicionar uma seção abaixo da dobra para que possamos ter espaço para rolar.

Para criar a seção, duplique a seção acima da linha d'água que acabamos de criar.

barra de navegação divi pegajosa de baixo para cima

Atualize o plano de fundo da seção duplicada.

  • Cor de fundo: # f4def1

barra de navegação divi pegajosa de baixo para cima

Em seguida, dê à seção uma grande altura mínima para que tenhamos espaço para rolar a página. Esta é apenas uma seção a ser preenchida em vez do conteúdo real de uma página.

barra de navegação divi pegajosa de baixo para cima

Em seguida, atualize o conteúdo do módulo de texto substituindo a palavra “Abaixo” por “Acima”.

barra de navegação divi pegajosa de baixo para cima

Parte 3: Crie a barra de navegação fixa

Para criar a barra de navegação aderente de baixo para cima, nosso primeiro passo é criar uma nova seção com uma linha para uma coluna.

Adicionar uma nova seção e uma nova linha

Adicione uma nova seção regular diretamente abaixo da seção acima da linha de água.

barra de navegação divi pegajosa de baixo para cima

Em seguida, adicione uma linha a uma coluna da seção.

barra de navegação divi pegajosa de baixo para cima

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

barra de navegação divi pegajosa de baixo para cima

Em seguida, remova o preenchimento superior e inferior para que a barra de navegação tenha menos altura.

  • Infill: 0px superior, 0px inferior

barra de navegação divi pegajosa de baixo para cima

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
  • Excesso vertical: visível

barra de navegação divi pegajosa de baixo para cima

Dê à seção uma posição absoluta no celular

O menu suspenso do celular será aberto por padrão abaixo do ícone de hambúrguer. Se mantivermos a barra de navegação na parte inferior, ela 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, atribua à seção uma posição absoluta no tablet e no telefone.

  • Posição: Relativa (computador desktop), Absoluta (tablet e telefone)

barra de navegação divi pegajosa de baixo para cima

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 fixa: Manter na parte superior e inferior (desktop), Manter na parte superior (tablet e telefone)

barra de navegação divi pegajosa de baixo para cima

Atualizar preenchimento de linha

Assim que a seção aderente for concluída, abra as configurações de linha dentro da seção e atualize o preenchimento da seguinte forma:

  • Preenchimento: 10 pixels na parte superior, 10 pixels na parte inferior

barra de navegação divi pegajosa de baixo para cima

Crie um 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.

barra de navegação divi pegajosa de baixo para cima

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)
  • remover a cor de fundo padrão

barra de navegação divi pegajosa de baixo para cima

Na guia 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: 16 px
  • Alinhamento do 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

barra de navegação divi pegajosa de baixo para cima

Usando uma borda para deslocar 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 resolver este problema, precisamos deslocar a seção superior usando uma borda superior da mesma altura que a 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 item no menu de contexto do navegador. Você deve ver uma caixa de ferramentas sob a 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.

barra de navegação divi pegajosa de baixo para cima

Adicione um 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 Design, adicione a seguinte borda superior no tablet e no 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, pois ela serve apenas para empurrar a seção para baixo para que não seja cortada.

barra de navegação divi pegajosa de baixo para cima

Resultado final

Descubra o resultado final!

Considerações finais

A criação de uma barra de navegação fixa de baixo para cima pode ser facilmente alcançada usando a posição integrada do Divi e as opções de aderência. 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 gruda na parte inferior e superior do navegador. Espero que isso ajude a adicionar uma imagem mais original e envolvente acima da linha d'água ao seu site da Web.

Esta barra de navegação pegajosa funciona melhor para um design de página única em vez de um modelo geral. Dito isso, você pode facilmente optar por usar isso como seu design de página inicial e usar um cabeçalho global para o restante das páginas usando o construtor. Tema Divi.

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

Felicidades!



[Ad_2]

Link Fonte