Los símbolos de Webflow son geniales cuando tienes un diseño recurrente cuyo contenido es exactamente igual en todas sus instancias (por ejemplo, una barra de navegación, un pie de página o un formulario de registro), pero ¿qué pasa si tienes un diseño recurrente que requiere contenido único en cada instancia?
Con el lanzamiento de hoy, estás de suerte. Ahora puedes cambiar imágenes, textos, vídeos y enlaces en una instancia de un símbolo sin afectar a las demás, lo que facilita la creación y el mantenimiento de diseños con contenido único en todo tu sitio.
Por qué esto es genial: un ejemplo práctico
Imagina que tienes una sección en tu página de inicio con tarjetas de testimonios que comparten la misma estructura, pero cada una tiene su propio contenido. Esto es fácil de configurar hoy en día con clases en Webflow, insertando contenido único para cada tarjeta y gestionando el diseño con estilos reutilizables, pero ¿qué pasa si más adelante quieres cambiar por completo la estructura de esas tarjetas?
Antes de hoy, tendrías que reorganizar el contenido de cada tarjeta individualmente o simplemente empezar de cero y repetir todo el proceso de creación para esas tarjetas.
Pero ahora, con el lanzamiento de hoy, puedes convertir estas tarjetas recurrentes en un símbolo, cada una con su propio contenido, y a medida que reestructuras el diseño de ese símbolo, cada instancia conservará su contenido único. Veamos cómo funciona a continuación:
Cómo funciona: paso a paso
Muy bien, pero ¿cómo funciona esto en la práctica? Aquí tienes los pasos:
Paso 1: Define un símbolo
Crea el diseño que quieras reutilizar en tu sitio y conviértelo en un símbolo. En este ejemplo, hemos creado la primera tarjeta y haremos clic derecho para convertirla en símbolo.
Paso 2: Define campos de modificación
Dentro del panel de configuración del símbolo, define los elementos de contenido (texto, imágenes, vídeos y enlaces) que quieras que sean modificables como "campos de modificación". (Si quieres que un elemento tenga exactamente el mismo contenido en todas las instancias, no crees un campo para él).
Paso 3: Modifica los campos de contenido por instancia
Copia y pega ese símbolo tantas veces como necesites y, en el panel de configuración del símbolo, establece modificaciones de contenido únicas para cada campo.
Paso 4: Reestructura el diseño y observa la magia
Haz doble clic en cualquier instancia de un símbolo para editar el símbolo principal. Reestructura el diseño y mira cómo todas las demás instancias se actualizan automáticamente, manteniendo sus propias modificaciones de contenido.
Paso 5: Celebra y suelta unas lagrimitas de felicidad
La estructura de tu símbolo cambió en todo el sitio con una simple edición del diseño principal.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Cómo usar modificaciones de contenido en los símbolos
Con esta mejora, los símbolos adquieren un nuevo rol en tus proyectos: funcionan más como patrones de diseño reutilizables que como simples bloques de contenido de un solo uso. Echa un vistazo a continuación a cómo las modificaciones de contenido te ayudan a trabajar de forma más rápida e inteligente.
Crea una biblioteca de diseños y componentes para tu sitio
Ahora que los símbolos pueden tener contenido único en cada instancia, puedes usarlos para crear una biblioteca de diseños y patrones recurrentes en todo tu sitio, que tú y tu equipo podréis usar como piezas de construcción para nuevas páginas.
Algunos patrones de diseño comunes que podrías convertir en símbolos con modificaciones incluyen:
- Formularios de contacto. Dale a cada formulario su propio título y llamada a la acción según el contexto.
- Secciones principales (Hero). Crea un patrón estándar para las secciones principales de las páginas clave de tu sitio web.
- Bloques de testimonios. Diseña y gestiona el diseño de las secciones de citas de clientes desde un único lugar.
- … ¡y cualquier otra cosa que se repita en tu sitio!
La gran ventaja de este enfoque es que, al usar estos símbolos para crear páginas, sabrás que siempre puedes editarlos y reestructurarlos desde un solo lugar, en lugar de tener que hacer cambios en un montón de elementos repartidos por distintas páginas.
Permite que tu equipo cree páginas con símbolos
Yendo un paso más allá, una vez que hayas creado una biblioteca de diseños y patrones comunes, puedes permitir que tu equipo cree páginas usando estos símbolos y modifique el contenido de cada instancia. Así podrán añadir contenido al sitio sin preocuparse por estilos, clases o cualquier otro aspecto técnico de Webflow.
Como creador del sitio, tú controlas qué campos pueden modificar y cuáles deben permanecer iguales en todas las instancias, lo que te ayuda a mantener los estándares y la uniformidad en todo el sitio.
Crea una biblioteca de diseños y componentes para acelerar tus proyectos con clientes
Si usas Webflow para proyectos de clientes y te cansas de recrear los mismos diseños una y otra vez al empezar, aprovecha estos símbolos mejorados para crear una biblioteca de diseños neutros que te permita arrancar cada sitio a toda velocidad.
Lo que viene a continuación
Esta actualización de los símbolos es solo el primer paso de un plan mayor para evolucionar los símbolos (y Webflow en general) hacia un futuro donde tengas un control mucho más preciso sobre la creación y gestión de sistemas de diseño.
Aunque no podemos revelar todo en lo que estamos trabajando, aquí tienes un adelanto de algunas novedades emocionantes que vienen en camino:
- Símbolos anidados. Inserta símbolos dentro de otros símbolos para lograr un control y una gestión de diseño ultra detallados.
- Anulaciones de estilo y variantes. Define qué estilos de elementos (como el color de fondo) pueden cambiarse en las instancias y crea múltiples variantes (por ejemplo, una versión clara y otra oscura).
- Cambio de nombre: de símbolos a componentes. Para reflejar la gran expansión de las capacidades de los "símbolos", en una futura versión pasaremos a llamarlos "componentes".
- Y mucho, mucho más. Basta con decir que tenemos grandes planes para mejorar la creación y reutilización de sistemas de diseño en Webflow, y compartiremos más detalles en los próximos meses.
¿Cómo vas a usar las anulaciones de contenido en tus proyectos? Cuéntanoslo en los comentarios.
