Skip to main content

C4. Builder - Columnas interfaz parte 2


3. Añadir bloques en la fila


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


image.png



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


image.png



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. 


image.png


4. Interfaz de ajustes de bloque

image.pngimage.png



4.1 EspaciadoConfiguración de la columna

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


 

image.png

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

image.png

4.1.2  Espaciado

Permite ajustar el espaciado interior,  y el margen respecto al resto de contenedores dentro de la fila. 

image.png


 

4.2 Acceso a menú:

  1. Ajustes
  2. Añadir bloque
  3. Eliminar columna

image.png


 

4.2.1 Ajustes > Configuración de la columna

Permite definir si se usa o no el mismo ancho del bloque en todos los tipos de pantalla. 

image.png

 

Permite definir el ancho que ocupa el bloque según tamaños de pantalla. Máximo 12 unidades.

image.png



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


image.png


Al añadir un bloque  a la columna además de la interfaz de ésta vemos tres nuevos botones.

image-1665667404188.png


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:

image.png


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




1. Eliminar bloque añadido.
2. Añadir un bloque a la columna. Se pueden añadir tantos bloques como se necesiten, verticalmente en la columna.

image.png





3. Acceder al editor de bloques. Dependiendo del tipo de bloque mostrará una interfaz diferente.
4. Posicionar.  Para reposicionar bloques en la fila hacer clic en la pestaña, mantener y arrastrar hasta la posición en la horizontal de la fila que interese, y soltar clic para completar el reposicionamiento.