[Ad_1]
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.
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
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Tema Divi.
- 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 "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.
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]
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
Texto do Cabeçalho
Para criar o texto do cabeçalho, adicione um novo módulo de texto à linha.
Em seguida, atualize o conteúdo com o seguinte cabeçalho H1:
<h1>Above the Fold</h1>
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
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.
Atualize o plano de 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. Esta é apenas uma seção a ser preenchida em vez do conteúdo real de uma página.
Em seguida, atualize o conteúdo do módulo de texto substituindo a palavra “Abaixo” por “Acima”.
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.
Em seguida, adicione uma linha a uma coluna da 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, remova o preenchimento superior e inferior para que a barra de navegação tenha menos altura.
- Infill: 0px superior, 0px 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
- Excesso vertical: visível
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)
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)
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
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.
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
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
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.
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.
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]