Cómo usar el módulo de imagen en el constructor

La imagen es uno de los módulos ofrecidos por Divi Builder. Como su nombre indica, puede usar este módulo para agregar un elemento de imagen al diseño que trabaja (ya sea una plantilla de página o generador de temas). ¿Nuevo en Divic Builder? Despreocupado. Este artículo cubrirá todo lo que necesita saber sobre el módulo de imagen. Desde cómo agregarlo a cómo organizarlo. La imagen en sí es un elemento importante de un diseño. El diseño web no es una excepción. Un diseño libre de imagen no tendrá un sabor. El módulo de imagen de Divi Builder te ayuda a agregar una imagen. Puede agregar una imagen estática o una imagen dinámica (como la imagen presentada, el logotipo del sitio y la imagen de perfil del autor). El módulo de imagen está diseñado para agregar una sola imagen. Si desea agregar una galería de imágenes, puede usar el módulo de la galería.
Cómo agregar una imagen al módulo de imagen Divic Divic se puede agregar a una fila desde una sección normal (puede leer nuestro artículo anterior para obtener más información sobre la sección y la fila en el Builder Div). Para agregar el módulo de imagen, haga clic en el icono más gris en una fila y seleccione el módulo.

En el panel que aparece, haga clic en el selector de imágenes desde el bloque de imágenes en la pestaña Contenido para seleccionar la imagen que desea usar.

Para agregar una imagen dinámica, cruce el mouse sobre el selector de imágenes y haga clic en el icono de basura. Haga clic en el icono de la base de datos y seleccione el tipo de imagen dinámica que desea usar.

Agregar el enlace a la imagen puede agregar un enlace a su imagen. Al igual que la imagen en sí, puede agregar una conexión estática o dinámica. Para agregar el enlace, puede abrir el enlace en la pestaña Contenido. También puede hacer clic en el icono de la base de datos para agregar una conexión dinámica. La estilización de la imagen Una vez que se agrega la imagen, puede comenzar a ser elegante. Al igual que otros módulos Divi Builder, puede hacer el estilo de la pestaña de diseño desde el panel de configuración del módulo. Hay 8 bloques de configuraciones que puede abrir para estilizar la imagen:

Alineación
Puede abrir este bloque para establecer la alineación de la imagen.
Talla

Puede abrir este bloque para establecer el tamaño de la imagen (altura y ancho). Por defecto, Divi Builder utiliza la unidad porcentual para altura y ancho, pero puede usar la unidad de píxeles si lo desea. Para usar la unidad de píxeles, puede insertar manualmente la unidad (PX) y el valor.
También hay una opción de fuerza de ancho completo que puede activar. La activación de esta opción hará que la imagen llene la columna completa asociada con el módulo de imagen.

sangría
Puede abrir este bloque para establecer el relleno y espaciar el módulo de imagen. Puede leer nuestro artículo anterior para obtener más información sobre el relleno y el margen en el diseño web.
Frontera

Puede abrir este bloque para establecer el marco de la imagen. Desde el estilo del borde, el tamaño del borde, hasta el color del borde. Puede usar un color y tamaño diferentes para cada borde (arriba, abajo, izquierda y derecha). Simplemente haga clic en las pestañas en la opción de estilos de borde para establecer el color y el tamaño de cada borde. También puede configurar el rayo de borde. El rayo del borde se refiere al nivel de inclinación de cada esquina de la imagen (arriba, abajo, izquierda y derecha). Cuanto más grande sea el rayo del borde, más será su imagen. Puede configurar el rayo de borde en la opción de esquinas redondeadas.
Sombra de la caja

Puede abrir este bloque para aplicar una sombra de la caja de imágenes. Hay 7 tipos de sombras para cajas que puede elegir. Una vez que haya seleccionado uno, puede establecer la posición horizontal, la posición vertical, el poder del desenfoque, el poder de la propagación y el color de la sombra.

Filtros
Puede abrir este bloque para aplicar filtros CSS a la imagen. Hay 6 tipos de filtros CSS que puede aplicar:

Sombra
Saciedad

luminosidad
Contraste
Reverso
Sepia
También puede establecer el nivel de opacidad de su imagen en este bloque, así como en el modo de mezcla.
Transformar
Puede abrir este bloque para establecer la transformación CSS en su imagen. Hay 5 tipos de transformación CSS que puede establecer:

Transformar la escala
Transformar la traducción
Rotación de transformación
Transformar sesgo
Transformar el origen
Simplemente seleccione la transformación CSS que desea aplicar haciendo clic en su pestaña y usando el mouse para establecer los valores de transformación.
Animación
Puede abrir este bloque para aplicar una animación de entrada al módulo de imagen. Hay 7 estilos de animación de los que puedes elegir. Después de seleccionar uno, puede establecer la dirección de la animación, la duración de la animación, el retraso de animación, etc. , como agregar CSS personalizado, configurar la posición personalizada, etc. Hay 7 bloques que puedes abrir aquí:

Clases de identificación y CSS
Puede abrir este bloque para agregar una clase CSS ID o CSS. Puede agregar una clase CSS ID o CSS si desea agregar CSS personalizado a través del módulo de código.

CSS personalizado
Puede abrir este bloque para agregar CSS personalizado directamente en lugar del módulo de código. Simplemente puede agregar el código CSS a los campos disponibles.
atributo

Puede abrir este bloque para agregar los atributos de la imagen (texto y título alternativos). Puede usar atributos estáticos o atributos dinámicos. Para agregar atributos dinámicos, simplemente puede hacer clic en el icono de la base de datos en cada campo (alternativa de imagen y título de texto).
Visibilidad

Puede abrir este bloque para apagar el módulo de imagen en un tipo particular de dispositivo. Simplemente puede marcar el tipo de dispositivo para deshabilitar el módulo.
Transiciones

Puede abrir este bloque para establecer la transición del módulo de imagen.
Posición

Cuando agrega un nuevo módulo a la división del constructor, la posición se establece en Static (predeterminado). Si lo desea, puede usar una posición personalizada para el módulo de imagen. Puede establecer una posición personalizada en la posición en la pestaña avanzada. Las opciones de posición que puede establecer son: relativo: si selecciona esta opción, el módulo de imagen seguirá el flujo normal de la página. Esta opción ofrece propiedades superior, inferior y derecha. También puede establecer el índice z.absolut: si selecciona esta opción, no habrá espacio real creado en la página para el módulo de imagen. Puedes pensar en ello como un módulo flotante por encima de otros elementos que ocupan un espacio real. Remedio: si selecciona esta opción, el módulo de imagen interrumpirá el flujo de página normal y no tiene espacio real en la página.
Efectos de folación

Puede abrir este bloque para aplicar un efecto de desfile al módulo de imagen. Puede, por ejemplo, aplicar el efecto pegajoso. También puede un efecto de desfile en este bloque.
El módulo de imagen de fondo de Divi Builder está destinado a agregar una imagen a su diseño. Puede usarlo para agregar una imagen estática o una imagen dinámica. Como acabo de describir anteriormente, hay muchas opciones de estilo que puede aplicar a su imagen, incluida la capacidad de aplicar un efecto pegajoso, un efecto de movimiento y filtros CSS. Una cosa a tener en cuenta. Asegúrese de hacer clic en la lista de verificación verde en la esquina inferior derecha del panel de configuración cada vez que realice nuevos cambios en el módulo de imagen (y otros módulos de Divi Builder).