Como construir uma barra lateral fixa responsiva com links âncora de rolagem suave com Divi

As barras laterais não são tão populares como costumavam ser. Em muitos casos, eles acabam sendo mais perturbadores do que úteis. Mas às vezes uma barra lateral faz todo o sentido, especialmente ao lidar com conteúdo extenso. É por isso que me propus a criar uma barra lateral que faça muito sentido.

Hoje estou mostrando como você pode usar o Divi Builder para criar uma barra lateral fixa responsiva (ou pegajosa) com links de âncora de rolagem suave (ou links de salto). Como a barra lateral permanece visível e os links âncora rolam suavemente para diferentes seções da página, a barra lateral permanece ligada ao conteúdo, tornando-se um recurso de experiência do usuário útil. Como o esboço de um documento, essa combinação torna o conteúdo da página da web mais acessível e fácil de ler. É uma solução refrescante para aquelas páginas de rolagem longa.

Confira!

Espiada

Aqui está uma prévia do que estaremos construindo juntos.

O conceito

Para aqueles de vocês que vivem no Google Docs tanto quanto eu, estão cientes dessa ferramenta útil de esboço de documento que permite implementar facilmente uma barra lateral fixa com um contorno clicável que salta para os diferentes cabeçalhos do seu documento. Eu adoro porque me ajuda a encontrar informações com muito mais rapidez. Achei que seria legal trazer esse mesmo recurso para o seu site.

O que você precisa para começar

Para este tutorial, tudo o que você realmente precisa é Divi! Também usaremos a Página de Receitas do Pacote de Layout de Receitas de Alimentos, que pode ser acessada gratuitamente no Divi Builder.

Adicionando o Layout à sua Página

Inscreva-se no nosso canal no Youtube

Para começar, vá em frente e crie uma nova página e implante o Divi Builder. Selecione a opção “Choose a Premade Layout”. No pop-up Carregar da Biblioteca, selecione o Pacote de Layout de Receitas de Alimentos e clique para usar a Página de Receitas.

Depois que o layout for carregado, clique para construir no front end.

Criação de uma nova seção

No Divi Builder frontal, crie uma nova seção e arraste-a para o topo do layout.

Copie o botão na seção de cabeçalho do layout e cole-o na linha de uma coluna da nova seção que você criou.

Abra as configurações do botão e adicione o seguinte CSS personalizado ao elemento principal na guia avançada:

display: block !important;

Isso simplesmente permite que o botão ocupe toda a largura da coluna.

Altere o texto do botão para ler “Introdução”. Em seguida, adicione o seguinte para o URL do link do botão:

#introdução

É assim que você cria um link de âncora. A hashtag (#) informa ao navegador que você criará um link para um ID CSS. O seguinte texto “introdução” corresponderá ao nome do CSS ID que adicionaremos a uma de nossas seções no layout. O nome do ID CSS pode ser o que você quiser. Apenas certifique-se de que corresponda ao ID CSS fornecido à seção posteriormente.

Duplique o botão e repita o processo de dar ao botão um novo Texto de Botão e um novo URL de Link de Botão. Visto que este será um link de âncora que salta para uma seção diferente da página, certifique-se de que o ID CSS (o texto após o “#”) seja exclusivo e corresponda ao nome que você dará à sua seção mais tarde.

Para este botão, altere o texto do botão para “Ingredientes” e o link do botão URL para “#ingredientes”.

Duplique o botão novamente e, em seguida, dê ao novo botão o texto do botão “Nutrição” e altere o URL do link do botão para “#nutrição”.

Duplique o botão mais uma vez e, em seguida, atribua ao novo botão o texto do botão “Instruções” e altere o URL do link do botão para “# instruções”.

É tudo o que precisamos fazer por enquanto. Vamos circular de volta para esta seção e transformá-la em uma barra lateral fixa em breve.

Adicionando os IDs CSS às Seções e Linhas

Agora que temos todos os nossos botões criados com os links de âncora no lugar, estamos prontos para adicionar os nomes de ID CSS correspondentes às nossas seções e linhas.

Os links de âncora saltarão automaticamente para qualquer elemento na página com o ID CSS correspondente. Um CSS ID pode ser aplicado a texto embutido, módulos, linhas ou seções. Se você quisesse adicionar um ID CSS ao título usando HTML, seria algo assim:

<h2 id="introduction">Introduction</h2>

No entanto, como queremos pular para uma seção da página, podemos adicionar o ID CSS à seção específica da página. Isso fornecerá ao usuário um espaço de visualização confortável o suficiente para que o visitante possa reconhecer facilmente onde está na página. Saltar para um texto embutido ou para um módulo pode causar confusão para o visitante.

Conforme abordamos anteriormente, cada um dos URLs de botão que criamos deve corresponder aos IDs CSS das seções para as quais eles precisam saltar.

Para o botão “Introdução”, precisamos adicionar o CSS ID à seção da página que contém o conteúdo da introdução. Para fazer isso, abra as configurações de seção da terceira seção da página (a seção diretamente sob o cabeçalho) e adicione o seguinte ID CSS na guia avançada:

CSS ID: introdução

Isso corresponderá ao botão do link âncora de introdução que criamos anteriormente.

Agora, na mesma seção, encontre a linha que contém o título “Ingredientes”. Em seguida, abra as configurações de linha e adicione o seguinte ID CSS:

ID CSS: ingredientes

Isso corresponderá ao botão de link de âncora de Ingredientes que criamos anteriormente.

Role para baixo até a próxima seção com o título “Nutrição” e abra as configurações da seção. Em seguida, adicione o seguinte ID CSS:

ID CSS: nutrição

Isso corresponderá ao botão de link de âncora de nutrição que criamos anteriormente.

Finalmente, role para baixo até a próxima seção do layout com o título “Instruções passo a passo”. Em seguida, abra as configurações da seção e adicione o seguinte ID CSS na guia avançada:

ID CSS: instruções

Isso corresponderá ao botão de link de âncora de instruções que criamos anteriormente.

Salve suas alterações.

Agora é um bom momento para ver se seus links âncora estão funcionando. Abra a página em uma nova guia e clique nos botões na seção superior para garantir que eles saltem / rolem para os locais correspondentes na página.

Se eles não estiverem funcionando, volte e verifique se os IDs CSS estão corretos e se correspondem.

Criação do layout fixo da barra lateral

Adicionando Margens Esquerdas às Seções para Criar Espaço para a Barra Lateral

Ter links de âncora no topo da página é bom para coisas como um índice analítico. Mas, para este caso de uso, queremos manter esses links âncora visíveis para o usuário o tempo todo, para que ele não precise rolar de volta para o topo da página depois de clicar em um dos links. Uma barra lateral fixa resolverá esse problema, pois permanecerá fixa na lateral da página conforme o usuário clica nos links de âncora.

Mas antes de posicionar a barra lateral, precisamos criar algum espaço para ela no lado esquerdo de nossa página. Para fazer isso, adicionaremos uma margem esquerda a cada seção do layout.

A quantidade de margem esquerda que adicionarmos a cada seção será igual à largura da barra lateral, então agora é a hora de decidir o quão larga você deseja que a barra lateral seja. Para este exemplo, uma largura de 20% será suficiente.

Abra as configurações da segunda seção (aquela diretamente abaixo de nossos botões de link de âncora) e adicione a seguinte margem personalizada:

Margem personalizada: 20% restantes

Agora, antes de salvar as configurações, clique com o botão direito na opção Margem Personalizada e clique em “Copiar Margem Personalizada” e salve as configurações.

Em cada uma das seções restantes em seu layout de página, cole a margem personalizada na seção clicando com o botão direito do mouse na seção e clicando em “Colar Margem Personalizada”.

Isso dará uma margem esquerda de 20% para todas as suas seções, exceto a seção superior que contém os botões de link de âncora.

Criação da barra lateral fixa

Para criar a barra lateral, precisaremos dar a ela uma posição fixa à esquerda da página. Então, basicamente, transformaremos a seção superior em uma barra lateral fixa. Para fazer isso, abra as configurações da seção superior e atualize o seguinte:

Na guia Design, atualize a altura e a largura ...

Largura: 20%
Altura: 100%

Na guia Avançado, atualize a posição ...

Posição: fixa
Deslocamento vertical: 80px

Isso dá à seção uma posição fixa com uma largura de 20% da página. Ele também posiciona a seção à esquerda da página e 80px da parte superior da página para acomodar a altura da navegação do cabeçalho. A altura de 100% garante que a seção ocupe toda a altura da página.

Agora visualize a página em outra guia do navegador para ver a funcionalidade. Conforme você rola a página para baixo, a barra lateral permanece fixa e você pode clicar nos botões do link de âncora para navegar para as diferentes seções com facilidade.

Corrigindo a sobreposição do rodapé

Você deve ter notado que a seção está se sobrepondo à barra de rodapé inferior na parte inferior da página.

Existem algumas maneiras de resolver esse problema. Por exemplo, eu poderia retirar “altura: 100%” da seção ou você poderia adicionar algum CSS às configurações da página para ajustar a largura da barra de rodapé. Mas se você quiser manter a altura da seção em 100%, uma solução fácil é remover a cor de fundo da seção. Abra as configurações da seção que estamos usando para a barra lateral e adicione a seguinte cor de fundo:

Cor de fundo: rgba (255,255,255,0)

Se você deseja alterar a cor da barra lateral, pode abrir as configurações da página e alterar a cor de fundo da área de conteúdo.

Como a cor de fundo da seção é transparente, a cor de fundo da área de conteúdo de sua página se destaca. E como todas as nossas outras seções têm cor de fundo, ela só será exibida na seção da barra lateral, sem sobrepor a barra de rodapé inferior.

Fazendo ajustes para celular

Esse design realmente não faz sentido para smartphones porque não há espaço para uma barra lateral e ter os links no topo da página exigirá que o usuário role para cima sempre que quiser clicar em um link de âncora. Mas o design ainda funcionará para tablet, mas pode ser necessário criar um pouco mais de espaço para esses links de âncora. Para fazer isso, abra as configurações de linha para a linha da barra lateral da seção e atualize o seguinte:

Largura personalizada: 100
Preenchimento personalizado (desktop): 10% à esquerda, 10% à direita
Preenchimento personalizado (tablet): 0% à esquerda, 0% à direita

Agora tudo o que precisamos fazer é ocultar (ou desabilitar) a seção no smartphone. Para fazer isso, abra as configurações da seção e vá para a guia avançado e clique na caixa de seleção para desativar no smartphone.

É isso. Agora você tem um menu de barra lateral fixo responsivo com links de âncora de rolagem suave!

O Resultado Final

Agora vamos verificar o resultado final.

E aqui está a aparência do layout no tablet.

Saiba mais sobre elementos fixos e links âncora

Se você achou este tutorial útil, verifique alguns de nossos tutoriais relacionados abaixo:

• 5 coisas legais que você pode fazer no Divi com links de âncora
• Como tornar qualquer elemento da página Divi aderente
• Como adicionar widgets fixos à sua barra lateral no WordPress
• Como fazer sua navegação Divi começar na parte inferior e, em seguida, permanecer fixo no topo ao rolar
• Como corrigir o rodapé do Divi
• Como criar um menu pop-out flutuante no Divi

Pensamentos finais

A beleza dessa configuração é que você pode adicionar facilmente barras laterais fixas a qualquer página com links de âncora diferentes (ou qualquer coisa que desejar). Como sua barra lateral é basicamente uma seção Divi, você pode personalizá-la usando as configurações embutidas, adicionar mais linhas e usar qualquer combinação de módulos que desejar.

Essa configuração seria ótima para cursos de adesão, tutoriais, perguntas frequentes, portfólios ou longas postagens de blog. Você pode até mesmo usá-lo para sites de uma página também. Você tem outros usos para compartilhar? Estou interessado em saber o que estão nos comentários.

Saúde!