3 formas fáciles de agregar scripts al sitio web de Elementor (una guía completa)
Publicado: 2022-12-14A veces, necesita agregar diferentes herramientas y servicios a su sitio web de Elementor usando JavaScript. O es posible que desee implementar la funcionalidad JavaScript personalizada en su sitio web para que se destaque más.
Pero, ¿cómo lo haces? ¿Cómo puedes agregar JavaScript a Elementor?
Te mostraré cómo en este post.
Ya sea que desee agregar un script listo para usar o agregar un código JavaScript personalizado a Elementor, es más fácil de lo que piensa.
En este artículo, compartiré tres métodos para agregar scripts en Elementor.
- ¿Cuándo necesita agregar JavaScript a los sitios web de Elementor?
- Cómo agregar secuencias de comandos en Elementor (3 formas simples)
- Preguntas frecuentes sobre cómo agregar scripts en Elementor
- Terminando
¿Cuándo necesita agregar JavaScript a los sitios web de Elementor?
JavaScript es un lenguaje de programación que se ejecuta en el navegador del cliente. Con este popular lenguaje de secuencias de comandos, puede agregar funciones y funciones avanzadas ilimitadas a su sitio web.
Elementor le brinda la opción de hacer que el diseño del sitio web sea sencillo. Pero cuando desee agregar una característica funcional como una calculadora, animaciones y otras cosas interesantes, puede usar Javascript.
Al agregar cierta funcionalidad interactiva, es posible que deba agregar bibliotecas o marcos de JavaScript de terceros a su sitio web de Elementor.
Si desea habilitar Google Analytics, AdSense, Tag Manager y otros servicios, deberá agregar su etiqueta de secuencia de comandos de activación al encabezado o pie de página de su sitio web.
Cómo agregar secuencias de comandos en Elementor (3 formas simples)
Ahora llegamos a la parte principal de este artículo, cómo agregar JavaScript en Elementor.
Echa un vistazo a los siguientes 3 métodos:
- Widget HTML de Elementor
- Característica de código personalizado de Elementor Pro
- Usa un complemento gratuito
Empecemos.
Método 1: Widget HTML de Elementor
Abra la página en el panel del editor de Elementor.
Aquí, vamos a implementar una función de desplazamiento hacia arriba usando un código JavaScript personalizado.
Agregué un botón simple y configuré un ID de botón CSS ' back-to-top '. Manejaré la funcionalidad usando este ID de botón más tarde.
Ahora arrastre y suelte el widget HTML en cualquier lugar de su página.
Agregue su código JavaScript dentro del área de contenido. He añadido el mío.
<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>Asegúrese de envolver todo el código con la etiqueta HTML <script></ script> . Coloque el ID del botón donde desee activarlo.
Finalmente, haga clic en el botón verde Actualizar para guardar los cambios actuales.
Visite el sitio web para ver si todo funciona correctamente o no.
¡Ahí tienes! ¡Has implementado una característica genial en tu sitio web de Elementor con JavaScript personalizado!
Método 2: Característica de código personalizado de Elementor Pro
El widget HTML de Elementor le brinda la opción de agregar código JavaScript o HTML sin formato a su sitio web de Elementor.
Pero la función de código personalizado de Elementor viene con más posibilidades. Puede usarlo para agregar etiquetas de script al encabezado y al pie de página de su sitio web.
Vaya a Elementor > Código personalizado .
Ahora, escribe el título de tu código y pégalo. Puede establecer la ubicación del código donde agregará <head> , <body> start y </body> end .
Además, defina la prioridad de 1 a 10 . Un número más bajo significa una prioridad más alta.
Si ha establecido la prioridad 1, la secuencia de comandos se procesará al principio cuando un usuario visite su sitio web.
Ahora, configure la condición de la lista desplegable y luego presione el botón Guardar .
Dar un cheque. Debería mostrarse exactamente como lo planeó.
Método 3: use un complemento gratuito
WPCode es un complemento gratuito que le permite agregar código personalizado y etiquetas de script al área de encabezado y pie de página de su sitio web. Viene con una biblioteca práctica con muchos fragmentos de código prefabricados que puede agregar a su sitio web.
Agreguemos un par de scripts a la parte de pie de página de nuestro sitio web de Elementor.
Primero, instale el complemento en su sitio web.
Luego vaya a Fragmentos de código > Encabezado y pie de página .
Ahora, agregue la etiqueta del script en el lugar adecuado. Puede agregarlo al área de encabezado, cuerpo y pie de página.
Hemos agregado dos secuencias de comandos de biblioteca de terceros a la sección de pies de página.
Finalmente, presione el botón Guardar cambios .
Ahora, vaya a su sitio web y verifique que el script funcione.
Preguntas frecuentes sobre cómo agregar scripts en Elementor
Obtengamos las respuestas a las preguntas comunes que la gente suele hacer sobre cómo agregar JavaScript a las páginas de Elementor.
¿Puedo agregar scripts a mi sitio de Elementor de forma gratuita?
Sí, puede agregar código JavaScript a Elementor de forma gratuita. Pero para agregar una etiqueta de secuencia de comandos al encabezado o pie de página de su sitio web, debe usar la función de Código personalizado de Elementor que viene solo con la versión premium.
¿Cómo se agrega HTML, CSS y JavaScript a Elementor?
Puede usar el widget HTML de Elementor para agregar HTML y JavaScript a Elementor. Para agregar un código CSS personalizado, vaya a Avanzado > CSS personalizado y escriba su código.
¿Puede el código JavaScript personalizado romper el diseño de mi sitio web?
¡Realmente no! Pero si no sabe cómo funciona JavaScript, entonces podría haber una posibilidad para esto. Recomendamos probarlo primero en un sitio web provisional. Si todo funciona, puede agregarlo al sitio en vivo.
Terminando
Agregar JavaScript personalizado a un sitio web de Elementor es fácil cuando sabe cómo hacerlo. Ya sea que desee agregar efectos de imagen geniales o implementar una característica única que su tema de WordPress o Elementor no permiten. Aquí el JavaScript personalizado funciona como un superhéroe.
Puede hacer una mejor personalización con JavaScript y hacer que su sitio web sea más atractivo para los visitantes.
En esta guía, compartí 3 formas de agregar scripts en el sitio web de Elementor.
Espero que disfrutes de este artículo y obtengas la solución que estás buscando.
Únase a mi boletín para obtener más consejos y trucos útiles como este. Comparte la publicación para que otros también puedan aprender.
¡Qué tengas un lindo día!