Diseñar aspectos destacados para imágenes y texto es una técnica de diseño clásica que se puede utilizar para darle vida al contenido de una página web. Además, Divi facilita la creación de estos reflejos directamente desde Divi Builder sin tener que utilizar un editor de fotos.

En este tutorial, le mostraré cómo diseñar reflejos para imágenes en Divi. La clave para hacer reflejos es usar la opción de transformación de Divi para crear una versión espejo de un elemento. Después de eso, puede agregar una superposición personalizada que le mostraré cómo usar con un módulo de texto.

¡Empecemos!

vista

Aquí hay una descripción general de los diseños que crearemos en este tutorial.

Módulo Divi con reflejos

Lo que necesitas para empezar

Para empezar, todo lo que necesitas es Divi. Asegúrate que Tema divi está instalado y activo. Crearemos nuestros diseños desde cero utilizando Divi Builder en el front-end (constructor visual). También necesitará algunas imágenes ficticias para este tutorial (una imagen de fondo de alrededor de 1920 px x 600 px y otra imagen de alrededor de 500 px x 350 px).

Cuando esté listo, vaya a su panel de WordPress y vaya a Páginas> Agregar. Dale un título a tu nueva página e implementa Divi Builder en el front-end. Seleccione la opción "Construir desde cero". ¡Ahora estás listo para ir!

La idea básica detrás de la creación de una imagen y un reflejo de texto en Divi

La idea básica de crear patrones de reflexión en Divi incluye tres pasos:

  1. Crea un módulo con tu imagen o texto
  2. Duplique el módulo y use la escala de transformación para crear la imagen espejo o el texto
  3. Agregue una superposición de degradado al elemento reflejado usando un divisor o un módulo de texto absolutamente posicionado.

Esta técnica de diseño no se limita a módulos individuales. De hecho, puede agregar reflejos a filas enteras en Divi usando este método, que es útil para crear diseños de encabezados únicos. Agregaremos reflexión a una fila de nuestro diseño de reflexión de texto más adelante en este tutorial. Pero por ahora, comencemos por crear un reflejo de imagen.

Cómo crear un reflejo de imagen

Para crear un reflejo de imagen, comencemos creando una nueva sección regular con una fila de una columna.

Agregar una sección divi

Luego agregue un módulo de imagen a la línea.

Módulo de imagen Divi

Descargue la imagen que desee de la biblioteca de medios en el módulo de imágenes. Luego actualice la siguiente configuración de imagen:

Ancho máximo: 600px
Alineación del módulo: centro
Margen personalizado: 0px en la parte inferior

Modificación de estilo CSS

Crea la imagen reflejada

Para crear el efecto de reflexión, primero necesitamos crear una copia duplicada de la imagen directamente debajo de la imagen.

Para hacer esto, duplique el módulo de imagen. Luego actualice la configuración de imagen duplicada de la siguiente manera:

Opacidad: 40%
Eje X de escala de transformación: -100%

La propiedad Transformar escala es lo que mágicamente voltea la imagen vertical y horizontalmente para crear una versión reflejada de la imagen.

Haz un reflejo divi

Esto es compatible con el diseño básico de reflexión. Sin embargo, podemos agregar una superposición de degradado adicional a nuestra imagen inferior para un diseño de reflexión más realista.

Agregue una superposición de degradado usando un módulo de texto

Para agregar una superposición de degradado a nuestra imagen inferior, podemos usar un módulo de texto. Podemos darle al módulo de texto una posición absoluta para que esté encima de la imagen inferior. A continuación, podemos agregar un fondo degradado al módulo de texto. Usar un módulo de texto (en lugar de un separador) le dará la opción adicional de agregar contenido sobre la imagen reflejada más tarde si lo desea.

Continúe y cree un módulo de texto debajo de la imagen inferior.

Agregar un módulo de texto divi

Bórralo contenido de forma predeterminada para que el módulo de texto esté vacío.

Reflexiones Divi para texto e imágenes.

Luego actualice la configuración del módulo de texto de la siguiente manera:

Gradiente de fondo izquierdo Color: rgba (255,255,255,0)
Gradiente de fondo derecho Color: #ffffff

Ancho: 100%
Altura: 50%

Luego agregue el siguiente código CSS personalizado al elemento principal:

posición: absoluta! importante; arriba: 50%;

Este posicionamiento absoluto del módulo de texto superpone el módulo de texto en la mitad inferior de la línea.

Módulo de texto personalizado Divi

Agregar un color de fondo

Si no desea un fondo blanco, puede usar otros colores de fondo para crear un patrón de reflexión en todo el ancho.

Para hacer esto, abra la configuración de línea y actualice lo siguiente:

Color de fondo: #000000
Ancho: 100%:
Ancho Máx: 100%;
Acolchado personalizado: 0px alto, 0px abajo

Modificar el estilo de línea divi

Veamos el resultado ahora.

Módulo Divi con reflejos

Los reflejos pueden verse realmente geniales si te tomas el tiempo para diseñarlos correctamente. Afortunadamente, Divi tiene la outils para llegar. Existen otros métodos para realizar reflejos CSS, pero desafortunadamente tienden a carecer de compatibilidad con los navegadores. Los diseños de este tutorial se verán geniales en todos los navegadores.

He descubierto que los reflejos se ven muy bien en los encabezados de las páginas y en las imágenes que muestran para un artículo de la cartera. Y estoy seguro de que hay muchas otras implementaciones.

Eso es todo por este tutorial, espero que le permita agregar reflexiones en su sitio de WordPress utilizando las funciones internas de Divi.