Zero Block: Cómo crear un bloque personalizado

Parte uno. Empezando.
Zero Block. Editor de Diseño para Profesionales
Mire este tutorial sobre cómo usar Zero Block, o lea la guía a continuación.
Zero Block es un editor profesional incorporado que le permite realizar cualquier idea creando bloques diseñados a medida según sus propias preferencias. Es similar a los editores de diseño gráfico populares pero en Tilda.
Artículo de resumen sobre las características principales
Trabajando con contenedores y creando elementos responsivos
Una lista de todos los atajos para acelerar su flujo de trabajo
Corrección de elementos, paralaje y animación de aparición gradual
Animación compleja de varios pasos: principios básicos, configuraciones y ejemplos

Cómo configurar una animación de elemento que se ejecuta al hacer clic o pasar el cursor sobre otro elemento

Cómo puedes importar automáticamente un diseño de Figma a Zero Block

1
Cómo añadir un Zero Block
Para agregar un Zero Block a la página, haga clic en Zero en la parte inferior de la página. También puedes encontrarlo en la parte inferior de la Biblioteca de bloques, justo debajo de la categoría "Otros".
Un Zero Block mantiene todas las características de bloque regulares: se puede copiar, eliminar, eliminar y ocultar. Tiene configuraciones, pero en lugar de un botón de "Contenido", tiene un botón de "Bloquear editor". Haga clic en él si desea editar el bloque y se abrirá el Editor de bloques.
2
Introducción a la interfaz
Un Zero Block tiene dos espacios de trabajo o contenedores: el contenedor de cuadrícula y el contenedor de ventanas, que indican los límites de una pantalla del navegador.

El contenedor de cuadrícula admite la misma cuadrícula que Tilda: 12 columnas (1200 px). Si alinea objetos con la cuadrícula y ubica elementos dentro del contenedor de cuadrícula, siempre permanecerán dentro de los límites de 12 columnas, independientemente del tamaño de la pantalla.
El Contenedor de cuadrícula es el espacio de trabajo principal en el Editor de bloques.
3
Cómo agregar y editar elementos
Haga clic en el botón más en la esquina superior izquierda del Editor de bloques para agregar un elemento a la página. Puede agregar texto, imagen, forma, botón, video, información sobre herramientas, HTML, formulario o galería.
También puede agregar una imagen arrastrándola desde una carpeta al espacio de bloque.
Cómo editar elementos usando un mouse
Un Zero Block admite todas las manipulaciones básicas del mouse: los elementos se pueden mover, cambiar de tamaño, copiar (manteniendo presionada la tecla Alt) y se pueden seleccionar varios elementos.
Puede cambiar el tamaño de un elemento de imagen sin cambiar sus proporciones.

La altura de los elementos de texto cambia automáticamente en función del volumen del texto.

Los tamaños de los botones y las formas se pueden cambiar en todas las direcciones.
Para operaciones con múltiples elementos, presione Cmd+A para seleccionar todos los elementos, o seleccione múltiples elementos con el mouse mientras mantiene presionada la tecla Shift.
Cuando se seleccionan varios elementos, se pueden alinear horizontal o verticalmente entre sí o con el contenedor.
Cómo editar elementos usando un teclado
La edición de elementos de bloque con un teclado acelera considerablemente el proceso de trabajo, por lo que recomendamos el uso de teclas de acceso rápido.
Cambiar tipo de pantalla
Ocultar cuadrícula
Ocultar configuración
Ocultar elementos de gestión
Deshacer la última acción
Ahorrar
Copiar
Pegar
Mover
Borrar
Cambiar opacidad
Bloquear el elemento
Cambia tamaño de fuente
Cambiar interlineado
Cambiar el espacio entre letras
Seleccionar todo
Capas: Ocultar/Mostrar
Guías: Agregar Horizontal
Guías: Agregar vertical
⌘+1...5
G
PESTAÑA
F
⌘+Z
⌘+S
⌘+C
⌘+V
(Mayús+) ←↑→↓
Retroceso
0...9
L
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
⌘+L
⌘+H
⌘ + Mayús + L
(Use Ctrl en lugar de ⌘ si es usuario de Windows)
También puede acceder a la lista de atajos de teclado desde el menú contextual en el Editor de bloques.
Cómo editar elementos usando el panel Configuración
(Tecla de tabulación)
1
Texto
Puede acceder a la configuración completa de cualquier elemento haciendo clic en Configuración en la esquina inferior derecha de la pantalla.
Puede abrir o cerrar el panel Configuración pulsando la tecla TAB.
De forma predeterminada, el panel Configuración está oculto para mantener el espacio de trabajo despejado.
Use la fila de botones superior para alinear un elemento vertical u horizontalmente con el contenedor rápidamente.

Puede ver las coordenadas del elemento a continuación. Se pueden dar en píxeles o en porcentaje. A continuación, revisamos esta característica en detalle.

El origen se indica con una cruz azul.

También puede ver los parámetros del elemento: ancho y alto, medidos en píxeles.
Para cambiar el tamaño de fuente, utilice las teclas –/+.
Puede cambiar el interlineado presionando las teclas de flecha Cmd+arriba/abajo.
Puede cambiar el espaciado entre letras pulsando
Cmd+teclas de flecha izquierda/derecha.
Para copiar un elemento, arrástrelo mientras mantiene presionada la tecla Alt.
La opacidad es fácil de ajustar con un teclado:
1—10%
2—20%
...
0— 00%
2
Imagen
Cuando subes una imagen, esta toma el tamaño del marco en el que se sube. Haga clic en Tamaño original en el panel Configuración del elemento para restablecer la imagen a su tamaño original.
Si desea recortar la imagen en forma de círculo, establezca el radio de redondeo.

Para hacer un círculo uniforme, la imagen original debe ser de forma cuadrada, y el radio de redondeo debe ser igual a la mitad del lado. Por ejemplo, si el tamaño de la imagen es 100×100 px, establezca un radio igual a 50.
Puede agregar una sombra a la imagen. Para hacer esto, seleccione el color de la sombra, la opacidad, el desplazamiento x e y, el grado de desenfoque y la extensión en el panel Configuración del elemento.
Cada imagen puede tener un texto alternativo (etiqueta alt). Los motores de búsqueda interpretan el texto alternativo como palabras clave y las utilizan para indexar la página, así que asegúrese de que el texto alternativo sea relevante para el contenido de su sitio web en general y refleje el contenido de la imagen.
Cualquier imagen se puede convertir en un enlace para que cuando el usuario haga clic en él, se le lleve a otra página. Vaya al panel Configuración del elemento y especifique el enlace y si debe abrirse en la misma ventana o en una nueva.
3
Forma
Al agregar una forma, aparece un cuadrado en la página, que se puede transformar en un rectángulo, un círculo o una línea.

Rectángulo: cambia las longitudes de los lados arrastrando los puntos de control.
O especifique los valores en la configuración del elemento.
Circulo. Para hacer un círculo, establezca un radio de redondeo igual a la mitad de la longitud del lado cuadrado.
Línea. Establezca la altura del rectángulo en 1-5 px en la configuración del elemento; Por lo tanto, harás una línea.
Las formas pueden tener una sombra, un borde y un enlace asignado a ellas.
4
Botón
Puede cambiar el tamaño, el color y el radio de redondeo del botón. También puede agregarle una sombra y un borde.

Puede establecer el título y el vínculo del botón en el panel Configuración del elemento. Allí también puede establecer su tamaño, tipo, opacidad y color de fuente.
Puede configurar el comportamiento del botón. Por ejemplo, el color de fondo, el color del texto y el color del borde cambiarán cuando se desplace el botón.
5
Información sobre herramientas
La información sobre herramientas es un elemento de bloque interactivo que muestra una sugerencia de texto y/o una imagen cuando pasa el puntero sobre él.

Puede ajustar el color, la sombra y el tamaño de la información sobre herramientas, configurar el icono que se muestra dentro del círculo, cargar la imagen que aparecerá cuando pase el puntero sobre ella y crear una animación.

Asegúrese de verificar la ubicación de la información sobre herramientas en todas las resoluciones de pantalla después de organizar los elementos en el bloque para que la información sobre herramientas no se corte en los bordes del bloque.
Usar información sobre herramientas para mostrar las características del producto. Foto por SPERA.de.
6
Formar
Puede agregar un formulario horizontal o vertical a un Zero Block. Tendrá acceso a todas las configuraciones básicas del formulario, como agregar campos de entrada, conectar servicios de captura de datos, configurar mensajes de éxito y error, cambiar su diseño y crear una animación.
Para editar los campos de entrada, vaya al panel Configuración del elemento y haga clic en Campos de entrada. Aquí puede personalizar los campos de entrada como en un bloque de formulario normal.
Para conectar los servicios de captura de datos al formulario, vaya al panel de Configuración del elemento y haga clic en Servicios. Allí puede conectar los servicios de captura de datos al formulario.
4
Cómo crear un diseño receptivo
Tilda admite el diseño receptivo para todos los tipos de pantalla básicos:
1200—máx. (escritorios)
980—1200 (tableta horizontal)
640—980 (tableta vertical)
480—640 (smartphone horizontal)
320—480 (smartphone vertical)

Esto es suficiente para que su diseño se muestre correctamente en todos los dispositivos.

Después de personalizar un Zero Block en la mesa de trabajo principal, cambie los tipos de pantalla y realice ajustes cuando sea necesario, como el ancho de la columna de texto, el tamaño de la imagen, el tamaño de fuente, la altura de la mesa de trabajo o el diseño del elemento.
Se resaltan las configuraciones que se han cambiado para un tipo de pantalla determinado. Los ajustes que reflejan los de otro tipo de pantalla son grises. De esta manera, es fácil ver qué ajustes se han cambiado.

En el siguiente ejemplo, el elemento de texto tiene todas sus configuraciones en gris. Significa que son los mismos para el tipo de pantalla actual que para el anterior.
Si cambiamos el tamaño de fuente y las coordenadas de los elementos para un tipo de pantalla determinado, los valores ya no se colorearán en gris. Significará que la nueva configuración es única para este tipo de pantalla.
5
Configuración de la mesa de trabajo
Si hace clic en un espacio vacío, verá la configuración de la mesa de trabajo.

Puede especificar la altura del contenedor de cuadrícula en píxeles usando su teclado. Puede cambiar el valor arrastrando el borde del contenedor. El ancho del contenedor de cuadrícula se fija en 1200 px.
Puede personalizar el color de fondo de todo el bloque en la configuración de la mesa de trabajo.
Puede cargar una imagen de fondo para todo el bloque en la configuración de la mesa de trabajo.
También puede personalizar la representación de la imagen de fondo (Inicio del filtro/Fin del filtro) y el comportamiento del contenido con respecto a la imagen de fondo: si establece un valor "Fijo", el contenido (texto y formas) se moverá durante el desplazamiento, mientras que la imagen permanecerá en su lugar.
Uso de Zero Block como ventana emergente
Para que aparezca un bloque al hacer clic en un botón o enlace, agregue el bloque modificador T1093 de la categoría "Otro".
En la pestaña Contenido del bloque, especifique el ID del Zero Block que necesita (o elíjalo manualmente haciendo clic en el enlace "Elegir Zero Block"). De forma predeterminada, el enlace a la ventana emergente es el enlace #zeropopup, puede cambiarlo por cualquier nombre que desee, pero debe mantener el signo de almohadilla al principio. A continuación, el bloque funcionará como una ventana emergente habitual y se ocultará en la página.

Lee más sobre cómo funcionan los bloques emergentes en el artículo "Ventanas emergentes ".
En la configuración del bloque T1093, puede seleccionar los parámetros para el fondo (color, opacidad), el color del icono de cierre, la velocidad de la animación,
su propio índice Z y otros parámetros.
El índice z define el orden de los bloques superpuestos en la página. Utilice valores numéricos personalizados (por ejemplo, un bloque con un índice z de 10 se superpondrá a un bloque con un índice z de 5).
Hemos cubierto la configuración básica y las características de Zero Block. En la segunda parte del tutorial, revisaremos la configuración avanzada con respecto al diseño responsivo.
la segunda parte
Diseño de respuesta
Hecho en
Tilda