3 maneiras fáceis de adicionar scripts ao site Elementor (um guia completo)
Publicados: 2022-12-14Às vezes, você precisa adicionar diferentes ferramentas e serviços ao seu site Elementor usando JavaScript. Ou você pode querer implementar a funcionalidade JavaScript personalizada em seu site para destacá-lo mais.
Mas como você faz isso? Como você pode adicionar JavaScript ao Elementor?
Vou te mostrar como neste post.
Se você deseja adicionar um script pronto ou adicionar código JavaScript personalizado ao Elementor, é mais fácil do que você imagina.
Neste artigo, compartilharei três métodos para adicionar scripts no Elementor.
- Quando você precisa adicionar JavaScript aos sites da Elementor?
- Como adicionar script no Elementor (3 maneiras simples)
- Perguntas frequentes sobre como adicionar scripts no Elementor
- Empacotando
Quando você precisa adicionar JavaScript aos sites da Elementor?
JavaScript é uma linguagem de programação executada no navegador do cliente. Com esta linguagem de script popular, você pode adicionar funcionalidades e recursos avançados ilimitados ao seu site.
O Elementor oferece a opção de simplificar o design do site. Mas quando você quiser adicionar um recurso funcional como uma calculadora, animações e outras coisas legais, você pode usar o Javascript.
Ao adicionar determinadas funcionalidades interativas, pode ser necessário adicionar bibliotecas ou estruturas JavaScript de terceiros ao site da Elementor.
Se você deseja ativar o Google Analytics, AdSense, Gerenciador de tags e outros serviços, precisará adicionar a tag de script de ativação à área de cabeçalho ou rodapé do site.
Como adicionar script no Elementor (3 maneiras simples)
Agora chegamos à parte principal deste artigo, como adicionar JavaScript no Elementor.
Confira os 3 métodos a seguir:
- Widget HTML Elementor
- Recurso de código personalizado do Elementor Pro
- Use um plug-in gratuito
Vamos começar.
Método 1: Elementor HTML Widget
Abra a página no painel do editor Elementor.
Aqui, vamos implementar um recurso de rolagem para cima usando código JavaScript personalizado.
Adicionei um botão simples e defini um ID de botão CSS ' back-to-top '. Tratarei da funcionalidade usando esse ID de botão mais tarde.
Agora arraste e solte o widget HTML em qualquer lugar da sua página.
Adicione seu código JavaScript dentro da área de conteúdo. Eu adicionei o meu.
<script> let mybutton = document.getElementById("back-to-top"); window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { mybutton.style.display = "block"; } else { mybutton.style.display = "none"; } } mybutton.addEventListener("click", scrollToTop); function scrollToTop() { window.scrollTo({ top: 0, behavior: "smooth" }); </script>Certifique-se de agrupar todo o código com a tag HTML <script></ script> . Coloque o ID do botão onde deseja acioná-lo.
Por fim, clique no botão verde Atualizar para salvar as alterações atuais.
Visite o site para ver se tudo funciona corretamente ou não.
Aí está! Você implementou um recurso interessante em seu site Elementor com JavaScript personalizado!
Método 2: recurso de código personalizado do Elementor Pro
O widget Elementor HTML oferece a opção de adicionar código JavaScript ou HTML bruto ao seu site Elementor.
Mas o recurso de código personalizado Elementor vem com mais possibilidades. Você pode usá-lo para adicionar tags de script à área de cabeçalho e rodapé do site.
Navegue até Elementor > Código personalizado .
Agora, escreva o título do seu código e cole-o. Você pode definir o local do código onde ele adicionará <head> , <body> start e </body> end .
Além disso, defina a prioridade de 1 a 10 . Um número menor significa maior prioridade.
Se você definiu a prioridade 1, o script será renderizado primeiro quando um usuário visitar seu site.
Agora, defina a condição na lista suspensa e pressione o botão Salvar .
Dê um cheque. Ele deve exibir exatamente como você planejou.
Método 3: Use um Plugin Gratuito
WPCode é um plug-in gratuito que permite adicionar código personalizado e tags de script à área de cabeçalho e rodapé do seu site. Ele vem com uma biblioteca útil com muitos trechos de código pré-fabricados que você pode adicionar ao seu site.
Vamos adicionar alguns scripts ao rodapé do nosso site Elementor.
Primeiro, instale o plug-in em seu site.
Em seguida, vá para Code Snippets > Header & Footer .
Agora, adicione a tag de script ao local adequado. Você pode adicioná-lo à área de cabeçalho, corpo e rodapé.
Adicionamos dois scripts de biblioteca de terceiros à seção de rodapés.
Por fim, pressione o botão Salvar alterações .
Agora, acesse seu site e verifique se o script funciona.
Perguntas frequentes sobre como adicionar scripts no Elementor
Vamos obter as respostas para perguntas comuns que as pessoas costumam fazer sobre como adicionar JavaScript às páginas do Elementor.
Posso adicionar scripts ao meu site Elementor gratuitamente?
Sim, você pode adicionar código JavaScript ao Elementor gratuitamente. Mas, para adicionar uma tag de script à área de cabeçalho ou rodapé do site, você precisa usar o recurso Elementor Custom Code que vem apenas com a versão premium.
Como adicionar HTML, CSS e JavaScript ao Elementor?
Você pode usar o widget Elementor HTML para adicionar HTML e JavaScript ao Elementor. Para adicionar código CSS personalizado, navegue até Avançado > CSS personalizado e escreva seu código.
O código JavaScript personalizado pode quebrar o design do meu site?
Na verdade, não! Mas se você não sabe como o JavaScript funciona, pode haver uma chance para isso. Recomendamos testá-lo em um site de teste primeiro. Se tudo funcionar, você pode adicioná-lo ao site ativo.
Empacotando
Adicionar JavaScript personalizado a um site da Elementor é fácil quando você sabe como. Se você deseja adicionar efeitos de imagem legais ou implementar um recurso exclusivo que seu tema WordPress ou Elementor não permite. Aqui, o JavaScript personalizado funciona como um super-herói.
Você pode fazer uma melhor personalização com JavaScript e tornar seu site mais atraente para os visitantes.
Neste guia, compartilhei 3 maneiras de adicionar scripts no site da Elementor.
Espero que goste deste artigo e obtenha a solução que procura.
Junte-se à minha newsletter para obter dicas e truques mais úteis como este. Compartilhe o post para que outras pessoas também possam aprender.
Tenha um ótimo dia!