Mostrar parte de una imagen con DIVI

  • Mostrar parte de una imagen con DIVI

    Discusión creada por Fernando García García el 8 de octubre de 2024 en 12:58 AM

    Hola a todos/as

    Hay alguna forma con divi de seleccionar una área de una imagen para mostrar sin tener que recortarla previamente y subir despues?

    Gracias

    Fernando García García ha respondido hace 4 meses, 1 semana 2 Miembros · 3 Respuestas
  • 3 Respuestas
  • Jefferson Maldonado

    organizador
    8 de octubre de 2024 en 6:32 PM

    ¡Hola José Alberto!

    Gracias por tu pregunta. Sí, hay una forma de mostrar solo una parte de una imagen con Divi sin necesidad de recortarla previamente antes de subirla. Aquí te dejo algunas opciones para lograrlo:

    Usar CSS para Mostrar una Parte de la Imagen:
    Puedes usar CSS para «recortar» visualmente una imagen mientras la mantienes intacta en el backend. Esto se hace utilizando la propiedad object-position junto con object-fit si la imagen está dentro de un módulo de imagen. Aquí te dejo un ejemplo:

    .tu-clase-de-imagen img {

    object-fit: cover;

    object-position: center top; /* Ajusta "center top" para mostrar otra parte de la imagen */

    width: 100%;

    height: 300px; /* Ajusta la altura según lo que quieras mostrar */

    }

    Con esto, la imagen mantendrá su tamaño original, pero solo se mostrará la parte de la imagen que se ajuste al contenedor. Cambia .tu-clase-de-imagen por la clase CSS del módulo de imagen de Divi donde hayas agregado la imagen.

    Usar el Módulo de Imagen con «Espaciado» en Divi:

    • Otra opción más visual es usar el módulo de Imagen de Divi y aplicar un poco de «margen negativo» o «padding» en el editor de Divi. Esto te permitirá ajustar la parte visible de la imagen sin necesidad de CSS adicional.
    • Por ejemplo, si colocas la imagen en un Módulo de Imagen y luego ajustas los márgenes o padding desde las opciones de diseño del módulo, puedes hacer que una parte específica de la imagen quede visible en el área deseada.

    Usar el Módulo de Fondo en Divi:

    • Si la imagen es de fondo (por ejemplo, en un Módulo de Sección o Filas de Divi):
      • Selecciona la sección o fila donde deseas colocar la imagen.
      • Ve a la configuración de Fondo y sube la imagen.
      • Ajusta la posición del fondo usando la opción de «Posición de Fondo» (por ejemplo, centro superior, izquierda superior, etc.).
      • Usa la opción de «Tamaño de Fondo» como Cubrir (Cover) para que la imagen se ajuste al contenedor.

    Con cualquiera de estas opciones, podrás ajustar la visualización de la imagen sin necesidad de recortarla previamente. La elección dependerá de si deseas una solución visual con el constructor o una solución más avanzada con CSS.

    Espero que esta información te sea útil y puedas ajustar tus imágenes de la forma que necesitas. ¡Si tienes alguna otra pregunta, aquí estamos para ayudarte!

    ¡Saludos!
    Jefferson


  • Fernando García García

    Miembro
    9 de octubre de 2024 en 11:41 PM

    Lo pruebo ahora mismo

    Gracias Jefferson

  • Fernando García García

    Miembro
    9 de octubre de 2024 en 11:52 PM

    En el modulo de imagen y en espaciado, márgenes, no consigo lo que busco, la imagen se desplaza horizontalmente o verticalmente pero sigue viéndose la imagen al completo.

    Gracias Jefferson

Inicia sesión para responder.