Nesta guia, vamos ver como você pode criar um link âncora com scroll através da plataforma FRAMEWORK360.
O que é um link âncora com scroll?
Os links âncora com scroll são links, itens, presentes na página ou dentro do menu que, quando clicados, fazem um scroll descendo até uma seção específica.
Agora vamos ver em poucos passos simples como criar seus links âncora com a plataforma FRAMEWORK360.
Passo 1: Adicionamos um menu dentro da página
A primeira coisa a fazer será inserir um menu dentro da página que podemos preencher com itens que, quando clicados, farão a página descer até a seção que desejamos visualizar.
Por exemplo, poderíamos criar um Cabeçalho, ou seja, uma seção que queremos repetir em todas as páginas do nosso site.
Para criar nosso Cabeçalho, devemos ir ao menu principal do FRAMEWORK360 e acessar os seguintes itens:
Conteúdos > Blocos Globais
Dentro da entrada Blocos Globais vamos criar um bloco selecionando o tipo de bloco Cabeçalho como mostrado na figura:
Bem, agora criamos nosso Cabeçalho, só nos resta adicionar nosso menu dentro do Cabeçalho criado.
Primeiro, devemos clicar na opção Arraste um conteúdo presente no nosso Cabeçalho.
Agora nos aparecerá a tela onde podemos escolher o bloco a inserir, nós escolheremos o bloco Navbar e o arrastaremos para dentro.
Uma vez arrastado o bloco Navbar iremos selecionar o menu, previamente criado, para inserir dentro do bloco.
Passo 2: Vamos adicionar os itens dentro do nosso menu
Para adicionar os itens dentro do nosso menu, devemos acessar o item Menu do menu principal da plataforma FRAMEWORK360 e acessar o menu que temos na etapa anterior selecionado dentro da Navbar.
Bem, agora estamos dentro do menu que queremos popular. Agora vamos inserir dentro do menu nossos links âncora.
IMPORTANTE!
Na criação do link âncora, nos é solicitado inserir um link (como mostrado na figura), aqui devemos inserir o link da seção para a qual o link deve nos levar, o link deve ser precedido pela inserção do #.
A escolha do nome que compõe o link é ao nosso critério, no nosso exemplo usamos o seguinte link: #seção-1.
Lembre-se do link que você está inserindo pois esse link será útil novamente na próxima etapa!
Uma vez inseridos todos os links âncora de que precisamos, não nos resta mais nada a fazer a não ser salvar.
Passo 3: Conectamos o link âncora à seção
Uma vez criado nosso link, para completar o processo devemos garantir que, no momento em que se clica no link, a página role até chegar à seção desejada.
Para isso, devemos ir até a página e clicar na rodinha da linha da seção que queremos conectar ao nosso link âncora, como mostrado na figura:
Agora entramos no menu que nos permitirá modificar a linha que selecionamos. Devemos ir para a seção Design, uma vez dentro da seção Design descemos no menu até Atributos donde encontraremos a opção ID Elemento. Recapitulando, você deverá seguir os seguintes passos:
Design > Atributos > ID Elemento
A este ponto precisamos inserir dentro da opção ID Elemento o mesmo link que no passo anterior inserimos para a criação do Anchor link, também neste caso o link deve ser precedido pelo #. No nosso exemplo lembramos que o link era o seguinte: #seção-1.
Agora o jogo é feito!
Criamos o nosso link de âncora para rolagem, portanto, sempre que clicarmos no link presente no cabeçalho, a página fará uma rolagem até a seção desejada.
