Cómo añadir código HTML, JavaScript y CSS a su sitio web utilizando la función de código personalizado de Elementor - Photon Flux | Servicio profesional de reparaciones de WordPress, cobertura global, respuesta rápida

existeCreador de sitios web WordPressPersonalizar y optimizar la funcionalidad de su sitio web suele requerirAñadir fragmentos de código personalizadosElementor ofrece una potente función de "código personalizado" que facilita la adición de estilos específicos y funciones interactivas a tu sitio web, como el código de Google Analytics o el código de píxeles de Facebook. Estos fragmentos de código pueden ayudarte a realizar un seguimiento de los datos de tu sitio web, mejorar la experiencia del usuario e incluso añadir estilos específicos y funciones interactivas.Fragmentos de código HTML, JavaScript y CSSAñádalo a su sitio web.

Introducción a la funcionalidad de código personalizado

ElementorLa función de código personalizado le permite añadir diferentes tipos de fragmentos de código a su sitio web, como HTML, JavaScript y CSS:

Ajustar el DOM: a través deManipulación de elementos DOM con JavaScriptEs posible cambiar dinámicamente el contenido de una página web en respuesta a acciones del usuario u otras condiciones.
Añadir evento: puedeUtilizar JavaScript para añadir eventos de clic, hover y de otro tipo a elementos web para mejorar la interactividad..
Aplicación de estilos personalizados: a través deCódigo CSS para añadir estilos personalizados a elementos específicos en función de las necesidades del sitio..

La función de código personalizado no admite fragmentos de código PHP. Esto significa que no puede añadir hooks personalizados ni realizar operaciones PHP con esta función, pero sí puede hacerlo con la funciónfunciones.phpo plug-ins de terceros para implementar estas funciones.

Cómo añadir código personalizado

Para añadir código personalizado a su sitio de WordPress, siga estos pasos:

1,Vaya a la página de código personalizado de Elementor

En el menú backend, vaya a Elementor > Código personalizado. Esto muestra la página de gestión de código personalizado, donde se pueden añadir, editar o eliminar fragmentos de código personalizado.

2,Añadir nuevo código personalizado

Haz clic en el botón "Añadir nuevo código personalizado" para ir a la página de edición del nuevo código. Aquí, tienes que establecer el título, la posición y la prioridad para el fragmento de código.

3,Introduzca el título

Introduzca un título descriptivo para el fragmento de código, de modo que pueda identificarse fácilmente más adelante. El título puede ser una descripción de la funcionalidad del fragmento de código, como "Código de seguimiento de Google Analytics" o "Script de ventana emergente personalizada".

4,Selección de la ubicación del código

Determina en qué parte de la página se insertará el código.Elementor ofrece las siguientes opciones:
- <head>Inserta código en la etiqueta head de la página, normalmente para estilos o scripts globales.
- <body> - comienzo: Inserta el código al principio del cuerpo de la página, adecuado para algunos scripts que necesitan ser ejecutados inmediatamente cuando se carga la página.
- <body> - FinInserta código al final del cuerpo de la página, normalmente para scripts o estilos menores.

5,Establecer la prioridad

Puede crear una lista para elLos fragmentos de código establecen prioridades (1-10). Si se asignan varios scripts a la misma ubicación, la prioridad determinará el orden en que se cargan dichos scripts. Cuanto menor sea el número, mayor será la prioridad. Por ejemplo, un script con una prioridad de 1 se ejecutará antes que un script con una prioridad de 5.

6,Fragmento de código de entrada

Escribe o pega tus fragmentos de código en el editor de bloques de código. El comprobador de código integrado de Elementor comprobará automáticamente tu código y te avisará si encuentra algún error.

7,Establecimiento de las condiciones de liberación

En el área de publicación, haga clic en Editar para establecer las condiciones de visualización del fragmento de código. Estas condiciones controlan en qué páginas o secciones del sitio se muestra el código. Por ejemplo, puede establecer que el código sólo tenga efecto en determinadas páginas o tipos de usuarios, como administradores o visitantes.

8,Publicación de código personalizado

Una vez completados los pasos anteriores, haga clic en "escriba a" para aplicar el código a su sitio web. También existe la opción de guardar el código personalizado como borrador o fijar una fecha y hora para publicarlo más tarde.

Añadir estilos CSS mediante código personalizado

Además del código JavaScript, se pueden añadir estilos CSS a un sitio web a través de la función de código personalizado. Para aplicar CSS a condiciones específicas, el código CSS puede envolverse alrededor de un código HTML<style>entre etiquetas y añadirlas al sitio con la función de código personalizado. A continuación se muestra un ejemplo:

.custom-button {
    color de fondo: #1B61E6;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px; text-align: center; custom-button { background-color.
    text-align: center; cursor: pointer; text-align: pointer
    cursor: puntero; }
  }
</style

En el código anterior, hemos definido un archivo llamadobotón personalizadoy establecer algunos estilos para ella. Una vez añadidos mediante la función de código personalizado, estos estilos se aplicarán a los elementos del sitio en función de las condiciones establecidas.

alcanzar un veredicto

Integra fácilmente fragmentos de código HTML, JavaScript y CSS en tu sitio web WordPress con la función de código personalizado de Elementor. Tanto si quieres añadir código de seguimiento como funciones dinámicas o estilos personalizados, esta función te ayudará a mejorar la funcionalidad y la experiencia de usuario de tu sitio web sin necesidad de programar en profundidad.

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