Combinaciones de estilo y Movimiento del sitio
Cambia todo el aspecto visual de tu sitio en un clic con las Combinaciones de estilo y configura las animaciones automáticas al hacer scroll.
En esta página
- Cambiar el aspecto completo del sitio de un clic con Combinación de estilo
- Explorar y aplicar Paletas de colores y Combinaciones de letras prediseñadas
- Cambiar el estilo visual de todos los botones, tarjetas, espaciado de secciones y barra de navegación
- Configurar el Movimiento global del sitio (animaciones automáticas al hacer scroll, velocidad y estilo)
- Restablecer los estilos al diseño original de la plantilla
Si quieres probar una dirección visual completamente distinta para tu sitio —pasar de un diseño minimalista y editorial a uno corporativo, cálido o nocturno— no necesitas tocar color por color ni fuente por fuente. La pestaña Marca → Estilos te permite cambiar todo el sistema visual de una vez o por familias.
Cambiar el aspecto completo del sitio de un clic con Combinación de estilo
En Marca → Estilos → Combinación de estilo encontrarás más de 30 direcciones de arte completas (Producto, Estudio, Editorial, Ejecutivo, Bosque, Pulso, Coral, Calma, Lujo discreto, Fintech, Brutalista, Nórdico, entre otras).
Al hacer clic en cualquiera de ellas, véltica actualiza al mismo tiempo y en todas tus páginas:
- La paleta de 9 colores (fondos, superficies, textos y acentos).
- La pareja tipográfica de títulos y cuerpo de texto, junto con sus pesos y espaciados.
- La forma, bordes y sombras de los botones y las tarjetas.
- El espaciado entre secciones y el estilo de separación de la barra de navegación.
Puedes hacer clic en tantas combinaciones como quieras para ver cómo le sientan a tu contenido real en el lienzo.
Explorar y aplicar Paletas de colores y Combinaciones de letras prediseñadas
Si te gusta la estructura de tu combinación actual pero solo quieres cambiar los colores o la tipografía, justo debajo de Combinación de estilo puedes cambiar cada pieza por separado:
- Color (Paletas que combinan entre sí): explora paletas curadas por ambiente (Sugeridas, Modernas, Cálidas, Elegantes, Suaves y Oscuras). También puedes mover el control de Tono para girar todos los colores de la paleta a la vez sin que dejen de combinar.
- Fuente (Parejas de letra para títulos y texto): prueba combinaciones tipográficas listas donde la fuente de los titulares y la de los párrafos ya están equilibradas en tamaño y grosor.
Cambiar el estilo visual de todos los botones, tarjetas, espaciado de secciones y barra de navegación
Dentro de la misma pestaña Marca → Estilos tienes selectores visuales rápidos para transformar las piezas clave sin entrar a editar píxeles:
Grupo en Estilos |
Qué puedes cambiar en un clic |
|---|---|
| Botones | Forma (Píldora, Redondeado, Cuadrado suave, Recto, Tonal, Contorno, Fantasma, Enlace de texto, Línea de tinta, Brutalista), Sombra, Sombra interna, Tamaño, Texto (normal o mayúsculas) y Peso. |
| Tarjeta | Apariencia global de todas las tarjetas: Línea fina, Con borde, Caja, Suave, Redondeada, Plana, Cuadrada lisa, Recta, Línea de tinta o Marcada. |
| Secciones → Espaciado | Cuánto aire vertical respiran las secciones de todo el sitio: Mínimo, Compacto, Equilibrado, Amplio o Muy amplio. |
| Secciones → Barra de navegación | Cómo se separa el menú superior del resto de la página: Sin separación, Línea fina, Línea de tinta, Línea gruesa, Barra tintada o Tintada con línea. |
Configurar el Movimiento global del sitio (animaciones automáticas al hacer scroll, velocidad y estilo)
En Marca → Estilos → Animación puedes darle vida a todo tu sitio al hacer scroll sin tener que configurar animaciones elemento por elemento:
- Elige un estilo de movimiento:
- Ninguna: nada se mueve al bajar por la página.
- Sutil: un fundido corto y discreto.
- Suave: los bloques suben con suavidad al entrar en pantalla.
- Elegante: entrada más pausada acompañada de un desenfoque suave.
- Dinámica: entrada ágil con un ligero rebote.
- Deslizar, Crecer, Revelar, Cine o Voltear: estilos con mayor presencia visual.
- Pulsa Reproducir animación (
▶): previsualiza el efecto directamente sobre el lienzo actual. - Personalizar por rol (
Personalizar): si quieres afinar más, abre Personalizar para elegir la Velocidad (Lenta, Normal, Rápida, Muy rápida) y qué efecto de Entrada o Hover llevan por separado los Títulos grandes, Títulos pequeños, Textos, Botones, Tarjetas y Fotos.
Respeto a las animaciones propias y a la accesibilidad: El movimiento global se aplica a todas las páginas, pero si a un elemento concreto le configuraste su propia animación en el inspector, conservará la suya. Además, si un visitante tiene activada la opción de «reducir movimiento» en su sistema operativo, el sitio publicado respetará su preferencia y mostrará el contenido sin animar.
Restablecer los estilos al diseño original de la plantilla
Si después de probar colores, letras o botones quieres volver exactamente al aspecto con el que empezó tu plantilla o combinación elegida:
- En Combinación de estilo, la primera tarjeta marcada como De partida (o Original de la plantilla) guarda el diseño inicial con el que abriste el proyecto.
- Dentro de cualquier token individual en Tu marca, también puedes pulsar Reiniciar estilo para devolver ese elemento (incluidos sus ajustes de tablet y celular) a los valores originales de tu combinación activa.
Gracias. Nos ayuda a decidir qué mejorar.