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 añadir código personalizado: a través del modo de desarrollador o del widget HTML. A continuación se muestran instrucciones sobre cómo acceder a ambos.
Nota
Se debe agregar un código personalizado que está pensado para ser visible en el sitio mediante un widget HTML. Un código personalizado que no sea visible generalmente se debe poner en el encabezado. En general, siempre es mejor seguir primero las instrucciones proporcionadas por el creador 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 de 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.
-
Después de agregar el código, use los botones Guardar y Vista previa para ver su trabajo.
El widget HTML es el método más fácil de agregar códigos personalizados a su sitio. Dependiendo de dónde coloque su widget HTML, aparecerá en todas las páginas de su sitio o solo en una página. Si coloca el widget HTML en el encabezado o el pie de página, aparecerá 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 clic en, arrastra widget 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 utiliza 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. Agregue contenido al campo de la sección principal.
-
HTML del extremo del cuerpo. Agregue HTML/Javascript personalizado justo antes del tag de cierre del elemento <body> para cada página del sitio.
-
-
Pega el código y guárdalo.
Es común que los códigos de seguimiento de píxeles 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 guarda 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 después 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 Modo de 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 Guardar 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.
-
Puede editar el CSS de los contenedores flexibles (sección, columna, columna interna y cuadrícula avanzada). También puede editar el CSS de encabezados y pies de página.
-
Es posible que el panel de diseño no refleje todos los cambios de código personalizado. 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:
-
Haga clic para seleccionar el contenedor flexible, el encabezado o el pie de página.
-
Haz clic en el icono de tres puntos en el menú flotante y, a continuación, selecciona 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 de CSS at. Si desea usar CSS en las reglas, debe agregarlas a través del modo de desarrollador, al que se puede acceder haciendo clic en el icono del modo de desarrollador en la barra de navegación superior.
Las siguientes reglas de at solo se admiten en el modo de desarrollador:
-
@import: Se utiliza para importar hojas de estilo externas.
-
@media: Define reglas de estilo para diferentes tipos de medios/dispositivos.
-
@font-face: Permite cargar y utilizar fuentes personalizadas.
-
@supports: Aplica estilos en función de la compatibilidad con características.
-
@keyframes: Define las animaciones.
-
@page: Se utiliza 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 URLs específicas.
-
@layer: Se utiliza en capas de cascada CSS.
-
@property: Define propiedades personalizadas con tipos y valores iniciales específicos.
Puede agregar clases CSS a elementos flexibles (sección, columna, columna interna y cuadrículas avanzadas). El uso de clases CSS puede ahorrar tiempo al aplicar estilo a los elementos. Por ejemplo, en lugar de utilizar 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 número de columnas.
La misma clase se puede aplicar a varios elementos en la misma página y se pueden aplicar varias clases al mismo elemento.
Nota
Debe tener acceso al modo de desarrollador para usar esta función.
Para agregar o editar una clase CSS:
-
Seleccione el elemento flexible deseado (sección, columna, columna interior o rejilla 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 ha agregado la clase CSS al código, haga clic en abrir el modo de desarrollo.
-
Haga clic en Listo.
Para añadir 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 indican las instrucciones recomendadas que se deben seguir al trabajar con código personalizado y el modo de desarrollador.
Lineamientos Generales
-
Crea siempre una copia de seguridad de tu sitio antes de añadir un código personalizado.
-
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 vivo 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 del modo de 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.
-
Deja las clases en su lugar. El editor se basa en las numerosas clases que se agregan a los elementos. Si ves una clase existente (por lo general, comienza con dm), déjala en su sitio. Si elimina las clases, el sitio podría no lucir igual cuando vaya a obtener una vista previa.
-
Observa los tamaños de las clases. La columnas presentan un valor de tamaño que se añade como una clase, por ejemplo, "large-6" o "small-12". Este determina el tamaño de las columnas dentro de 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.
A continuación se presentan soluciones de solución de 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 has creado una copia de seguridad, el editor crea una por ti cuando publicas o entras en modo de 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 12. -
INVALID_CLASS_FOR_ELEMENT. Se ha añadido una clase Smoobu 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 a la forma en que se ejecutan determinados 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 vivo.
-
Si su código funciona en esa página, comuníquese con el centro de ayuda para desactivar la optimización de PageSpeed para 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>
Comentarios
0 comentarios
El artículo está cerrado para comentarios.