Componente Imagen

Para agregar un componente de imagen sigue los siguientes pasos:

1. En la sidebar, selecciona la sección en la que vas a colocar la imagen.

2. Haz clic en “+Añadir componente”.

1. Selecciona el componente de “Imagen”.

Configurar/Editar un componente de Imagen

1. Para editar la imagen, haz clic en la opción “Editar” en los tres puntos del componente en la sidebar, o haz clic en el ícono de “Editar” en tu componente en la página.

2. En “Nombre del componente” puedes cambiar el nombre de la imagen para que puedas identificarlo fácilmente en otras funciones como “mover” y “duplicar”.

3. En ”Fuente” determina cómo vas a subir tu imagen.Existen dos formas:

   1. URL

      1. Si seleccionas “URL”, copia y pega la URL de tu imagen en el campo.

   2. Imagen propia

      1. Si seleccionas “Imagen Propia”, haz clic en “Selecciona un archivo” y sube tu imagen.

4.  En “Ancho”, ingresa el valor (en pixeles), para determinar el ancho de tu imagen.

5. En “Alto”, ingresa el valor (en pixeles), para determinar el alto de tu imagen.

6.  En “Top”, escribe cuántos pixeles hay entre el borde superior de la sección y tu imagen. 

7. En “Left”, escribe cuántos pixeles hay entre el borde izquierdo de la sección y tu imagen. 

8. En “zIndex”, escribe un número del 1 al 10 para determinar en qué “capa” de la página va a estar tu imagen.

9. En “Sombra” puedes agregar una sombra a tu imagen. Selecciona una de las siguientes opciones.

   1.  SM: Para una sombra pequeña

   2. MD: Para una sombra mediana

   3. XL: Para una sombra grande

   4. Sin sombra

10. En “Object Fit” selecciona la manera en que se va a ajustar tu imagen.

1. COVER: Hace que la imagen llene el área sin deformar la imagen, pero en consecuencia, la imagen sale incompleta. Es ideal cuando sólo quieres mostrar una parte de la imagen.

2. FILL: Llena el área de la imagen, pero para conservar la imagen completa, tiene que deformarla. 

3. CONTAIN: Respeta las proporciones de la imagen y como ves, ajusta el tamaño de acuerdo al área sin deformarla. Es ideal para mostrar imágenes uniformes.

4. SCALE DOWN: reduce el tamaño de la imagen dentro del área para mostrarla completa sin deformarla.

5. Si eliges ninguno, la imagen aparecerá con sus dimensiones originales, y el ajuste del área sólo mostrará la parte de la imagen que alcanza a cubrir. No es recomendable para imágenes que superan en pixeles el tamaño de tu página.

11. En “Redondez” puedes suavizar las puntas de tu imagen. 

12. Activa la función “Tiene borde” si quieres colocar un borde a tu imagen.

1. En “Color del borde” selecciona un color para tu borde

2. En “Ancho” determina el grosor de tu borde

3. En “Tipo” selecciona el estilo de tu 

   1. Solid: Para un borde continuo.

   2. Dashed: Para un borde rayado.

   3. Dotted: Para un borde punteado.

13. Si tu imagen va a tener un Business Logic, haz clic en “Configurar Lógica de negocio”. y configura el Business Logic.