OpenByt - Su fuente definitiva de conocimientos gratuitos sobre WordPress

Elementor y JavaScript: Desarrollo avanzado de sitios web 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.

Cómo empezar

Let’s get started!

Paso 1: Integrar JavaScript con Elementor Pages

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

  1. Uso del plugin WPCode:
    • Instale el plugin WPCode: Puede utilizar el WPCode plugin para añadir JavaScript personalizado sin modificar el tema de funciones.php archivo.
      • Navegue hasta Plugins > Añadir nuevo en el panel de control de WordPress.
      • Buscar WPCode y haga clic en Instalar ahoraentonces Active.
    • Añadir JavaScript usando WPCode:
      • Ir a Fragmentos de código > Añadir fragmento en el panel de control de WordPress.
      • Haga clic en Añada su código personalizado (Nuevo fragmento) y seleccione JavaScript como tipo de código.
      • Nombre su fragmento: Give your snippet a name that helps identify its purpose (e.g., “Page Load Animation Script”).
      • Insertar código JavaScript: Pegue su código JavaScript en el editor de fragmentos.
      • Elija la colocación: Decide si cargar el script en el Encabezado o Pie de página. Generally, it’s recommended to load scripts in the Pie de página para asegurarse de que todos los elementos ya están cargados.
        • Cargar JavaScript en el pie de página garantiza que todo el documento HTML sea analizado y esté disponible, lo que reduce las posibilidades de encontrar errores por intentar interactuar con elementos que aún no están presentes en la página.
      • Establecer reglas de inserción: Especifique dónde debe ejecutarse el script (por ejemplo, en todo el sitio o en páginas específicas).
      • Envuelva JavaScript en DOMContentLoaded: Asegúrese de que el código se ejecuta después de que la página se haya cargado para evitar errores.
        • This ensures that all page elements are available, preventing errors caused by attempting to manipulate elements that haven’t loaded.
    Ejemplo:
document.addEventListener("DOMContentLoaded", function() {
console.log("JavaScript se ejecuta después de que la página se haya cargado");
});

Este sencillo script confirma que su JavaScript se ejecuta correctamente después de cargar la página.

Uso del widget HTML en Elementor:

Ejemplo:

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

Este método es útil cuando desea que el JavaScript se ejecute sólo en una sección concreta de la página, lo que le proporciona un mayor control sobre la funcionalidad.

Paso 2: Añadir interactividad dinámica con JavaScript

Tras integrar JavaScript, podemos empezar a añadir algunos efectos dinámicos, como clics en botones y efectos hover.

  1. Añadir una animación de clic de botón:
    • Crear un botón interactivo: Añada un elemento de botón utilizando Elementor, y dele una clase de orientación (por ejemplo, botón animado).
    • Añadir JavaScript para manejar los eventos de clic: Utilice JavaScript para implementar una sencilla animación de clic, como redimensionar el botón o cambiar su color.
    Ejemplo:
document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".animated-button");
  if (button) {
    button.addEventListener("click", function() {
      button.style.transform = "scale(1.2)";
      button.style.backgroundColor = "#ff6347"; // Cambiar el color a tomate
      setTimeout(() => {
        button.style.transform = "scale(1)";
        button.style.backgroundColor = ""; // Revertir color
      }, 300);
    });
  }
});

Ejemplo detallado: Suponga que añade un botón con la clase botón animado en su página de Elementor. Con el código anterior, al hacer clic en el botón se creará un breve efecto de ampliación y cambio de color, lo que lo hará más atractivo visualmente para los usuarios.

Añadir un efecto Hover a una cuadrícula de imágenes:

Ejemplo:

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

Ejemplo detallado: Añada una cuadrícula de imágenes en Elementor y asigne la clase image-grid-item a cada imagen. Con este código, los usuarios verán un sutil efecto de desvanecimiento al pasar el ratón por encima de las imágenes, añadiendo una capa de sofisticación al sitio.

Paso 3: Mejora de los efectos visuales con bibliotecas de animación JavaScript

Las bibliotecas de animación JavaScript como GSAP pueden ayudarle a crear animaciones complejas y suaves.

  1. Integrar la biblioteca de animación GSAP:
    • Cargar GSAP: Cargue la biblioteca GSAP utilizando WPCode o el widget HTML.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Animar elementos de Elementor con GSAP:

Ejemplo:

document.addEventListener("DOMContentLoaded", function() {
  gsap.from(".image-grid-item", {
    duración: 1,
    opacidad: 0
    y: 50,
    escalonamiento: 0,2,
    facilidad: "power2.out"
  });
});

Ejemplo detallado: Crear una cuadrícula con varias imágenes utilizando Elementor, y asignar la clase image-grid-item. Cuando la página se carga, cada imagen se desvanecerá suavemente desde abajo, una tras otra, lo que puede resultar muy eficaz para crear una experiencia visualmente atractiva para los visitantes.

Paso 4: Añadir animaciones basadas en desplazamiento con ScrollTrigger

ScrollTrigger es un plugin GSAP que le permite activar animaciones basadas en las acciones de desplazamiento del usuario, ideal para crear efectos de desplazamiento dinámicos.

ScrollTrigger es un plugin GSAP que le permite activar animaciones basadas en las acciones de desplazamiento del usuario, ideal para crear efectos de desplazamiento dinámicos.

  1. Cargar el plugin ScrollTrigger:
    • Añadir ScrollTrigger: Después de cargar GSAP, integre ScrollTrigger de la siguiente manera:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

2. Crear animaciones activadas por desplazamiento:

Añadir efectos de desplazamiento: Cree animaciones que se activen cuando los usuarios se desplacen a secciones específicas de su página.

document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger);
  gsap.from(".section-title", {
    scrollTrigger: {
      activador: ".section-title",
      inicio: "top 80%", // La animación comienza cuando el título de la sección está a la vista
      fin: "top 30%",
      scrub: true
    },
    duración: 1.5,
    opacidad: 0,
    y: -50,
    facilidad: "power3.out"
  });
});

Ejemplo detallado: Suponga que tiene un título de página o sección con la clase section-title. El código anterior hará que el título se deslice desde la parte superior a medida que el usuario se desplaza, proporcionando una experiencia de desplazamiento más suave y atractiva. Puede personalizar los activadores de inicio y fin para controlar cuándo comienza y termina la animación.

Paso 5: Mejorar los formularios de Elementor con 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. Ejemplo de validación de formularios:
    • Añadir validación a los campos del formulario: Utilice JavaScript para añadir una validación sencilla a un formulario de Elementor.
document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger);
  gsap.from(".section-title", {
    scrollTrigger: {
      activador: ".section-title",
      inicio: "top 80%", // La animación comienza cuando el título de la sección está a la vista
      fin: "top 30%",
      scrub: true
    },
    duración: 1.5,
    opacidad: 0,
    y: -50,
    facilidad: "power3.out"
  });
});

Ejemplo detallado: If you’ve created a subscription form in Elementor and assigned the class elementor-form, el código anterior garantiza que los usuarios introduzcan una dirección de correo electrónico válida antes de enviar el formulario, lo que reduce las entradas no válidas y garantiza una mayor calidad de los datos.

2. Comentarios posteriores a la presentación de la animación:

Ejemplo:

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector(".elementor-form");
  if (form) {
    form.addEventListener("submit", function(event) {
      event.preventDefault(); // Evitar el envío por defecto para simular la respuesta
      gsap.to(formulario, {
        duración: 0.5,
        opacidad: 0,
        onComplete: function() {
          form.reset();
          gsap.to(form, { duración: 0,5, opacidad: 1 });
        }
      });
    });
  }
});

Ejemplo detallado: Utilice el widget de formulario en Elementor, asigne la clase elementor-formy con el código anterior, los usuarios verán que el formulario se desvanece tras el envío y luego reaparece, proporcionando una confirmación suave y visualmente atractiva del restablecimiento del formulario.

Integrar estas funciones en Elementor como un botón permanente

Para poder acceder a estas funciones JavaScript directamente desde Elementor y crear un botón reutilizable con estas funcionalidades integradas, siga estos pasos:

  1. Cree un botón con el widget Elementor Button:
    • Utilice Elementor para crear un elemento de botón en la página arrastrando el botón Widget de botones en su página.
    • Personalice el texto, el tamaño, el estilo y otras propiedades del botón como desee.
    • En el Avanzado asigne una clase CSS única al botón (p. ej, botón de acción integrado). Esta clase CSS se utilizará para identificar el botón en JavaScript.
  2. Añadir código JavaScript para manejar la funcionalidad de los botones:
    • Para que el botón sea interactivo, tenemos que añadir código JavaScript que escuche los eventos del botón, como hacer clic o pasar el ratón por encima.
    • Utilice el Plugin WPCode para añadir su JavaScript de forma global en todo el sitio web:
      • Instale y active el Plugin WPCode del directorio de plugins de WordPress.
      • Navegue hasta Fragmentos de código > Añadir fragmento.
      • Elija JavaScript as the code type and add the JavaScript code to handle the button’s interaction.
      • Asegúrese de especificar que el código debe ejecutarse en Frontend y seleccione la ubicación para ejecutar el script (preferiblemente en el Pie de página para asegurarse de que todos los elementos se han cargado).

Código de ejemplo:

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button");
  if (button) {
    button.addEventListener("click", function() {
      // Ejemplo: Desencadenar un efecto de animación en el botón al pulsarlo
      gsap.to(button, { duration: 0.5, scale: 1.2, ease: "power2.out" });
      setTimeout(() => {
        gsap.to(button, { duration: 0.5, scale: 1 });
      }, 500);
    });
  }
});

Este código escucha un evento de clic en el botón y desencadena una animación utilizando GSAP. El botón escala hasta 1,2x su tamaño y luego vuelve a su tamaño original, creando un efecto visual para el usuario.

  1. Guardar el botón como widget global:
    • Después de configurar el botón y comprobar que la funcionalidad JavaScript funciona, puede guardar el botón como un archivo Widget global en Elementor.
    • Para ello, haga clic con el botón derecho en el widget del botón y seleccione Guardar como global. Give the global widget a descriptive name (e.g., “Interactive Button with GSAP Animation”).
    • Al guardarlo como widget global, puede reutilizar este botón en distintas páginas sin tener que reconfigurar los ajustes o el código JavaScript cada vez.
  2. Probar y personalizar el botón:
    • Pruebe el botón: 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.
    • Personalizar la funcionalidad: Puede mejorar aún más la funcionalidad del botón añadiendo más funciones de JavaScript, como animaciones personalizadas, llamadas a la API o interacciones con otros elementos de la página.
  3. Haga que el botón sea permanente con un estilo y un comportamiento personalizados:
    • Puede dar estilo al botón utilizando CSS personalizado adicional. Utilice la función CSS personalizado o la sección de WordPress CSS adicional para aplicar estilos únicos al botón.

Ejemplo de CSS personalizado:

.integrated-action-button {
  color de fondo: #ff6347;
  color: #fff;
  border-radius: 5px;
  acolchado: 15px 30px;
  transición: color de fondo 0.3s ease;
}
.integrated-action-button:hover {
  color de fondo: #e5533d;
}
  1. Este fragmento de CSS da al botón un color personalizado y bordes redondeados, y cambia el color al pasar el ratón por encima para proporcionar información visual.
  2. Integrar funcionalidades adicionales de JavaScript:
    • Si desea añadir funcionalidades más complejas, como enviar un formulario, alternar elementos de la página o llamar a API externas, puede ampliar el código JavaScript en consecuencia.
    • Ejemplo de adición de un registro de consola y conmutación de la visibilidad de otro elemento cuando se pulsa el botón:
document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button");
  const targetElement = document.querySelector(".target-element");
  if (button && targetElement) {
    button.addEventListener("click", function() {
      // Mensaje de registro en la consola
      console.log("Botón pulsado, realizando acciones...");
      // Alternar la visibilidad del elemento de destino
      targetElement.style.display = targetElement.style.display === "none" ? "block" : "none";
    });
  }
});

Siguiendo estos pasos, podrá crear un botón en Elementor con funcionalidad JavaScript integrada que podrá reutilizar en todo su sitio web, mejorando tanto la coherencia como la eficacia de su flujo de trabajo de desarrollo. Esto facilita la adición de interacciones y animaciones avanzadas a las páginas de Elementor sin necesidad de configurar manualmente cada botón de forma individual.

Conclusión

Combinando Elementor con JavaScript, podrá crear interacciones más avanzadas y dinámicas en su sitio web WordPress. Este enfoque de desarrollo avanzado mejora enormemente sus capacidades de diseño de páginas y ayuda a que su sitio web destaque. Tanto si utiliza JavaScript vainilla para controlar los elementos de la página como si aprovecha librerías de animación como GSAP para lograr transiciones fluidas, la combinación de Elementor y JavaScript puede proporcionar una experiencia de usuario excepcional.

Con estos ejemplos detallados, podrá empezar a experimentar con interacciones y efectos más complejos. ¡Espero que esta guía despierte su creatividad! Si tiene alguna pregunta o necesita más ayuda, no dude en ponerse en contacto con nosotros.

Salir de la versión móvil