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 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 () en la barra superior.
-
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 usando el modo flexible o en el Editor 2.0, puede editar el CSS de los contenedores flexibles (sección, columna, columna interna y cuadrícula avanzada). Si estás en Editor 2.0 también puedes editar el CSS de encabezados y pies de página.
Nota
En el Editor 2.0 y el modo flexible, es posible que el panel de diseño no refleje todos los cambios de código personalizados. Esto puede provocar diferencias de estilo entre el panel de diseño y los elementos en línea.
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. Si está en modo flexible en el Editor tradicional o el Editor 2.0, haga clic para seleccionar el contenedor flexible, el encabezado o el pie de página.
-
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.
El mecanismo de actualización de estilo actual no admite reglas CSS. 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 según la compatibilidad de funciones.
-
@keyframes: Define 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) Se aplicaron estilos a URL específicas.
-
@layer: Se emplea en capas en cascada CSS.
-
@property: Define propiedades personalizadas con tipos específicos y valores iniciales.
En el Editor 2.0 y en el modo flex, puedes agregar clases CSS a elementos flex (sección, columna, columna interior y cuadrículas avanzadas). El uso de clases CSS puede ahorrar tiempo al diseñar elementos. Por ejemplo, en lugar de emplear el panel de diseño para cambiar el relleno y el tamaño de una sola columna, puede crear una clase CSS y aplicar estos cambios de estilo a cualquier cantidad de columnas.
La misma clase se puede aplicar a múltiples elementos en la misma página, y múltiples clases se pueden aplicar al mismo elemento.
Nota
Debes tener acceso a modo desarrollador para usar esta función.
Para agregar o editar una clase CSS:
-
Seleccione el elemento flexible deseado (sección, columna, columna interna o cuadrícula avanzada).
-
En el menú flotante o en el menú contextual, seleccione agregar Nombre de clase CSS.
-
Escriba un nuevo nombre de clase CSS o seleccione un nombre de clase existente en el menú desplegable. Puede seleccionar varias clases.
-
(Opcional) Si aún no agregó la clase CSS al código, haga clic en Abrir modo Dev.
-
Haga clic en Listo.
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 Website Builder 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 puede acceder al editor cuando su sitio se carga inicialmente, intente acceder a su editor en una nueva página ingresando una URL diferente en el enlace de su editor, como https://my.Website Builder.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 no funciona, intente forzar su apertura empleando el atajo 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 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>