# Configuración global de la sección

Todos los bloques utilizan los mismos ajustes globales para fuentes, fondos y visualización, lo que garantiza un estilo visual coherente en todo su sitio y permite que el contenido de los bloques sea diferente.

Para configurar los ajustes globales de cualquier bloque, coloque el cursor sobre él y seleccione el **Configuración** botón que aparece.

<figure><img src="/files/64a923f098e3d49ecc4da6f220be1edfd4fb595a" alt=""><figcaption></figcaption></figure>

Haz clic en el **Configuración** botón para abrir el menú de ajustes globales de la sección a la derecha.

<figure><img src="/files/55cf6d1df7bd81fc9f3b17e2dd20b447c3e6a668" alt=""><figcaption></figcaption></figure>

## Ajustes de fuente

Puede cambiar los siguientes ajustes:

* Fuente y estilo: la familia tipográfica, el estilo (Normal o Cursiva) y el grosor (negrita).
* Espaciado: el espaciado entre letras, el interlineado y el tamaño de la fuente.

<figure><img src="/files/e595e1a288dc81c36987751f111bcd4f89e5a58a" alt=""><figcaption></figcaption></figure>

En los bloques que tienen tanto un campo Encabezado como un campo Texto, tiene dos opciones de estilo:

1. Aplicar un **único estilo de fuente** a todo el bloque para mantener la uniformidad.
2. Activa el interruptor de **Fuente adicional** opción para definir estilos separados para el Encabezado y el Texto, creando roles visuales distintos dentro del mismo bloque.

<figure><img src="/files/dc4370167f383f5e90733995a679628dddb0269a" alt=""><figcaption></figcaption></figure>

### Cómo añadir una fuente personalizada

Para añadir una fuente personalizada, busque el botón del mismo nombre y haga clic en él:

<figure><img src="/files/09caa05d245cd3e29b7cd587164bbdf0a7959a9f" alt=""><figcaption></figcaption></figure>

Se le llevará a una página con una enorme variedad de fuentes diferentes:

<figure><img src="/files/a21b40531c8a218a6dd0f2df86e396dd11fe11aa" alt=""><figcaption></figcaption></figure>

Paso 1. Encuentre la fuente deseada

a) Esto se puede hacer usando la barra de búsqueda:

<figure><img src="/files/b3663bebc37ea771ae7429963d4ddf6cef37879b" alt=""><figcaption></figcaption></figure>

Seleccione los criterios necesarios para la fuente:

* Categoría de fuente
* sans-serif (letras sans-serif)
* serif (letras con serif)
* handwriting (una fuente que imita la escritura a mano)
* monospace (fuente monoespaciada o desproporcionada, una fuente en la que todos los caracteres tienen el mismo ancho)
* display (fuente en negrita para títulos)
* Compatibilidad con idiomas
* cirílico
* latín

b) Para encontrar una fuente manualmente, desplácese por la lista en la barra de formato.

Paso 2. Haga clic en la fuente seleccionada:

Verá una ventana modal con opciones de fuente:

<figure><img src="/files/5ef48ccea2200e3004f0add493883897ef8384e1" alt=""><figcaption></figcaption></figure>

Paso 3. Seleccione una opción de fuente marcando la casilla junto a la que necesite:

<figure><img src="/files/6a533faa5da22d9e1e7a20d650ce19c16003e755" alt=""><figcaption></figcaption></figure>

Paso 4. Haga clic en el **"Añadir"** botón:

<figure><img src="/files/a95e90472f46cd428194408d205ea0ed16c52310" alt=""><figcaption></figcaption></figure>

Los ajustes de su fuente personalizada se mostrarán aquí una vez guardados.

<figure><img src="/files/a4047fca6283a27dc26d49818b2dda64c5b7f5de" alt=""><figcaption></figcaption></figure>

Paso 6. Haga clic en **"Guardar"**:

<figure><img src="/files/63e824c5438b9275c6185b8bd8ebcaab01ac64c5" alt=""><figcaption></figcaption></figure>

Las fuentes añadidas se mostrarán en la misma lista que las fuentes predeterminadas.

<figure><img src="/files/1f41bf79832937da562f34d22701945bc4b14cdc" alt=""><figcaption></figcaption></figure>

## Ajustes del fondo

<figure><img src="/files/69c2f286c366df8dd6af8db20d2394d89adaa073" alt=""><figcaption></figcaption></figure>

Personalice el fondo de la sección con un color sólido, un degradado, una imagen o un vídeo.

<figure><img src="/files/b6a75f178c85d91512dae746101f70d2da7c8581" alt=""><figcaption></figcaption></figure>

Puede superponer un color o un degradado sobre una imagen de fondo.

<figure><img src="/files/05976b264cb4388f1a81356938e927427e4018c0" alt=""><figcaption></figcaption></figure>

La imagen se puede añadir como archivo o como enlace a la imagen:

<figure><img src="/files/a1c0c73e2eb5ad17d140fe6040bc846f5edee833" alt=""><figcaption></figcaption></figure>

Se puede añadir un vídeo desde el almacenamiento

<figure><img src="/files/1306dc33ea1b84ed485a4fd3d19669a20f3437ef" alt=""><figcaption></figcaption></figure>

Primero, suba su archivo de vídeo al almacenamiento de archivos.

<figure><img src="/files/0d529558b168d7e5a49acfd6828405b07a914e40" alt=""><figcaption></figcaption></figure>

### Ajustes de imagen de fondo

**Control de posición de la imagen**

Una imagen dentro de una sección se posiciona utilizando dos parámetros independientes:

1. **Alineación horizontal** (eje X)
2. **Alineación vertical** (eje Y)

**Especifique la posición** usando una palabra clave o una combinación:

| Palabra clave                                        | Efecto                |
| ---------------------------------------------------- | --------------------- |
| `arriba`, `abajo`, `centro`                          | Alineación vertical   |
| `izquierda`, `derecha`, `centro`                     | Alineación horizontal |
| `abajo izquierda`, `arriba derecha`, `centro centro` | Posición combinada    |

**Para un control preciso**, también puede usar valores numéricos:

* Porcentajes (por ejemplo, `30% 75%`)
* Píxeles (por ejemplo, `20px 100px`)
* O unidades mixtas

<figure><img src="/files/153f843372efa0366a32b1ab9d09ed8c75d994ef" alt=""><figcaption><p>Posición 100%; tamaño 100%; sin repetición</p></figcaption></figure>

**Opciones de tamaño de imagen**

Puede controlar las dimensiones de una imagen mediante los siguientes métodos:

**1. Establecer dimensiones personalizadas**

Defina tanto el ancho como el alto usando valores flexibles.

* **Formato:** `[ancho] [alto]`
* **Ejemplo 1 (Píxeles):** `500px 300px`
* **Ejemplo 2 (Porcentaje):** `15% 10%`

**2. Usar una palabra clave predefinida**

Especifique un solo parámetro para aplicar un comportamiento de escalado específico:

* **`contain`** — Escala la imagen para que quepa completamente dentro de la altura de la sección mientras mantiene su relación de aspecto (Ejemplo 3).
* **`cover`** — Muestra la imagen en sus dimensiones originales en píxeles (Ejemplo 4: tamaño original 1268 × 1343 px).

<figure><img src="/files/37ffecad8e3f14b24e2f0da20cb7b9928ed2e536" alt=""><figcaption></figcaption></figure>

**Repetición de imagen**

Esta opción está desactivada de forma predeterminada. Los ajustes disponibles incluyen:

<figure><img src="/files/b37eefe42fa41b7db2e6c2a136959ab2e0068046" alt=""><figcaption></figcaption></figure>

**Cómo fijar una imagen**

Active este interruptor para establecer una imagen de fondo fija. Cuando está activa, la imagen permanece inmóvil durante el desplazamiento, permitiendo que el contenido se mueva sobre ella.

<figure><img src="/files/aa881c2da85150185b7f64384fb3c9fed981b8ea" alt=""><figcaption></figcaption></figure>

### Color y degradado de fondo

Puede personalizar el fondo de la sección con un color sólido o elegir un degradado entre las opciones disponibles.

<figure><img src="/files/faca185ec01a4eda6b8ea81a7da1a5585c9c1abb" alt="" width="563"><figcaption></figcaption></figure>

## Ajustes de visualización

<figure><img src="/files/994ffb9bdd3d0e51dc08168a71efb9119f508699" alt=""><figcaption></figcaption></figure>

Puede especificar dónde es visible esta sección (por ejemplo, en qué dispositivos o plataformas). De forma predeterminada, se muestra en el sitio web y en Facebook. Usando el menú desplegable, puede seleccionar una opción de visualización para este bloque, como hacerlo visible solo en el sitio web.

**Radio del borde:**

<figure><img src="/files/4b50184f011ff81473893a71c3d7ac5c29ae65bf" alt=""><figcaption></figcaption></figure>

El radio del borde se indica en píxeles - px.

Altura de la sección

<figure><img src="/files/9b40e5d8b0041e65dca591aa66ec3d156d887f5b" alt=""><figcaption></figcaption></figure>

La altura de la sección se puede definir usando las siguientes unidades:

* px: píxeles (valor fijo)
* vh: altura del área visible (responsiva al tamaño de la pantalla)

### ancho de la sección

Ancho de 1 columna = 106 px

De forma predeterminada, el ancho de la sección se establece en pantalla completa, y el contenido se muestra dentro de un diseño de 8 columnas.

<figure><img src="/files/5c430b74bec531de276ba42ffce7dc7775cf4c7e" alt=""><figcaption></figcaption></figure>

Ejemplo 1: El contenido está centrado dentro de la sección y ocupa 5 columnas del diseño.

<figure><img src="/files/fb9e18d3cf31575d9d86f03d1634d09257430d9a" alt=""><figcaption></figcaption></figure>

Ejemplo 2. Una sección ocupa 8 columnas, con el contenido cubriendo todo el ancho de la sección:

<figure><img src="/files/7126ac3dfcea3288a3b2c20f19e0a9b4dc311a6a" alt=""><figcaption></figcaption></figure>

**Efecto de aparición activado por desplazamiento**

<figure><img src="/files/187935310d6a15474cbcff7d08087ff3cc5be61b" alt=""><figcaption></figcaption></figure>

Active este interruptor para habilitar animaciones activadas por desplazamiento para su contenido. Puede elegir que el contenido aparezca desde abajo, arriba, izquierda o derecha.

### Visualización del contenido

El contenido se muestra horizontalmente y centrado de forma predeterminada. Puede desplazarse hacia el borde izquierdo o derecho de la página.

<figure><img src="/files/4c94a1900d32ee2e00bd0df48b71d5f2fd5f43c3" alt=""><figcaption></figcaption></figure>

Verticalmente, el contenido se alinea por defecto en la parte superior. Puede moverse hacia abajo o centrarse en la página.

Para adaptar el texto a pantallas estrechas según los estilos de Mavibot, active este control deslizante:

<figure><img src="/files/bbd03cd3b419e494c8b48ae7d8798ef45493e655" alt=""><figcaption></figcaption></figure>

### Márgenes (para la sección)

#### Márgenes externos

Puede usar estos campos para ajustar el espaciado entre secciones. De forma predeterminada, el relleno interno (arriba/abajo/izquierda/derecha) está configurado en 0 px.

<figure><img src="/files/91cf3f810ddfa5d3923cdd2be6f3fd741f48cafb" alt=""><figcaption></figcaption></figure>

Para aplicar márgenes iguales en todos los lados, introduzca el valor en el campo principal. Los márgenes superior, inferior, izquierdo y derecho se establecerán automáticamente.

<figure><img src="/files/76cbf99af96a03cef284de78135ff95fbc510bd0" alt=""><figcaption></figcaption></figure>

Para garantizar la coherencia visual, los márgenes deben configurarse individualmente para cada sección.

#### Márgenes internos

Use estos campos para ajustar el margen interno de la sección. De forma predeterminada, el margen (arriba, abajo, izquierda, derecha) está configurado en 32 px.

<figure><img src="/files/706be9222768835617588831db2f338cbc3da27e" alt=""><figcaption></figcaption></figure>

#### Rango de visibilidad por dispositivo

El rango de visibilidad determina en qué dispositivos (por ejemplo, escritorio, tableta, móvil) se mostrará este bloque. Este ajuste se configura individualmente para cada bloque.

<figure><img src="/files/30c962e333b7f8ceb59ae288f54ee0b660068368" alt=""><figcaption></figcaption></figure>

**¿Por qué es útil esto y cómo funciona?**

Si un bloque (por ejemplo, una portada) se ve bien en escritorio pero no en móvil, puede configurarlo para que aparezca solo en dispositivos con un ancho de pantalla de 960 píxeles o más. Esto garantiza que el bloque solo sea visible en vistas de escritorio y esté oculto en dispositivos móviles.

Luego necesita copiar este bloque y personalizar su apariencia específicamente para dispositivos móviles (cambie la foto, el tamaño de fuente, etc.). Para este bloque, establezca la visibilidad en el rango de 0 a 960 píxeles. Esta será la versión móvil del bloque.

Como resultado, la versión de escritorio se mostrará en los ordenadores, mientras que la versión móvil se mostrará en teléfonos inteligentes y tabletas.

El rango de visibilidad (distintos valores de parámetro) es necesario para poder personalizar la apariencia de la unidad para un dispositivo específico seleccionando la resolución. Por ejemplo, si el bloque no se muestra bien en una tableta o en un modelo de teléfono específico, puede personalizar su apariencia según la resolución de estos dispositivos.

{% hint style="info" %}
De forma predeterminada, la sección se muestra en dispositivos de cualquier tamaño.
{% endhint %}

#### Ejemplo

Configure la primera sección para dispositivos móviles y tabletas

* Crear una sección
* Establezca su rango de visibilidad de 0 a 640 px
* Suba una imagen optimizada para pantallas pequeñas

<figure><img src="/files/c05029c91f687cac73df8b4ae4502e5b5940399d" alt=""><figcaption></figcaption></figure>

La segunda sección es para PC (portátiles). Establezca el rango de visibilidad desde 641 píxeles en adelante.

<figure><img src="/files/ef9dd6ee49a76f48a8d5fcf4a19ff5c76fc9807d" alt=""><figcaption></figcaption></figure>

* Guarde los cambios y continúe a la página de edición. Para su comodidad, los ajustes de visibilidad de la sección se mostrarán allí.

<figure><img src="/files/cefd1ee520f03fb2f07b5031d695d78f106134dd" alt=""><figcaption></figcaption></figure>

Para probar cómo se verán las secciones en un dispositivo específico, vaya a la página de vista previa del sitio. Haga clic con el botón derecho del ratón y haga clic en "Ver código".

<figure><img src="/files/f20dac7353ecb9c81647447d0ddb39a9459ab7b7" alt=""><figcaption></figcaption></figure>

Seleccione el dispositivo en el que desea ver cómo se verá el sitio.

#### Tiempo de aparición

<figure><img src="/files/244023bb1a37518de52c2904b7202d360d9a5cc8" alt=""><figcaption></figcaption></figure>

Puede usar este campo para definir el retraso antes de que aparezca una sección, especificado en segundos (s) o minutos (m).


---

# 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/settings.md?ask=<question>
```

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.