El editor es flexible, ya que te permite modificar el código existente o añadir el tuyo propio. Esto le permite ampliar la funcionalidad de la plataforma y le proporciona funciones adicionales. Por ejemplo, puedes añadir un widget de calendario personalizado o incluso un formulario de contacto personalizado de terceros para aceptar pagos en tu sitio.
Aviso
El modo de desarrollador no está disponible cuando se edita el sitio en modo flexible en el editor clásico. Debes salir del modo flexible para acceder al modo de desarrollador.
Hay varias formas de añadir código personalizado: mediante el modo desarrollador o el widget HTML. A continuación encontrará instrucciones sobre cómo acceder a ambos.
Nota
-
El código personalizado destinado a ser visible en el sitio debe añadirse mediante un widget HTML. El código personalizado que no está visible normalmente se debe colocar en el encabezado. En general, siempre es mejor seguir primero las instrucciones proporcionadas por el autor del código antes de añadirlo a tu sitio.
-
No puede cargar ni ejecutar archivos PHP. Los lenguajes del lado del servidor, como PHP, no son compatibles, ya que la plataforma no proporciona la ejecución del lado del servidor ni el acceso al sistema
El modo de desarrollador te da acceso para editar y cambiar el HTML y el CSS de tu sitio. Agregar código personalizado permite una personalización avanzada que no es posible con el editor de arrastrar y soltar; sin embargo, esto solo deben realizarlo usuarios avanzados con un conocimiento sólido del código de desarrollo web.
Para acceder al modo de desarrollador, haz clic para abrir el menú de hamburguesas en el editor y selecciona Modo Dev.
El widget HTML es el método más sencillo para añadir código personalizado a tu sitio. Dependiendo de dónde coloques el widget HTML, aparecerá en todas las páginas de tu sitio o solo en una sola página. Si colocas 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 colocas el widget HTML en cualquier otro lugar, aparecerá solo en el cuerpo.
Para añadir un widget HTML:
-
Búsqueda de HTML, luego arrastra y suelta el widget en una columna o fila de tu sitio y, a continuación, pega tu código.
Puedes colocar el código en el encabezado de todo el sitio o en el encabezado de una página individual.
Nota
Las aplicaciones de administración del consentimiento no pueden impedir 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 en función de las prácticas recomendadas de rendimiento del sitio. Colocamos los guiones y los banners de CMP en la parte inferior de la página para mejorar el rendimiento del contenido principal. Por este motivo, se recomienda colocar el código en el cuerpo cuando se utiliza una aplicación de gestión del consentimiento
Para colocar el código en el encabezado de todo el sitio:
It is common for pixel tracking codes to disappear when placed in the header. The head section <head> does not accept any code that is <img>, <iframe>, and more. It normally only takes <link>, <script>, and <meta>.
Si tienes que pegar código que no está guardado en la sección principal, pégalo en el encabezado o en el archivo body-end.html. Para hacerlo, sigue los pasos que se indican en Código personalizado después de la etiqueta corporal de apertura sección de este artículo.
Actualmente no tenemos una función para colocar el código justo después de la etiqueta corporal que se abre. Sin embargo, puedes pegar el código directamente en el archivo body-end.html. Hay dos maneras de hacerlo, en modo desarrollador o en configuración.
Para pegar código directamente en el archivo body-end.html en modo desarrollador:
-
Haga clic para abrir el menú de hamburguesas en el editor y, a continuación, seleccione Modo Dev.
-
Haga clicSitio HTML//CSSpara ampliar la selección.
-
Haga clicbody-end.html.
-
Pega tu código en la última línea aquí.
-
Haga clic Guardar y Listo.
Para pegar el código directamente en el archivo body-end.html en la configuración:
Muchos elementos, incluidas las filas, las columnas y los widgets, ofrecen la posibilidad de acceder a su HTML/CSS.
Si está en el Editor clásico usando el modo flex 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 el Editor 2.0: También puede editar el CSS de los encabezados y pies de página.
-
Es posible que el panel de diseño no refleje todos los cambios en el código personalizado. Esto puede provocar diferencias de estilo entre el panel de diseño y los elementos integrados
Para añadir cualquier código a cualquier elemento o widget:
-
En el editor clásico, haz clic con el botón derecho en el widget o elemento para que aparezca el menú contextual.
-
Si está en modo flex en el editor clásico o en el Editor 2.0: Haga clic para seleccionar el contenedor flexible, el encabezado o el pie de página.
-
ClamerEditar HTML/CSS. Si está en modo flex en Classic Editor o Editor 2.0, cHaga clic en el icono de tres puntos del menú flotante y, a continuación, seleccioneEdita CSS.
-
Edite o añada código aquí, según sea necesario.
-
Haga clic Actualizar.
Es posible que sea necesario actualizar el navegador para ver el cambio.
Para añadir un código de seguimiento a un formulario de contacto:
-
Navega hasta la página en la que se encuentra tu formulario de contacto.
-
Haz clic en tu formulario de contacto para abrir las opciones.
-
Haga clicPresentación.
-
Haga clicRastreo.
-
Pega aquí tu código de seguimiento de conversiones.
A continuación se indican las directrices que se deben seguir al trabajar con código personalizado y el modo de desarrollador.
Pautas generales
-
Crea siempre una copia de seguridad de tu sitio antes de añadir código personalizado.
-
Antes de colocar el código en el encabezado, pruébalo primero en un sitio de prueba diferente. Puedes hacerlo haciendo un duplicado de tu sitio para probar el código personalizado.
-
Para el código que se debe colocar en una página, crea una página de prueba y coloca el código allí.
-
vista previa usa HTTPS, mientras que tu sitio activo puede que no. Esto a menudo descompone el código personalizado.
-
Asegúrese de permanecer dentro de las columnas. Nuestros sitios adaptables se basan en una estructura de filas y columnas. Esto significa que cada fila contiene columnas que, en última instancia, contienen el contenido. Cuando añadas o edites tu propio HTML, asegúrate de que esté dentro de una columna.
Pautas específicas del modo de desarrollador
-
Asegúrese de permanecer dentro de las columnas. Nuestros sitios adaptables se basan en una estructura de filas y columnas. Esto significa que cada fila contiene columnas que, en última instancia, contienen el contenido. Cuando añadas o edites tu propio HTML, asegúrate de que esté dentro de una columna.
-
Deje las clases en su lugar. El editor se basa en las numerosas clases que se añaden a los elementos. Si ves una clase existente (normalmente empieza por dm), déjala en su lugar. Si eliminas clases, es posible que el sitio no tenga el mismo aspecto cuando vayas a previsualizarlo.
-
Observe el tamaño de las clases. Las columnas tienen un valor de tamaño que se agrega como clase, como large-6 o small-12. Esto determina el tamaño de las columnas dentro de esa fila. Querrás dejarlos en su lugar, ya que son la base para ajustar el tamaño de la fila en diferentes dispositivos
-
Si es posible, evita editar extensiones. En el HTML, verás los marcadores de posición de los elementos que ya están en la página. Si puedes, evita editarlos, especialmente los valores de datos que contienen. Editarlos puede dañar los widgets una vez que regreses al editor
Si has añadido código personalizado a tu sitio que afecta a su rendimiento o te impide editarlo, lo más probable es que se deba a que el código no tiene el formato correcto o no es compatible con HTTPS.
A continuación se presentan las soluciones de solución de problemas que pueden surgir al trabajar con código personalizado.
Restaura una copia de seguridad de tu sitio hasta un punto anterior a la adición del código personalizado (incluso si no has creado una copia de seguridad, el editor crea una cuando publicas o entras en el modo de desarrollador).
Para restaurar una copia de seguridad:
A continuación se muestran los mensajes de error específicos y su significado:
-
DUPLICATE_ID. Cada elemento debe tener un identificador ú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 12. -
INVALID_CLASS_FOR_ELEMENT.Website Builderse ha agregado una clase a un elemento no válido.
Si tienes un código que no funciona en el sitio, lo más probable es que se deba a que el código no tiene el formato correcto o no es HTTPS.
Si tienes algún enlace en tu código (http://o//) y tu sitio usa HTTPS o estás en la versión preliminar, tendrás que cambiarlo para que sea https://en su lugar. Esto se debe a que el código que no es HTTPS no funcionará en una conexión cargada mediante HTTPS (vista previa del sitio, editor, etc.)
Si no puedes acceder al editor cuando el sitio se carga por primera vez, intenta acceder al editor en una página nueva introduciendo una URL diferente en el enlace del editor, como https://my.Website builder.co/home/site/xxxxxxx/acerca de. Cuando llegues allí, puedes eliminar y volver a añadir la página que está causando problemas, o acceder al modo desarrollador para solucionar el problema en el código del sitio
O bien, si el editor no funciona, intente forzar la apertura del editor mediante el método abreviado de teclado del inspector de elementos. Para Mac, el método abreviado es Comando+Opción+C. Para PC, el acceso directo es Ctrl+Alt+C
La optimización de la velocidad de la página afecta a la forma en que se ejecutan ciertos scripts. Ejecutamos la optimización de PageSpeed en la mayoría de las páginas, lo que puede provocar problemas con el código personalizado
Para determinar si tu código personalizado se ve afectado por un problema de velocidad de página:
-
Duplica la página con tus guiones.
-
Cambia la URL a «testing_scripts». «
-
Publica y, a continuación, comprueba la página en tu sitio activo.
-
Si el 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 intentar asegurarse de que se ejecute de forma asíncrona; no está garantizado, pero a veces puede resolver el problema de que los scripts no se ejecuten correctamente en el navegador.
Para habilitar la asincronía en los scripts, modifique el código de la siguiente manera:
-
Código antiguo:
<script src="https://example.com/script.js"></script> -
Código nuevo:
<script src="https://example.com/script.js" async defer></script>