Zero Block: Diseño receptivo

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

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

En el eje X, el contenedor de rejilla siempre está centrado.

Lo mismo ocurre con las versiones para diferentes dispositivos: cuando se cambia entre tipos de pantalla, la anchura del Contenedor de rejilla pasa a ser de 980, 640, 480, 320px, permanece fija y centrada.

Puede establecer la altura del Contenedor de rejilla en la Configuración de la mesa de trabajo o arrastrando el contenedor hacia arriba/abajo con el ratón. Puede establecer una altura de contenedor de rejilla única para cada resolución. La altura del contenedor de rejilla es la altura del bloque.

Si desea que Zero Block ocupe siempre el 100% de la altura de la pantalla, debe establecer la altura del contenedor de la ventana en un valor distinto al del contenedor de la rejilla. Por lo tanto, debe establecer la altura del contenedor de la ventana en 100% en la configuración de la mesa de trabajo.

A continuación, seleccione la alineación del contenedor de rejilla en la pantalla: Arriba, Centro, Abajo o Estirar. Por defecto está centrado.

Por defecto, todos los elementos están unidos al contenedor de rejilla y el origen está en la esquina superior izquierda.

A veces, es necesario fijar un elemento no a la rejilla, sino a la pantalla. Por ejemplo, quiere que el logotipo esté fijo en la esquina superior izquierda en todas las pantallas.

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

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

Si desea fijar un elemento, por ejemplo, en la esquina superior derecha, puede utilizar el mismo método: seleccione "Contenedor de ventana" y establezca el origen de coordenadas del elemento de la siguiente manera: X-derecha, Y-arriba.

Cada elemento del área de trabajo tiene sus propias coordenadas que indican su posición respecto al origen en el eje X y en el eje Y.

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

El origen por defecto de todos los elementos está en la esquina superior izquierda de la rejilla contenedora. 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 (por defecto, está minimizado).

Hemos previsto que el tamaño de los elementos se fije también en porcentaje. Así, puedes crear elementos "fluidos" que cambien de tamaño en función de la ventana del navegador.

Por ejemplo, te gustaría que la mitad de la pantalla fuera siempre amarilla. Para ello, añada una forma y abra el panel Configuración del elemento. Establezca el tipo de contenedor como Contenedor de ventana, cambie las unidades de medida de anchura y altura a porcentaje en lugar de píxeles, establezca la anchura de pantalla al 50% y la altura de pantalla al 100%. También puede establecer los valores de los ejes en porcentaje. Si desea que el elemento ocupe siempre la mitad derecha de la pantalla, establezca el valor del eje X en 50%.

El vídeo muestra que el lado derecho del bloque siempre ocupa la mitad de la pantalla.

Por defecto, todos los elementos se adjuntan a un contenedor Grid. Se trata de un rectángulo con una anchura de 1200 píxeles en el escritorio. Siempre está centrado en la pantalla y tiene el mismo tamaño, independientemente de la anchura de la pantalla.

Con Escala automática, puede escalar todos los elementos que pertenecen al contenedor de cuadrícula en proporción a la anchura de la pantalla o del navegador. El contenedor de rejilla no ocupará una anchura fija de 1200 píxeles, sino que se extenderá a toda la anchura de la pantalla. Todos los elementos añadidos se ampliarán proporcionalmente para ocupar toda la pantalla.

Para activar el escalado automático, abra la configuración de la mesa de trabajo y busque la opción Escalar contenedor de rejilla. Seleccione la opción Autoescala al ancho de la ventana y guarde los cambios.

Este ajuste adaptará el diseño del sitio a cualquier resolución, incluidas las pantallas HD. Esta opción le 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 el escalado automático para todos los tipos de pantalla, por ejemplo, sólo para dispositivos móviles configurando únicamente un determinado rango de anchura de pantalla. El contenedor de la versión de escritorio pasa de 1200px a 1920, 4K o incluso 6K. La versión móvil aumenta de tamaño desde 320px.

La altura del bloque será dinámica: cambiará en proporción a la anchura cuando escales el bloque.

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

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

Utiliza imágenes vectoriales en formato .svg para los iconos, y carga imágenes de fondo y fotos con reserva. Cuando subes una imagen grande, su anchura se redimensiona a 1680 píxeles por defecto, pero si haces clic en el icono del engranaje al subirla, tienes la opción de subir una imagen de 1920px de lado grande. Activa el interruptor "Permitir subir hasta 1920px" y sube los archivos. Las imágenes de más de 1920px no pueden subirse porque ese tamaño afectará al rendimiento del navegador y a 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 titular, el subtítulo y el botón están siempre centrados.
- La flecha hacia abajo está fija en la parte inferior de la pantalla.

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