Diseñar para computadora, tablet y celular (Breakpoints y Zoom)

Todas las secciones y bloques de véltica vienen preparados para adaptarse solos al tamaño de pantalla. Aun así, desde el editor puedes revisar cómo queda tu sitio en cada dispositivo y hacer ajustes específicos para tablet o celular sin estropear el diseño de computadora.

Cambiar de vista en la barra superior: Computadora, Tablet y Celular

En el centro de la barra superior tienes el Selector de viewport con tres vistas:

Computadora (Desktop): el diseño base para pantallas de escritorio y portátiles (1280 px de referencia).
Tablet (iPad): vista intermedia para tablets en vertical y pantallas compactas (768 px).
Celular (Phone): vista para teléfonos móviles (390 px).

Al cambiar de icono, el lienzo se estrecha al instante para enseñarte cómo se apilan las columnas, cómo se comporta el menú móvil y qué tamaño toman los textos.

Cómo funciona la cascada de estilos

En véltica los estilos viajan de arriba hacia abajo, siguiendo la misma regla que usa la web:

Lo que cambias en Computadora es la base: cualquier ajuste de tamaño, espaciado, alineación o disposición que hagas en la vista de Computadora se hereda automáticamente en Tablet y Celular (a menos que esos dispositivos ya tengan un ajuste propio en esa propiedad).
Lo que ajustas en Tablet baja a Celular: si cambias una propiedad estando en Tablet, ese cambio se aplica en tablet y también lo hereda el celular, pero no toca el diseño de computadora.
Lo que ajustas en Celular se queda en Celular: cualquier cambio hecho en la vista de Celular afecta únicamente a teléfonos.

Importante: El contenido (lo que dice un texto, qué foto tiene una imagen o a dónde apunta un enlace) es el mismo en los tres dispositivos. Si borras una frase o cambias una foto en la vista de celular, cambiará en todo el sitio. Lo que cambia por dispositivo es el diseño (tamaños, columnas, márgenes, alineación o visibilidad).

Identificar y restablecer un cambio exclusivo de un dispositivo (`Override en este breakpoint`)

Cuando estás en Tablet o Celular y modificas una propiedad en el inspector derecho (o desde los estilos de texto de tu marca), véltica marca esa propiedad con un indicador de Override en este breakpoint.

Si después quieres que esa propiedad vuelva a obedecer lo que dice la vista de computadora:

Selecciona el elemento mientras estás en la vista de Tablet o Celular.
Pasa el cursor sobre el indicador de la propiedad modificada en el inspector.
Haz clic en Quitar override de este breakpoint. El elemento recuperará al instante el valor heredado de la pantalla superior.

Mostrar u ocultar un elemento según el dispositivo (`Mostrar/Ocultar en...`)

A veces una imagen decorativa o una columna extra queda genial en computadora pero ocupa demasiado espacio en el teléfono. En lugar de borrarla —lo que la eliminaría de todos los dispositivos—, puedes ocultarla solo en esa pantalla:

Cambia la barra superior a la vista donde quieras esconder la pieza (por ejemplo, Celular).
Haz clic derecho sobre el elemento en el lienzo (o abre sus acciones en el panel Capas).
Elige Ocultar en móvil (o Ocultar en tablet / Ocultar en escritorio).

Cuando un elemento está oculto en el dispositivo actual, en el panel Capas aparece con el aviso Oculto en este dispositivo. Desde ese mismo menú puedes pulsar Mostrar en móvil cuando quieras recuperarlo.

Controlar el zoom del lienzo (modo Automático vs. Manual y ancho en píxeles)

En la vista de Computadora, a la derecha de los iconos de dispositivo verás el control de escala y ancho del lienzo:

Modo Automático (Auto): ajusta el zoom automáticamente para que la página entera quepa siempre dentro del espacio disponible entre tus paneles laterales, sin barras de desplazamiento horizontal.
Modo Manual (Manual): te permite elegir un porcentaje de zoom fijo o arrastrar el control hacia los lados para acercar y alejar el lienzo a tu gusto.
Ancho del lienzo (px): puedes arrastrar los tiradores laterales del lienzo o elegir el ancho en píxeles para comprobar cómo responde tu diseño en monitores más anchos o más pequeños antes de saltar al corte de tablet.

Editar tu sitio directamente desde el celular o tablet

Si abres el editor de véltica desde el navegador de tu propio teléfono o iPad, la interfaz se adapta automáticamente a pantallas táctiles:

El editor entra directo en Modo esencial con una barra inferior y contextual pensada para tocar con el dedo.
Puedes agregar secciones, reordenarlas desde Capas, editar textos con doble toque, subir fotos desde el carrete de tu teléfono, cambiar colores de marca y pulsar Publicar desde cualquier lugar.