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.
Advertencia
modo desarrollador no está disponible cuando se edita el sitio en modo flex en el editor tradicional. Debes salir del modo flex para acceder al modo desarrollador.
Hay varias formas de agregar código personalizado: a través de modo desarrollador o el widgetHTML . A continuación se muestran las 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. Por lo general, el código personalizado que no lo es 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 todos los sitios comparten el encabezado y el pie de página. Si coloca el widget HTML en cualquier otro lugar, aparecerá solo en el cuerpo.
En el panel lateral,haz widget clic en , arrastra el HTMLwidget a una columna o fila del sitio y pégalo en el código.
Puede colocar código en el encabezado de todo el sitio o en el encabezado de una página individual.
Nota
Las aplicaciones de administració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 de cómo se carga el contenido, en función de las mejores prácticas de rendimiento en el sitio. Colocamos scripts y banners CMP más abajo en la página, con el fin de mejorar el rendimiento del contenido principal. Por este motivo, se recomienda colocar el código en el extremo del cuerpo cuando se emplea una aplicación de administració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 HTML de encabezado.
-
Cabeza HTML. Agregar contenido al campo de la sección principal.
-
HTML del extremo del cuerpo. agregar HTML/Javascript personalizado justo antes del cierre tag del elemento <body> para cada página del sitio.
-
-
Pega el código y almacénalo.
Es común que los códigos de seguimiento de pixeles desaparezcan cuando se colocan en el encabezado. La sección <head> principal no acepta ningún código que sea <img>, <iframe>, y más. Normalmente solo se necesitan <link>, <script>, y <meta>.
Si tiene que pegar código que no se almacena en la sección principal, péguelo en el encabezado o en el 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.
Si está en el Editor tradicional empleando el modo flexible o en el Editor 2.0, puede editar el CSS de los contenedores flexibles (sección, columna, columna interior y cuadrícula avanzada). Si estás en Editor 2.0 también puedes editar el CSS de encabezados y pies de página.
Para agregar cualquier código a cualquier elemento o widget:
-
Haga clic con el botón derecho en su widget o elemento para que aparezca el menú contextual. Si está en modo Flex en Editor tradicional o Editor 2.0, haga clic para seleccionar el contenedor, el encabezado o el pie de página flexibles.
-
Haga clic en Editar HTML/CSS. Si está en modo flexible en Editor tradicional o Editor 2.0, haga clic en el icono de tres puntos en el menú flotante y, a continuación, 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.
El mecanismo de actualización de estilo actual no admite CSS en las reglas. Si desea emplear CSS en reglas en Flex Mode o Editor 2.0, debe agregarlas a través de modo desarrollador, al que se puede acceder haciendo clic en el icono de modo desarrollador en la barra de navegación superior.
Las siguientes reglas at solo se admiten en modo desarrollador:
-
@import: Se emplea para importar hojas de estilo externas.
-
@media: Define reglas de estilo para diferentes tipos de medios/dispositivos.
-
@font-face: Permite cargar y emplear fuentes personalizadas.
-
@supports: Aplica estilos en función de la compatibilidad con características.
-
@keyframes: Define las animaciones.
-
@page: Se emplea en medios paginados, como la impresión.
-
@namespace: Declara un espacio de nombres para documentos XML.
-
@charset: Especifica la codificación de caracteres.
-
@counter-style: Define estilos de contador personalizados.
-
@document: (Obsoleto) Estilos aplicados a URL específicas.
-
@layer: Se emplea en capas en cascada CSS.
-
@property: Define propiedades personalizadas con tipos y valores iniciales específicos.
Para agregar un 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 Envío.
-
Haga clic en Seguimiento.
-
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.
Lineamientos generales
-
Crea siempre una copia de seguridad de tu sitio antes de agregar código personalizado.
-
Cuando trabaje con código personalizado, use siempre su editor desde este enlace: http://my.duda.co?nossl
-
Puede obtener una vista previa del código fuera de un iframe cambiando el enlace del editor de //my.duda.co/home/ed/site/xxxxx/page a https://my.duda.co/site/xxxxx/page?preview=true
-
Antes de colocar el código en el encabezado, pruebe primero en un sitio de prueba independiente. Puedes hacer esto haciendo 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 usa HTTPS, mientras que su sitio en tiempo real puede que no. 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, ya verás marcadores de posición de elementos en la página. 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.
Cautela
El soporte de Duda no puede solucionar problemas de código personalizado.
-
El código personalizado es muy impredecible. Hay muchos factores por los que su código personalizado puede no funcionar con nuestra plataforma. Si necesita ayuda para que el código personalizado funcione en su sitio, podría valer la pena contratar a un experto de Duda para que lo ayude a hacer que su código funcione en su sitio.
-
Las aplicaciones de administració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 Duda optimiza la estructura y el orden de cómo se carga el contenido, en función de las mejores prácticas de rendimiento en el sitio. Colocamos scripts y banners CMP más abajo en la página, con el fin de mejorar el rendimiento del contenido principal. Por este motivo, se recomienda colocar el código en el extremo del cuerpo cuando se emplea una aplicación de administración de consentimiento.
A continuación se presentan soluciones de solución de problemas para los problemas que puede 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 lo que significan:
-
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 Duda 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.).
Si no puedes acceder al editor cuando se carga tu sitio inicialmente, intenta acceder a tu editor en una página nueva ingresando una URL diferente en el enlace del editor, como https://my. Duda.co/home/site/XXXXXXX/about. Cuando llegue allí, puede eliminar y volver a agregar la página que está causando problemas, o acceder a modo desarrollador para solucionar el problema en el código del sitio.
O bien, si el editor está roto, intente forzar la apertura del editor empleando el método abreviado de teclado para el inspector de elementos. Para Mac, el atajo es Comando+Opción+C. Para PC, el atajo es Ctrl+Alt+C
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 tu código personalizado se ve afectado por un problema de velocidad de página:
-
Duplique la página con sus scripts.
-
Cambia la URL a "testing_scripts".
-
Publique y luego verifique la página en su sitio en tiempo real.
-
Si tu código funciona en esa página, ponte en contacto con el servicio de asistencia para desactivar la optimización de la velocidad de la página en tu 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>