C6. Builder - Interfaz bloque intoducción

Añadir bloques en fila Introducción

Al hacer clic en la fila se abre la interfaz de añadirle bloques.
Las unidades de ancho máximas  para definir el ancho de un bloque
son 12. Las unidades de ancho mínimas para definir el ancho de un bloque es 1.

Si las unidades de los bloques suman más de 12, el contenido que se muestra en los bloques a la derecha se mostrarán en la vista pública en otra línea. Se produce un salto de línea.

El alto de la fila lo definirá el elemento más alto que se presente en un bloque.

La opciones de añadir cantidad de bloques por fila predeterminadas son las siguientes.

Al eliminar un boque la aplicación indica cuantos bloques máximos se pueden crear en el espacio liberado.

A los bloques se les puede añadir más bloques en la vertical. 

Una imagen de fondo en la fila no determina el alto de ésta. Es el contenido de la columna con más altura la que determina la altura de la fila.

1.Configuración de la columna

1.2 Interfaz configuración de la columna

1.2.1. Interfaz de FONDO

Elemento	Función
	Para presentar una como fondo de la columna. Hacer clic en botón "Explorar" para cargar la imagen. También dispone de campo de consulta y edición de la url de la imagen.
	Selector para definir  el tamaño con el que se renderiza la imagen dentro de la columna. Opciones disponibles: initial: utiliza el tamaño original/por defecto de la imagen. contain: ajusta la imagen para que se vea completa dentro de la columna, sin recortarse (puede dejar espacios vacíos). cover: ajusta la imagen para cubrir toda la columna (puede recortar parte de la imagen). Porcentaje (10% – 130%): permite establecer manualmente el tamaño del fondo respecto al tamaño del contenedor. Valores bajos (ej. 50%) reducen la imagen. Valores altos (ej. 120% o 130%) amplían la imagen. Si la imagen está ampliada, es posible que se recorte dependiendo del área visible y de la posición del fondo.
	Permite activar o desactivar la repetición de la imagen de fondo dentro de la columna. Desactivado: la imagen de fondo se muestra una sola vez (no se repite). Activado: la imagen de fondo se repite automáticamente para cubrir toda el área de la columna.
	Permite seleccionar el color de fondo de la columna. Al pulsar el botón "Explorar", abre el selector de color. Este color puede utilizarse como fondo principal cuando no hay imagen de fondo. Si existe una imagen de fondo, el color puede actuar como fondo base en caso de que la imagen no cubra toda la columna. Se pueden añadir colores en modo hexadecimal o mediante el botón "·Explorar".
	Permite definir la posición de la imagen de fondo dentro de la columna (punto de anclaje). La selección se realiza mediante una cuadrícula de posicionamiento: Arriba: fija la imagen en la parte superior. Abajo: fija la imagen en la parte inferior. Izquierda: fija la imagen en el lateral izquierdo. Derecha: fija la imagen en el lateral derecho. Centro (opción seleccionada por defecto): centra la imagen dentro de la columna. Nota: la posición del fondo es especialmente relevante cuando se utiliza el tamaño "cover", ya que la imagen puede recortarse. Este ajuste permite decidir qué parte de la imagen se mantiene visible.

1.2 Interfaz configuración de ajustes de la columna.

Abre el menú de las acciones o interfaz de ajustes de columna (bloque)

• Ajustes (interfaz)
  
• Añadir bloque (acción)
• Eliminar columna (acción)

1.2.1 Interfaz de Ajustes de columna (bloque)

Para que los bloques de las páginas de contenido hechas con el maquetador Builder se vean bien en diferentes tamaños de pantalla se presenta en ajustes de la columna la siguiente interfaz.

Desde el ajuste "Tamaño de columna se pueden especificar las unidades que ha de ocupar la columna. Máximo 12 unidades.

Si se desmarca el botón "USAR MISMO ANCHO PARA TODAS LAS PANTALLAS", se abre la interfaz que permite ajustar cuantas unidades ha de ocupar el bloque en los cuatro tipos de tamaño de pantallas, LG, MD, SM y XS.

Para vista en pantallas SM y XS se recomienda poner 6 o 12 unidades. 

3. Fondo

Permite poner fondo al bloque. Bien un color o bien una imagen. La interfaz es igual que la de fondo de fila pero en aquí se limita al bloque.

4. Espaciado

Permite ajustar el espaciado interior,  y el margen respecto al contenedor fila del bloque. 

3. Añadir bloques en la fila

Clic en el espacio de la fila para añadir bloques (columnas) en una fila.

Al hacer clic se abre un modal para seleccionar cuantas columnas se quieren crear en la fila

Una vez se selecciona una de las opciones de creación de columnas en la fila se mostrarán las los bloques. En blanco.  Están vacíos, sin contenido. 

Se puede modificar la cantidad de bloques y el espacio que ocupa cada uno. 

4. Añadir contenido a bloques

Para añadir contenido a los bloques hacer clic en el área central del espacio en blanco. Destacado con el icono de "+".

Al hacer clic se abre un menú para seleccionar el tipo de bloque que se quiere mostrar. Actualmente se puede seleccionar entre los siguientes tipos de bloque:

En las siguientes páginas de este capítulo se explican sus interfaces.