Adicionar JavaScript personalizado no Elementor: Página e Elemento Nível JS
A extensão Custom JS, parte do Master Addons Pro, oferece um campo JavaScript dentro do Elementor. Adicione código a uma página inteira a partir de Configurações de página ou anexe-o a um único widget, seção ou contêiner a partir de sua guia Avançado. Use-o para pequenas interações, ajustes de formulário ou rastreamento de eventos sem editar arquivos de tema ou preencher scripts em um widget HTML.
Um espaço de código dedicado para cada página
Pare de preencher scripts em widgets HTML ou espalhá-los em arquivos globais Esta extensão adiciona um campo dedicado Custom JS no Page Settings > Advanced tab. Qualquer código que você escrever aqui é executado apenas nesta página ou postagem específica É a maneira organizada de lidar com scripts pontuais, rastreamento de teste A/B ou elementos interativos exclusivos.
- Separação limpa: mantenha os scripts específicos da página isolados do código de todo o site Sem risco de quebrar outras páginas.
- Fácil acesso: Encontre seu código instantaneamente na página sem pesquisar no Painel Widgets.
- Melhores práticas integradas: o campo lida automaticamente
$(document).ready()para você, assim você pode escrever sua lógica do núcleo diretamente.
JavaScript em nível de página e elemento
O código no nível da página vive em Configurações de página, JS avançado, personalizado e é executado apenas nessa página O código no nível do elemento vive na guia Avançado de qualquer widget, coluna, seção ou contêiner No código no nível do elemento, a palavra selector é trocado pela classe CSS desse elemento, portanto o script toca apenas nesse elemento.
- Não <script> tags e nenhum wrapper pronto para documentos: o código está embrulhado
jQuery(document).readypara você, e$obras. - Os scripts são impressos no rodapé da página, após o carregamento do conteúdo.
- O código é executado na página ao vivo, não dentro da visualização do editor do Elementor, portanto, verifique a página publicada após salvar.
- Cada instância do seletor de palavras é substituída no código de nível de elemento Usar
$('selector')em vez dedocument.querySelectorali.
Como adicionar JavaScript personalizado no Elementor
Essas etapas assumem que o Master Addons Pro está ativo e sua função WordPress pode publicar HTML não filtrado, que os administradores podem por padrão.
- No seu painel, vá para Complementos Mestres, abra a guia Extensões, ligue o Custom JS e salve.
- Edite a página com Elementor.
- Para toda a página, abra Configurações de página, depois Avançado e depois Personalizado JS. Para um elemento, selecione-o e abra sua guia Avançado.
- Cole seu código sem tags <script>.
- Atualize a página e teste-a no URL ao vivo.
Três exemplos JS personalizados Elementor
Cole qualquer um deles em um campo JS personalizado e altere os nomes das classes para corresponder à sua página.
1. adicione uma classe ao cabeçalho após a rolagem (nível da página)
$(window).on('scroll', function () {
$('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});2. alternar uma classe quando um elemento é clicado (nível do elemento)
$('selector').on('click', function () {
$(this).toggleClass('is-open');
});3. Envie um evento do Google Analytics quando um botão for clicado (nível da página)
$('.cta-button a').on('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'cta_click', { location: 'pricing' });
}
});Formas de adicionar JavaScript no Elementor comparadas
Existem três rotas comuns A direita depende de onde o script precisa ser executado Se você também precisa de estilos com escopo para um elemento, o gratuito Extensão CSS personalizada funciona da mesma maneira.
| Widget HTML | Código personalizado Elementor Pro | Adições Mestres Personalizadas JS | |
|---|---|---|---|
| Plano | Elementor Livre | Elementor Pro | Master Addons Pro |
| Escopo | A página em que o widget se senta | Em todo o local, com condições de exibição | Uma página ou um elemento |
| Onde você escreve | Dentro de um widget na tela | Uma tela de código personalizado no painel | Configurações de página ou guia Avançado do elemento |
| Tags de script | Necessário | Necessário | Não necessário |
| Alvo um elemento | Escreva você mesmo o seletor | Escreva você mesmo o seletor | Usar a palavra - chave do selector |
Perguntas frequentes para JS personalizado
Quando devo usar isso em vez de um widget HTML ou as funções do meu tema.php?
Use-o para scripts que pertencem a uma página ou um elemento, como uma calculadora, um efeito de rolagem ou um evento de clique Para o código que cada página precisa, uma opção em todo o site, como seu tema ou um plugin de trechos de código, é uma casa melhor. O widget HTML também funciona, mas os scripts acabam espalhados pela tela e são fáceis de perder mais tarde.
O código é minificado ou otimizado para desempenho?
Não. O código é adicionado à medida que você o escreve, portanto, mantenha-o curto e arrumado A única alteração que o Master Addons faz é trocar a palavra-chave do seletor no código de nível de elemento pela classe CSS desse elemento.
O que acontece se EU escrever JavaScript quebrado? vai quebrar toda a minha página?
Pode. um erro de sintaxe pode impedir a execução de outros scripts nessa página Teste o código no console do navegador primeiro e tente em um site de preparação se a página for importante.
Posso usar isso com dados dinâmicos ou variáveis do Elementor?
Diretamente, não dentro do campo JS em si No entanto, você pode escrever JavaScript que interage com elementos na página que são preenchidos por dados dinâmicos Por exemplo, você poderia escrever um script que lê texto de um cabeçalho preenchido dinamicamente Você usaria seletores JavaScript normais para direcionar esses elementos.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
