Descripción general de componentes - Ayuda de Webflow

Usa componentes para gestionar diseños y contenido recurrentes de manera más eficiente en tu sitio.

Los componentes te dan el poder de crear bloques personalizables a partir de elementos y elementos secundarios para mantener un flujo de trabajo de diseño consistente, eficiente y escalable. Puedes reutilizar esos bloques en tu sitio y modificarlos en un solo lugar para evitar revisar individualmente cada diseño recurrente.

Cómo crear un componente

Puedes crear componentes visualmente en Webflow o importar componentes existentes desde una base de código externa con DevLink. Esta sección se centra en el desarrollo visual.

Puedes crear un componente a partir de un elemento o grupo de elementos, y elegir si cada instancia es idéntica en todo tu sitio o permite cambios en su contenido, diseño o estilo:

• Contenido y diseño idénticos por instancia — crea un componente para diseños recurrentes (por ejemplo, barras de navegación y pies de página) para reutilizar en tu sitio. Cualquier cambio en el contenido o diseño actualiza automáticamente cada instancia del componente.
• Contenido único por instancia — crea un componente con un diseño y estilo consistentes, pero permite que cada instancia tenga contenido diferente (por ejemplo, un diseño de sección de héroe que puede tener texto, imágenes o videos únicos por instancia) usando propiedades y ranuras de componente.
• Diferentes variantes de estilo por instancia — crea un componente con opciones de estilo y diseño predefinidas (por ejemplo, botones sólidos y de contorno, o diseños de tarjetas horizontales y verticales). Las variantes de estilo de componente te permiten personalizar el diseño de cada instancia sin necesidad de crear componentes separados.

Para crear un componente:

1. Selecciona el elemento que deseas convertir en un componente
2. Abre el panel de Componentes, panel de Estilo o panel de Configuración de Elementos
3. Haz clic en el icono de “crear componente” en la parte superior del panel
4. Dale un nombre y una descripción opcional a tu componente y haz clic en Crear

También puedes duplicar un componente existente seleccionando el componente, haciendo clic en los puntos de "más opciones" y eligiendo Duplicar.

Estarás dentro del componente principal después de haber creado un componente, lo que significa que cualquier cambio en el componente principal se actualiza en todas las instancias de ese componente. En cualquier momento, puedes entrar al componente principal en cualquier instancia de componente mediante:

• Hacer doble clic en la instancia del componente
• Hacer clic derecho en la instancia y hacer clic en Editar componente
• Seleccionar la instancia y hacer clic en el icono de "lápiz" en la etiqueta
• Seleccionar la instancia y hacer clic en el icono de "llave inglesa" en la parte superior derecha del panel derecho

Aprende más sobre cómo editar el componente principal.

Cómo usar y reutilizar un componente

Una vez que hayas creado un componente, puedes reutilizarlo en cualquier parte de tu sitio:

1. Abre el panel de Componentes
2. Pasa el cursor sobre un componente para ver una vista previa
3. Haz clic y arrastra el componente deseado a cualquier página de tu sitio
4. Suelta la instancia del componente directamente en el lienzo o en el Navegador

Cuando seleccionas una instancia de componente, la verás resaltada y delineada en verde. Abre el panel de Componentes para ver cuántas veces se ha utilizado cada uno de tus componentes en tu sitio.

Para ver la jerarquía de elementos de un componente en el panel del Navegador, mantén presionada la tecla Opción + doble clic (en Mac) o mantén presionada la tecla Alt + doble clic (en Windows) en el componente, o haz clic en el icono de "editar componente principal". Solo podrás ver la jerarquía de elementos del componente desde el componente principal (no dentro de una instancia de componente).

Cómo editar un componente

Veamos las diversas formas en que puedes interactuar y editar un componente:

• Editar el componente principal
• Props del componente, espacios y variantes de estilo
• Crear variantes de estilo del componente
• Gestionar la prop de variante
• Cambiar la variante de una instancia de componente
• Reordenar, renombrar, duplicar o eliminar variantes de estilo del componente
• Salir del componente principal
• Editar componentes en el Editor
• Cambiar el nombre o descripción de un componente
• Agrupar componentes
• Eliminar un componente

Editar el componente principal

Para realizar los mismos cambios en todas las instancias de un componente, necesitarás editar el componente principal. Puedes editar el componente principal en cualquier instancia de componente mediante:

• Hacer doble clic en la instancia del componente en el lienzo
• Mantener presionada la tecla Option + doble clic (Mac) o Alt + doble clic (Windows) en la instancia en el Navegador
• Hacer clic derecho en la instancia y seleccionar Editar componente
• Seleccionar la instancia y hacer clic en el icono de “editar componente” en la etiqueta
• Seleccionar la instancia y hacer clic en el icono de “editar componente” en la parte superior del panel derecho

Las ediciones al componente principal afectarán a cada instancia de componente (a menos que esa instancia de componente tenga propiedades aplicadas a elementos específicos dentro del componente). Al editar el componente principal, puedes cambiar la estructura y el orden de los elementos para afectar simultáneamente a todas las instancias de componentes en tu sitio.

Props del componente, espacios y variantes de estilo

Las propiedades del componente (props), espacios y variantes de estilo te permiten crear configuraciones únicas en cada instancia de un componente:

• Props — conecta configuraciones de elementos individuales en el componente principal (por ejemplo, texto, enlaces, imágenes o videos) a props. Esto te permite personalizar estas configuraciones en cada instancia sin cambiar la estructura o diseño general del componente. Los props también pueden conectarse a campos de CMS para extraer contenido dinámicamente de tus Colecciones CMS.
• Espacios — los espacios son elementos que puedes colocar en componentes existentes que actúan como marcadores de posición para otros componentes. Esto te permite construir componentes de manera modular, donde cada instancia puede incluir diferentes componentes en el espacio.
• Variantes de estilo — define múltiples opciones de diseño para un solo componente, permitiéndote adaptar su apariencia para diferentes casos de uso. Por ejemplo, puedes ofrecer variantes de estilo como botones sólidos o de contorno, o diseños de tarjetas horizontales y verticales.

Crear variantes de estilo de componentes

Puedes crear variantes de un componente con diferentes diseños, colores, estilos de fuente, etc. (por ejemplo, botones sólidos o con contorno, o diseños de tarjeta horizontales y verticales) y elegir qué variante usar en cada instancia de tu componente en todo tu sitio.

Para crear una variante de estilo de componente:

1. Edita el componente principal
2. Ve al panel de Estilo
3. Haz clic en el icono de “variantes de componente” en el selector de Estilo
4. Haz clic en el icono de “más”
5. Dale un nombre único a la variante
6. Presiona Enter/Return para confirmar

Gestionar la propiedad de variante

Cuando creas una variante de estilo de componente, se crea automáticamente una propiedad de variante para ese componente. Puedes cambiar el nombre de la propiedad de variante, añadirla a un grupo de propiedades y establecer una variante predeterminada para el componente en el panel de Props.

Para cambiar el nombre de la propiedad de variante:

1. Edita el componente principal
2. Ve al panel de Props
3. Haz clic en la propiedad de Variante
4. Ingresa un nombre de propiedad único
5. Presiona Enter/Return para confirmar

Para añadir la propiedad de variante a un grupo de propiedades:

1. Edita el componente principal
2. Ve al panel de Props
3. Haz clic en la propiedad de Variante
4. Selecciona un grupo o ingresa un nombre único para crear un nuevo grupo
5. Haz clic en Crear o presiona Enter/Return para confirmar

Establecer una variante predeterminada para un componente:

1. Edita el componente principal
2. Ve al panel de Props
3. Haz clic en la propiedad de Variante
4. Elige una variante del menú desplegable de Predeterminados

Cambiar la variante de una instancia de componente

Al igual que otras propiedades de componentes, puedes elegir la variante de estilo para cada instancia de un componente. Para cambiar la variante de una instancia de componente:

1. Haz clic una vez en el componente para abrir el panel de Props
2. Elige la variante para esta instancia del menú desplegable de Variantes

Reordenar, renombrar, duplicar o eliminar variantes de estilo de componentes

En el modo de diseño, puedes gestionar las variantes de estilo de componentes (reordenar, renombrar, duplicar o eliminar variantes).

Para reordenar las variantes de un componente:

1. Edita el componente principal
2. Ve al panel de estilo
3. Haz clic en el icono de “variantes de componentes” en el selector de estilo
4. Haz clic y arrastra una variante para moverla a una nueva posición

Para renombrar una variante:

1. Edita el componente principal
2. Ve al panel de estilo
3. Haz clic en el icono de “variantes de componentes” en el selector de estilo
4. Pasa el cursor sobre la variante y haz clic en el icono de “más opciones”
5. Haz clic en Renombrar
6. Ingresa un nuevo nombre único para la variante
7. Presiona Enter/Return para confirmar

Para duplicar una variante:

1. Edita el componente principal
2. Ve al panel de estilo
3. Haz clic en el icono de “variantes de componentes” en el selector de estilo
4. Pasa el cursor sobre la variante y haz clic en el icono de “más opciones”
5. Haz clic en Duplicar
6. Ingresa un nuevo nombre único para la variante
7. Presiona Enter/Return para confirmar

Para eliminar una variante:

1. Edita el componente principal
2. Ve al panel de estilo
3. Haz clic en el icono de “variantes de componentes” en el selector de estilo
4. Pasa el cursor sobre la variante y haz clic en el icono de “más opciones”
5. Haz clic en Eliminar
6. Haz clic en Eliminar en el modal emergente para confirmar

Salir del componente principal

Una vez que hayas terminado de editar el componente principal, puedes salir del componente principal:

• Haciendo clic en la flecha de “volver” en la esquina superior izquierda del Diseñador
• Haciendo clic fuera del componente en el lienzo
• Presionando Escape en tu teclado

Editar componentes en el Editor

Si has invitado a editores de contenido a actualizar el contenido de tu sitio en el Editor, cualquier cambio que realicen en elementos de componentes que no se modifiquen con una propiedad de componente y sean consistentes en todas las instancias, se aplicará a todas las demás instancias.

Alternativamente, si el editor de contenido realiza cambios en elementos de componentes que se modifican a través de una propiedad de componente, esos cambios solo se aplicarán a la instancia del componente que están editando.

Cambiar el nombre o descripción de un componente

Para cambiar el nombre o descripción de un componente:

1. Abre el panel de Componentes
2. Pasa el cursor sobre el nombre de un componente y haz clic en los puntos de “más opciones” que aparecen
3. Haz clic en Editar configuración
4. Realiza tus cambios y Guarda

Renombrar una instancia de componente

Puedes renombrar instancias individuales de componentes para que sean más fáciles de identificar; esto es especialmente útil al reutilizar el mismo componente varias veces en una página.

Para renombrar una instancia de componente:

• En el Navegador o en la parte superior del panel derecho:

1. Haz doble clic en el nombre del componente
2. Escribe el nuevo nombre
3. Presiona Enter o haz clic fuera para guardar tu nombre personalizado

• En el lienzo:

1. Haz clic derecho en la instancia del componente
2. Haz clic en Renombrar
3. Escribe el nuevo nombre
4. Presiona Enter o haz clic fuera para guardar tu nombre personalizado

Para restablecer el nombre al nombre original del componente, elimina el nombre personalizado durante el renombrado o haz clic derecho en la instancia en el Navegador o en el lienzo y haz clic en Restablecer nombre.

Agrupar componentes

Para organizar tus componentes en grupos:

1. Abre el panel de Componentes
2. Pasa el cursor sobre el nombre de un componente y haz clic en los puntos de “más opciones” que aparecen
3. Elige Editar configuración
4. Elige un grupo existente del menú desplegable de Grupo, o escribe para crear un nuevo grupo

Para renombrar o desagrupar un grupo de componentes, pasa el cursor sobre el título del grupo y haz clic en los puntos de "más opciones".

Eliminar un componente

Para eliminar un componente completamente:

1. Elimina o desvincula todas las instancias del componente de tu sitio
2. Abre el panel de Componentes
3. Pasa el cursor sobre el nombre de un componente y haz clic en los puntos de "más opciones" que aparecen
4. Elige Editar configuración
5. Haz clic en Eliminar y confirma

Cómo desvincular una instancia de componente de su componente principal

Para desvincular una instancia de componente y hacer cambios en ella de forma independiente del componente principal:

1. Haz clic derecho en cualquier elemento del componente en la instancia que deseas desvincular
2. Haz clic en Desvincular instancia

Una vez desvinculada, si editas cualquier otra instancia vinculada de ese componente en tu diseño, no cambiará la instancia desvinculada.

Compartir componentes entre sitios con Bibliotecas

Puedes compartir componentes nativos y de código entre sitios en un Espacio de trabajo con Bibliotecas. Esto puede acelerar tu flujo de trabajo y mejorar tu sistema de diseño al proporcionar un único lugar para actualizar componentes que se utilizan en múltiples sitios en tu Espacio de trabajo.

Volver a la ayuda de webflow