Você já ouviu falar em uso de Ancora em site?
Iremos falar sobre Ancora, o que é, e Como é simples de Fazer Botão, link e Menu Ancoras em site.
Não Aperte os botões agora…
Só depois.. em um teste que fizemos lá em baixo.
Cabeças de âncora A – 01 Teste de Ancora A – 02
Sabe quando você esta em um site, e você clica em uma palavra ou botão, o site desce ou sobe, então, isso é chamado de Ancoras.
Acredito que você já usou em vários site, mais não sabe que o nome dessa ação, era chamada de Ancora.
Você sabe o que são ancoras em site?
Segundo algumas pesquisas sobre o termo irei mostrar o significado de Ancora.
Quais as suas funções e irei ensinar como criar Usando o Editor Clássico e também com o Elementor gratuito através do WordPress.
O que são âncoras?
Âncoras são marcadores de posição invisíveis que você pode colocar em qualquer lugar do seu site.
Você pode usá-las para direcionar seus visitantes para uma seção sobre um dos serviços que você oferece ou para a resposta no FAQ a uma questão frequente.
Há duas forma principais para usar as âncoras em seu site:
01. Criar links de um elemento a uma âncora:
Você pode criar uma âncora para qualquer elemento em seu site, como uma imagem, um botão ou uma linha de texto específica.
Após configurar a âncora, você pode criar um link para esta localização a partir de qualquer outro elemento em seu site.
Um visitante que clicar em algum desses elementos vai ser direcionado diretamente para a âncora em questão.
02. Criar um menu de âncoras:
Se você criou diversas âncoras em seu site, pode mostrar todas elas num menu flutuante.
Este menu segue seus visitantes à medida que estes rolam pela sua página, facilitando muito aos internautas a navegação em seu site.
Onde as âncoras podem ser usadas?
Você pode jogar uma âncora em praticamente qualquer local do seu site!
Coloque âncoras no cabeçalho ou rodapé, num parágrafo específico de sua página Sobre, num botão do PayPal para doações ou no histórico do seu CEO. As opções são ilimitadas!
Como criar uma Ancora usando o WordPress?
Irei te mostrar o passo passo, simples e fácil, de como incluir a ancora no Editor Clássicos e no Elementor Gratis. (mais fácil, se você tem habilidade com ele Editor).
Lembrando que você pode usar essa função em qualquer parte do site, em Menus, paginas ou post. Iremos ensinar através da Opção de Post, mais fique à-vontade em usar onde deseja:
Atenção. Abaixo é o passo a passo de como fazer Pelo Editor Clássico.
Se você preferi Editar com o Elementor, clica aqui!
Usando o Editor Clássico do WordPress:
Passo Com o Editor Clássico.
É preciso ter instalado no WordPress o Editor Clássico o Plugin TinyMCE Advanced:
Irei deixar a Foto de ambos a seguir, Se você não tiver os dois, adicione e instale ambos.
Agora com os Aplicativos instalados e ativados, Siga o passo a passo a Seguir:
Adicione um novo Post ou no post que você deseja inserir a função da ancora. No post Abra com o de Editor Clássico:
Entre os Menus, procure e selecione a opção Inserir e em seguida a opção Ancora. conforme a imagem abaixo:
Em seguida vai aparecer Um quadrado, com a Seguinte Informação
ID da Ancora, coloque ali o nome desejado:
Depois de colocar a ID da Ancora, você pode usar um botão ou uma palavra para direcionar a Ancora.
No nosso teste abaixo usamos um botão e um trecho de texto.
Ali no Id da Ancora usamos o Nome de (TestedeAncora01) tudo junto.
No Botão La em cima, no lugar do link, usamos o Ícone (#+TestedeAncora01) o nome da Ancora. (#TestedeAncora01).
Confira na imagem a seguir:
Fizemos um Exemplos a Baixo:
Faça você mesmo o Teste, Ao clicar nesse trecho Inicio Do Post você será direcionado para o começo desse post lá em cima Onde você leu
Não Aperte os botões agora… Só depois.. em um teste que fizemos lá em baixo.
E quando clicar no botão que esta escrito Teste da Ancora A – 01 você retornará para cá..
Faça o teste e veja que bacana.
Importante: As vezes é preciso ajustar a Ancora em locais acima do local desejado. Isso é bem relativo, depende muito do tamanho da letra que você usa, dos espaços entre as linhas o do tema que esta usando.
Cabeças de âncora A – 01
.
Agora Usando o Elementor no WordPress: Inicio
Aqui irei colocar um exemplo de uma pagina que fiz toda pelo Elementor. Modelador de Sobrancelha
Acredite se quiser, tem coisas que é bem mais fácil, fazer por ele.
Passo Com o Elementor.
Adicione um novo Post ou no post que você deseja inserir a função da Ancora.
No post Abra com a opção Editar com Elementor:
Monte sua estrutura e escolha onde colocar a Ancora.
Adicione uma Seção acima de onde você quer incluir a Ancora.
Procure na coluna da esquerda Menu Ancora. Conforme a foto.
Em seguida arraste para a seção que deseja.
Ao Arrastar o Icone Menu Ancora.
Vai abrir uma opção do ID Do link do Menu:
No Exemplo colocamos comprar
Agora vamos colocar o botão que vai levar até a ancora; Adicione um botão onde quiser
Com o mesmo nome que colocou na ancora, coloque no local do Link usando a #. Conforme a foto:
Salva e pronto.. Se quiser usar em texto, é só selecionar o texto, incluir link,
Usando sempre a (# + o nome da Ancora)
Teste de Ancora A – 02
Ficou com duvidas em algum passo ?
Me chama aqui ou no Whatsapp, que irei te ajudar.
( Post Sobre o uso de Ancora em Site do WordPress )
[su_button url=”https://whatsfacil.com/1e6967″ target=”blank” style=”3d” background=”#76e12b” color=”#ffffff” size=”10″ wide=”yes” icon_color=”#ffffff” text_shadow=”0px 0px 0px #ffffff”]WhatsApp[/su_button]
Ufa, acabamos mais um post..
Que vitória !
Acredito que dei o meu melhor mais uma vez..
Espero que esse post tenha te ajudado de alguma maneira
Conseguir te ajudar?
Fico super feliz com Isso!
Abraços e até mais..