Zero Block: Cómo crear un bloque personalizado

Para añadir un Zero Block a la página, haga clic en Cero en la parte inferior de la página. También puede 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 un bloque normal: se puede copiar, eliminar, borrar y ocultar. Tiene ajustes, pero en lugar de un botón "Contenido", tiene un botón "Editor de bloques". Haz clic en él si quieres editar el bloque y se abrirá el Editor de bloques.

Zero Block tiene dos espacios de trabajo o contenedores: el contenedor de rejilla y el contenedor de ventana, que indican los límites de la pantalla del navegador.

El contenedor de rejilla admite la misma rejilla que Tilda: 12columnas (1200 px). Si alineas objetos a la rejilla y ubicas elementos dentro del Contenedor de Rejilla, siempre permanecerán dentro de los límites de 12 columnas sin importar el tamaño de la pantalla.

Haga clic en el botón más de la esquina superior izquierda del Editor de bloques para añadir un elemento a la página. Puedes añadir un texto, una imagen, una forma, un botón, un vídeo, un tooltip, HTML, un formulario, una galería o un vector.

Zero Block admite todas las manipulaciones básicas del ratón: los elementos se pueden mover, cambiar de tamaño, copiar (manteniendo pulsada la tecla Alt) y se pueden seleccionar varios elementos.

Puede cambiar el tamaño de un elemento de imagen sin modificar 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 pueden modificarse en todas las direcciones.

Cuando se seleccionan varios elementos, pueden alinearse horizontal o verticalmente entre sí o con el contenedor.

La edición de elementos de bloque mediante el teclado acelera considerablemente el proceso de trabajo, por lo que recomendamos utilizar teclas de acceso rápido.

También puede acceder a la lista de métodos abreviados de teclado desde el menú contextual del Editor de bloques.

Puede acceder a la configuración completa de cualquier elemento haciendo clic en Configuración, en la esquina inferior derecha de la pantalla.

Por defecto, el panel de Configuración está oculto para mantener despejado el espacio de trabajo.

Utilice la fila de botones superior para alinear un elemento vertical u horizontalmente con el contenedor de forma rápida.

A continuación se muestran las coordenadas del elemento. Pueden indicarse en píxeles o en porcentaje. A continuación revisamos esta función en detalle.

El origen se indica con una cruz azul.

También puede ver los parámetros del elemento: anchura y altura, medidos en píxeles.

Cuando subes una imagen, ésta toma el tamaño del marco en el que se sube. Haz 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 obtener un círculo uniforme, la imagen original debe tener 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 de 100×100 px, establezca un radio igual a 50.

Puede añadir una sombra a la imagen. Para ello, seleccione el color de la sombra, la opacidad, el desplazamiento x e y, el grado de desenfoque y la dispersió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 es relevante para el contenido de su sitio web en general y refleja el contenido de la imagen.

Cualquier imagen puede convertirse en un enlace para que, cuando el usuario haga clic en ella, se le lleve a otra página. Ve al panel Configuración del elemento y especifica el enlace y si debe abrirse en la misma ventana o en una nueva.

Al añadir una forma, aparece un cuadrado en la página, que puede transformarse en un rectángulo, un círculo o una línea.

Rectángulo: cambie la longitud de los lados arrastrando los puntos de control.

O especifique los valores en la configuración del elemento.

Círculo. Para hacer un círculo, establezca un radio de redondeo igual a la mitad de la longitud del lado del cuadrado.

Línea. Ajuste la altura del rectángulo a 1-5 px en la configuración del elemento; de esta forma, hará una línea.

Las formas pueden tener asignadas una sombra, un borde y un enlace.

Puede cambiar el tamaño, el color y el radio de redondeo del botón. También puede añadirle una sombra y un borde.

Puede definir el título y el enlace 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 definir el comportamiento del botón. Por ejemplo, el color de fondo, el color del texto y el color del borde cambiarán cuando se pase el ratón por encima del botón.

Tooltip es un elemento de bloque interactivo que muestra una sugerencia de texto y/o una imagen cuando se pasa el puntero por encima.

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

Asegúrese de comprobar 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 quede cortada en los bordes del bloque.

Puede añadir un formulario horizontal o vertical a Zero Block. Tendrá acceso a todos los ajustes básicos del formulario, como añadir 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í puedes 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 Configuración del elemento y haga clic en Servicios. Allí podrás conectar los servicios de captura de datos al formulario.

En Zero Block, puede añadir una galería de imágenes. Puede cambiar la anchura y la altura de la galería igual que para el elemento Shape.

Comprobemos la configuración de la galería:

Stretch: Tiene dos parámetros: Cubrir y Contener.

Para Cubrir, las imágenes llenarán completamente el área de la galería, por lo que podrán ser recortadas si su formato es diferente al de la galería.

Para Contener, las imágenes de la galería estarán en su formato original, por lo que no serán recortadas en galerías de ningún formato.

Posición. Define la posición de la imagen con respecto al área de la galería. Por ejemplo, si se selecciona el parámetro Superior izquierda, la imagen se posicionará con respecto a la esquina superior izquierda de la galería.

Bucle. Este parámetro muestra en bucle las diapositivas (imágenes) de la galería. Tiene dos parámetros: Loop y None.

Para Loop, las diapositivas de la galería se mostrarán en bucle infinito, es decir, la primera diapositiva aparecerá después de la última.

Para la opción None, no hay bucle y la galería se detendrá en la última diapositiva.

Slide Speed define el tipo de animación para el cambio de diapositivas. Tiene tres parámetros: Ninguno, Lento y Rápido.

Para la opción Ninguno, no se utiliza ninguna animación cuando se cambia de diapositiva.

Para la opción Lento, las diapositivas se cambian lentamente.

Para la opción Rápido, las diapositivas se cambian rápidamente.

Reproducción automática define la velocidad de cambio automático de diapositivas en segundos.
Si no se ha especificado el valor en segundos, no hay cambio automático de diapositivas.

La opción Zoomable permite hacer zoom en las imágenes de la galería al hacer clic. Tiene dos parámetros: Zoom al hacer clic y Ninguno.

Para Zoom al hacer clic, las imágenes se ampliarán al hacer clic.

Para la opción Ninguno, las imágenes no se ampliarán al hacer clic.

La pestaña Flechas incluye ajustes que definen el aspecto de las flechas (botones).

La pestaña Puntos incluye ajustes que definen el aspecto de los puntos situados debajo de la galería. Los puntos muestran el número de diapositivas.

Cada diapositiva (imagen) tiene su propia configuración:

Aquí puedes añadir un pie de imagen, una etiqueta Alt para SEO, incluir un vídeo de YouTube o Vimeo, así como un enlace al que saltar cuando hagas clic en esta diapositiva.

Tilda admite el diseño adaptable para todos los tipos de pantalla básicos:
1200-max (ordenadores de sobremesa)
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 los ajustes necesarios, como la anchura de la columna de texto, el tamaño de la imagen, el tamaño de la fuente, la altura de la mesa de trabajo o la disposición de los elementos.

Los ajustes que se han modificado para un determinado tipo de pantalla aparecen resaltados. Los ajustes que reflejan los de otro tipo de pantalla aparecen en gris. De este modo, es fácil ver qué ajustes se han modificado.

En el ejemplo siguiente, el elemento de texto tiene todos sus ajustes en gris. Esto significa que son los mismos para el tipo de pantalla actual que para el anterior.

Si cambiamos el tamaño de la fuente y las coordenadas de los elementos para un determinado tipo de pantalla, los valores dejarán de estar coloreados en gris. Significará que los nuevos ajustes son únicos para este tipo de pantalla.

Si hace clic en un espacio vacío, verá la Configuración de la mesa de trabajo.

Puede especificar la altura del contenedor de rejilla en píxeles utilizando el teclado. Puede cambiar el valor arrastrando el borde del contenedor. La anchura del contenedor de rejilla está fijada en 1200px.

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/Final 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 sitio.

Para que un bloque aparezca al hacer clic en un botón o enlace, añada el bloque modificador T1093 de la categoría "Otros".

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"). Por defecto, el enlace a la ventana emergente es el enlace #zeropopup, puedes cambiarlo por el nombre que quieras, pero debes mantener el signo de almohadilla al principio. Entonces el bloque funcionará como un pop-up normal y se ocultará en la página.

Lee más sobre cómo funcionan los bloques pop-up en el artículo "Pop-ups".

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 animación,
su propio índice Z y otros parámetros.