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.
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:
- Crea un módulo con tu imagen o texto
- Duplique el módulo y use la escala Transformar para crear la imagen o el texto reflejados
- 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.
Luego agregue un módulo de imagen a la fila.
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
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.
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.
Elimina el contenido predeterminado para que el módulo de texto esté vacío.
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.
Veamos cómo se ve el diseño hasta ahora.
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
Ahora veamos el resultado.
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
Diseño final
Aquí está el diseño final del reflejo de la imagen.
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.
Actualice el contenido con la palabra "Reflexión".
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
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
Así es como se ve el diseño hasta ahora.
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%
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%
Luego agregue el siguiente CSS personalizado al elemento principal:
position: absolute !important; top: 0;
¡Eso es!
Resultado final
Mira el resultado final.
Aquí está el mismo diseño sin imágenes de fondo.
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!