Skip to main content

C8. Builder - Interfaz configuración columna botón icono brocha


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.2. Interfaz de ESPACIADO DE COLUMNA
Permite ajustar el espaciado interior,  y el margen respecto al contenedor fila del bloque. 

image.png

Back to top