Una guía completa para Zero Block

Cómo crear diseños web únicos con el editor de diseño Zero Block de Tilda

Zero Block una herramienta para crear bloques con diseños únicos en Tilda. Puedes colocar cada elemento, ajustar sus parámetros al tamaño de tu pantalla y diseñar un nuevo bloque para tu sitio web.
Contenido:

¿Qué tiene de bueno Zero Block?

Controla cada elemento. Puedes controlar cada elemento del bloque, incluyendo texto, imágenes, botones o fondos. Además, puedes decidir su posición, tamaño y resolución de pantalla en la que aparecerán.

Capas. Esta es una herramienta muy útil para crear profundidad con técnicas de superposición y opacidad.

Bordes de pantalla y alineación de cuadrículas. Cada elemento del sitio web se puede posicionar en relación con la cuadrícula de diseño o los bordes de una pantalla.

Resoluciones de pantalla personalizadas. Defina valores de resolución de pantalla personalizados para que su diseño se adapte perfectamente a un dispositivo específico. Los puntos de ruptura se pueden establecer en cualquier lugar entre 320 píxeles y 1920 píxeles para un control totalmente responsivo.

Tipografía avanzada. Los diseñadores tienen total libertad creativa para crear soluciones tipográficas únicas.

Guías. Utilice guías visuales para tener un control preciso sobre su diseño. Puede configurarlas para que aparezcan solo en resoluciones de pantalla seleccionadas, de modo que no pierda tiempo ocultándolas cuando no sean necesarias.

Zoom del lienzo del 20 al 300 %. Este rango facilita el trabajo con elementos en el lienzo. Amplíe para ajustar pequeños detalles o reduzca para ver todo el lienzo, por ejemplo, cuando trabaje con muchos elementos a la vez.

Posicionamiento flexible de imágenes en formas. Ajuste manualmente qué parte de una imagen es visible dentro de una forma. Esto le da más control sobre el diseño del bloque cuando las opciones de posicionamiento predeterminadas no se ajustan a su diseño.

Grupos como objetos. Combine varios elementos en grupos para simplificar la configuración de animaciones, la edición y rotación de elementos, y mucho más.

Opacidad. Establezca el nivel de opacidad de cualquier elemento y los efectos de sombra debajo de él. Ajuste todos los parámetros, como la composición o la visibilidad de los elementos, para cada resolución de pantalla.

Placas. Añada placas de colores, tarjetas de contenido o coloque imágenes dentro de formas.
Vídeo. Añade vídeos de YouTube o Vimeo a tu sitio web. En Zero Block, puedes ajustar su tamaño y posición en la página.

Añadir HTML. Añade cualquier elemento a Zero Block código HTML y ajusta la posición de estos elementos en cada pantalla.

Tooltip. Utiliza esta herramienta interactiva para añadir breves mensajes emergentes. Puedes personalizar el color, la sombra y el tamaño, seleccionar y cargar un icono dentro de un círculo o una imagen sobre el texto.

Formulario de comentarios. Añada campos de entrada y servicios de captura de datos. Establezca el estilo del formulario y anímelo.

Editor vectorial. Cree y edite imágenes vectoriales directamente en Zero Block. Con el editor vectorial de Tilda, puede crear todo tipo de formas y editar archivos SVG importados.

Animación de la apariencia de los elementos. Anime la forma en que los elementos web aparecen en una página, como desvanecerse, ampliarse o deslizarse desde la parte superior, inferior, izquierda o derecha de la pantalla.

Animación paso a paso. Utiliza la animación paso a paso para que tu página sea más atractiva y dinámica. Puedes activar animaciones al hacer clic, al desplazarte, al pasar el cursor o cuando un elemento aparece en la pantalla. También puedes ajustar la suavidad de cada paso para controlar la fluidez. Elige la configuración adecuada y ajusta la suavidad con curvas Bézier.

Desplazamiento paralelo. Utilice un efecto de desplazamiento paralelo o cree un efecto paralelo al mover el ratón.

Elementos fijos al desplazarse. Especifique la distancia a la que el elemento debe permanecer fijo y su ubicación.
Aplique elementos fijos durante el desplazamiento. Puede establecer la distancia durante la cual el elemento permanecerá fijo y su posición. También puede hacer que todo Zero Block . Esto le permitirá, por ejemplo, crear un menú fijo con una disposición de elementos no estándar.

Diseños automáticos. Simplifique su flujo de trabajo automatizando la alineación de los elementos dentro de un grupo. Los diseños automáticos le ayudan a crear diseños más rápidamente, intercambiar contenido fácilmente y adaptar automáticamente los diseños a diferentes dispositivos.

Casos de Zero Block

Zero Block una herramienta multifuncional muy práctica. Antes de usarla, es recomendable pensar en los objetivos que te ayudará a alcanzar. A continuación, te mostramos algunos casos en los que puede resultar útil.

1. Has diseñado un diseño en un editor gráfico y necesitas convertirlo en una página web.

Si diseñas maquetaciones en un editor gráfico antes de hacer nada, utiliza Zero Block transferirlas a tu sitio web tal cual. Para ello, Zero Block una cuadrícula de 12 columnas y parámetros personalizables para cada elemento. Estos incluyen coordenadas, tamaño, posicionamiento en relación con la cuadrícula o la pantalla, parámetros de opacidad y sombra. Utiliza estas herramientas para recrear tu maquetación en Zero Block.

Zero Block La interfazZero Block es similar a la de un editor gráfico. Simplemente añada los elementos necesarios y asígneles las coordenadas adecuadas. Es fácil de hacer en Zero Block, especialmente si ya lo ha hecho antes. Utilice Zero Block transferir rápidamente su idea desde un editor gráfico a su sitio web sin necesidad de escribir ningún código.

2. No puedes encontrar el bloque adecuado entre los prediseñados de la biblioteca de bloques.

Si estás creando una página web o una página de destino y no encuentras el bloque adecuado en la biblioteca de Tilda, el Zero Block te resultará Zero Block . Aquí tienes algunos ejemplos.
1. Diseño poco convencional
Los sitios web hechos en Tilda suelen crearse con bloques, de modo que los visitantes se desplazan por sus secciones. Se trata de una tendencia de unificación en el diseño web en la que el contenido va por delante del diseño.

Si quiere cambiar la forma en que los visitantes leen la información de su sitio web, Zero Block es una gran herramienta para ello.
En el sitio web, el texto, las imágenes y el fondo forman un diseño original con mucho espacio en blanco. Esta composición distintiva, combinada con fotografías en blanco y negro sobre un fondo de color, guía naturalmente la mirada del espectador primero hacia las imágenes, luego hacia el texto y, por último, hacia el diseño general.
Esta sección minimalista destaca solo unas pocas fotos, dirigiendo la atención hacia el título grande y llamativo. Con Zero Block, puedes organizar los elementos exactamente como quieras y personalizar su tamaño y posición en cualquier lugar de la página.
En este Zero Block, el título, la descripción y la imagen también se disponen de forma poco convencional, formando una composición única que capta la atención e invita a una inspección más detallada.
2. Formas complejas
Zero Block muy bien para reunir elementos con bordes irregulares en una sola composición, haciendo que todas las distancias sean visualmente similares.
Zero Block te Zero Block crear formas personalizadas complejas y añadir elementos 3D a tu diseño, colocándolos donde quieras, incluso en la sección Hero, como en este sitio web.
Zero Block te permite crear composiciones utilizando elementos de texto y formas, con un control preciso sobre el espaciado entre ellos, de forma muy similar al diseño de un póster.
Un ejemplo de sección destacada creada en Zero Block, con un diseño inspirado en el graffiti y una tipografía llamativa para captar la atención.
3. Capas
En Zero Block, usar capas es muy fácil. Puedes superponer fácilmente imágenes, textos sobre un panel y botones sobre imágenes. Crea efectos adicionales jugando con su posicionamiento.
Este sitio web superpone formas, imágenes y tipografía para que el diseño resulte dimensional y envolvente.
Este sitio web utiliza formas y rellenos inspirados en el bento alrededor de la tipografía y elementos como el menú para dar al diseño un aspecto similar al de un collage.
Para simplificar las cosas cuando se trata de múltiples elementos, utiliza Capas. Esta herramienta te permite gestionar cada elemento: cambiar su posición, ocultarlo o bloquearlo.

Para abrir el panel Capas, utiliza estos atajos de teclado: ⌘+ L o Ctrl + L (para Mac) o Ctrl + L (para Windows).
4. Composiciones complejas con múltiples elementos
Zero Block los usuarios crear composiciones personalizadas con múltiples elementos, como textos, imágenes, líneas, paneles y botones. También puede combinar varios elementos en un solo objeto. Por ejemplo, puede diseñar una tarjeta de artículo y añadirle un enlace. Este tipo de grupo de elementos se puede animar, espaciar con márgenes, añadirle una sombra y personalizarlo con otros ajustes. Para crear un grupo de objetos, seleccione varios elementos, agrúpelos y, en la configuración de Grupo, elija Objeto.
En la página de inicio de Tilda Icons, Zero Block utilizó Zero Block para crear un encabezado llamativo, una descripción con números grandes, ejemplos de imágenes de iconos y una transición con bordes irregulares al siguiente bloque.
Este sitio web cuenta con una sección destacada con texto, formas e ilustraciones de estilo dibujado a mano que crean un aspecto divertido y distintivo.
Esta página de destino muestra las características de Tilda que son especialmente útiles para las empresas y consta de bloques que contienen múltiples elementos.
5. Efecto al pasar el cursor
El efecto hover cambia la apariencia de un elemento cuando el usuario pasa el ratón por encima. Se puede utilizar como elemento de diseño adicional o como elemento funcional de un artículo o infografía.
Para explicar la anatomía de una lectura larga con mayor claridad, la página utiliza efectos al pasar el cursor. Cuando el visitante hace clic en cada uno de ellos, se le redirige a la sección correspondiente.

3. Desea modificar ligeramente un bloque prediseñado.

Perfecto en situaciones en las que es imposible modificar un bloque prediseñado tal y como lo imaginas utilizando sus ajustes.

Si has seleccionado un bloque Tilda ya creado y quieres realizar algunos cambios en él, utiliza la opción Convertir a Zero Block. Esto te permitirá editarlo como si fuera unZero Block. Esta opción está disponible para la mayoría de los bloques Tilda.

Desglosemos este proceso en pasos. Por ejemplo, cambiemos el bloque de precios colocando los iconos fuera de los paneles de información.
1
Añada el bloque deseado a la página web.
2
En el panel Configuración del bloque, haz clic en «Convertir a Zero Block».
3
Haga clic en «Editor de bloques».
4
Realiza cambios. En este caso, queremos reducir el panel a la línea media de los iconos. Por eso utilizamos Zero Block.
5
Ahora la distancia entre el encabezado y los planes de precios es visualmente mayor. Resalta todas las tarjetas y acércalas al encabezado. También te permite reducir la altura de todo el bloque para que el espacio debajo permanezca constante.
6
Añade tu contenido: iconos y textos.
7
La cantidad de texto ha cambiado, por lo que ahora es necesario ajustar las sangrías y la longitud de las tarjetas para que el bloque tenga un aspecto armonioso.
8
Después de realizar cambios en la pantalla más grande, la posición de los elementos en todas las demás pantallas permanecerá intacta. Solo cambiará el contenido que hayas añadido. De esta forma, puedes manipular todos los elementos de la página web y crear diferentes diseños en todas las pantallas.

Ajusta la visualización de las demás pantallas de mayor a menor. Comprueba siempre la visualización en todas las pantallas si cambias el texto.
Ejemplo de un bloque convertido en Zero Block:
Este bloque AB606 prediseñado se convirtió en Zero Block se rediseñó ligeramente para incluir texto adicional y un botón con un icono.

Cuándo se puede evitar el uso Zero Block

1. Cuando un bloque prediseñado es suficiente
Los bloques prediseñados de Tilda ofrecen numerosas configuraciones. Añade la más adecuada de la biblioteca. Abre el panel Configuración y comprueba si puedes ajustar la plantilla para que se adapte a tu objetivo. Es posible que no necesites Zero Block absoluto.

Los ejemplos siguientes están diseñados con bloques prediseñados de Tilda.
Los productos que se muestran en el sitio web se crean utilizando el bloque ST315N, que está conectado a uncatálogo de productos.
La página Blog de este sitio web se ha creado utilizando el bloque FD302 de la categoría Feeds. Los feeds te permiten gestionar de forma flexible contenidos, como entradas de blog, y mostrarlos automáticamente en el sitio web.



2. Si desea ajustar los márgenes para la versión móvil de su sitio web
En Tilda, puedes especificar los márgenes por separado para ordenadores de sobremesa y dispositivos móviles.
3. Si necesita cambiar el espaciado en bloques prediseñados cuando su Zero Block fuera de la cuadrícula.
En Tilda, los bloques prediseñados se organizan en una cuadrícula de 12 columnas. Puedes definir las sangrías como iguales a cualquier número de columnas. Si has diseñado tu bloque en Zero Block tener en cuenta la cuadrícula, no podrás establecer las mismas sangrías para los bloques prediseñados (tendrás que convertirlos a Zero Block).

Supongamos que estás alternando bloques prediseñados y Zero Blocks en el diseño de tu sitio web. Aunque puedes colocar elementos donde quieras en Zero Block, esto no será posible en los bloques prediseñados. Por lo tanto, es bueno tener en cuenta que los bloques prefabricados solo se pueden colocar en la cuadrícula.

Recomendamos utilizar una cuadrícula al diseñar tu sitio web en Zero Block. Coloca los elementos principales en relación con la cuadrícula. De esta manera, tu diseño se puede combinar fácilmente con todos los demás bloques de Tilda.

Cómo usar Zero Block

Echemos un vistazo a las principales características de Zero Block

Configuración del tema de la interfaz

Selecciona el tema de interfaz que prefieras para el editor: estándar, claro u oscuro. También puedes reducir el tamaño de la interfaz para cada uno de ellos, de modo que ocupe menos espacio en la pantalla. Dónde habilitarlo: Zero Block haz clic en «Tab» → Zero Block → Tema.

Elementos disponibles en Zero Block

En Zero Block, puedes añadir elementos más complejos que textos, imágenes, formas y botones.
Vídeo
Añade y configura vídeos de YouTube, Vimeo, Kinescope, iFrame o sube un archivo MP4 o WebM. Modifica el tamaño y la relación de aspecto del vídeo, su opacidad, crea sombras y aplica animaciones.

En la configuración del vídeo, puedes establecer la reproducción automática, habilitar y deshabilitar el bucle, establecer la hora de inicio y finalización de cada vídeo y subir tu propia portada.
Vídeo en Zero Block
HTML incrustado
Añade cualquier elemento mediante la incrustación de HTML. Por ejemplo, elementos interactivos, grabaciones en línea, reproductores de música, calendarios, calculadoras y publicaciones en redes sociales. Puedes ajustar la posición de estos elementos en cada pantalla.
Información sobre herramientas
Una información sobre herramientas es un mensaje interactivo que aparece cuando se coloca el cursor del ratón sobre un elemento de un sitio web. Puede resultar útil si se está describiendo un tema complejo y se desea explicar sus partes en una foto. Por ejemplo, si se están vendiendo casas de campo en una urbanización, se puede dibujar un mapa y marcar cada edificio en él.

La información sobre herramientas incluye varias opciones útiles: ajustar el color, la sombra y el tamaño, cargar un icono que aparece dentro de un círculo o cargar una imagen que aparecerá al pasar el cursor por encima.

Una vez que haya terminado de colocar los elementos/información sobre herramientas en la página, no olvide comprobar la posición de cada información sobre herramientas para todas las resoluciones. De lo contrario, la ventana emergente correrá el riesgo de quedar cortada por arriba, por abajo o por los bordes del bloque.
Utilizar un tooltip para describir los detalles del producto. Foto: SPERA.de
Formulario de comentarios
Añade un formulario online horizontal o vertical a Zero Block. A continuación, personaliza todos los ajustes, como los campos de entrada o los servicios de captura de datos, los mensajes de éxito y error, los estilos de los formularios o las animaciones.
Un formulario diseñado en Zero Block Tilda Blog
Elementos vectoriales
En Zero Block, puedes crear y editar elementos vectoriales. Por ejemplo, formas inusuales, iconos o pequeños elementos dibujados, como subrayados o flechas. El editor vectorial también es útil para perfeccionar elementos SVG importados directamente en Tilda.
Ejemplo de una ilustración realizada en el editor vectorial de Tilda.
Ejemplo de una ilustración realizada en el editor vectorial de Tilda.

Cómo posicionar elementos

A cada elemento se le pueden asignar las coordenadas relativas a los cuatro lados de una pantalla o una cuadrícula, la opacidad y la sombra; también se pueden rotar los elementos o asignarles un enlace.
Las reglas facilitan el trabajo con los elementos de diseño. Son líneas horizontales en la parte superior y líneas verticales en el borde izquierdo de la pantalla, desde las que se pueden «arrastrar» guías. Las reglas y las guías le ayudan a establecer la disposición deseada de los elementos en el diseño, controlar las sangrías y la alineación, y mantener tamaños y proporciones constantes de los elementos. Para activar las reglas, vaya a Configuración en Zero Block Mostrar reglas.
Cómo configurar el tamaño de los elementos
A cada elemento se le puede asignar un tamaño en píxeles o un porcentaje del tamaño de la pantalla. Por ejemplo, si desea crear un elemento que ocupe la mitad de la pantalla independientemente de su tamaño, configure su anchura y altura en %, no en píxeles.

Efectos disponibles en Zero Block

Descubre muchas sorpresas con Zero Block. Aquí tienes una lista de efectos que puedes utilizar en tu sitio web.
Efectos al pasar el cursor
Utiliza un botón para los efectos al pasar el cursor en Zero Block. Puedes elegir el tamaño que desees e incluso redondearlo ajustando la configuración. ¿Quieres que solo sea visible al pasar el cursor? Entonces hazlo transparente y, para el efecto al pasar el cursor, selecciona una opacidad del 30 % y cualquier color.
Coloca el botón sobre los elementos que deseas cubrir con el efecto hover. Estos pueden ser imágenes o texto. Si es necesario, asigna un enlace URL al botón.
Fijar la imagen de fondo al desplazarse
Para bloquear un elemento mientras se desplaza, cambie la configuración de la imagen a Comportamiento: fijo. Esta función está disponible para imágenes de fondo e imágenes dentro de una forma. Si aplica esto a una imagen dentro de un panel, la imagen se extenderá por toda la pantalla. Sin embargo, solo será visible dentro de la forma. Si se utilizan varias formas de este tipo en un bloque, la imagen del interior será una continuación de sí misma.

Puede combinar imágenes fijas e imágenes estáticas para crear efectos adicionales y composiciones inusuales.
Desplazamiento largo
Para crear un desplazamiento largo, establezca la altura del contenedor de la ventana como un porcentaje de la altura de la pantalla. Por ejemplo, si desea que el contenedor tenga el doble de altura que la pantalla, establezca el valor en 200 y el comportamiento de la imagen de fondo en «Fijo».

Si desea que el texto y otros elementos aparezcan en la parte inferior de la página, establezca Contenedor en «Contenedor de ventana» y Eje Y en «Inferior». Ahora, los elementos están orientados hacia el borde inferior de la imagen. Muévalos hacia arriba tanto como desee para colocarlos más arriba de este límite.
Para crear un efecto de desplazamiento largo, establezca la altura del contenedor de la ventana como un porcentaje de la altura de la pantalla. Por ejemplo, si desea que el contenedor tenga el doble de altura que la pantalla, establezca el valor en 200.
Establecer el comportamiento de la imagen de fondo en «Fijo».
Si desea que el texto y otros elementos aparezcan en la parte inferior de la página, establezca Contenedor en «Contenedor de ventana» y Eje Y en «Inferior». Ahora, los elementos están orientados hacia el borde inferior de la imagen. Muévalos hacia arriba tanto como desee para colocarlos por encima de este límite.
Mostrar elementos fuera Zero Block
Si desea que algunos elementos se muestren fuera de Zero Block se superpongan a los bloques adyacentes, utilice Overflow. Lo encontrará en el panel Configuración de Zero Block.
Cuándo utilizar esta configuración:
1
Cuando desee superponer un elemento sobre un bloque prediseñado. Esto le ahorrará tiempo, ya que no tendrá que convertirlo en un Zero Block ajustar su configuración responsiva.

Para superponer un elemento sobre un bloque adyacente, cree un Zero Block estrecho Zero Block a él. Coloque el elemento de manera que se extienda más allá del lienzo y active la opción Desbordamiento. Recuerde comprobar cómo se ve el elemento en dispositivos móviles.
2
Cuando se desea fijar un elemento fuera de un Zero Block, puede resultar especialmente útil para crear animaciones paso a paso.
Un proyecto multimedia especial sobre el artista de fama mundial Banksy, presentado en la galería #madeontilda.
En Zero Block, también puedes establecer diferentes parámetros para los ejes X e Y. Esto puede ser útil cuando deseas crear tarjetas que se desplacen horizontalmente sin desplazamiento vertical.

Si estableces X en«Oculto» y Y en«Visible/Automático», aparecerá una barra de desplazamiento vertical en Zero Block y el bloque se fijará hasta que se muestre todo el contenido a lo largo del eje Y.
Y si configura X en «Visible/Auto» y Y en «Oculto», el contenido fuera del lienzo en el eje X se mostrará en el desplazamiento horizontal.
Bloqueo de todo Zero Block el desplazamiento
El Zero Block bloquear en la página para que permanezca en la parte superior o inferior de la página al desplazarse. Esto es útil, por ejemplo, para crear un menú fijo con un diseño personalizado. Para configurar el bloqueo, vaya a Ajustes → Posición y desbordamiento.

También puede hacer que el bloque no aparezca inmediatamente, sino después de unos cuantos desplazamientos (Desplazamiento de aparición). En este caso, puede utilizar una de las dos animaciones de apariencia: Fundido de entrada o Deslizamiento hacia arriba/abajo.

Configuración de diseños para diferentes resoluciones de pantalla

Zero Block cinco resoluciones de pantalla básicas para modificar la capacidad de respuesta de su sitio web: 320 píxeles, 480 píxeles, 640 píxeles, 960 píxeles y 1200 píxeles. Puede ampliar este rango añadiendo puntos de ruptura. Los puntos de ruptura le permiten lograr el diseño perfecto para todos los elementos del sitio web en resoluciones específicas. La configuración flexible puede ser útil, por ejemplo, cuando los usuarios visitan el sitio web en dispositivos con resoluciones de pantalla irregulares.

Al diseñar Zero Block, es esencial probar cómo se ve el sitio web en todas las pantallas. Puede hacerlo directamente en Zero Block clic en la imagen del dispositivo correspondiente.
Establezca puntos de interrupción personalizados en el rango de 320 píxeles a 2560 píxeles.
Zero Block diseñado para que cada elemento de cada pantalla se pueda personalizar individualmente. Cuando cambias la composición o el contenido de uno de ellos, el bloque puede verse diferente en pantallas con menor resolución debido a las diferencias en la longitud de la línea o el tamaño de los elementos.

Cuando crees un Zero Block cero, recuerda personalizar manualmente los diseños para cada resolución. Ten esto en cuenta antes de publicar el sitio web.

Si todo tu sitio web está diseñado en Zero Block, es más conveniente dividirlo en bloques separados. De esta manera, puedes desactivar bloques para pantallas de baja resolución o desactivarlos temporalmente para todo el sitio web.

Si utilizas muchos detalles en una pantalla grande, puedes hacer que el diseño sea más simple y conciso en pantallas con menor resolución para facilitar la percepción.
Un ejemplo de un sitio web en el que los elementos decorativos se redimensionan o eliminan en pantallas más pequeñas para mejorar la legibilidad.
Aquí hay un ejemplo de una composición visual única para cada tamaño de pantalla:
Si no te gusta el diseño adaptativo y quieres empezar desde cero, puedes borrar la configuración de los elementos para resoluciones de pantalla más bajas. Para ello, selecciona uno o varios elementos → haz clic con el botón derecho para abrir el menú contextual → Borrar diseño adaptativo.
Uso del diseño automático en Zero Block
Los diseños automáticos en Zero Block una técnica de diseño que te permite crear diseños rápidamente, cambiar el contenido y adaptar el diseño a diferentes resoluciones de pantalla. Es muy útil para crear elementos como tarjetas, botones con múltiples elementos, elementos de menú y otros. Consulta la guía para configurar el diseño automático en el Centro de ayuda.
Losdiseños automáticos controlan la ubicación de los elementos de un grupo entre sí. Una vez establecidas la dirección y las distancias, se alinean automáticamente según estas reglas, independientemente de los cambios en el contenido del grupo. Por ejemplo, si necesita añadir otra imagen a un grupo al crear una galería, esta se «ajustará» según las reglas especificadas, sin necesidad de mover manualmente otros elementos del grupo.

Consulte el tutorial sobre el uso de los diseños automáticos:

Animación en Zero Block

En Zero Block hay disponibles varios tipos de animación, como animación de apariencia, animación paso a paso, así como efecto de paralaje y fijación de elementos al desplazarse.

Animación de apariencia

Puede animar cada elemento tal y como aparece en Zero Block. Existen seis tipos de animaciones:
Fundido de entrada: los elementos se hacen visibles gradualmente.
Fundido de entrada: los elementos se hacen visibles gradualmente desde la parte inferior de la página.
Fundido de entrada — los elementos se hacen visibles gradualmente desde la parte superior de la página.
Fundido de entrada por la izquierda: los elementos se hacen visibles gradualmente desde la derecha.
Fundido de entrada por la derecha: los elementos se hacen visibles gradualmente desde la izquierda.
Acercar — los elementos aparecen al acercar o alejar la imagen.
Cada tipo de animación incluye su propia configuración. Veámosla.

La duración es la duración de la animación en segundos. Cuanto mayor sea el valor, más lenta será la animación.
La distancia es el espacio entre la posición inicial de un elemento animado y su posición final. Solo se especifica para las animaciones en las que los objetos aparecen desde los lados.
La escala es el tamaño de un elemento al comienzo de la animación como porcentaje del tamaño original. Este parámetro se establece cuando se produce un aumento o una reducción de escala. Si el valor es superior a 100, el elemento es más grande desde el principio y se reduce a su tamaño original. Si el valor es inferior a 100, el elemento se amplía hasta su escala original.
El retraso es el retraso en la reproducción de la animación, en segundos. Si el valor es 0, la animación comenzará tan pronto como el bloque aparezca en la página.

¿Cuándo se debe utilizar el retraso? Puede ser útil si otro objeto se superpone o tacha un elemento significativo. Si hay varios objetos animados en una página, asigne diferentes ajustes de retraso a cada elemento. Esto le permite dirigir la mirada del espectador, llevándolo de un elemento al siguiente.
El desplazamiento del activador es la distancia, medida en píxeles, desde el borde inferior de la pantalla donde aparece el elemento en la página. De forma predeterminada, la animación comienza tan pronto como el elemento cruza la línea inferior de la página. Si desea retrasar la animación hasta que el elemento sea visible para el espectador (y no en la parte inferior de la página), establezca la distancia desde el borde inferior en la que comenzará la animación. Si el objeto se encuentra inicialmente a una distancia menor que el valor de este parámetro, no será visible hasta que el usuario se desplace hacia abajo.
Un ejemplo del efecto de animación Trigger Offset utilizado en la sección de servicios.
Una vez que hayas configurado los parámetros necesarios, comprueba la animación directamente en el editor. Para ver el elemento animado en acción, haz clic en «Reproducir elemento» para un solo elemento y en «Reproducir todo» para varios elementos y ver cómo funcionan juntos.
Elementos animados que aparecen en la portada del resumen del año 2019 de Tilda.

Animación paso a paso

Con la animación paso a paso, puede asignar pasos de transformación secuenciales a cualquier elemento de la página y permitir que los visitantes interactúen con ellos.

Para añadir una animación paso a paso a un elemento en Zero Block, seleccione el elemento, abra su configuración y navegue hasta la sección Animación paso a paso (situada al final de la configuración del elemento).

La animación se inicia cuando un visitante realiza una acción en la página. Zero Block cuatro eventos de este tipo:

  • En rollo
  • En pantalla
  • Al pasar el ratón
  • Al hacer clic
La animación se inicia cuando un visitante realiza una acción en la página. Zero Block cuatro eventos de este tipo:

  • En rollo
  • En pantalla
  • Al pasar el ratón
  • Al hacer clic
Animación al desplazarse
Los elementos aparecen y se mueven cuando el visitante se desplaza hacia arriba o hacia abajo por la página.
* Para ver el ejemplo de animación paso a paso, abra esta página en una pantalla de más de 1200 píxeles.
Todos los ejemplos de animación que se muestran a continuación están disponibles como plantillas, por lo que puedes añadirlos a tus proyectos y utilizarlos como desees.Ejemplos de animación de desplazamiento de

:
Animación al aparecer el elemento en pantalla
Este tipo de animación se activa cuando un elemento aparece en la pantalla.
* Para ver el ejemplo de animación, abra esta página en una pantalla de más de 1200 píxeles.
Elemento en pantalla: la animación se activa cuando un elemento cruza la parte inferior del navegador y aparece en la página web.

Bloque en pantalla: la animación se activa cuando un Zero Block el elemento cruza la parte inferior del navegador y aparece en la página web.
Ejemplos de animación activada por la aparición de un elemento en pantalla:
Animación al pasar el cursor
Este tipo de animación se activa cuando un visitante pasa el cursor por encima de un elemento.
Sitúe el cursor sobre los elementos
* Para ver el ejemplo de animación, abra esta página en una pantalla de más de 1200 píxeles.
Ejemplo de animación activada al pasar el cursor sobre un elemento:
Animación al hacer clic
Este tipo de animación se activa cuando un visitante hace clic en el elemento.
Haga clic en el elemento.
* Para ver el ejemplo de animación, abra esta página en una pantalla de más de 1200 píxeles.
Cada tipo de animación tiene ajustes adicionales:

El disparador de inicio es un evento que activa la animación. Elige entre Parte superior de la ventana, Centro de la ventana y Parte inferior de la ventana.
El disparador Parte inferior de la ventana está configurado como predeterminado; la animación comenzará tan pronto como cruce la parte inferior del navegador.

El desplazamiento del disparador es la distancia en píxeles desde el disparador de inicio seleccionado. La animación comienza una vez que se desplaza esa distancia.

El bucle es un parámetro que te permite repetir los pasos especificados indefinidamente. Puedes repetir la animación un número infinito de veces (establece Loop with Reverse) o reproducirla solo una vez (establece Loop Once).

Easing establece la suavidad de la animación. En Tilda, puedes elegir uno de los 29 tipos de suavizado que afectarán a la visualización de la animación configurada. El tipo de suavizado seleccionado se puede cambiar utilizando las curvas Bézier.

Puedes probar la animación resultante utilizando los botones Reproducir elemento (ver la animación del elemento seleccionado) / Reproducir todo (reproducir la animación de todos los elementos del bloque). Esta opción está disponible para todos los tipos de animación, excepto la animación al desplazarse.

Para mayor comodidad, puede trabajar en la animación en dos pestañas del navegador: edite Zero Block una y abra la vista previa de la página en la otra. Esto le permite comprobar rápidamente el resultado sin salir Zero Block. Antes de probar el resultado, no olvide guardar los cambios en Zero Block actualizar la página de vista previa.
Pasos de animación
Cuando utilizas la animación paso a paso, puedes añadir pasos y personalizar las propiedades de cada uno de ellos. Esto provocará cambios en los parámetros de cada elemento seleccionado en tu página web. Crea una trayectoria y movimientos de tus elementos en la página basándote en varios pasos.
Cada paso tiene su propia duración, es decir, el periodo durante el cual se aplican los ajustes del paso.

Cuanto más corta sea la duración del paso, más rápido cambiarán los parámetros del elemento.

En las animaciones de desplazamiento, la duración del paso se mide en píxeles. En otros tipos de animaciones, cada paso se mide en segundos.
Cada paso tiene su propia duración, es decir, el periodo durante el cual se aplican los ajustes del paso.

Cuanto más corta sea la duración del paso, más rápido cambiarán los parámetros del elemento.

En las animaciones de desplazamiento, la duración del paso se mide en píxeles. En otros tipos de animaciones, cada paso se mide en segundos.
Para cambiar el estado inicial de un elemento, por ejemplo, si quieres que sea invisible al principio, establece la opacidad en 0 y la duración en 0 segundos o 0 píxeles (para la animación al desplazarse).
Configuración de los pasos de animación
Mediante la configuración de pasos, puede cambiar las propiedades del elemento al que se aplica la animación.

Puede establecer la posición (Mover), el tamaño (Escala), la transparencia (Opacidad) del elemento y el ángulo de rotación del elemento (Rotación).
También puede fijar el elemento en un lugar concreto de la página durante un paso determinado (Fijar). Con esta configuración, el elemento permanecerá fijo mientras el usuario se desplaza hacia arriba o hacia abajo por la página.

Al igual que con la animación activada por la aparición de un elemento en pantalla, puede establecer un Retardo para el inicio de un paso seleccionado.
También puede fijar el elemento en un lugar concreto de la página durante un paso determinado (Fijar). Con esta configuración, el elemento permanecerá fijo mientras el usuario se desplaza hacia arriba o hacia abajo por la página.

Al igual que con la animación activada por la aparición de un elemento en pantalla, puede establecer un Retardo para el inicio de un paso seleccionado.
Parallax
Paralaje al desplazarse. Cuando apliques esta animación a un elemento, su velocidad de movimiento será diferente a la velocidad de otros elementos al desplazarse por la página. En la configuración, puedes establecer su velocidad de movimiento: a una velocidad baja de 0 a 100, se moverá más lento que el desplazamiento; a una velocidad alta de 100 a 200, se moverá mucho más rápido.
Paralaje al mover el ratón. Un elemento con este tipo de animación se mueve en dirección opuesta al movimiento del cursor. Su rango de movimiento vertical y horizontal se puede configurar en los ajustes.
Un ejemplo del efecto de paralaje en el movimiento del ratón.
Fijación de elementos al desplazarse
Este tipo de animación le permite bloquear elementos mientras se desplaza. En la configuración, puede especificar la distancia dentro de la cual los elementos permanecen fijos en una posición específica (el bloqueo solo se produce dentro del bloque). Después de desplazarse hasta la distancia especificada, el elemento ya no estará fijo y se desplazará junto con otros elementos de la página.

La configuración también le permite especificar qué activará el bloqueo: el borde superior de la ventana, el borde inferior o el centro. La compensación de activación le permite controlar la distancia desde el borde de la ventana, lo que garantiza que el elemento no se pegue a ella. También es útil cuando se desea bloquear varios elementos a la vez a una cierta distancia entre sí.
Fijación de elementos al desplazarse
Si utilizas animaciones en tu proyecto, no sobrecargues la página con demasiados efectos; normalmente basta con animar entre el 20 y el 30 % del contenido. Las animaciones excesivas resultan intrusivas y molestas, además de ralentizar la velocidad de carga de la página.

Errores comunes al usar Zero Block

1. Ignorar la adaptabilidad
Si estás creando un bloque desde cero, vale la pena diseñar primero toda la página para ver cómo se compara este bloque con los demás. Una vez hecho esto, no olvides configurar sus ajustes de adaptabilidad. Si estás traduciendo texto en Zero Block simplemente lo estás cambiando, comprueba cómo se ve en cada versión de pantalla, incluso si todo se ve bien en la primera pantalla. Debido a los diferentes tamaños de fuente y a la longitud de la línea, el texto puede verse diferente en distintas pantallas.
2. Diferente posicionamiento de los elementos que pertenecen juntos
Si desea que dos elementos permanezcan en la misma posición uno respecto al otro, independientemente de la resolución de la pantalla, establezca la posición de los elementos como «Grid Container» (Contenedor de cuadrícula) o «Window Container» (Contenedor de ventana).

Obtenga más información sobre cómo configurar la posición de los elementos en el Centro de ayuda:
El encabezado se posiciona en relación con el borde de una pantalla (contenedor de ventana). La distancia a la izquierda permanecerá fija para cualquier tamaño de pantalla, independientemente del tamaño de la ventana del navegador. El subtítulo se posiciona en relación con la cuadrícula (contenedor de cuadrícula). Por eso los dos elementos de texto se colocan de forma diferente uno respecto al otro.
3. El contenedor de texto sobrepasa los límites de la cuadrícula.
Si estás posicionando el texto en relación con la cuadrícula y quieres que siempre permanezca dentro de la pantalla, asegúrate de que su contenedor no sobrepase el área de la cuadrícula. Crear un diseño ordenado es una buena costumbre: de esta manera, evitarás sorpresas desagradables cuando se publique el bloque.
Utiliza Zero Block crear sitios web impresionantes y soluciones tipográficas innovadoras. Es una herramienta útil para tus soluciones de diseño. Añade personalidad a tu sitio web con efectos especiales, tipografía y diseños originales. ¡Ahora todo está en tus manos!
Si le ha gustado este artículo, compártalo con sus amigos. Gracias ✌️
Véase también:
Libro de texto gratuito sobre cómo diseñar, configurar y ejecutar páginas de destino de alta conversión
Más información

Guía práctica gratuita de animación web con ejemplos y técnicas,

y consejos para utilizarlos

Explore