Cómo diseñar reflejos para imágenes y texto en Divi


El diseño de reflejos 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. Y Divi facilita la creación de estos reflejos directamente desde Divi Builder sin tener que usar un editor de fotos.

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

¡Empecemos!

Vistazo

Aquí hay un adelanto de los diseños que crearemos en este tutorial.

reflexiones divi para texto e imágenes

reflexiones divi para texto e imágenes

reflexiones divi para texto e imágenes

reflexiones divi para texto e imágenes

Descargue GRATIS el diseño de reflejos de imagen y texto

Para tener en sus manos los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

(incrustar) https://www.youtube.com/watch?v=SJO8Ef79Fdk (/ incrustar)

Suscríbete a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, todo lo que necesita es Divi. Asegúrese de que Divi Theme esté instalado y activo. Crearemos nuestros diseños desde cero usando Divi Builder en la parte frontal (constructor visual). También necesitará algunas imágenes simuladas para este tutorial (una imagen de fondo de alrededor de 1920px x 600px y otra imagen de alrededor de 500px x 350px).

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

La idea básica detrás de la creación de imágenes y reflejos de texto en Divi

La idea básica detrás de la creación de diseños de reflexión en Divi implica tres pasos:

  1. Crea un módulo con tu imagen o texto
  2. Duplique el módulo y use la escala Transformar para crear la imagen o el texto reflejados
  3. Agregue una superposición de degradado al elemento reflejado mediante un módulo de texto o divisor de posición absoluta.

Esta técnica de diseño no se limita a módulos individuales. De hecho, puede agregar reflejos a filas enteras dentro de Divi usando este método que es útil para crear diseños de encabezado únicos. Agregaremos reflexión a una fila en nuestro diseño de reflexión de texto un poco más adelante en este tutorial. Pero por ahora comencemos con cómo 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.

reflexiones divi para texto e imágenes

Luego agregue un módulo de imagen a la fila.

reflexiones divi para texto e imágenes

Sube la imagen que quieras de la galería multimedia al 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 inferior

reflexiones divi para texto e imágenes

Crea la imagen reflejada

Para crear el efecto de reflexión, primero necesitamos crear un duplicado reflejado de la imagen directamente debajo de la imagen.

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

Opacidad: 40%
Transformar escala eje X: -100%

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

reflexiones divi para texto e imágenes

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

Agregar una superposición de degradado mediante 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 quede encima de la imagen inferior. Luego podemos agregar un fondo degradado al módulo de texto. El uso de un módulo de texto (en lugar de un divisor) le dará la opción adicional de agregar algo de contenido en la parte superior de la imagen reflejada más adelante si lo desea.

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

reflexiones divi para texto e imágenes

Elimina el contenido predeterminado 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:

Color de degradado de fondo a la izquierda: rgba (255,255,255,0)
Gradiente de fondo Color derecho: #ffffff

Ancho: 100%
Altura: 50%

Luego agregue el siguiente CSS personalizado al elemento principal:

position: absolute !important;
top: 50%;

Este posicionamiento absoluto del módulo de texto se superpone al módulo de texto en la mitad inferior de la fila.

reflexiones divi para texto e imágenes

Veamos cómo se ve el diseño hasta ahora.

reflexiones divi para texto e imágenes

Agregar un color de fondo

Si no desea un fondo blanco, puede experimentar con otros colores de fondo, lo que crea un diseño de reflexión de ancho completo único.

Para hacer esto, abra la configuración de la fila y actualice lo siguiente:

Color de fondo: # 000000
Ancho: 100%:
Ancho máximo: 100%;
Relleno personalizado: 0px arriba, 0px abajo

reflexiones divi para texto e imágenes

Ahora veamos el resultado.

reflexiones divi para texto e imágenes

Agregar texto a la superposición del módulo de texto

Recuerde, dado que estamos usando el módulo de texto como superposición en la imagen inferior, podemos agregar algo de contenido si queremos.

Para hacer esto, abra la configuración del módulo de texto y actualice lo siguiente:

Contenido: "Reflexión de la imagen"
Color del texto del texto: #ffffff
Tamaño del texto del texto: 30px
Orientación del texto: centro

reflexiones divi para texto e imágenes

Diseño final

Aquí está el diseño final del reflejo de la imagen.

reflexiones divi para texto e imágenes

Crear reflejo de texto en Divi

Para el siguiente ejemplo, crearemos un diseño de reflexión de texto. El proceso es muy similar a cómo crearía un reflejo de imagen. Sin embargo, para este ejemplo, voy a crear un reflejo para una fila completa. Esto permitirá que el uso refleje tanto el texto como la imagen de fondo para un diseño de encabezado agradable.

He aquí cómo hacerlo.

Primero cree una nueva sección regular con una fila de una columna. Luego agregue un módulo de texto a la fila.

reflexiones divi para texto e imágenes

Actualice el contenido con la palabra "Reflexión".

reflexiones divi para texto e imágenes

Luego actualice la configuración de diseño de la siguiente manera:

Fuente de texto: Oswald
Estilo de fuente de texto: TT
Texto Color del texto: # 333333
Tamaño del texto del texto: 10vw
Altura de la línea de texto: .9em
Orientación del texto: centro
Margen personalizado: 0px inferior
Acolchado personalizado: parte superior 4vw

reflexiones divi para texto e imágenes

Actualizar la configuración de la fila

Ahora que nuestro módulo de texto está personalizado, es hora de actualizar la configuración de la fila.

Abra la configuración de la fila y actualice lo siguiente:

Imagen de fondo: insertar imagen de fondo
Ancho del canal: 1
Ancho: 100%
Ancho máximo: 100%
Relleno personalizado: 0px arriba, 0px abajo

reflexiones divi para texto e imágenes

Así es como se ve el diseño hasta ahora.

reflexiones divi para texto e imágenes

Creación de la fila de texto de reflexión

Para crear el texto de reflexión para este diseño, vamos a reflejar toda la fila para que podamos incluir la imagen de fondo en la reflexión.

Duplique la fila y actualice lo siguiente:

Transformar escala eje Y: -100%

reflexiones divi para texto e imágenes

Ahora la fila de abajo es una imagen reflejada de la fila de arriba. Ahora todo lo que tenemos que hacer es agregar una superposición.

Agregar una superposición de degradado con un módulo de texto

Para agregar una superposición de degradado a nuestro reflejo de texto de la fila inferior, podemos usar un módulo de texto como hicimos en el primer diseño de reflejo de imagen anterior. Como antes, podemos darle al módulo de texto una posición absoluta para que llene toda la fila y se coloque encima del otro módulo de texto con nuestro texto de reflexión. Luego, podemos agregar un fondo degradado a la superposición del módulo de texto.

Continúe y cree un nuevo módulo de texto debajo del módulo de texto en la fila inferior.

Abra la nueva configuración del módulo de texto y elimine el contenido para que el módulo de texto esté vacío.

Luego actualice la configuración de la siguiente manera:

Color de degradado de fondo a la izquierda: #ffffff
Gradiente de fondo Color derecho: rgba (255,255,255,0.13)
Posición inicial: 38%

Ancho: 100%
Altura: 100%

reflexiones divi para texto e imágenes

Luego agregue el siguiente CSS personalizado al elemento principal:

position: absolute !important;
top: 0;

reflexiones divi para texto e imágenes

¡Eso es!

Resultado final

Mira el resultado final.

reflexiones divi para texto e imágenes

Aquí está el mismo diseño sin imágenes de fondo.

reflexiones divi para texto e imágenes

Pensamientos finales

Los reflejos pueden verse realmente geniales si se toma el tiempo para diseñarlos de la manera correcta. Afortunadamente, Divi tiene las herramientas para hacerlo realidad. Hay otros métodos para hacer reflejos CSS, pero desafortunadamente tienden a carecer de compatibilidad con varios navegadores. Los diseños de este tutorial se verán bien en todos los navegadores.

He descubierto que los reflejos se ven muy bien en los encabezados de las páginas y en la exhibición de imágenes para un portafolio. Y estoy seguro de que también hay muchas otras implementaciones.

Espero tener noticias tuyas en los comentarios.

¡Salud!