Incrustación de código personalizado - Ayuda de Webflow
Añade bloques de código personalizados a tu sitio usando el elemento Code Embed para desbloquear todo tipo de funcionalidades personalizadas.
<style>, y JS en etiquetas <script>. No puedes integrar lenguajes del lado del servidor (por ejemplo, Perl, PHP, Python, Ruby) en un elemento Code Embed.Cómo añadir un elemento de incrustación de código
Puedes incrustar código de terceros o tu propio código personalizado en cualquier parte de tu diseño o en un elemento de texto enriquecido.
Cómo añadir código personalizado directamente a tu diseño
- Copia el código que deseas incrustar en tu portapapeles
- Abre el panel de Añadir y añade un elemento Code Embed al lienzo de Webflow
- Pega el código personalizado que copiaste en el paso 1
- Guarda y cierra el modal
<html>, <body> o <head> en tu código personalizado, o tu sitio web/diseño se romperá.Cómo agregar código personalizado a un elemento de texto enriquecido
- Copia el código que deseas incrustar en tu portapapeles
- Coloca el cursor en el elemento de texto enriquecido donde deseas agregar tu código personalizado
- Haz clic en el icono de “más” para abrir el menú de inserción y haz clic en el botón de código personalizado
- Pega el código personalizado que copiaste en el paso 1
Cómo usar contenido dinámico dentro de tu código personalizado
Puedes incorporar campos de Colección en el código incrustado para extraer información dinámicamente para varios usos. Aprende más: Consulta Incrustaciones dinámicas en el Centro de ayuda de Webflow.
Cómo editar el elemento de Código Incrustado
Hay varias formas de abrir el editor de código y editar el código en un elemento de Código Incrustado. Puedes:
- Seleccionar el elemento de Código Incrustado en el lienzo y hacer doble clic
- Seleccionar el elemento de Código Incrustado en el lienzo y presionar enter
- Seleccionar el elemento de Código Incrustado en el lienzo y hacer clic en el icono de configuración “engranaje”
- Seleccionar el elemento de Código Incrustado en el lienzo y hacer clic en Abrir editor de código en el panel de Configuración bajo configuraciones de Código Incrustado
Cómo establecer dimensiones en el elemento de Incrustación de Código
Si el código personalizado dentro del elemento de Incrustación de Código no establece explícitamente el tamaño o las dimensiones, el contenido a menudo puede ocupar todo el ancho de su elemento padre. Puedes intentar añadir height="100%" width="100%" en tu código personalizado, lo que te permitirá ajustar el ancho y la altura del elemento incrustado y el contenido desde el panel de Estilo.
Cómo previsualizar el contenido incrustado
El código personalizado envuelto en etiquetas <iframe></iframe> o <style> mostrará una vista previa en el lienzo o dentro de tu elemento de texto enriquecido, pero algunos códigos incrustados solo se pueden ver en el sitio web en vivo. Cada vez que se usa una etiqueta en el editor de código, verás un marcador de posición para ese elemento en el Diseñador.
Una vez que previsualices, publiques o exportes tu sitio, el script y el código personalizado dentro se renderizarán donde lo colocaste.
Todo el código aquí será excluido
Aprende más: Consulta Usar .webflow.io como un dominio de ensayo para pruebas y comentarios.
Preguntas frecuentes y consejos de solución de problemas
¿Puedo usar lenguajes del lado del servidor en un elemento de Incrustación de Código?
No puedes integrar lenguajes del lado del servidor (por ejemplo, Perl, PHP, Python, Ruby) en un elemento de Incrustación de Código. El elemento de Incrustación de Código solo admite HTML, CSS en etiquetas <style>, y JS en etiquetas <script>.
¿Puedo aumentar el límite de 50,000 caracteres para el elemento de Código Incrustado?
El código personalizado en el elemento Código Incrustado no puede exceder los 50,000 caracteres. Si el código que deseas incrustar es más largo, puedes almacenarlo en otro servidor y referenciar el script en tu incrustación. También puedes minimizar tu código personalizado usando una herramienta de terceros o dividir el código en múltiples elementos de Código Incrustado (siempre que esto no rompa ninguna función de JavaScript).
¡Ayuda! ¡Mi código personalizado no funciona!
Verifica que tu código incluya las etiquetas de apertura y/o cierre apropiadas y no incluya etiquetas <html>, <body> o <head>.
Desde agosto de 2020, los sitios de Webflow publicados recientemente incluyen jQuery v3.5.1. Importar otras versiones de jQuery con código personalizado puede causar conflictos y comportamientos inesperados en tu sitio. Los scripts que afectan eventos del DOM como onClick, onHover, etc., también pueden causar comportamientos inesperados.
Es importante tener en cuenta que el código personalizado es una modificación avanzada que puede entrar en conflicto con la funcionalidad subyacente de Webflow. Por lo tanto, Webflow no puede garantizar la funcionalidad o compatibilidad total de ningún código personalizado.
Nuestro equipo de soporte no puede proporcionar ayuda directa con la configuración o solución de problemas de código personalizado, ya que estos temas están fuera del alcance de nuestra política de soporte al cliente. Si encuentras problemas con el código personalizado, háznoslo saber en el Foro de Webflow, donde toda la comunidad de Webflow (incluido el personal) puede proporcionar ayuda y recursos adicionales.