El editor es flexible, en el sentido de que le permite modificar un código existente y también agregar el suyo. De este modo puede extender la funcionalidad de la plataforma y obtener características adicionales. Por ejemplo, puede agregar un widget de calendario personalizado o incluso un formulario de contacto de un tercero para aceptar pagos en su sitio.
Hay varias formas de agregar código personalizado: a través de modo desarrollador o el widgetHTML . A continuación se presentan instrucciones sobre cómo acceder a ambos.
Nota
El código personalizado que está destinado a ser visible en el sitio debe agregar mediante un widget HTML. El código personalizado que no se debe colocar normalmente se debe colocar en el encabezado. En general, siempre es mejor seguir primero las instrucciones proporcionadas por el escritor del código antes de agregarlo a su sitio.
El Modo de desarrollador le otorga acceso para editar y cambiar el HTML y CSS de su sitio. Agregar un código personalizado le permite una personalización avanzada que no es posible con el editor de arrastrar y soltar; sin embargo, solo usuarios avanzados con sólidos conocimientos sobre códigos de desarrollo web pueden hacer esto.
Para acceder al modo de desarrollador:
-
Haga clic en modo desarrollador (
) en la barra de navegación. Como alternativa, haga clic con el botón derecho en un widget y seleccione Editar HTML/CSS y, a continuación, haga clic en Modo de desarrollo en la parte inferior izquierda.
-
Luego de agregar su código, use los botones Almacenar y Vista previa para ver su trabajo.
El widgetHTML es el método más fácil de agregar código personalizado a su sitio. Dependiendo de dónde coloques tu widget HTML, aparecerá en todas las páginas de tu sitio o en una sola página. Si coloca el widget HTML en el encabezado o en el pie de página, se colocará en todas las páginas del sitio al mismo tiempo. Esto se debe a que cada sitio comparte el encabezado y el pie de página. Si coloca el widget HTML en cualquier otro lugar, solo aparecerá en el cuerpo.
En el panel lateral,haz clic en, arrastra widget el HTMLwidget a una columna o fila del sitio y pégalo en el código.
Puede colocar el código en el encabezado de todo el sitio o en el encabezado de una página individual.
Nota
Las aplicaciones de gestión de consentimiento no pueden evitar que el código se ejecute antes del consentimiento cuando el código se coloca en el HTML del encabezado. Esto se debe a que optimizamos la estructura y el orden en que se carga el contenido, según las mejores prácticas de rendimiento del sitio. Colocamos scripts y banners CMP más abajo en la página para mejorar el rendimiento del contenido principal. Por este motivo, se recomienda colocar el código en el cuerpo del mensaje cuando se emplea una aplicación de gestión de consentimiento.
Para colocar el código en el encabezado de todo el sitio:
-
En el panel lateral, haz clic en SEO y configuración.
-
Haga clic en Encabezado HTML.
-
Cabeza HTML. Agregar contenido al campo de la sección principal.
-
Cuerpo Fin HTML. agregar HTML/Javascript personalizado justo antes del tag de cierre del elemento <body> para cada página del sitio.
-
-
Pegue su código y luego almacénelo.
Es común que los códigos de seguimiento de pixeles desaparezcan cuando se colocan en el encabezado. La sección de encabezado <head> no acepta ningún código que sea <img>, <iframe> y más. Normalmente sólo se necesitan <link>, <script> y <meta>.
Si tiene que pegar código que no se almacena en la sección de encabezado, péguelo en el encabezado o en body-end.html. Para ello, siga los pasos de la sección Código personalizado luego del tagdel cuerpo de apertura de este artículo.
Actualmente, no tenemos una característica para colocar códigos directamente después de la etiqueta de cuerpo inicial. Sin embargo, puede pegar el código directamente en el archivo body-end.html. Hay dos formas de hacer esto, en el modo desarrollador o en configuración.
Para pegar el código directamente en el archivo body-end.html en el modo desarrollador:
-
Haga clic en el icono de modo desarrollador (
-
Haga clic en HTML/CSS del sitio para expandir la selección.
-
Haga clic en body-end.html.
-
Pegue su código en la última línea aquí.
-
Haga clic en Almacenar y listo.
Para pegar el código directamente en el archivo body-end.html en configuración:
Muchos elementos, incluidas filas, columnas y widget ofrecen la posibilidad de acceder a su HTML/CSS.
Para agregar cualquier código a cualquier elemento o widget:
-
Haz clic con el botón derecho del mouse en el widget o elemento para que aparezca el menú contextual.
-
Haga clic en Editar HTML/CSS. Si está en modo flexible en el Editor tradicional o el Editor 2.0, haga clic en el ícono de tres puntos en el menú flotante y luego seleccione Editar CSS.
-
Edite o agregue el código aquí, según sea necesario.
-
Haga clic en Actualizar.
Es posible que el navegador deba actualizarse para ver el cambio.
Para agregar el código de seguimiento a un formulario de contacto:
-
Navegue hasta la página en la que se encuentra su formulario de contacto.
-
Haga clic en su formulario de contacto para abrir las opciones.
-
Haga clic en Enviar.
-
Seguimiento de clics.
-
Pegue su código de seguimiento de conversiones aquí.
A continuación se recomiendan las directrices que se deben seguir al trabajar con código personalizado y modo desarrollador.
Directrices generales
-
Crea siempre una copia de seguridad de tu sitio antes de agregar código personalizado.
-
Antes de colocar código en el encabezado, primero pruébelo en un sitio de prueba separado. Puedes hacer esto creando un duplicado de tu sitio para probar el código personalizado.
-
Si el código debe colocarse en una página, cree una página de prueba y agregue el código allí.
-
La vista previa emplea HTTPS, mientras que su sitio en tiempo real puede no hacerlo. Esto a menudo romperá el código personalizado.
-
Asegúrese de permanecer dentro de las columnas. Nuestros sitios adaptables se basan en una estructura fila-columna. Esto significa que cada fila contiene una columna, la cual en última instancia puede dar cabida al contenido. Al agregar o editar su propio HTML, asegúrese de que esté en una columna.
Directrices específicas de modo desarrollador
-
Asegúrese de permanecer dentro de las columnas. Nuestros sitios adaptables se basan en una estructura fila-columna. Esto significa que cada fila contiene una columna, la cual en última instancia puede dar cabida al contenido. Al agregar o editar su propio HTML, asegúrese de que esté en una columna.
-
Deje las clases establecidas. El editor se basa en las numerosas clases que se agregan a los elementos. Si ve una clase existente (generalmente comienza con dm), déjela establecida. Si elimina las clases, el sitio podría no lucir igual cuando vaya a obtener una vista previa.
-
Observe los tamaños de las clases. Las columnas tienen un valor de tamaño que se suma como una clase, por ejemplo, largo 6 o pequeño 12. Esto determina el tamaño de las columnas en esa fila. Le conviene dejarlas establecidas, dado que son el núcleo de lo que permite ajustar la fila en diferentes dispositivos.
-
Evite editar extensiones si es posible. En el HTML, verás marcadores de posición de elementos en la página ya. Si puede, evite editarlos, especialmente los valores de datos que contienen. Editarlos puede romper el widget una vez que regrese al editor.
Si agregó un código personalizado a su sitio y está afectando su rendimiento o impidiéndole editarlo, es muy probable que se deba a que el código no tiene el formato correcto o no cumple con HTTPS.
A continuación se presentan soluciones para problemas que pueda encontrar al trabajar con código personalizado.
Restaura una copia de seguridad de tu sitio a un punto anterior a la adición del código personalizado (incluso si no creaste una copia de seguridad, el editor crea una por ti cuando publicas o entras en modo desarrollador).
Para restaurar una copia de seguridad:
A continuación se muestran mensajes de error específicos y su significado:
-
DUPLICATE_ID. Cada elemento debe tener un ID único. -
INVALID_ELEMENT_LOCATION. Todos los elementos deben estar en una columna que debe estar en una fila. -
BAD_PROPORTION. Las columnas de una fila deben sumar hasta 12. -
INVALID_CLASS_FOR_ELEMENT. Se agregó una clase IONOS a un elemento no válido.
Si tiene un código que no funciona en el sitio, lo más probable es que se deba a que el código no esté formateado correctamente o no sea HTTPS.
Si tiene cualquier enlace en su código (http:// o //) y su sitio usa HTTPS o usted está en la vista previa, entonces deberá cambiar eso, de forma que sea https:// en su lugar. El motivo de esto es que el código no HTTPS no funcionará en una conexión cargada en HTTPS (vista preliminar del sitio, editor, etc.).
La optimización de la velocidad de la página afecta cómo se ejecutan ciertos scripts. Ejecutamos la optimización de PageSpeed en la mayoría de las páginas, lo que puede causar problemas con su código personalizado.
Para determinar si su código personalizado se ve afectado por un problema de velocidad de la página:
-
Duplica la página con tus scripts.
-
Cambie la URL a "testing_scripts".
-
Publique y luego verifique la página en su sitio en tiempo real.
-
Si su código funciona en esa página, comunicar con el soporte para desactivar la optimización de la velocidad de la página de su sitio.
Si está utilizando un script, también puede tratar de asegurarse de que este se ejecute de forma asíncrona; no está garantizado pero, a veces, esto puede resolver el problema con los scripts que no se ejecutan correctamente en el navegador.
Para habilitar la asincronización en scripts, altere su código con lo siguiente:
-
Código antiguo:
<script src="https://example.com/script.js"></script> -
Nuevo código:
<script src="https://example.com/script.js" async defer></script>