OpenByt - A sua melhor fonte de conhecimento gratuito sobre WordPress

Elementor e JavaScript: Desenvolvimento avançado de sites dinâmicos

f Lin

Elementor is a famous page builder for WordPress, but by combining it with JavaScript, you can break through its basic functionality to create even more advanced interactivity and visual effects. This guide’ll explore combining Elementor with JavaScript to elevate your website development skills and create a dynamic, interactive user experience. This guide is aimed at developers with knowledge, including complex code examples and advanced techniques.

Começar a trabalhar

Let’s get started!

Passo 1: Integrar o JavaScript nas páginas do Elementor

Elementor doesn’t have a direct ‘Custom Code’ option to add JavaScript, but there are a few effective ways to do so.

  1. Utilizar o plug-in WPCode:
    • Instale o plug-in WPCode: Pode utilizar o Código WPC para adicionar JavaScript personalizado sem modificar o funções.php ficheiro.
      • Navegue até Plugins > Adicionar novo no painel de controlo do WordPress.
      • Procure por Código WPC e clique em Instale agora, então Ativar.
    • Adicione JavaScript usando WPCode:
      • Aceda a Trechos de código > Adicionar snippet no painel de controlo do WordPress.
      • Clique em Adicione o seu código personalizado (novo snippet) e selecione JavaScript como tipo de código.
      • Dê um nome ao seu snippet: Give your snippet a name that helps identify its purpose (e.g., “Page Load Animation Script”).
      • Insira o código JavaScript: Cole o seu código JavaScript no editor de snippets.
      • Escolha a colocação: Decida se quer carregar o guião no Cabeçalho ou Rodapé. Generally, it’s recommended to load scripts in the Rodapé para garantir que todos os elementos já estão carregados.
        • Carregar JavaScript no rodapé garante que todo o documento HTML é analisado e está disponível, reduzindo as hipóteses de encontrar erros devido à tentativa de interagir com elementos que ainda não estão presentes na página.
      • Definir regras de inserção: Especifique onde o script deve ser executado (por exemplo, todo o site ou páginas específicas).
      • Envolva o JavaScript em DOMContentLoaded: Certifique-se de que o código é executado depois de a página ter sido carregada para evitar erros.
        • This ensures that all page elements are available, preventing errors caused by attempting to manipulate elements that haven’t loaded.
    Exemplo:
document.addEventListener("DOMContentLoaded", function() {
console.log("O JavaScript está sendo executado depois que a página foi carregada");
});

Este script simples confirma que o seu JavaScript está a ser executado corretamente após o carregamento da página.

Utilizar o widget HTML no Elementor:

Exemplo:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    console.log("Inline JavaScript via HTML widget");
  });
</script>

Este método é útil quando pretende que o JavaScript seja executado apenas numa determinada secção da página, dando-lhe mais controlo sobre a funcionalidade.

Passo 2: Adicionar interatividade dinâmica com JavaScript

Depois de integrar o JavaScript, pode começar a adicionar alguns efeitos dinâmicos, tais como cliques em botões e efeitos de pairar.

  1. Adicionar uma animação de clique de botão:
    • Crie um botão interativo: Adicione um elemento de botão utilizando o Elementor e atribua-lhe uma classe para segmentação (por exemplo, botão animado).
    • Adicione JavaScript para lidar com eventos de clique: Utilize JavaScript para implementar uma animação de clique simples, como redimensionar o botão ou alterar a sua cor.
    Exemplo:
document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".animated-button");
  se (botão) {
    button.addEventListener("click", function() {
      button.style.transform = "scale(1.2)";
      button.style.backgroundColor = "#ff6347"; // Altere a cor para tomate
      setTimeout(() => {
        button.style.transform = "scale(1)";
        button.style.backgroundColor = ""; // Reverta a cor
      }, 300);
    });
  }
});

Exemplo pormenorizado: Suponha que adiciona um botão com a classe botão animado na sua página Elementor. Com o código acima, ao clicar no botão, irá criar um breve efeito de ampliação e mudança de cor, tornando-o visualmente mais interessante para os utilizadores.

Adicionar um efeito Hover a uma grelha de imagens:

Exemplo:

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".image-grid-item").forEach(item => {
    item.addEventListener("mouseenter", () => {
      item.style.opacity = "0.7";
      item.style.transition = "opacity 0.3s ease-in-out";
    });
    item.addEventListener("mouseleave", () => {
      item.style.opacity = "1";
    });
  });
});

Exemplo pormenorizado: Adicione uma grelha de imagens no Elementor e atribua a classe image-grid-item a cada imagem. Com este código, os utilizadores verão um efeito de desvanecimento subtil quando passarem o cursor sobre as imagens, acrescentando uma camada de sofisticação ao site.

Etapa 3: aprimorando efeitos visuais com bibliotecas de animação JavaScript

As bibliotecas de animação JavaScript, como o GSAP, podem ajudá-lo a criar animações complexas e suaves.

  1. Integre a biblioteca de animação GSAP:
    • Carregue o GSAP: Carregue a biblioteca GSAP utilizando o WPCode ou o widget HTML.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Animar elementos do Elementor com GSAP:

Exemplo:

document.addEventListener("DOMContentLoaded", function() {
  gsap.from(".image-grid-item", {
    duration: 1,
    opacidade: 0,
    y: 50,
    escalonamento: 0.2,
    facilidade: "power2.out"
  });
});

Exemplo pormenorizado: Crie uma grelha com várias imagens utilizando o Elementor e atribua a classe item da grelha de imagens. Quando a página é carregada, cada imagem aparece suavemente de baixo para cima, uma após a outra, o que pode ser altamente eficaz na criação de uma experiência visualmente apelativa para os visitantes.

Passo 4: Adicionar animações baseadas no scroll com ScrollTrigger

Acionador de deslocação é um plugin GSAP que lhe permite desencadear animações com base nas acções de deslocação do utilizador - ideal para criar efeitos de deslocação dinâmicos.

Acionador de deslocação é um plugin GSAP que lhe permite desencadear animações com base nas acções de deslocação do utilizador - ideal para criar efeitos de deslocação dinâmicos.

  1. Carregue o plug-in ScrollTrigger:
    • Adicionar ScrollTrigger: Depois de carregar o GSAP, integre o ScrollTrigger da seguinte forma:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

2. Criar animações acionadas pelo scroll:

Adicione efeitos de deslocação: Crie animações que são activadas à medida que os utilizadores se deslocam para secções específicas da sua página.

document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger);
  gsap.from(".section-title", {
    scrollTrigger: {
      trigger: ".section-title",
      start: "top 80%", // A animação começa quando o título da secção está à vista
      end: "top 30%",
      scrub: true
    },
    duração: 1.5,
    opacidade: 0,
    y: -50,
    facilidade: "power3.out"
  });
});

Exemplo pormenorizado: Suponha que tem um título de página ou de secção com a classe section-title. O código acima fará com que o título deslize a partir do topo à medida que o utilizador se desloca, proporcionando uma experiência de deslocação mais suave e envolvente. Pode personalizar os accionadores de início e fim para controlar quando a animação começa e termina.

Passo 5: Melhorar os formulários Elementor com JavaScript personalizado

Elementor’s form widget is very useful, but we can add more functionality with JavaScript, such as form validation or post-submission animations.

  1. Exemplo de validação de formulário:
    • Adicione validação aos campos do formulário: Utilize JavaScript para adicionar validação simples a um formulário Elementor.
document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger);
  gsap.from(".section-title", {
    scrollTrigger: {
      trigger: ".section-title",
      start: "top 80%", // A animação começa quando o título da secção está à vista
      end: "top 30%",
      scrub: true
    },
    duração: 1.5,
    opacidade: 0,
    y: -50,
    facilidade: "power3.out"
  });
});

Exemplo pormenorizado: If you’ve created a subscription form in Elementor and assigned the class forma-elementoSe tiver uma resposta positiva, o código acima garante que os utilizadores introduzem um endereço de correio eletrónico válido antes de submeterem o formulário, reduzindo as entradas inválidas e garantindo dados de maior qualidade.

2. Feedback de animação após a submissão:

Exemplo:

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector(".elementor-form");
  se (form) {
    form.addEventListener("submit", function(event) {
      event.preventDefault(); // Impeça a submissão predefinida para simular o feedback
      gsap.to(form, {
        duration: 0.5,
        opacidade: 0,
        onComplete: function() {
          form.reset();
          gsap.to(formulário, { duração: 0,5, opacidade: 1 });
        }
      });
    });
  }
});

Exemplo pormenorizado: Utilize o widget de formulário no Elementor, atribua a classe forma-elementoCom o código acima, os utilizadores verão o formulário desaparecer após a submissão e reaparecer, fornecendo uma confirmação suave e visualmente atraente da reposição do formulário.

Integrar estas funcionalidades no Elementor como um botão permanente

Para tornar estas funcionalidades JavaScript acessíveis diretamente no Elementor e criar um botão reutilizável com estas funcionalidades integradas, siga estes passos:

  1. Crie um botão com o widget de botão do Elementor:
    • Utilize o Elementor para criar um elemento de botão na página, arrastando o elemento Widget de botão na sua página.
    • Personalize o texto, o tamanho, o estilo e outras propriedades do botão conforme pretendido.
    • No Avançado atribua uma classe CSS única ao botão (por exemplo, botão de ação integrado). Esta classe CSS será utilizada para identificar o botão em JavaScript.
  2. Adicione código JavaScript para lidar com a funcionalidade do botão:
    • Para tornar o botão interativo, temos de adicionar código JavaScript que ouve os eventos do botão, como clicar ou passar o rato.
    • Utilize o Plugin WPCode para adicionar o seu JavaScript globalmente em todo o sítio Web:
      • Instale e active o Plugin WPCode a partir do diretório de plugins do WordPress.
      • Navegue até Trechos de código > Adicionar snippet.
      • Selecione JavaScript as the code type and add the JavaScript code to handle the button’s interaction.
      • Certifique-se de que especifica que o código deve ser executado em Front-end e selecione a localização para executar o script (de preferência na pasta Rodapé para garantir que todos os elementos foram carregados).

Exemplo de código:

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button");
  se (botão) {
    button.addEventListener("click", function() {
      // Exemplo: Desencadeie um efeito de animação no botão quando clicado
      gsap.to(botão, { duração: 0,5, escala: 1,2, facilidade: "power2.out" });
      setTimeout(() => {
        gsap.to(botão, { duração: 0,5, escala: 1 });
      }, 500);
    });
  }
});

Este código ouve um evento de clique no botão e acciona uma animação utilizando GSAP. O botão aumenta até 1,2x o seu tamanho e depois volta ao seu tamanho original, criando um efeito visual para o utilizador.

  1. Guarde o botão como um widget global:
    • Depois de configurar o botão e testar se a funcionalidade JavaScript funciona, pode guardar o botão como um Widget global no Elementor.
    • Para o fazer, clique com o botão direito do rato no widget do botão e selecione Guardar como global. Give the global widget a descriptive name (e.g., “Interactive Button with GSAP Animation”).
    • Ao guardá-lo como um widget global, pode reutilizar este botão em diferentes páginas sem ter de reconfigurar as definições ou o código JavaScript de cada vez.
  2. Testar e personalizar o botão:
    • Teste o botão: Ensure that the button behaves as expected across different pages where it’s used. Make sure that clicking the button triggers the JavaScript actions correctly.
    • Personalize a funcionalidade: Pode melhorar ainda mais a funcionalidade do botão adicionando mais funcionalidades JavaScript, como animações personalizadas, chamadas de API ou interações com outros elementos da página.
  3. Torne o botão permanente com estilo e comportamento personalizados:
    • Pode estilizar o botão utilizando CSS personalizadas adicionais. Utilize a função CSS personalizado ou a secção WordPress CSS adicional para aplicar estilos únicos ao botão.

Exemplo de CSS personalizado:

.botão-de-ação-integrado {
  cor de fundo: #ff6347;
  cor: #fff;
  raio da margem: 5px;
  padding: 15px 30px;
  transição: background-color 0.3s ease;
}
.integrated-action-button:hover {
  cor de fundo: #e5533d;
}
  1. Este snippet CSS dá ao botão uma cor personalizada e bordas arredondadas, e muda a cor ao passar o mouse para fornecer feedback visual.
  2. Integre funcionalidades JavaScript adicionais:
    • Se pretender adicionar funcionalidades mais complexas, como submeter um formulário, alternar elementos da página ou chamar APIs externas, pode estender o código JavaScript em conformidade.
    • Exemplo de adição de um registo de consola e de alternância da visibilidade de outro elemento quando se clica no botão:
document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button");
  const targetElement = document.querySelector(".target-element");
  se (button && targetElement) {
    button.addEventListener("click", function() {
      // Registe a mensagem na consola
      console.log("Botão clicado, executando ações...");
      // Alterne a visibilidade do elemento de destino
      targetElement.style.display = targetElement.style.display === "none" ? "block" : "none";
    });
  }
});

Seguindo estes passos, pode criar um botão no Elementor com funcionalidade JavaScript integrada que pode ser reutilizada em todo o seu sítio Web, melhorando a consistência e a eficiência do seu fluxo de trabalho de desenvolvimento. Isto facilita a adição de interações e animações avançadas às páginas do Elementor sem ter de configurar manualmente cada botão individualmente.

Conclusão

Ao combinar o Elementor com JavaScript, pode criar interações mais avançadas e dinâmicas no seu sítio Web WordPress. Esta abordagem de desenvolvimento avançado melhora consideravelmente as suas capacidades de design de página e ajuda o seu sítio Web a destacar-se. Quer utilize o JavaScript vanilla para controlar os elementos da página ou utilize bibliotecas de animação como o GSAP para transições suaves, a combinação do Elementor e do JavaScript pode proporcionar uma experiência de utilizador extraordinária.

Com estes exemplos detalhados, pode começar a fazer experiências com interações e efeitos mais complexos. Espero que este guia desperte a sua criatividade! Se tiver alguma dúvida ou precisar de mais ajuda, não hesite em contactar-nos.

Sair da versão móvel