Zero Block: Diseño responsivo

Zero Block tiene dos espacios de trabajo que se denominan contenedores. El área de la cuadrícula se denomina contenedor de cuadrícula, mientras que el contenedor de ventana es un área que indica los límites de la pantalla del navegador.

El contenedor de cuadrícula es el espacio de trabajo principal. Tiene la misma cuadrícula que Tilda. Si coloca elementos dentro del contenedor de cuadrícula, estarán dentro de la cuadrícula de doce columnas, independientemente del tamaño de la pantalla.

En el eje X, el contenedor de cuadrícula siempre está centrado.

Lo mismo ocurre con las versiones para diferentes dispositivos: cuando cambias de tipo de pantalla, el ancho del Grid Container pasa a ser de 980, 640, 480, 320px, queda fijo y centrado.

Puede establecer la altura del contenedor de cuadrícula en la configuración de la mesa de trabajo o arrastrando el contenedor hacia arriba o hacia abajo con el mouse. Puede establecer la altura de un contenedor de cuadrícula único para cada resolución. La altura del Grid Container es la altura del bloque.

Si desea que un Zero Block ocupe siempre el 100% de la altura de la pantalla, debe establecer la altura del contenedor de ventanas en una diferente a la del contenedor de cuadrícula. Por lo tanto, debe establecer la altura del contenedor de ventanas al 100% en la configuración de la mesa de trabajo.

Después de eso, seleccione la alineación del Contenedor de cuadrícula en la pantalla: Superior, Centro, Inferior o Estirar. Está centrado por defecto.

De forma predeterminada, todos los elementos se adjuntan al Contenedor de cuadrícula y el origen se encuentra en la esquina superior izquierda.

A veces, necesita adjuntar un elemento no a la cuadrícula sino a la pantalla. Por ejemplo, desea que el logotipo se fije en la esquina superior izquierda de todas las pantallas.

Para hacer esto, abra el panel Configuración del elemento y cambie el tipo de contenedor a Contenedor de ventana. El origen se desplazará a la esquina superior izquierda del contenedor de ventana.

Ahora el logo estará en la esquina superior izquierda de cualquier pantalla.

Si desea adjuntar un elemento, por ejemplo, a la esquina superior derecha, puede usar el mismo método: seleccione "Contenedor de ventana" y establezca el origen de las coordenadas del elemento de la siguiente manera: X—derecha, Y—arriba.

Cada elemento en el espacio de trabajo tiene sus propias coordenadas que indican su posición en el origen en el eje X y el eje Y.

Seleccione un elemento, abra el panel Configuración presionando la tecla Tab y verá las coordenadas del elemento en la parte superior del panel.

El origen predeterminado de todos los elementos se encuentra en la esquina superior izquierda del Contenedor de cuadrícula. Pero se puede mover y colocar en uno de los nueve puntos del rectángulo: derecha, arriba, abajo a la izquierda, etc.

Para cambiar la ubicación del origen, abra el panel +Contenedor (de forma predeterminada, está minimizado).

Proporcionamos que el tamaño de los elementos también se estableciera en porcentaje. Por lo tanto, puede crear elementos "fluidos" que cambian de tamaño según la ventana del navegador.

Por ejemplo, le gustaría que la mitad de la pantalla sea siempre amarilla. Para hacer esto, agregue una forma y abra el panel Configuración del elemento. Establezca el tipo de contenedor en Contenedor de ventana, cambie las unidades de medida de ancho y alto a porcentaje en lugar de píxeles, configure el ancho de la pantalla al 50% y la altura de la pantalla al 100%. También puede establecer valores de eje en porcentaje. Si desea que el elemento ocupe siempre la mitad derecha de la pantalla, establezca el valor del eje X en 50 %.

El video muestra que el lado derecho del bloque siempre ocupa la mitad de la pantalla.

De forma predeterminada, todos los elementos se adjuntan a un contenedor de cuadrícula. Este es un rectángulo con un ancho de 1200 píxeles en el escritorio. Siempre está centrado en la pantalla y tiene el mismo tamaño, independientemente del ancho de visualización.

Con Auto Scale, puede escalar todos los elementos que pertenecen al contenedor Grid en proporción al ancho de la pantalla o del navegador. El contenedor Grid no ocupará un ancho fijo de 1200 píxeles, sino que se extenderá hasta el ancho completo de la pantalla. Todos los elementos añadidos se ampliarán proporcionalmente para ocupar toda la pantalla.

Para habilitar el escalado automático, abra la configuración de la mesa de trabajo y busque la opción Escalar contenedor de cuadrícula. Seleccione la opción Escalar automáticamente al ancho de la ventana y guarde los cambios.

Esta configuración adaptará el diseño del sitio para cualquier resolución, incluidas las pantallas HD. La opción ayudará a evitar espacios vacíos innecesarios en pantallas de alta resolución, así como a acelerar el flujo de trabajo de diseño; no tendrá que perder tiempo en el diseño adaptable.

Si es necesario, puede configurar la escala automática para todos los tipos de pantalla, por ejemplo, solo para dispositivos móviles configurando solo un cierto rango de ancho de pantalla. El contenedor de la versión de escritorio hace zoom de 1200px a 1920, 4K o incluso 6K. La versión móvil aumenta de tamaño de 320px.

La altura del bloque será dinámica: cambiará en proporción al ancho cuando escalas el bloque.

Botones: Para mantener el botón a la distancia deseada de los bordes de la ventana del navegador, pero no para escalar a diferentes resoluciones, establezca coordenadas para él en Contenedor de ventanas. Utilice el enlace a diferentes contenedores para escalar algunos elementos dentro del mismo bloque y dejar algunos elementos con una distancia fija de los bordes del navegador, pero sin cambiar el tamaño.

Imágenes: Ten cuidado al subir imágenes: deben tener el tamaño adecuado para que no pierdan calidad al escalar para pantallas más grandes.

Utilice imágenes vectoriales en formato .svg para los iconos y cargue imágenes de fondo y fotos con reserva. Cuando carga una imagen grande, su ancho cambia de tamaño a 1680 píxeles de forma predeterminada, pero si hace clic en el icono de engranaje al cargar, tiene la opción de cargar una imagen de lado grande de 1920px. Alterne el interruptor de alternancia "Permitir cargar hasta 1920px" y cargue los archivos. Las imágenes de más de 1920px no se pueden cargar porque ese tamaño afectará el rendimiento del navegador y la velocidad de carga del sitio web.

Intentemos crear una portada con las siguientes características:

— La imagen de fondo ocupa toda la pantalla.
— El título, el subtítulo y el botón siempre están centrados.
— La flecha hacia abajo se fija en la parte inferior de la pantalla.

Veamos lo que tenemos: la imagen de fondo ocupa toda la pantalla; el título, el texto y el botón están centrados; la flecha está en la parte inferior.