Skip to main content

C4. Builder - Edición con Builder



1. Añadir fila

Hacer clic en cotón añadir fila.

image.png

Se crea una fila. No tiene contenido.

image.png

Interfaz de fila.

Elemento

Función


image.png



Botón para que acceder a ajustes de fila.


image.png

Botón para añadir bloques vacíos en la fila.


image.png

Pestaña para mover la fila de posición. Hacer clic en la pestaña, mantener y arrastrar hasta nueva posición y soltar clic para completar el reposicionamiento.


image.png

Botón para activar Buider. En blanco, desactivado. En magenta, activado.


image.png

Botón para guardar los cambios. Crea la página y accede al editor de la página con Builder.


Al hacer clic en el botón de tipo icono de la fila se despliega el menú de acciones disponibles las cuales son "Ajustes" y "Eliminar fila".

Interfaz de ajustes de fila


image.png


Elemento

Función


image.png




Mediante el botón explorar se puede subir una imagen de fondo para la fila.


image.png

Selector para definir  el tamaño con el que se renderiza la imagen dentro de la fila.
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 fila, sin recortarse (puede dejar espacios vacíos).

  • cover: ajusta la imagen para cubrir toda la fila (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.



image.png

Permite activar o desactivar la repetición de la imagen de fondo dentro de la fila.

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



La fila presenta tres secciones de interfaz. 


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. Ajustes y eliminar fila.


image-1665646184385.png

1.1. Ajustes


image-1665646074136.png

a) Activar o desactivar ancho completo de la fila.
b) Botones para alternar entre las pestañas de fondo y espaciado. 
La interfaz del menú "Espaciado" permite ajustar el espaciado interior y el margen en las cuatro posiciones.
c) Desde el botón "Explorar"  se hace la carga de la imagen para el fondo de la fila.
d) Seleccionar el tamaño del fondo.
e) Activar o desactivar la repetición de la imagen de fondo.
f) Poner color de fondo para la fila. Con botón "Explorar" seleccionar el color".
g) Determinar la posición el fondo. Seleccionar una de las nueve divisiones para posicionarlo.
h) Botón de cerrar la interfaz. 

1.2. Eliminar fila.

Hacer clic en el texto para eliminar la fila.

2. División de fila.

Hacer clic en el interior de la fila para acceder a la interfaz de divisiones. Seleccionar una de las opciones. A las divisiones las llamamos columnas. Las columnas se pueden componer con bloques.

image-1665649274918.png


Builder ofrece diferentes tipos de bloques.image-1665649036884.png

En este manual de explican la interfaz y cada tipo de los bloques en la sección Tipos de Bloques.

3. Botón de reposicionar fila.

Para las filas hacer clic, mantener y arrastrar a la nueva posición.