Cómo crear tu propio diseño con nuestro editor de diseño web Zero Block

Controla cada elemento. Puedes controlar cada elemento del bloque, como el texto, la imagen, el botón o el fondo. Decide su posición, tamaño y resolución de pantalla en la que aparecerán.

Capas. Es una herramienta muy práctica para crear profundidad con técnicas de superposición y opacidad. Cada elemento de la página web puede colocarse en relación con la cuadrícula o los bordes de la pantalla.

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

Transparencia. Establezca un nivel de transparencia en cualquier elemento y efectos de sombra debajo de ellos, ajuste la adaptabilidad. Cambie todos los parámetros, como la composición o el conjunto de elementos visibles, en función de la resolución de la pantalla.

Paneles. Añada paneles de colores, tarjetas de contenido o cargue imágenes dentro de formas geométricas.

Vídeos. Añade vídeos de YouTube o Vimeo a tu web. En Bloque Cero puedes ajustar su tamaño y posición en la página.

Añadir HTML. Añade cualquier elemento al Bloque Cero insertando código HTML (utiliza tu propio código o widgets IFrame que te permiten insertar contenidos de terceros proveedores). Ajusta la posición de estos elementos en cada pantalla.

Información sobre herramientas. Utilice esta herramienta interactiva para añadir breves mensajes emergentes. Puede modificar los ajustes como el color, la sombra, el tamaño, cargar un icono dentro de un círculo o una imagen encima del texto.

Formulario de devolución. Añade campos de entrada, integraciones de captura de datos, establece el estilo del formulario y anímalo.

Animación de elementos de páginas web. Añade animaciones cuando aparezcan elementos web en una página: opacidad, aumento de escala, cuando los elementos aparezcan por abajo, por arriba, por la izquierda o por la derecha.

Animación paso a paso. Haga su página más dinámica y atractiva. Anime al hacer clic, al desplazarse, al pasar el ratón y cuando el elemento aparezca en pantalla.

Desplazamiento de paralaje. Utilice el desplazamiento de paralaje o cree el efecto de paralaje a partir del movimiento del ratón.

Elementos fijos al desplazarse. Especifique la distancia durante la cual el elemento debe permanecer fijo y su ubicación.

Si dibujas diseños en un editor gráfico antes de hacer nada de uso, utiliza Zero Block para transferirlo tal cual a tu sitio web. Para ello, Zero Block ofrece una cuadrícula de 12 columnas y especificaciones personalizables para cada elemento, como 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 diseño en Zero Block.

La interfaz de Zero Block es similar a la de un editor gráfico. Basta con añadir los elementos necesarios y darles las coordenadas apropiadas. Es fácil de hacer en Zero Block, sobre todo si ya lo has hecho antes. Utiliza Zero Block para transferir rápidamente tu idea de un editor gráfico a tu sitio web sin necesidad de escribir ningún código.

Si estás creando una página web o una página de aterrizaje y no encuentras el bloque adecuado en la biblioteca de Tilda, utiliza el Bloque Cero. Aquí tienes algunos ejemplos concretos.

Los sitios web hechos en Tilda suelen crearse con bloques, para que los visitantes se desplacen 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 desea cambiar la forma en que los visitantes leen la información en su sitio web, Zero Block es una gran herramienta para ello.

El Bloque Cero funciona muy bien para reunir elementos con bordes desiguales en una única composición haciendo que todas las distancias sean visualmente iguales.

Zero Block funciona bien con capas, como imágenes superpuestas, textos sobre un panel, botones sobre imágenes. Crea efectos adicionales jugando con su posicionamiento.

Para simplificar las cosas cuando se trata de varios elementos, utiliza Capas. Esta magnífica herramienta te permite gestionar cada elemento: cambiar su posición, ocultarlo o bloquearlo.

Para abrir Capas, utiliza estos atajos de teclado: ⌘+ L o Ctrl + L (para Mac) o Ctrl + L (para Windows).

Zero Block permite a los usuarios crear composiciones complejas a partir de múltiples elementos como textos, imágenes, líneas, paneles y botones.

Esta nueva página de aterrizaje de fuentes creada en Tilda consta de bloques con múltiples elementos.

El efecto hover cambia la apariencia de un elemento cuando el usuario apunta con el ratón sobre él. Utilízalo como elemento de diseño adicional o como elemento funcional de un artículo o infografía.

Perfecto para cuando quieres cambiar algo en un bloque normal pero no es posible conseguirlo cambiando los ajustes.

Si has seleccionado un bloque Tilda general y quieres hacerle algunos cambios, simplemente utiliza la opción Convertir a Bloque Cero. Esto le permitirá editarlo como si fuera un Bloque Cero. Esta opción está disponible para la mayoría de los bloques Tilda.

Vamos a dividir este proceso en pasos. Por ejemplo, cambiemos el bloque de tarifas colocando iconos fuera de los paneles de información.

Ejemplo de conversión de otro bloque a Bloque Cero:

Nuestros bloques estándar tienen muchos ajustes. Añade el bloque más apropiado de la biblioteca, abre la pestaña de ajustes y comprueba si puedes ajustar la plantilla a tu objetivo. Es posible que no necesites el Bloque Cero en absoluto.

Los siguientes ejemplos son diseños basados en nuestros bloques estándar.

Si antes tenía que convertir un bloque normal en bloque cero, ya no tendrá que hacerlo. Tilda ofrece ahora la opción de definir las sangrías por separado para ordenadores y dispositivos móviles.

Nuestros bloques regulares están dispuestos en una cuadrícula de 12 columnas. Puede definir las sangrías para cada cabecera igual a cualquier número de columnas. Si diseñaste tu bloque en Bloque Cero sin tener en cuenta la cuadrícula, no podrás establecer las mismas sangrías para los bloques normales (tendrás que convertirlos a Bloque Cero).

Por ejemplo, estás alternando Bloques Normales y Cero en el diseño de tu sitio web. Mientras que puedes colocar elementos donde quieras en Bloque Cero, esto no será posible repetirlo en un bloque normal. Así que es bueno que tengas en cuenta que nuestros bloques normales sólo pueden colocarse en la cuadrícula.

Te recomendamos que utilices una cuadrícula cuando diseñes tu sitio web en Bloque Cero. Coloca los elementos principales en relación con la cuadrícula - ahora tu diseño puede combinarse fácilmente con todos los demás bloques Tilda.

En Zero Block puedes añadir elementos más complejos que textos, imágenes, paneles y botones.

Puedes añadir o editar vídeos de YouTube y Vimeo. Cambia el tamaño y la relación de aspecto del vídeo, así como su opacidad, crea sombras y aplica animaciones.

En los ajustes de vídeo puedes configurar la reproducción automática, activar y desactivar la reproducción en bucle, establecer la hora de inicio y fin de cada vídeo y subir tu propia carátula.

Añade cualquier elemento con la ayuda del HTML. Puede ser tu propio código o puedes incrustar el iFrame de un widget de terceros. Por ejemplo, puede tratarse de elementos interactivos, grabaciones en línea, reproductores de música, calendarios, calculadoras o publicaciones en redes sociales. Puedes ajustar la posición de estos elementos en cada pantalla.

Tooltip es un pequeño aviso interactivo que aparece cuando el cursor del ratón se sitúa sobre un elemento de una página web. Puede ser útil si está describiendo un tema complejo y desea describir sus partes en una foto. Por ejemplo, si está vendiendo casas en una urbanización, puede dibujar un mapa y marcar cada edificio en este mapa.

La información sobre herramientas tiene muchos ajustes prácticos: cambia el color, la sombra, el tamaño o elige y carga un icono que aparecerá dentro de un círculo o un texto que aparecerá al pasar el ratón por encima.

Cuando hayas terminado de colocar los elementos/tooltips en la página, no olvides comprobar la posición de cada tooltip en pantallas de todas las resoluciones, de lo contrario la indicación correrá el riesgo de quedar cortada por arriba, por abajo o por los bordes del bloque.

Añada un formulario de comentarios horizontal o vertical al Bloque Cero y cambie todos los ajustes, como añadir campos de entrada o integraciones de captura de datos, mensajes de éxito o error, estilos de formulario o animaciones.

A cada elemento se le pueden asignar las coordenadas relativas a los cuatro lados de una pantalla o una cuadrícula, cambiar la opacidad y la sombra; se puede girar el elemento o darle un enlace al hacer clic.

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. En este caso, configure su anchura y altura en %, no en píxeles.

Descubre muchas sorpresas inesperadas con Zero Block. Aquí tienes una lista de efectos que podrías utilizar en tu web.

Utiliza un botón para efectos hover en Zero Block Puedes hacerlo del tamaño que quieras e incluso redondo ajustando la configuración. ¿Quieres que sólo sea visible al pasar el ratón por encima? Hazlo transparente. Y ya que estás, elige un 30% de opacidad y cualquier color para el botón flotante.

Coloque el botón sobre los elementos que desee que queden cubiertos por el efecto hover. Pueden ser imágenes o texto. Si es necesario, convierta el botón en un enlace.

Para fijar un elemento durante el desplazamiento, cambie la configuración de la imagen a Comportamiento - Fijo. Esta función está disponible para imágenes de fondo dentro de una forma. Si aplica esto a la imagen dentro de un panel, el tamaño de la imagen se extenderá a pantalla completa, pero sólo será visible dentro de la forma. Si utiliza varias formas de este tipo en el bloque, la imagen dentro de ellas será la continuación de la misma imagen.

Puede combinar imágenes fijas e imágenes estáticas para crear efectos adicionales y combinaciones inusuales.

Si desea que algunos elementos se muestren fuera del Bloque Cero y se superpongan a los bloques adyacentes, elija la opción Desbordamiento. Encuéntrela en la configuración del bloque.

Los diseños del Bloque Cero pueden adaptarse a los cinco tipos de pantallas más comunes. Tu bloque siempre se verá bien en cualquier dispositivo.

Recuerda comprobar cómo se ve tu Zero Block en todas las pantallas. Sólo tienes que pulsar el botón que representa el dispositivo que necesitas en el Bloque Cero.

Cada elemento en cada pantalla es personalizable en Bloque Cero, por lo que si cambias la composición o el contenido en una de las pantallas, un bloque en menor resolución podría verse diferente debido a la diferencia en la longitud de la línea o el tamaño de los elementos.

Creando un Bloque Cero desde cero, configura la adaptabilidad para cada dispositivo individualmente. Es importante tener esto en cuenta antes de publicar tu sitio web.

Si estás diseñando todo tu sitio en Bloque Cero, es más conveniente dividirlo en bloques separados. Esto te permitirá desactivar bloques para pantallas de baja resolución o desactivarlos temporalmente para todo el sitio web.

Si estás utilizando muchos detalles en una pantalla grande, simplifica tu diseño para pantallas con menor resolución para que sea más agradable a la vista.

He aquí un ejemplo de composición visual individual en cada pantalla:

Puede animar cada elemento tal y como aparece en el Bloque Cero. Hemos proporcionado seis tipos de animaciones:

Cada tipo de animación tiene sus propios parámetros. Echemos un vistazo a lo que significan.

Duración - La duración de una animación en segundos. Cuanto mayor sea el valor, más lenta será la animación.

Distancia - Espacio entre la posición inicial de una animación y su posición final. Se especifica sólo para las animaciones en las que los objetos aparecen por los lados.

Escala - el tamaño de un elemento al principio de una 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 mayor que 100, el elemento es más grande desde el principio y se escala hasta su tamaño original; si el valor es menor que 100, el elemento se escala hasta su escala original.

Retardo - el retardo de la reproducción de la animación, en segundos. Si el valor es cero, la animación se iniciará en cuanto aparezca el bloque en la página.

¿Cuándo utilizarlo? Puede ser útil si otro objeto se superpone a un elemento significativo o lo cruza. Si una pantalla muestra varios objetos animados, asigne una función de retardo diferente a cada elemento. Esto le permite dirigir la mirada del espectador, llevándole de un elemento al siguiente.

Desplazamiento del activador es la distancia, medida en píxeles desde el borde inferior de la pantalla, a la que aparecen los elementos en la página. Por defecto, la animación comienza en cuanto el elemento entra en la página. Si desea retrasar la animación hasta que el objeto sea visible para el espectador (y no en la parte inferior de la página), establezca la distancia desde el borde inferior a la que comenzará la animación. Si el objeto se encuentra inicialmente a una distancia inferior al valor de este parámetro, no será visible hasta que el usuario se desplace más.

Una vez que hayas configurado los parámetros necesarios, comprueba la animación sin salir del editor. Activa el elemento que has animado, haz clic en Reproducir elemento para un solo elemento y en Reproducir todos si has animado varios elementos y quieres ver cómo funcionan juntos.

Si desea ver elementos interactivos en su página con los que los usuarios quieran interactuar, resalte el elemento que desea animar y vaya a animación paso a paso en la configuración del elemento.

Los elementos aparecen y se mueven cuando un usuario se desplaza hacia arriba o hacia abajo por una página.

Ejemplos de animación en scroll:

Siéntete libre de utilizar estos ejemplos de animación en tus proyectos personales.

Este tipo de animación se activa cuando un elemento aparece en pantalla.

Elemento en pantalla - se activa cuando un elemento cruza la parte inferior del navegador y aparece en la página web.

Bloque en pantalla - se activa cuando un bloque cero que contiene el elemento cruza la parte inferior del navegador y aparece en la página web.

La animación se iniciará cuando el cursor se sitúe sobre un elemento.

La animación se iniciará cuando un usuario haga clic en el elemento.

Cada tipo de animación tiene estos ajustes adicionales:

Inicio -un evento que desencadena la animación. Elija entre Ventana superior, Ventana central y Ventana inferior.

La animación se iniciará en cuanto cruce la parte inferior del navegador.

Desplazamiento del activador es la distancia en píxeles desde el disparador seleccionado que inicia la animación.

Bucle de animación es un parámetro que controla la repetición de la animación a perpetuidad.

Puede probar la animación con la ayuda del botón Reproducir elemento / Reproducir todo. Esta opción está disponible para todos los tipos de animación excepto para la animación en scroll.

Para su comodidad, puede utilizar dos pestañas del navegador: una para editar en el Bloque Cero, y la otra para abrir la vista previa de la página. De este modo podrá comprobar su resultado sin salir del Bloque Cero. Asegúrate de guardar todos los cambios y actualizar la página de vista previa antes de probar tu página web.

Cuando eliges la animación paso a paso, puedes añadir pasos y personalizar las propiedades de cada paso que desencadenarán 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 basados en una serie de pasos.

Para cambiar el estado inicial de un elemento - si quieres que sea invisible al principio, por ejemplo, establece la opacidad a cero y la duración a 0 segundos o 0 píxeles (para animación en scroll).

Con la ayuda de la configuración por pasos, puede cambiar las propiedades del elemento que está animando.

Puedes fijar su posición (Mover), tamaño (Escala), transparencia (Opacidad) y ángulo de rotación (Escala).

Desplazamiento de paralaje. Cuando apliques esta animación a un elemento, la velocidad a la que se mueva diferirá de la velocidad de movimiento de los demás elementos cuando estés desplazando una página. Puedes establecer la velocidad de su movimiento en la configuración de la página: a una velocidad lenta de 0 a 100 el elemento se moverá más despacio que el scroll, a una velocidad alta de 100 a 200 se moverá mucho más deprisa.

Parallax al mover el puntero del ratón. Un elemento con este tipo de animación se mueve en la dirección opuesta relativa al movimiento del puntero. El área de su movimiento vertical u horizontal se establece en la configuración de la página.

Este tipo de animación permite fijar los elementos durante el desplazamiento. En los ajustes, puede especificar la distancia dentro de la cual el elemento permanecerá fijo en un lugar (esto es siempre dentro del bloque). La distancia se fija en píxeles. Después de un desplazamiento a la distancia especificada, el elemento deja de estar fijo y continuará desplazándose junto con la página.

Puede establecer los activadores de desplazamiento en la configuración: superior, inferior o centro de la ventana. Trigger Offset le permite controlar el margen entre el borde de la ventana y el elemento. También es útil cuando desea fijar varios elementos al mismo tiempo a cierta distancia unos de otros.

Si está creando un bloque desde cero, merece 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 opciones de adaptabilidad. Si estás traduciendo un texto en Bloque Cero y simplemente lo cambias, comprueba que funciona en Bloque Cero aunque todo se vea bien en la primera pantalla. Debido a los diferentes tamaños de letra y a la longitud de la línea, el texto puede tener un aspecto diferente en otras pantallas.

Si desea que dos elementos permanezcan en la misma posición uno respecto al otro, establezca el posicionamiento de los elementos como Contenedor de rejilla o Contenedor de ventana.

Si posiciona el texto en relación con la rejilla y desea que permanezca siempre dentro de la pantalla, tenga cuidado de que su contenedor no sobrepase el área de la rejilla. Crear un diseño ordenado es un buen hábito; así evitará sorpresas desagradables al publicar el bloque.