Agregue JavaScript personalizado en Elementor: nivel de página y elemento JS
La extensión Custom JS, parte de Master Addons Pro, le brinda un campo JavaScript dentro de Elementor. Agregue código a una página completa desde Configuración de página o adjúntelo a un solo widget, sección o contenedor desde su pestaña Avanzado. Úselo para pequeñas interacciones, ajustes de formularios o seguimiento de eventos sin editar archivos de temas ni incluir scripts en un widget HTML.
Un espacio de código dedicado para cada página
Deje de introducir scripts en widgets HTML o de dispersarlos en archivos globales. Esta extensión agrega un campo JS personalizado dedicado en Page Settings > Advanced tab. Cualquier código que escriba aquí se ejecuta sólo en esta página o publicación específica. Es la forma organizada de manejar scripts únicos, seguimiento de pruebas A/B o elementos interactivos únicos.
- Separación limpia: mantenga los scripts específicos de la página aislados del código de todo el sitio. Sin riesgo de romper otras páginas.
- Fácil acceso: encuentre su código instantáneamente en la configuración de la página, sin buscar en el Panel de widgets.
- Mejores prácticas integradas: el campo se maneja automáticamente
$(document).ready()para usted, puede escribir su lógica central directamente.
Javascript a nivel de página y a nivel de elemento
El código a nivel de página vive en Configuración de página, Avanzado, JS personalizado y se ejecuta solo en esa página. El código a nivel de elemento vive en la pestaña Avanzado de cualquier widget, columna, sección o contenedor. En el código a nivel de elemento, la palabra selector se intercambia por la clase CSS de ese elemento, por lo que el script solo toca ese elemento.
- Sin etiquetas <script> y sin envoltorio listo para documentos: el código está envuelto
jQuery(document).readypara ti, y$funciona. - Los scripts se imprimen en el pie de página, después de que se haya cargado el contenido.
- El código se ejecuta en la página en vivo, no dentro de la vista previa del editor Elementor, así que consulte la página publicada después de guardarlo.
- Cada instancia del selector de palabras se reemplaza en código a nivel de elemento. Usar
$('selector')en lugar dedocument.querySelectorallí.
Cómo agregar JavaScript personalizado en Elementor
Estos pasos suponen que Master Addons Pro está activo y su función de WordPress puede publicar HTML sin filtrar, lo que los administradores pueden publicar de forma predeterminada.
- En su panel, vaya a Complementos maestros, abra la pestaña Extensiones, active Custom JS y guarde.
- Edita la página con Elementor.
- Para toda la página, abra Configuración de página, luego Avanzado, luego JS personalizado. Para un elemento, selecciónelo y abra su pestaña Avanzado.
- Pegue su código sin etiquetas <script>.
- Actualice la página y pruébela en la URL en vivo.
Tres ejemplos de JS personalizados de Elementor
Pegue cualquiera de estos en un campo JS personalizado y cambie los nombres de las clases para que coincidan con su página.
1. Agregue una clase al encabezado después de desplazarse (nivel de página)
$(window).on('scroll', function () {
$('.site-header').toggleClass('is-scrolled', $(window).scrollTop() > 80);
});2. Alternar una clase cuando se hace clic en un elemento (nivel de elemento)
$('selector').on('click', function () {
$(this).toggleClass('is-open');
});3. Envíe un evento de Google Analytics cuando se hace clic en un botón (nivel de página)
$('.cta-button a').on('click', function () {
if (typeof gtag === 'function') {
gtag('event', 'cta_click', { location: 'pricing' });
}
});Se comparan formas de agregar JavaScript en Elementor
Hay tres rutas comunes. La correcta depende de dónde debe ejecutarse el script. Si también necesita estilos con un alcance de un elemento, el gratuito Extensión CSS personalizada funciona de la misma manera.
| Widget HTML | Código personalizado de Elementor Pro | Complementos maestros personalizados JS | |
|---|---|---|---|
| Plan | Elementor libre | Elementor Pro | Complementos maestros Pro |
| Alcance | La página en la que se encuentra el widget | Todo el sitio, con condiciones de visualización | Una página o un elemento |
| Donde lo escribes | Dentro de un widget en el lienzo | Una pantalla de Código personalizado en el tablero | Configuración de página o pestaña Avanzado del elemento |
| Etiquetas de guión | Necesario | Necesario | No necesario |
| Apunta a un elemento | Escribe tú mismo el selector | Escribe tú mismo el selector | Utilice la palabra clave del selector |
Preguntas frecuentes sobre JS personalizado
¿cuándo debo usar esto en lugar de un widget HTML o las funciones de mi tema.php?
Úselo para scripts que pertenecen a una página o un elemento, como una calculadora, un efecto de desplazamiento o un evento de clic. Para el código que cada página necesita, una opción para todo el sitio, como su tema o un complemento de fragmentos de código, es un mejor hogar. El widget HTML también funciona, pero los scripts terminan dispersos por el lienzo y es fácil pasarlos por alto más adelante.
¿el código está minificado u optimizado para el rendimiento?
No. El código se agrega mientras lo escribe, así que manténgalo breve y ordenado. El único cambio que realizan los complementos maestros es intercambiar la palabra clave del selector en el código a nivel de elemento por la clase CSS de ese elemento.
¿qué sucede si escribo JavaScript roto? ¿Romperá toda mi página?
Puede. Un error de sintaxis puede impedir que se ejecuten otros scripts en esa página. Primero pruebe el código en la consola de su navegador y pruébelo en un sitio de preparación si la página es importante.
¿puedo usar esto con datos dinámicos o variables de Elementor?
Directamente, no dentro del campo JS en sí. Sin embargo, puede escribir JavaScript que interactúa con elementos de la página que están poblados por datos dinámicos. Por ejemplo, podría escribir un script que lea texto de un encabezado lleno dinámicamente. Usarías selectores de JavaScript normales para apuntar a esos elementos.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
