如何在Elementor中使用自定义代码：完整指南

Elementor La función de código personalizado añade fragmentos de código HTML, JavaScript y CSS a su sitio web. Resulta útil en situaciones en las que necesita 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í tiene una guía completa sobre cómo añadir código personalizado a Elementor.

Visió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.

tenga en cuenta: Custom Code no admite 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 complemento 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: Inicie sesión en WP Admin

Vaya al backend de administración de WordPress.

Paso 2: Navegue 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 laDefinir 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 con prioridad 1 se ejecutarán antes que los scripts con prioridad 5..

Editor de bloques de código - Escriba o pegue 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.PUBLICAR AJUSTES 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: Publique el fragmento de código

Tras confirmar que los ajustes se han completado, haga clic en Publique Publique un código personalizado, o elija guardar el código como borrador o fijar una fecha y hora de publicación diferida.

Añadir código CSS

Además de los scripts JavaScript, es posible añadir código CSS a los fragmentos de código envolviendo el CSS en una etiqueta <style> etiqueta. 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

Al utilizar la función de código personalizado de Elementor, puede añadir una gran variedad de efectos personalizados a su sitio web, como códigos de seguimiento, activación de eventos, elementos dinámicos y estilos personalizados. Esta característica puede mejorar la personalización y funcionalidad de su sitio web sin modificar los archivos del núcleo del sitio web.

Enlace a este artículo:

autor de un artículo

fluctuación de fotones

política de privacidad

Política de privacidad

Servicios

UseGenerator

condiciones del servicio

NC-SA 4.0

EL FIN