Saltar al contenido principal

Tutorial Divi: Cómo usar el Módulo de imagen en Divi Builder

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

divi hace que sea fácil agregar imágenes en cualquier lugar de tu blog. Todas las imágenes admiten la carga progresiva y vienen con diferentes estilos de animación de 4 que hacen que explorar su sitio sea divertido y atractivo. Los módulos de imagen se pueden colocar en cualquier columna que cree y su tamaño se ajustará para ajustarse.

módulo de imagen divi.png

Cómo agregar un módulo de imagen de Divi

Antes de que pueda agregar un módulo de imagen a su página, primero debe ingresar a Divi Builder. Una vez que el tema Divi está instalado en su sitio web, verá un botón Utilice Divi Builder sobre el editor cada vez que creas una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haz clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Use Visual Builder cuando explora su sitio web en primer plano si está conectado a su tablero de WordPress.

constructor divi

Una vez que haya activado Visual Builder, puede hacer clic en el botón gris (+) para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si comienza una página nueva, no olvide agregar una línea a su página primero.

divi module image.png

Ubique el módulo de imagen en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "imagen" y luego hacer clic en Entrar para buscar y agregar automáticamente el módulo de imagen. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones están separadas en tres grupos principales: Contenido , diseño et avanzado .

Ejemplo de caso de uso: Agregar imágenes superpuestas para ilustrar servicios en una página de servicio

Hay innumerables formas de usar el módulo de imagen. Para este ejemplo, le mostraré cómo agregar imágenes a una página de servicio para un sitio web de una pequeña empresa. Aquí es donde agregaré las imágenes. Cada círculo rojo representa una imagen.

agregar una imagen de módulo divi builder.jpg

Como agregar una imagen a una página es un proceso bastante sencillo y directo, voy a agregar un pequeño estilo personalizado para colocar mis imágenes de manera que se superpongan, creando un efecto de apilamiento.

Vamos a empezar.

Utilice el constructor visual para agregar una sección estándar con un diseño 1 / 4 1 / 4 1 / 2. A continuación, agregue un módulo de texto a la columna derecha 1 / 2 en su fila. Ingrese un encabezado y una descripción del servicio.

A continuación, agregue un módulo de imagen a la columna 1 / 4 en el extremo izquierdo.

añadir imagen divi builder.png

Actualice la configuración del módulo de imagen de la siguiente manera:

Opciones de contenido

URL de la imagen: [ingrese la URL o descargue la imagen con las dimensiones 500 × 625]

Opciones de diseño

Margen personalizado: left -60px

Opciones avanzadas

Animación: de izquierda a derecha

animación divi image.png

Guardar configuraciones

Agregue otro módulo de imagen en la segunda columna 1 / 4 (o columna central) y actualice la configuración de la imagen de la siguiente manera:

Opciones de contenido

URL de la imagen: [ingrese la URL o descargue la imagen con las dimensiones 500 × 625]

Opciones de diseño

Margen personalizado: arriba 100px, -60px izquierda

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 554.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Opciones avanzadas

Animación: de derecha a izquierda

imagen superpuesta divi.png

Guardar configuraciones

Esto cuida la primera sección. Ahora, para la próxima sección de servicio, podemos duplicar la sección que acabamos de crear para la primera sección de servicio. Una vez que la sección está duplicada, cambie la estructura de la columna a un diseño de columna 1 / 2 1 / 4 1 / 4 (el opuesto al anterior).

elige una sección divi.jpg

A continuación, arrastre el módulo de texto con el encabezado y la descripción del servicio en la columna 1 / 2 en el extremo izquierdo. Asegúrese de arrastrar ambos módulos de imagen para llenar cada columna 1 / 4 (ahora a la derecha).

Como los módulos de imagen son duplicados, debemos descargar nuevas imágenes para esta sección de servicio en particular. Además, los módulos siempre tienen la configuración de margen personalizada como los primeros dos módulos de imagen creados. Cambiemos eso.

Comenzando con el módulo Imagen en la columna derecha 1 / 4, actualice la siguiente configuración de imagen:

Opciones de contenido

URL de la imagen: [ingrese la URL o descargue la imagen con las dimensiones 500 × 625]

Opciones de diseño

Margen personalizado: -60px izquierda (solo)

Pestaña Avanzado

Animación: de derecha a izquierda

Finalmente, actualice la configuración de imagen para el módulo de imagen de la columna central 1 / 4 con los siguientes elementos:

Opciones de contenido

URL de la imagen: [ingrese la URL o descargue la imagen con las dimensiones 500 × 625]

Opciones de diseño

Margen personalizado: 100px Arriba, -60px Derecha

Pestaña Avanzado

Animación: de izquierda a derecha

Guardar configuraciones

¡Ahora mira la página!

ejemplo de página de servicio divi.jpg

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Opciones de contenido del módulo de imagen

En la pestaña de contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e íconos. Todo eso controla lo que aparece en su módulo siempre se encontrará en esta pestaña.

imagen de la sección divi area contents.png

URL de la imagen

Coloque una URL de imagen válida aquí, o elija / cargue una imagen a través de la Biblioteca multimedia de WordPress. Las imágenes siempre aparecerán justificadas a la izquierda en su columnas y cubrirá todo el ancho de su columna. Sin embargo, su imagen nunca será más grande que su tamaño original. La altura de la imagen está determinada por la relación de aspecto de su imagen original.

Abrir en el visor

Puede elegir aquí si su imagen se abrirá o no en un visor cuando haga clic en ella. Si esta opción está habilitada, su imagen se "acercará" a su tamaño máximo cuando haga clic en una ventana modal. Esta es una excelente característica para las carteras.

Enlace URL

Coloque una URL web válida en este campo para convertir su imagen en un enlace. Dejar este campo vacío simplemente dejará su imagen como un elemento estático.

Apertura de la URL

Puede elegir aquí si su enlace se abre en una nueva ventana.

Etiqueta de administrador

Esto cambiará la etiqueta del módulo en el constructor para una fácil identificación. Cuando utiliza la vista WireFrame en Visual Builder, estas etiquetas aparecen en el bloque de módulos de la interfaz de Divi Builder.

Opciones de diseño del módulo de imagen

En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta es la pestaña que usará para cambiar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para cambiar cualquier cosa.

opción diseño módulo imagen divi.png

Superposición de imagen

Si esta opción está habilitada, se muestran un color y un icono de superposición cuando un visitante se sitúa sobre la imagen.

Superposición del icono de color

Aquí puede establecer un color personalizado para el icono de superposición

Cubrir color de superposición

Aquí puede definir un color personalizado para la superposición.

Icono de sobrevuelo

Aquí puede definir un icono personalizado para la superposición.

Eliminar el espacio debajo de la imagen

Esta opción solo afecta a las imágenes cuando son el último módulo de una columna. Cuando esta opción está habilitada, la distancia entre la parte inferior de la imagen y la siguiente sección se elimina, permitiendo que la imagen encuadre la parte superior de la siguiente sección de la página.

Alineando la imagen

Aquí elige la dirección en la que flota su imagen en la columna. Puede flotar la imagen a la izquierda, a la derecha o mantenerla centrada.

Siempre enfoca la imagen en el móvil

A menudo, las imágenes pequeñas son más agradables de ver en los dispositivos móviles cuando están centradas. A medida que las columnas fallan, las imágenes alineadas a la izquierda o a la derecha en columnas más pequeñas quedan huérfanas cuando las columnas fallan y alcanzan un ancho de 100%. Habilitar esta columna con imágenes forzadas para que se alinee con el centro de la columna en el móvil sin afectar la alineación de la imagen en los escritorios.

Usa el borde

Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.

Color del borde

Esta opción afecta el color de su borde. Seleccione un color personalizado en el selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de 1 píxeles. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Se admiten unidades de medida personalizadas, lo que significa que puede cambiar la unidad predeterminada de "px" a otra cosa, como em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes: sólido, punteado, punteado, doble, surco, cresta, incrustación y comienzo. Seleccione el estilo que desee del menú desplegable para aplicarlo a su borde.

Ancho máximo de la imagen

De forma predeterminada, el ancho máximo de la imagen se establece en 100%. Esto significa que la imagen se mostrará en su ancho natural a menos que el ancho de la imagen exceda el ancho de la columna principal, en cuyo caso la imagen estará limitada a 100% del ancho de la columna. Si desea limitar aún más el ancho máximo de la imagen, puede hacerlo ingresando aquí el valor de ancho máximo deseado. Por ejemplo, un valor de 50% limitaría el ancho de la imagen a 50% del ancho de la columna principal.

Forzar ancho completo

Por defecto, las imágenes se muestran en su ancho original. Sin embargo, puede optar por forzar la imagen para que se extienda a todo el ancho de la columna principal activando esta opción.

Margen personalizado

El margen es el espacio agregado al exterior de su módulo, entre el módulo y el siguiente elemento arriba, debajo oa la izquierda y a la derecha del mismo. Puede agregar valores de margen personalizados a uno de los cuatro lados del módulo. Para eliminar el margen personalizado, elimine el valor agregado del campo de entrada. Por defecto, estos valores se miden en píxeles, pero puede ingresar unidades de medida personalizadas en los campos de entrada.

Opciones avanzadas de módulo de imagen

En la pestaña avanzada, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos CSS y HTML personalizados. Aquí puede aplicar CSS personalizado a uno de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se puede usar para personalizar el módulo en el archivo style.css del tema secundario.

sección módulo avanzado image.png

ID de CSS

Ingrese un identificador CSS opcional para usar en este módulo. Una ID puede usarse para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Una clase CSS se puede usar para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden utilizar en su tema infantil Divi o en la hoja de estilo CSS personalizada que agregue a su página o sitio web utilizando las opciones de Divi tema o la configuración de la página de Divi Builder.

CSS personalizado

CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto en el que puede agregar hojas de estilo CSS personalizadas directamente a cada elemento. Las entradas de CSS en estos parámetros ya están incluidas en las etiquetas de estilo. Así que solo ingrese las reglas CSS separadas por punto y coma.

Animación

Use este menú desplegable para especificar la animación de carga diferida para su imagen. Puede elegir si su imagen aparece desde la derecha, izquierda, abajo o arriba.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño de dispositivos móviles eliminando ciertos elementos de la página.

Texto alternativo de la imagen

El texto alternativo proporciona toda la información necesaria si la imagen no se carga, no se muestra correctamente o en cualquier otra situación en la que el usuario no pueda ver la imagen. También permite que los motores de búsqueda lean y reconozcan la imagen.

Otros tutoriales de Divi

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
10 acciones
cuota4
Tweet1
Guardar5
WhatsApp