Todos los bloques utilizan la misma configuración global para fuentes, fondos y visualización, lo que garantiza un estilo visual coherente en todo tu sitio, permitiendo que el contenido de los bloques sea diferente.

Para configurar la configuración global de cualquier bloque, coloca el cursor sobre él y selecciona el botón Configuración que aparece.

Haz clic en el botón Configuración para abrir el menú de configuración global de la sección a la derecha.

Configuración de fuente

Puedes cambiar la siguiente configuración:

  • Fuente y estilo: La familia de fuente, el estilo (Normal o Cursiva) y el peso (negrita).
  • Espaciado: El espaciado entre letras, la altura de línea y el tamaño de fuente.

Para los bloques que tienen un campo de Encabezado y Texto, tienes dos opciones de estilo:

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

Cómo agregar una fuente personalizada

Para agregar una fuente personalizada, busca el botón del mismo nombre y haz clic en él:

Serás llevado a una página con una gran variedad de fuentes diferentes:

Paso 1. Encuentra la fuente deseada

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

Selecciona los criterios necesarios para la fuente:

  • Categoría de fuente
  • sans-serif (letras sans-serif)
  • serif (letras serif)
  • handwriting (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 negrita de visualización)
  • Soporte de idioma
  • Cirílico
  • Latino

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

Paso 2. Haz clic en la fuente seleccionada:

Verás una ventana modal con opciones de fuente:

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

Paso 4. Haz clic en el botón "Agregar":

Tu configuración de fuente personalizada se mostrará aquí una vez que se guarden.

Paso 6. Haz clic en "Guardar":

Las fuentes agregadas se mostrarán en la misma lista que las fuentes predeterminadas.

Configuración de fondo

Personaliza el fondo de la sección con un color sólido, degradado, imagen o video.

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

La imagen se puede agregar como archivo o como enlace a la imagen:

Se puede agregar un video desde el almacenamiento

Primero, sube tu archivo de video al almacenamiento de archivos.

Configuración de imagen de fondo

Control de posicionamiento de imagen

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

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

Especifica la posición usando una palabra clave o una combinación:

Palabra clave Efecto
top, bottom, center Alineación vertical
left, right, center Alineación horizontal
bottom left, top right, center center Posición combinada

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

  • Porcentajes (ej., 30% 75%)
  • Píxeles (ej., 20px 100px)
  • O unidades mixtas

Opciones de tamaño de imagen

Puedes controlar las dimensiones de una imagen usando los siguientes métodos:

1. Establecer dimensiones personalizadas

Define 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

Especifica 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 manteniendo su relación de aspecto (Ejemplo 3).
  • cover — Muestra la imagen en sus dimensiones de píxeles originales (Ejemplo 4: tamaño original 1268 × 1343 px).

Repetición de imagen

Esta opción está deshabilitada por defecto. Las configuraciones disponibles incluyen:

Cómo fijar una imagen

Activa este interruptor para establecer una imagen de fondo fija. Cuando está activo, la imagen permanece estacionaria durante el desplazamiento, permitiendo que el contenido se mueva sobre ella.

Color de fondo y degradado

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

Configuración de visualización

Puedes especificar dónde es visible esta sección (ej., en qué dispositivos o plataformas). Por defecto, se muestra en el sitio web y en Facebook. Usando el menú desplegable, puedes seleccionar una opción de visualización para este bloque, como hacerlo visible solo en el sitio web.

Radio de borde:

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

Altura de la sección

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

  • px: píxeles (valor fijo)
  • vh: altura de la ventana gráfica (responsivo al tamaño de la pantalla)

Ancho de la sección

Ancho de 1 columna = 106 px

Por defecto, el ancho de la sección está configurado a pantalla completa y el contenido se muestra dentro de un diseño de 8 columnas.

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

Ejemplo 2. Una sección abarca 8 columnas, con contenido que cubre todo el ancho de la sección:

Efecto de aparición activado por desplazamiento

Activa este interruptor para habilitar animaciones activadas por desplazamiento para tu contenido. Puedes elegir que el contenido aparezca desde abajo, arriba, izquierda o derecha.

Visualización del contenido

El contenido se muestra horizontalmente y centrado por defecto. Se puede desplazar hacia el borde izquierdo o derecho de la página.

Verticalmente, el contenido está alineado en la parte superior por defecto. Se puede mover hacia abajo o centrar en la página.

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

Márgenes (para la sección)

Márgenes externos

Puedes usar estos campos para ajustar el espacio entre secciones. Por defecto, el relleno interno (superior/inferior/izquierdo/derecho) está configurado a 0 px.

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

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

Márgenes internos

Usa estos campos para ajustar el margen interno de la sección. Por defecto, el margen (superior, inferior, izquierdo, derecho) está configurado a 32 px.

Rango de visibilidad por dispositivo

El rango de visibilidad determina en qué dispositivos (ej., escritorio, tableta, móvil) se mostrará este bloque. Esta configuración se ajusta individualmente para cada bloque.

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

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

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

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

El rango de visibilidad (diferentes valores de parámetros) 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, puedes personalizar su apariencia según la resolución de estos dispositivos.

Por defecto, la sección se muestra en dispositivos de cualquier tamaño.

Ejemplo

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

  • Crea una sección
  • Establece su rango de visibilidad de 0 a 640 px
  • Sube una imagen optimizada para pantallas pequeñas

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

  • Guarda tus cambios y ve a la página de edición. Para tu comodidad, la configuración de visibilidad de la sección se mostrará allí.

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

Selecciona el dispositivo en el que deseas ver cómo se verá el sitio.

Tiempo de aparición

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