Zero Block: Diseño receptivo
La segunda parte de la guía está dedicada a ajustes más complejos de Zero Block relacionados con el diseño web responsivo. Los ajustes principales y las funciones básicas de Zero Block se revisaron en la primera parte de la guía.
Ya está aquí.
Desplácese hacia abajo para leer
Introducción a los contenedores
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 y su posición en el eje X
El contenedor de rejilla es el espacio de trabajo principal. Tiene la misma cuadrícula que Tilda, 1200 px. Si coloca elementos dentro del contenedor 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.
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.
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.
Posición de los contenedores entre sí en el eje Y
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.
Cómo cambiar el contenedor y el origen de un elemento
Cómo cambiar el contenedor
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.
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.
Coordenadas de los elementos
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.
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: arriba a la derecha, abajo a la izquierda, etc.
Para cambiar la ubicación del origen, abra el panel +Contenedor (por defecto, está minimizado).
Si establece el origen en "Centro Centro", le resultará más fácil crear una versión adaptable para diferentes pantallas.
Cómo crear elementos fluidos
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%.
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.
Los ajustes del rectángulo amarillo: Contenedor-Ventana Contenedor, anchura-50%, altura-100%, desplazamiento del eje X-50%.
Ejemplo: Cómo crear una portada a pantalla completa
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.
- 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.
1
Cargue una imagen de fondo en la Configuración de la mesa de trabajo y establezca la Altura del contenedor de la ventana en 100%.
2
Establezca el origen para el encabezado, el subencabezado y el botón en "Centro" y "Centro". Si es necesario, especifique también el desplazamiento del eje Y.
3
Establece el contenedor de la flecha como Contenedor de ventana, establece su origen como "Centro" e "Inferior" y muévela 70px hacia arriba. De esta forma, el botón siempre estará 70px más alto que la esquina inferior de la ventana del navegador.
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.
Adaptar elementos a la anchura de la pantalla
Por defecto, todos los elementos se adjuntan al 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 Rejilla 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 a Ancho de Ventana y guarde los cambios.
Con Escala automática, puede escalar todos los elementos que pertenecen al contenedor Rejilla 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 a Ancho de Ventana y guarde los cambios.
Este ajuste adaptará el diseño del sitio web a 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 el escalado automático para todos los tipos de pantalla o, por ejemplo, sólo para dispositivos móviles, estableciendo sólo un determinado rango de anchura de pantalla. El contenedor de la versión de escritorio amplía desde 1200px hasta 1920, 4K o incluso 6K. La versión móvil amplía desde 320px.
La altura del bloque será dinámica: cambiará en proporción a la anchura cuando escales el bloque.
Si es necesario, puede configurar el escalado automático para todos los tipos de pantalla o, por ejemplo, sólo para dispositivos móviles, estableciendo sólo un determinado rango de anchura de pantalla. El contenedor de la versión de escritorio amplía desde 1200px hasta 1920, 4K o incluso 6K. La versión móvil amplía desde 320px.
La altura del bloque será dinámica: cambiará en proporción a la anchura cuando escales el bloque.
Nota importante: Esta opción sólo funciona para los elementos que se adjuntan al contenedor Grid y no afectará a los elementos adjuntos al contenedor Window.
Algunas características de la escala automática
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 sube imágenes de fondo y fotos más grandes de lo que necesites. En Tilda, cuando subes una imagen grande, se redimensiona por defecto a 1680 píxeles de ancho, pero si haces clic en el icono del engranaje al subirla, tienes la opción de subir una imagen de 1920px de ancho. Activa el interruptor "Habilitar carga de imágenes de 1920px de ancho" y carga 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.
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 sube imágenes de fondo y fotos más grandes de lo que necesites. En Tilda, cuando subes una imagen grande, se redimensiona por defecto a 1680 píxeles de ancho, pero si haces clic en el icono del engranaje al subirla, tienes la opción de subir una imagen de 1920px de ancho. Activa el interruptor "Habilitar carga de imágenes de 1920px de ancho" y carga 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.
