Skip to main content

C5. Builder - Columnas Interfaz



1.Configuración de la columna general (Bloque)


image.png



1.2 Interfaz configuración de la columna


image.png


1.2.1. Interfaz de FONDO

Elemento

Función







image.png





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.



image.png

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.




image.png

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.


image.png

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

    image.png

image.png




image.png

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)

image.png


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

image.png


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. Máximo 12 unidades.

image.png


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


Viendo las 4 secciones de interfaz de las columnas en Builder.

image-1665649934539.png

1.3. Añadir bloque.bloques en la fila


Clic en el espacio de la fila para añadir un tipo de bloque.

image-1665650069979.png


2. Ajustes columna. image-1665650121852.png

En esta interfaz vemos tres opciones de menú. Ajustes, Añadir bloque y eliminar columna.

Acceder a la opción del menú Ajustes y que permite activar o desactivar el botón de usar el mismo ancho para todas las pantallas , el campo para definir el tamaño de la columna, y el botón de tipo texto para eliminar la columna.

image-1665650256861.png

 

3. Editor de fondo columna.

La opción Añadir bloque permite añadir uno o más bloques de mismo o diferente tipo. La adición de bloques aumenta el alto de la columna y el de la fila.

3. Editor de fondo columna.

Misma interfaz que el editor de fondo de la fila pero en este caso afecta a la columna.

4. Botón de cambiar posición de la columna.

Mismo funcionamiento que el botón de ordenación de fila pero en este caso afectando solo a la columna.


Al eliminar una columna se podrá decidir si se crea de nuevo una en su lugar. Builder ofrece crear con el mismo ancho que la eliminada o crear de menor ancho. Builder calcula la cantidad de columnas que puede crear en el espacio dejado por la columna eliminada. Presentará opciones de creación de columnas posibles. Las destacadas en verde lima serán las que se añadirán al seleccionar.

image-1665667688200.png