Como adicionar links de navegação de página fixa (próximo, anterior, primeiro, último) às seções Divi
Publicados: 2021-05-19Às vezes, é mais conveniente navegar pelo conteúdo da página clicando nos botões em vez de rolar. Isso é especialmente verdadeiro para páginas únicas ou se você tiver certas seções sequenciais em uma página que garantem acessibilidade ideal para os usuários. Adicionar links de navegação de páginas fixas à parte inferior das seções pode ser uma alternativa exclusiva para os usuários rolarem constantemente ou para incluir links de âncora em seu menu de cabeçalho principal.
Neste tutorial, vamos mostrar como adicionar links de navegação de página fixa (próximo, anterior, primeiro, último) a uma página no Divi. Isso permitirá que você navegue para seções específicas em uma página com facilidade.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Observe como os links de navegação aderentes mudam ao rolar a página para baixo.
Observe como é fácil navegar para cada seção clicando nos links de navegação.
E aqui está como o design fica no celular.
E aqui está um código que demonstra a funcionalidade principal.
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.
Adicionando Links de Navegação de Página Fixa às Seções Divi
Criando a Seção Superior
Por padrão, haverá uma seção regular pronta para uso no Divi Builder. Usando a seção regular padrão, abra as configurações da seção e retire o preenchimento inferior da seguinte forma:
- Preenchimento: 0px inferior
Configurações de linha
Adicione uma linha de uma coluna à seção.
Em seguida, atualize as configurações de design para a linha da seguinte forma:
- Largura: 100%
- Largura máxima: 80vw (desktop, tablet), 95vw (telefone)
Título da seção
Para criar o título da seção, primeiro, adicione um novo módulo de texto à linha / coluna.
Em seguida, atualize o texto do corpo com o seguinte título H2:
<h2>Top</h2>
Na guia de design, atualize as configurações de texto para o título H2 da seguinte maneira:
- Selecione a guia H2
- Fonte do título 2: Montserrat
- Peso da fonte do cabeçalho 2: pesado
- Estilo da fonte do título 2: TT
- Título 2 Alinhamento de texto: centro
- Tamanho do texto do título 2: 8vw (desktop, tablet), 61,36px (telefone)
Criando Seção 1
A seguir, criaremos nossa primeira seção que conterá links de navegação fixos. Para criar a Seção 1, duplique a seção superior e rotule a seção duplicada de acordo na visualização de camadas.
Seção 1 Cor de fundo
Abra as configurações da Seção 1 e atualize a cor de fundo:
- Cor de fundo: # fec0f4
Seção 1 CSS ID para navegação de link âncora
Para vincular a esta seção usando nossos links de âncora, precisamos adicionar um ID CSS. Na guia avançada, adicione o seguinte ID CSS:
- ID CSS: um
Atualizar o Texto do Título
Em seguida, atualize o texto do título no módulo de texto para ler a “Seção 1”.
Criando linha fixa para a seção 1
Depois que a seção e o título forem atualizados, criaremos uma linha fixa que conterá nossos links de navegação. Para fazer isso, adicione uma nova linha de uma coluna sob a linha existente na Seção 1.
Como nossa seção não tem preenchimento inferior, a fileira deve se encaixar bem na parte inferior da seção.
Configurações de linha fixa
Para tornar a linha fixa, precisamos atualizar as configurações da linha.
Opções fixas
Na guia avançada, atualize as opções de posição fixa da seguinte forma:
- Posição pegajosa: grudar no fundo
- Limite de aderência superior: Seção
- Compensação dos elementos aderentes circundantes: NÃO
Isso garantirá que a linha pegajosa esteja contida na seção.
Configurações de design
Na guia de design, atualize o seguinte:
- Usar largura de calha personalizada: SIM
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 25vw (desktop, tablet), 50% telefone
- Alinhamento de linha: direita (desktop, tablet), esquerda (telefone)
- Preenchimento: 0 px superior, 0 px inferior
Para ocultar a linha (junto com os botões que ela conterá), moveremos a linha atrás da seção abaixo dela usando as configurações de conversão de transformação. Em seguida, moveremos a linha para cima à vista quando estivermos no estado fixo. Isso garantirá que os botões só sejam visíveis quando estiverem no estado aderente.
Para fazer isso, clique no ícone aderente (miniatura) ao passar o mouse sobre o título da opção de transformação para ativar a guia aderente. Em seguida, atualize as opções de transformação da seguinte maneira:
- Transformar e traduzir o eixo Y (desktop): 100%
- Transformar translação do eixo Y (aderente): 0%
Offset de posição
Eventualmente, teremos outra linha de stick para o primeiro e o último botões que ficarão no canto inferior direito da janela. Portanto, precisamos mover esta linha do stick para a esquerda.
Para mover a linha fixa, vá para a guia avançada e atualize as opções de deslocamento de posição da seguinte forma:
- Origem do deslocamento: canto superior direito
- Deslocamento horizontal: 25vw (desktop, tablet), 0px (telefone)
Nota: O deslocamento no telefone é definido como 0 px porque o alinhamento da linha será definido à esquerda e a largura será de 50%.
CSS de coluna de linha fixa
Para garantir que nossos botões fiquem perfeitamente adjacentes um ao outro e alinhados verticalmente, vamos adicionar um pequeno trecho de CSS personalizado para colocar os botões em um layout de grade CSS.
Na guia avançada, adicione o seguinte CSS ao elemento principal:
display:grid; grid-template-columns:50% 50%;
Adicionando divisor e botão próximo à linha fixa (seção 1)
Agora é hora de começar a adicionar nossos botões à coluna. Para esta primeira seção, precisamos apenas de um botão Next. Portanto, precisamos de um divisor para servir de espaço reservado para o botão esquerdo.
Divisor
Adicione um novo divisor à coluna.
Em seguida, defina a opção Mostrar divisor para “NÃO”.
Próximo botão
No módulo divisor, adicione um módulo de botão.
Em seguida, atualize as configurações de conteúdo do botão:
- Texto do botão: Próximo
- URL do link do botão: #two
O URL “#two” saltará para a próxima seção que criaremos com o ID CSS “dois”.
Na guia de design, atualize o seguinte:
- Alinhamento do botão: centro
- Use estilos personalizados para botão: SIM
- Tamanho do texto do botão: 2.1vw (desktop, tablet), 16.1px (telefone)
- Cor do texto do botão: # 000000
- Fundo do botão: #eeeeee
- Largura da borda do botão: 0 px
- Ícone do botão: seta para baixo (veja a imagem)
- Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
- Margem: 2% certo
Para garantir que o botão ocupe toda a largura da coluna da grade CSS, adicione o seguinte CSS personalizado ao elemento principal:
display:block !important; width: 100%;
Criação da seção 2
Agora que terminamos a Seção 1, duplique a Seção 1 para criar a Seção 2 e atualize o rótulo na visualização de camadas de acordo.
Atualize a cor de fundo da seção 2 e o texto do título
Em seguida, atualize a cor de fundo da seção:
- Cor de fundo: # 8dc6c1
Em seguida, atualize o texto do título para ler “Seção 2” no módulo de texto da linha superior.
Atualizar ID CSS da seção 2
Na guia avançada, atualize a seção com um novo ID CSS:
- ID CSS: dois
Adicionar os botões seguinte e anterior à linha fixa (seção 2)
Dentro da linha pegajosa da Seção 2, exclua o módulo divisor e duplique o botão Avançar para que você tenha dois botões.
Atualizar URL do link do botão seguinte
Abra as configurações do botão Avançar primeiro / esquerdo e atualize o link do botão da seguinte forma:
- URL do link do botão: #three
O URL “#três” saltará para a próxima seção que criaremos com o ID CSS “três”.
Adicionar texto do botão anterior e URL do link
Para tornar o botão Anterior, abra as configurações do segundo botão / direito e atualize o seguinte:
- Texto do botão: Anterior
- URL do link do botão: #one
O URL “#um” voltará para a seção com o ID CSS “um”.
Adicionar ícone de botão anterior
Em seguida, atualize o ícone:
- Ícone do botão: seta para cima (veja a imagem)
Seção de criação 3
Agora que terminamos a Seção 2, duplique a Seção 2 para criar a Seção 3 e atualize o rótulo na visualização de camadas de acordo.
Atualize a cor de fundo e o texto do título da seção 3
Adicione uma nova cor de fundo à seção:
- Cor de fundo: # 9fa5f4
Em seguida, atualize o texto do título para ler “Seção 3” no módulo de texto da linha superior.
Atualizar a seção 3 CSS ID
Na guia avançada, atualize a seção com um novo ID CSS:
- ID CSS: três
Adicionar divisor e botão anterior à linha fixa (seção 3)
Botão Adicionar Divisor e Excluir Próximo
Poderíamos continuar e criar quantas seções fossem necessárias para incluir os botões Próximo e Anterior. Mas, para este exemplo, faremos da Seção 3 a última seção com Links de navegação.
Portanto, como não precisaremos de um botão Próximo, exclua o botão Próximo e substitua-o por um divisor como fizemos na Seção 1.
Atualizar URL do link do botão anterior
Em seguida, abra as configurações do botão Anterior e atualize o URL do link:
- URL do link do botão: #two
O URL “#two” saltará de volta para a seção com o ID CSS “dois”.
Criando a Seção Inferior
Agora que as 3 seções estão completas com sua navegação de linha fixa e funcionalidade de link de âncora, criaremos uma seção inferior que servirá como uma seção da página que não inclui a navegação fixa Próximo / Anterior. Isso é para demonstrar se há seções adicionais na página que não precisam de navegação fixa.
Para criar a seção inferior, simplesmente duplique a seção superior e arraste-a para baixo da seção 3.
Em seguida, atualize o texto do título para ler “Inferior”.
Criando a seção inferior aderente
Para a nossa última etapa, precisamos criar uma seção fixa que se fixará na parte inferior da página e conterá nossos links de primeira e última navegação (âncora). Esta seção deve estar na parte inferior da página se você deseja que os links de navegação apareçam em todas as seções da página durante a rolagem.
Na seção inferior, crie uma nova seção regular.
Em seguida, atualize a etiqueta da seção na visualização de camadas de acordo (ou seja, "Seção inferior aderente").
Criando linha para primeiro e último links de navegação
Para adicionar mais funcionalidade de navegação à nossa página de seções, criaremos dois botões adicionais (ou links de âncora) que saltarão para a primeira (seção 1) e a última (seção 3) seções da página.
Duplique a linha aderente na seção 2 e arraste-a para a seção inferior aderente
Para criar a linha para nossos links de navegação Primeiro e Último, podemos duplicar a linha fixa (linha 2) da Seção 2 e arrastá-la para a nova Seção inferior adesiva.
Atualizar configurações de linha
Para esta última seção, vamos tornar a seção inteira fixa para que possamos retirar as configurações fixas herdadas de nossas configurações de linha duplicadas e dar a ela uma posição absoluta.
Abra as configurações de linha e atualize o seguinte:
Em seguida, atualize as opções de posição da seguinte forma:
- Posição: Absoluta
- Localização: canto inferior direito
- Deslocamento horizontal: 0px
- Posição pegajosa: não grude
Na guia de design, redefina as opções de transformação para a linha.
Adicionar o primeiro e o último botões para a seção inferior aderente
Para criar o primeiro botão, abra as configurações do botão à esquerda e atualize o seguinte:
- Texto do botão: primeiro
- URL do link do botão: #one
Em seguida, atualize o ícone do botão para uma seta para cima diferente.
Para criar o botão Último, abra as configurações do botão à direita e atualize o seguinte:
- Texto do botão: último
- URL do link do botão: #three
Em seguida, atualize o ícone do botão para uma seta para baixo diferente.
Atualizar as configurações da seção para a seção inferior aderente
Em seguida, abra a configuração da seção e atualize o seguinte:
- Largura: 100%;
- Altura: 0px;
- Preenchimento: 0 px superior, 0 px à direita
Isso basicamente garante que a seção não ocupe nenhum espaço real na página. Mas, como a linha tem uma posição absoluta, ela ainda será exibida acima da seção.
Por último, na guia avançado, atualize o seguinte:
- Excesso vertical: visível
- Excesso horizontal: visível
- Posição pegajosa: grudar no fundo
- Limite de aderência superior: área corporal
- Compensação dos elementos aderentes circundantes: NÃO
Resultado final
Observe como os links de navegação aderentes mudam ao rolar a página para baixo.
Observe como é fácil navegar para cada seção clicando nos links de navegação.
E aqui está como o design fica no celular.
Pensamentos finais
Os links de navegação de página pegajosa que construímos neste tutorial devem ser úteis para aqueles que procuram uma alternativa eficaz para a rolagem tradicional ou incluindo links de âncora em seu cabeçalho global. E você pode duplicar facilmente as seções e atualizar os links de âncora (e os IDs CSS correspondentes para cada seção) para criar mais conteúdo.
Para obter melhores resultados, cada seção deve ter conteúdo suficiente para se estender além da altura do navegador. Caso contrário, esses links de âncora podem não se tornar fixos (ou visíveis). Uma maneira fácil de garantir que isso aconteça é dar a cada uma de suas seções uma altura mínima de 100vh. Se você não gostar disso, você sempre pode escolher se livrar da opção transform translate sticky para cada uma das linhas sticky para que os botões permaneçam visíveis.
Estou ansioso para ouvir de você nos comentários.
Saúde!