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.

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

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.

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.

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:

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

Paso 1. Encuentre la fuente deseada

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

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:

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

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

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

Paso 6. Haga clic en "Guardar":

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

Ajustes del fondo

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

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

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

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

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

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

Posición 100%; tamaño 100%; sin repetición

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).

Repetición de imagen

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

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.

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.

Ajustes de visualización

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:

El radio del 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 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.

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

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

Efecto de aparición activado por desplazamiento

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.

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:

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.

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.

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.

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.

¿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.

De forma predeterminada, la sección se muestra en dispositivos de cualquier tamaño.

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

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

• 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í.

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".

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

Tiempo de aparición

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