Una variación es un aspecto con nombre para un tipo de elemento. Te permite tener varias versiones de un botón, un encabezado o una imagen sin dar estilo a cada una a mano.
Actualizado el
Una variación solo cambia el aspecto. No es un componente ni crea un tipo de bloque nuevo.
Las variaciones se crean desde el editor y se gestionan en el Gestor de estilos.
Hay variaciones para botones, encabezados, párrafos, separadores, enlaces de menú e imágenes.
Un botón siempre tiene una variación. Los demás elementos también pueden usar un aspecto Predeterminado simple.
Si el botón de la paleta no aparece al seleccionar un elemento, ese elemento no admite variaciones. Usa en su lugar las pestañas Caja y Texto o Clases personalizadas (avanzado).
Selecciona el elemento.
Abre el botón de la paleta en su barra flotante.
Elige una variación de la lista.
El elemento pasa a ese aspecto. Al cambiar de variación, las clases manuales del elemento se sustituyen por las de la variación.
Si el elemento tiene clases personalizadas que quieres conservar, aplícalas primero a un estilo compartido o apúntalas antes de cambiar.
En los elementos que lo permiten, Predeterminado quita la variación y devuelve el aspecto simple.
Dale estilo al elemento primero. La variación captura el aspecto que ya has creado, incluidos los estilos por dispositivo.
Selecciona el elemento.
Abre el botón de la paleta.
Elige + Nueva variación.
Ponle un nombre, como "Botón pastilla".
Elige Crear variación.
La variación nueva se guarda para el proyecto, aparece en el selector y se aplica al elemento seleccionado.
También aparece en el Gestor de estilos, donde puedes editar sus clases más adelante.
Una buena forma de crear una variación a partir de otra existente es:
Aplica la variación existente.
Cambia las partes que quieras que sean distintas.
Crea una variación nueva a partir del resultado.
Las variaciones personalizadas se pueden renombrar. Cambiar el nombre no rompe los elementos que las usan, porque el nombre es solo una etiqueta.
Borrar una variación personalizada es definitivo. Revisa cualquier elemento que la usara y elige otra variación.
Las variaciones integradas no se pueden borrar. Si has personalizado una, el Gestor de estilos ofrece Restaurar predeterminado.
Abre el Gestor de estilos, busca la variación y elige Editar clases.
Esto crea una sobrescritura del proyecto. El aspecto original sigue disponible con Restaurar predeterminado, así que siempre puedes volver atrás.
Este es el flujo de trabajo para compartir el aspecto de un elemento con el resto.
Le das estilo a un elemento hasta que se ve bien y luego pasas esas clases extra a un estilo compartido.
Dale estilo al elemento con los controles de la barra de herramientas o con una lista de clases.
Selecciónalo.
Abre el botón de la paleta en su barra flotante.
Elige Fusionar estilos en el estilo base. El diálogo se llama Aplicar estilos en todas partes.
Selecciona las clases que quieras compartir.
Elige el estilo de destino.
Elige Aplicar en todas partes.
Esta acción está disponible en los elementos que admiten variaciones, como botones, encabezados, párrafos, separadores, enlaces de menú e imágenes. Para una sección o una fila, edita el estilo compartido en el Gestor de estilos.
Las clases pasan al estilo compartido y se quitan del elemento. Todos los elementos que usan ese estilo las reciben.
El destino decide hasta dónde llega el cambio.
Para un botón, el diálogo puede ofrecer:
x-btn:primary, la variación principal. Solo cambian los elementos que usan la variación principal.
x-btn, la base compartida de botón. Cambian todos los botones, incluidos soft, outline y cualquier otra variación.
El nombre más corto, sin dos puntos, es la base. El nombre con dos puntos es una variación.
El diálogo empieza en la variación que usa el elemento actualmente. Cámbiala a la base cuando el cambio deba llegar a todas las variaciones.
Dale estilo a un botón con rounded-full.
Abre el menú de la paleta y elige Fusionar estilos en el estilo base.
En el diálogo Aplicar estilos en todas partes, selecciona rounded-full.
Elige el destino base, x-btn.
Elige Aplicar en todas partes.
Ahora todos los botones tienen la forma redondeada, salvo que una variación defina su propio radio. Si alguna variación sigue viéndose cuadrada, edita esa variación o aplícale la misma clase.
Sigue los mismos pasos, pero elige x-btn:primary como destino. Los botones soft y outline mantienen su forma actual.
En el diálogo solo aparecen las clases que Remake puede generar. Una clase personalizada de tu propia hoja de estilos se queda en ese elemento.
Si el elemento no tiene clases extra más allá de su estilo, no hay nada que fusionar y el diálogo no se abre.
La base de botón está en el Gestor de estilos, en Mostrar avanzado, dentro de la categoría Estilos base. Después de una fusión, edítala ahí como cualquier otro estilo.
Si has fusionado en una base personalizada, aparece en Otros dentro de la sección avanzada.
Usa la variación cuando solo deba cambiar un tipo de elemento:
Solo los botones principales.
Solo los encabezados de portada.
Solo las imágenes redondeadas.
Usa la base cuando todas las versiones deban compartir el cambio:
Todos los botones deben tener la misma altura.
Todos los encabezados deben usar la misma fuente.
Todas las imágenes deben tener el mismo radio predeterminado.
Cuando un cambio en la base es demasiado amplio, pasa la clase a una variación.
Para añadir un estilo de botón nuevo:
Selecciona un botón y aplica la variación principal.
Cambia el color, el relleno y el radio.
Abre la paleta y elige + Nueva variación.
Llámala "Botón pastilla".
Créala.
Úsala en los botones que necesiten ese aspecto.
Publica.
Para que todos los botones compartan un cambio:
Dale estilo a un botón.
Abre el menú de la paleta y elige Fusionar estilos en el estilo base.
Selecciona la clase en el diálogo Aplicar estilos en todas partes.
Elige el destino base.
Revisa las demás variaciones.
Publica.
Un creador de sitios web que funciona como un documento. CMS, formularios y alojamiento en la UE incluidos.
© 2026 Remake. Todos los derechos reservados.
