# Bloque cero Crear un sitio web usando el **Zero Block** en el **Mavibot** constructor es una forma rápida y cómoda de crear un sitio web profesional sin ningún conocimiento de programación. No dudes en experimentar, personalizar el diseño y añadir contenido para que tu sitio web sea único y exitoso.
El **Zero Block** es un editor de diseño web totalmente personalizable dentro de **Mavibot**. Te permite crear diseños únicos para bloques individuales o para todo el sitio sin ninguna restricción.
## Cómo añadir el bloque Para añadir el **Zero Block** a la página, haz clic en el botón "+" de la barra de herramientas de edición.
Después de hacer clic en el botón "+", aparecerá a la derecha el menú "Añadir un nuevo bloque". Selecciona el **"Zero Block"** y continúa con la edición.
Hay un menú de ajustes del bloque. ## Altura del contenido Puedes usar este campo para cambiar el tamaño del bloque. El valor predeterminado es 550 px.
#### Escalado del área de la cuadrícula Se utiliza para adaptar el diseño del sitio web a distintos tamaños de pantalla.
Está desactivado por defecto, pero también puedes seleccionar "autoescalar por el ancho de la ventana". ## Ajustes del fondo Puedes elegir el color de fondo usando una amplia paleta de colores. Mueve el control deslizante hasta el tono deseado, haz clic en el círculo y selecciona el color que quieras. También puedes introducir el código del tono.
Puedes añadir un archivo de fondo en formatos SVG, PNG, JPG o GIF. El tamaño del archivo no debe superar los 30 MB. Ejemplo 1. Añadir un archivo JPG.
La alineación predeterminada de la imagen está establecida en Centro Centro. Puedes seleccionar otra posición de la lista o elegirla tú mismo haciendo clic en el icono de la derecha.
Ejemplo 1. Visualización predeterminada de la imagen en la posición Centro Centro. Ejemplo 2. Visualización de la imagen en la posición Arriba Izquierda. La posición predeterminada de "comportamiento" está establecida en "desplazar", puedes seleccionar la posición "fija". Cuando cambias la posición, el fondo se desplaza.
## Añadir elementos Haz clic en el botón "Añadir elemento" de la izquierda. Hay capas en la parte inferior del botón, y puedes intercambiarlas superponiendo un elemento sobre otro.
El botón Añadir elemento crea una nueva capa con el elemento seleccionado:
Cada elemento abre su propio menú de ajustes. Haz clic en el botón "Guardar" después de configurar el elemento.
### Texto Puedes añadir un elemento con contenido de texto.
Ejemplo de añadir texto a un bloque Puedes usar fuentes estándar o elegir la tuya propia. También puedes cambiar el color del texto, el espaciado entre líneas, el tamaño de las letras y la distancia entre ellas, la posición del texto en el bloque, ajustar las mayúsculas y minúsculas del texto, y mucho más:
### Imagen Para añadir la imagen deseada, descarga el archivo desde el sistema. Para ello, haz clic en el icono de descarga. También puedes añadir una imagen insertando un enlace a ella en el campo correspondiente. Pega la URL de la imagen deseada y elige cómo se abrirá: en una nueva ventana o en una nueva página.
Puedes ajustar su posición en la página después de insertar la imagen. Elige cómo se colocará con respecto al borde izquierdo o derecho, o colócala en el centro. También puedes ajustar la transparencia de la imagen y otros ajustes de visualización, como el desenfoque o el redondeo.
Ejemplo de añadir una imagen a un bloque El fondo se puede cambiar en cualquier momento. ### Figura Puedes añadir una forma al bloque (por defecto, es un rectángulo). En los ajustes, puedes seleccionar otra forma: círculo o línea. También puedes personalizar la forma como quieras: alinear, añadir efectos, cambiar el color, el fondo, el estilo, etc.
Ajustes de la figura:
Ejemplo de añadir una forma a un bloque ### Botón Para añadir un botón, haz clic en "Añadir elemento" y selecciona "Botón":
En la sección de ajustes, puedes personalizar el aspecto del botón a tu gusto. Elige un estilo, color, fondo, nivel de desenfoque y otras opciones. También puedes cambiar la fuente, el color y el tamaño del texto del botón.
Para que el botón esté activo, debes añadir un enlace a la página que necesites en los ajustes del elemento, en la sección Botón. Cuando hagas clic en el botón, se abrirá el enlace. Para ver si el botón funciona, debes guardar los cambios, cerrar los ajustes del bloque e ir a la vista previa del sitio. ### Vídeo Puedes usar esta herramienta para añadir cualquier vídeo y configurar su visualización en el bloque.
Puedes añadir vídeos de varios recursos al bloque Zero:
Para ello, solo tienes que seleccionar exactamente dónde está ubicado el vídeo (YouTube, Vimeo o MP4) y luego pegar la URL en el campo de enlaces. También puedes añadir vídeos desde el almacenamiento de archivos. Para ello, copia el enlace al vídeo en el almacenamiento de archivos:
Luego selecciona el tipo de vídeo MP4 en los ajustes del elemento "Vídeo":
Y pega el enlace al vídeo desde el almacenamiento de archivos. ### Pista Este elemento te permite añadir una nota emergente con cualquier contenido. Puedes editar el elemento a tu gusto en los ajustes.
Puedes hacer que la pista sea semitransparente y colocarla sobre el texto, el fondo o la imagen:
Cuando pases el cursor sobre la pista (en la página del sitio, NO en modo de edición), se mostrará algún texto: No olvides guardar las acciones realizadas en los ajustes usando la función "Guardar". ### Galería Puedes añadir un nuevo elemento al bloque zero de la misma manera que los anteriores:
Mavibot añade dos imágenes por defecto. Pero también puedes subir tú mismo las imágenes que necesites para la galería. Para ello, ve a la capa de la galería (el botón de capa está situado a la izquierda de la pantalla o haz clic directamente en la imagen). En los ajustes del elemento, usando las funciones disponibles, puedes, si es necesario, alinear la galería con respecto al borde izquierdo o derecho o centrarla. También puedes mover un elemento manteniendo pulsado el botón izquierdo del ratón y haciendo clic en el elemento.
Además, puedes ajustar la transparencia, la rotación y otros efectos de las imágenes para que la visualización de la galería en el bloque sea más interesante. Hay dos opciones de tamaño de imagen en la galería: "cover" — el ancho completo de la imagen y "contain" — con bordes. Ejemplo 1. Tamaño de imagen - "cover"
Ejemplo 2. Tamaño de imagen - "contain".
La función de bucle permite pasar automáticamente de la última imagen de la galería a la primera sin tener que desplazarte por las anteriores. Si la función de bucle está desactivada, tendremos que usar manualmente las teclas de flecha para volver a la primera imagen. También puedes seleccionar la velocidad de desplazamiento de las imágenes y la reproducción automática para desplazarte por la galería automáticamente. En los ajustes de los botones de la galería, puedes cambiar su color, forma (hacerlos triangulares o en forma de flechas), ubicación, tamaño y otros parámetros.
En los ajustes, también puedes ajustar el marco de la galería, su estilo, redondeo, así como añadir sombras y otros efectos.
### Acordeón El elemento universal de bloque Acordeón es una solución gráfica cómoda para un sitio web en forma de lista de notas de texto con elementos desplegables: El acordeón es fácil de integrar en tu sitio web y personalizar según tus necesidades: puede adaptarse a cualquier requisito. Para añadir un elemento al bloque, abre los ajustes del bloque universal. Verás "Accordion" en la lista de elementos disponibles.
Para aplicar los parámetros de estilo deseados a un elemento, necesitas hacer clic en él. Después de eso, el constructor de parámetros "Accordion" aparecerá a la derecha, igual que para otros elementos del bloque zero.
Después de hacer clic en la flecha, aparecerá en la pantalla una ventana emergente con información, por ejemplo, con la respuesta a una pregunta:
Para hacer cambios en el texto de un elemento, haz doble clic izquierdo en un elemento existente de la plantilla creada. Puedes cambiar el texto de la lista desplegable de la misma manera. Después de seleccionar el texto para editar, los ajustes de texto aparecerán en la parte superior de la pantalla, de forma similar a los que se usan en cualquier editor de texto.
En este menú adicional de texto, puedes cambiar ajustes de la fuente como el grosor, la inclinación, la altura y otros. Ahora vamos al menú derecho de los ajustes básicos del elemento. También puedes cambiar la fuente aquí: elegir color, saturación, mayúsculas y minúsculas, transparencia, así como añadir tu propia fuente y otras opciones. En los ajustes de Accordion, puedes añadir más preguntas, respuestas, etc. Debes hacer clic en Añadir:
También puedes cambiar el diseño de la pregunta y la respuesta, hacerlos más redondeados, hacer el fondo transparente, ajustar el cambio de fondo al pasar el cursor sobre la pregunta o la respuesta, organizar el marco con un estilo determinado y otros parámetros; todo depende de tu imaginación y preferencias.
En Zero Block, puedes combinar varios elementos para crear un estilo de sitio web único e inolvidable. Esto te permitirá sorprender a tus clientes con soluciones de diseño originales. Después de terminar el trabajo en la página, necesitas adaptarla a distintos tamaños de pantalla. ### Formulario El elemento de Zero Block "Formulario" te permite usar el formulario de recogida de solicitudes donde realmente se necesita. Podrás recopilar solicitudes y contactos justo donde el usuario está más involucrado, sin tener que mostrarlo en un formulario aparte.
Para añadir un formulario al bloque zero, haz clic en "+Añadir elemento" y luego selecciona "Formulario" en la lista desplegable que se abre. El bloque "Formulario" aparecerá como botones en mensajeros a los que puedes añadir preguntas y cambiar los botones:
Para añadir preguntas al formulario, por ejemplo, en forma de "Introduce tu correo electrónico", "Describe tu pregunta" y similares, necesitas hacer clic en el botón "Configurar preguntas" en el menú derecho de ajustes:
Luego crea tus preguntas en el formulario:
El resultado puede ser el siguiente:
Puedes añadir la casilla de verificación "Estoy de acuerdo con la política de tratamiento de datos personales":
También puedes editar los botones de redes sociales:
Y personalizar el título y el subtítulo del formulario. Haz doble clic en el campo de texto, tras lo cual podrás introducir el texto necesario, así como cambiar la fuente, poner en negrita, el color del texto, etc.:
Para obtener más información sobre los tipos de campos de preguntas, consulta el artículo "[Respuestas del foro](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/otvety-form)". ### reCAPTCHA Para instalar reCAPTCHA, debes especificar un par de claves (claves pública y secreta) en los ajustes generales del sitio y activar la verificación de recaptcha en el bloque zero del formulario de recogida de datos. Puedes elegir cualquier servicio que ofrezca protección para sitios web mediante captcha. En esta sección, veremos cómo instalar un captcha de Google. Paso 1. Obtener las claves
Primero, debes completar la información básica para recibir las claves: selecciona los tipos de captcha; añade el dominio del sitio en el que planeas instalar la protección. A continuación, haz clic en "Enviar". Paso 2. Introducir las claves
Luego verás un par de claves que debes copiar y pegar en los ajustes de la página del sitio en MaviBot. Para ello: 1\) Busca el botón de ajustes de la página del sitio en el panel superior:
2\) Ve a los ajustes de información básica: 3\) En los ajustes de información básica, introduce los valores del par de claves que recibiste anteriormente:
Paso 3. Activa reCAPTCHA en el bloque zero. Ve al bloque zero donde tienes instalado un formulario de recogida de datos, o al bloque zero donde planeas crear un formulario reCAPTCHA:
Haz clic en el elemento "Formulario" del bloque zero para abrir la barra de menú derecha. Describimos cómo crear un formulario de recogida de datos y editarlo en la sección "[Formulario](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block#forma)" de arriba. A continuación, busca los botones para activar reCAPTCHA:
Activa reCAPTCHA (si es necesario, puedes activar los avisos en inglés):
Luego guarda los ajustes. {% hint style="success" %} ¡Hecho! Ahora ya sabes cómo activar reCAPTCHA en el bloque Zero. {% endhint %} {% hint style="info" %} Cómo adaptar la página en el bloque zero se describió en el [artículo del mismo nombre](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block/kak-adaptirovat-stranicu-v-universalnom-bloke). {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mavibot.ai/doc/es/websites/sitios/blocks/zero.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.