Cómo usar código personalizado en Elementor: La guía completa

Elementor La función de código personalizado añade fragmentos de código HTML, JavaScript y CSS a su sitio web. Esto es útil para situaciones en las que necesitas insertar código de herramientas de terceros como Google Analytics, Facebook Pixel, etc., o para añadir estilos personalizados e interacciones dinámicas a elementos del sitio. Aquí tienes una guía completa sobre cómo añadir código personalizado a Elementor.

Descripción general de las funciones de código personalizado

Elementor La función de código personalizado permite añadir fragmentos de código HTML, JavaScript y CSS, lo que facilita la personalización adicional de su sitio web. Se puede insertar cualquier código JavaScript para modificar el DOM (Document Object Model), añadir eventos y efectos dinámicos, y mucho más. Además, se pueden utilizar fragmentos de código CSS para personalizar el estilo de cualquier elemento del sitio.

tome nota de: Custom Code no soporta fragmentos de código PHP. Por lo tanto, no es posible añadir hooks o acciones personalizadas con esta función. Para el código PHP, se recomienda utilizar funciones.php o un plug-in de terceros para hacerlo.

Cómo añadir código personalizado

Siga los pasos que se indican a continuación para añadir código personalizado a Elementor:

Paso 1: Iniciar sesión en WP Admin

Vaya al backend de administración de WordPress.

Paso 2: Vaya a Elementor > Custom Code

En el panel de control de WordPress, vaya a Elementor > Código personalizadoEsta vez mostrará el número de veces que ha estado en uso desde elDefinir página de códigos.

Paso 3: Haga clic en "Añadir nuevo código personalizado".

golpe (en el teclado) Añadir nuevo código personalizado aparecerá la página Nuevo código.

Paso 4: Introducir la información del código

En la página Nuevo código, siga los pasos que se indican a continuación para rellenar la información:

leyenda - Añada títulos a los fragmentos de código para su posterior identificación y gestión.

colocación - Determine la ubicación del fragmento de código en la página web seleccionando las siguientes opciones:

<head> - Añadir al encabezado de la página
<body> - Inicio - Añadir al principio del cuerpo de la página
<body> - Fin - Añadir al final del cuerpo de la página

prioridad - Establece la prioridad del fragmento de código (1-10). Si se asignan varios fragmentos de código a la misma ubicación, el valor de prioridad determina el orden de ejecución; cuanto menor sea el valor, mayor será la prioridad. Por ejemplo:Los scripts de prioridad 1 se ejecutarán antes que los de prioridad 5..

Editor de bloques de código - Escribe o pega un fragmento de código en el editor de bloques de código. El detector de código integrado de Elementor comprueba automáticamente el código e indica cualquier error.

Paso 5: Establecer las condiciones de publicación

existe Publique Haga clic en la zona Edite para establecer las condiciones de publicación.OPCIONES DE PUBLICACIÓN se mostrará la ventana.

Establezca las condiciones necesarias para especificar en qué páginas o tipos de contenido se mostrará el fragmento de código.

Paso 6: Publicar el fragmento de código

Después de confirmar que la configuración está completa, haga clic en Publique Publica un código personalizado, o elige guardar el código como borrador o establecer una fecha y hora de publicación diferida.

Añadir código CSS

Además de los scripts de JavaScript, es posible añadir código CSS a los fragmentos de código envolviendo el CSS en una etiqueta <style> . De este modo, el CSS puede aplicarse selectivamente a una página determinada en función de las condiciones establecidas. Ejemplo:

.custom-class {
    color: azul; font-size: 18px;
    font-size: 18px;
  }

resúmenes

Con la función de código personalizado de Elementor, puedes añadir diversos efectos personalizados a tu sitio web, como código de seguimiento, activación de eventos, elementos dinámicos y estilos personalizados. Esta función puede mejorar la personalización y funcionalidad de tu sitio web sin modificar los archivos principales del sitio web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres