Editor de Wix Studio: diseñar en distintos breakpoints

El Editor de Wix Studio te permite personalizar los sitios por breakpoint, para que siempre se vean de manera óptima en todos los dispositivos. Los breakpoints son rangos de tamaño de pantalla, que representan las posibles pantallas y dispositivos que los visitantes tienden a usar (por ejemplo, tableta, móvil).

El diseño que creas en la versión de escritorio recae en el diseño de la tableta y el móvil. Sin embargo, puedes crear modificaciones para que el diseño se ajuste a pantallas más pequeñas. Haz clic en uno de los iconos de breakpoint en la parte superior para comenzar. 

El Editor de Wix Studio incluye 3 breakpoints integrados, que puedes personalizar y redefinir en cualquier momento:

Los breakpoints se definen por separado para cada página del sitio y para cada sección global. Esto significa que una sección global y la página en la que se encuentra pueden tener breakpoints completamente diferentes. 

Por ejemplo, la siguiente página tiene 5 breakpoints definidos:

... Mientras que el encabezado global de esa página tiene 3 breakpoints definidos: 

El Editor de Wix Studio utiliza el concepto de cascada a la hora de diseñar a través de breakpoints. Los cambios que realizas en los breakpoints más grandes recaen sobre los más pequeños, pero los cambios en los breakpoints más pequeños no afectan a los más grandes. 

Por ejemplo, un botón que está diseñado para ser de color rojo en la versión de escritorio, es automáticamente rojo en la tableta y en el móvil. Si cambias el color en la versión móvil a azul, el botón sigue siendo rojo en la tableta y en la versión de escritorio.

Algunos tipos de acciones se aplican automáticamente a todos los breakpoints y no se pueden personalizar para una determinada ventana de visualización.

Al editar el contenido de un elemento, en realidad estás cambiando sus datos. Por ejemplo, cambiar el enlace de un elemento o la fuente de una imagen, esto se aplica a todos los breakpoints. 

Otro ejemplo es cuando reemplazas o eliminas elementos de la página: el elemento se reemplaza o se elimina automáticamente en todos los breakpoints.

Estos son los cambios en el lugar de un elemento en la jerarquía de la página. Por ejemplo, cuando apilas elementos o mueves un elemento a una celda, estás cambiando la estructura de la página y esto se refleja en todos los breakpoints. 

Cuando realizas cambios en el diseño de un elemento en un breakpoint específico, se produce una anulación en los breakpoints superiores. Esto significa que ya no se extraen los valores de diseño del breakpoint que se encuentra por encima de él. Sin embargo, estas anulaciones siguen recayendo sobre los breakpoints inferiores.

Puedes crear 2 tipos de anulaciones:

Siempre puedes restablecer el diseño y el estilo de un elemento a sus propiedades en el breakpoint más grande.

Las propiedades del elemento en los breakpoints más pequeños no se ven afectadas, solo el breakpoint que contiene el elemento que estás revirtiendo. Por ejemplo, si estás eliminando las anulaciones en la tableta, esto no afecta a la versión móvil.