Cómo agregar código personalizado en WebFlow

Webflow se comercializa ampliamente como una plataforma de desarrollo sin código, lo que se considera su mayor ventaja. Sin embargo, esto no significa que no pueda agregar códigos a su diseño.

Cómo agregar código personalizado en WebFlow

Si bien Webflow ofrece una amplia gama de opciones de diseño, es posible que desee personalizar aún más su sitio web. Aquí es donde entran en juego los códigos personalizados, ya que agregarlos permite una mayor funcionalidad.

Sigue leyendo para aprender cómo agregar un código personalizado en Webflow.

Limitaciones para agregar código personalizado

Antes de aprender a agregar códigos personalizados en Webflow, es importante repasar algunas reglas básicas.

Tenga en cuenta que los códigos personalizados son modificaciones avanzadas. Como tal, pueden causar conflictos con la funcionalidad de Webflow, lo que resulta en un comportamiento inesperado en su sitio. Por lo tanto, no hay garantía de que cada código personalizado sea completamente compatible o funcional.

En general, Webflow admite los siguientes tipos de códigos:

Agregar códigos JavaScript personalizados puede agregar mucha funcionalidad a su sitio web. Por esa razón, Webflow también está equipado con una versión más simple de JavaScript llamada jQuery. Puede usarlo junto con JavaScript para facilitar el proceso de escritura.

Al importar jQuery, es fundamental prestar atención a su versión. La versión debe coincidir con la versión de Webflow importada actualmente para evitar conflictos y comportamientos inesperados. Además, los scripts como onClick y onHover que afectan los eventos DOM también pueden causar un comportamiento inesperado en su sitio.

Al integrar un código personalizado, no puede usar ningún idioma del lado del servidor, incluidos:

Otro aspecto crítico a considerar es la longitud del código personalizado. Webflow impone las siguientes limitaciones de caracteres:

  • 10.000 caracteres para elementos incrustados
  • 10.000 caracteres para códigos sobre una sola página
  • 20.000 caracteres para códigos sobre todo el sitio web

Si el código que desea incrustar supera estos límites de caracteres, no puede incrustarlo directamente. Sin embargo, puede almacenar el código en otro servidor y luego hacer referencia al script en su código. Alternativamente, puede usar una herramienta de terceros para minimizar su código personalizado.

La mayoría de los códigos personalizados no afectarán a los elementos en el modo Diseñador para evitar cualquier comportamiento inesperado. Por lo tanto, verá los resultados solo después de publicar su sitio web.

Desafortunadamente, si su código personalizado no funciona, el equipo de soporte de Webflow no será de mucha ayuda porque la codificación personalizada queda fuera del alcance de su Política de atención al cliente. Intente verificar dos veces su código y visitar el Foro de flujo web para obtener ayuda adicional, si es necesario.

Flujo web Cómo agregar código personalizado

Los códigos personalizados le permiten adaptar su sitio web a sus necesidades específicas. Webflow se aseguró de adaptarse a una variedad de escenarios, lo que permitió a los usuarios agregar códigos personalizados a todo el sitio o solo a páginas individuales. Además, también puedes personalizar publicaciones específicas. La mejor parte es que puede agregar su código personalizado con unos pocos clics, independientemente de la ubicación.

Cómo agregar un código personalizado a un sitio web completo

Si su código personalizado debe aplicarse a todas las páginas de su sitio web, "Configuración del sitio" es el lugar indicado. Agregar el código personalizado allí garantizará una experiencia perfecta en todos los elementos de su sitio web.

Los códigos sobre todo el sitio web pueden ir en la sección de código de encabezado o pie de página. Para agregar un código personalizado en la sección Código de encabezado, haga lo siguiente:

  1. Abra la "Configuración del sitio".
    1653590366 936 Como agregar codigo personalizado en WebFlow
  2. Vaya a la pestaña "Código personalizado".
    1653590366 878 Como agregar codigo personalizado en WebFlow
  3. Agregue el código personalizado al campo "Código principal".
    1653590366 205 Como agregar codigo personalizado en WebFlow
  4. Presiona "Guardar cambios".
    1653590366 999 Como agregar codigo personalizado en WebFlow

Esta sección le permite usar estilos personalizados, vincular a recursos externos y agregar metadatos.

Si desea agregar un código personalizado a la sección de código de pie de página, vaya a la pestaña "Código personalizado" nuevamente y luego siga estos pasos:

  1. Agregue el código personalizado al campo "Código de pie de página".
    1653590366 393 Como agregar codigo personalizado en WebFlow
  2. Toca "Guardar cambios".
    1653590366 666 Como agregar codigo personalizado en WebFlow

Cómo agregar un código personalizado a una sola página

En ocasiones, es posible que desee personalizar solo una o algunas páginas específicas de su sitio web. Webflow hizo este proceso razonablemente simple. Después de agregar el código, seguirá cualquier código de todo el sitio en el marcado de su sitio web.

Al agregar un código personalizado a una sola página, puede elegir dónde colocarlo.

Siempre debe colocar códigos HTML y CSS dentro del etiqueta. Sin embargo, los códigos JavaScript deben ir en el sección de etiquetas, antes de la etiqueta. Por lo general, esto mejorará el rendimiento del sitio web, ya que etiqueta. Después de eso, haz lo siguiente:

  1. Encuentre el "Antes etiqueta” en la pestaña “Código personalizado”.
    1653590366 442 Como agregar codigo personalizado en WebFlow
  2. Agregue el código personalizado a la sección.
    1653590366 118 Como agregar codigo personalizado en WebFlow
  3. Toca "Guardar cambios".

Cómo agregar un código personalizado a una sola publicación

Suponga que no necesita personalizar todo el sitio web o la página. En ese caso, puede agregar códigos personalizados a publicaciones particulares que le gustaría arreglar. Para publicaciones individuales, incrustar es el nombre del juego.

Puede incrustar su código personalizado en cualquier parte del diseño del sitio web o en un elemento de texto enriquecido. Además de los códigos personalizados, esta opción también es excelente para incorporar elementos de terceros, como aplicaciones de chat en vivo, Google Docs y fuentes de redes sociales.

Al agregar un código a un elemento de texto enriquecido, el primer paso es ir al elemento de la colección que desea personalizar.

  1. Abre el "Editor".
  2. Toca la pestaña "Colecciones".
  3. Elija "Colección con texto enriquecido".
  4. Selecciona el artículo de la colección que desees.

A continuación, debe abrir el campo Texto enriquecido. Hay varias opciones de contenido que puede agregar a un campo de texto enriquecido. Puede elegir una de las opciones dadas o escribir su texto.

Para agregar un código personalizado, deberá mostrar las opciones disponibles. Puede hacerlo haciendo clic en cualquier parte del campo en blanco. A partir de ahí, haz lo siguiente:

  1. Toque el icono "más".
    1653590367 928 Como agregar codigo personalizado en WebFlow
  2. Elija la opción "Código personalizado".
  3. Pegue su código en la ventana emergente "HTML Embed Code Editor".
    1653590367 449 Como agregar codigo personalizado en WebFlow
  4. Haga clic en "Guardar y cerrar" en la esquina inferior izquierda de la ventana.
    1653590367 239 Como agregar codigo personalizado en WebFlow

Si desea agregar directamente un código personalizado al diseño de su sitio web, esto es lo que debe hacer:

  1. Copie el código personalizado que desea incrustar.
  2. Vaya a la opción "Agregar panel".
  3. Seleccione la opción "Incrustar elemento".
  4. Pegue su código personalizado en el elemento incrustado en su lienzo de Webflow.
  5. Toca "Guardar y cerrar".

Al escribir un código personalizado, no debe incluir el , o etiquetas De lo contrario, su sitio web se romperá. Sin embargo, no olvide incluir las etiquetas de apertura y cierre, si las hay.

Codificación simplificada

No necesita ser un desarrollador web experimentado para usar códigos personalizados cuando trabaja con Webflow. Si no está seguro de cómo escribir un código, generalmente puede encontrar uno adaptado a sus necesidades en una búsqueda rápida en Google. Después de eso, solo sigue nuestra guía para implementar el código donde quieras. El resultado será el sitio web personalizado de sus sueños.

¿Ha intentado agregar un código personalizado a un sitio de Webflow? ¿Qué elemento querías personalizar? Háganos saber en la sección de comentarios.