Cómo diseñar reflexiones para imágenes y texto en la división

Diseñar reflexiones 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, diviliza la creación de estas reflexiones desde Divi Builder sin tener que usar un editor de fotos. En este tutorial, le mostraré cómo diseñar reflexiones para imágenes y texto en la división. La clave para hacer reflexiones es utilizar la opción de transformación de la división para crear una versión espejo del elemento. Después de eso, puede agregar una superposición personalizada que le mostraré cómo hacer con un módulo de texto.
¡Vamos a empezar! Él hace un vistazo a una breve mirada a los proyectos que construiremos en este tutorial.




Descargue el aspecto de reflexión para el texto y la imagen de forma gratuita para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Suscríbase a nuestro canal de YouTube lo que necesita para comenzar a comenzar, solo necesita una división. Asegúrese de que el tema Div esté instalado y activo. Crearemos nuestros proyectos desde cero utilizando el Builder Divin en el frente (Visual Builder). También necesitará algunas imágenes simuladas para este tutorial (una imagen de fondo alrededor de 1920px x 600px y otra imagen alrededor de 500px x 350px). Cuando esté listo, vaya al tablero de WordPress y navegue por las páginas> Agregar un nuevo. Dé el título de la nueva página e implementa Divi Builder en el frente. Seleccione la opción “Construir desde cero”. ¡Ahora estás listo para irte!
La idea básica detrás de la creación de la imagen y la reflexión del texto en la idea básica detrás de la creación de patrones de reflexión en la división implica tres pasos:
Cree un módulo con su imagen o texto.
Duplique el módulo y use la escala de transformación para crear la imagen reflejada o el texto de una superposición de gradiente en el elemento espejo utilizando una posición absoluta o un módulo de texto.
Esta técnica de diseño no se limita a módulos individuales. En realidad, puede agregar reflejos en filas enteras dentro de la división utilizando este método que es útil para crear diseños de encabezado únicos. Agregaremos reflexión a una fila en nuestro diseño de reflejo del texto un poco más adelante en este tutorial. Pero por ahora, comencemos con la forma de crear el reflejo de la imagen.
Cómo crear la reflexión de la imagen para crear un reflejo de la imagen, comencemos con la creación de una nueva sección con una fila con una columna.
Luego agregue un módulo de imagen en una fila.
Cargue la imagen deseada de la galería de medios al módulo de imagen. Luego actualice la siguiente configuración de la imagen: Ancho máximo: 600 PX Alineación del módulo: Centro Marja personalizado: 0 PX a continuación

Cree la imagen en el espejo para crear el efecto de reflexión, primero debemos crear un duplicado en el espejo de la imagen justo debajo de la imagen. Para hacer esto, copie el módulo de imagen. Luego actualice la configuración de la imagen duplicada de la siguiente manera:

Opacidad: 40% x eje de la escala de transformación: -100% La propiedad de la escala de transformación es la que convierte la imagen mágicamente vertical y horizontalmente para crear una versión espejo de la imagen.

Se trata del diseño básico de la reflexión. Sin embargo, podemos agregar una superposición de gradiente adicional a nuestra imagen inferior para un diseño de reflexión más realista. Agregue una superposición de gradiente usando un módulo de texto para agregar una superposición de gradiente 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é por encima de la imagen inferior. Luego podemos agregar un fondo de gradiente al módulo de texto. El uso de un módulo de texto (en lugar de un divisor) le dará la opción de bonificación para agregar más contenido a la parte superior de la imagen de reflexión más adelante, si lo desea. Continúe y cree un módulo de texto debajo de la imagen inferior.
Elimine 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 izquierdo del gradiente de fondo: RGBA (255,255,255.0) Color derecho del gradiente de fondo: #FFFFFF FFF: 100% Altura: 50% Luego agregue los siguientes CS personalizados al elemento principal: Posición: ¡Absoluto! Importante;

Arriba: 50%;

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

Verifiquemos 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, que crea un diseño de reflexión único con un ancho completo.
Para esto, abra la configuración de la fila y actualice lo siguiente: Wallpaper: # 000000 Ancho: 100%: Ancho máximo: 100%; Trenza personalizada: 0 px arriba, 0 px abajo

Ahora verifiquemos el resultado.

Agregar texto al superponer el módulo de texto Recuerde, porque usamos el módulo de texto como una superposición en la imagen inferior, podemos agregar contenido si lo deseamos. Para esto, abra la configuración del módulo de texto y actualice lo siguiente: Contenido: “Reflexión de la imagen” El color del texto: #FFFFF Tamaño del tamaño: 30 PX Orientación del texto: Centro final Aquí está el diseño final de la reflexión de la imagen.
Creando el reflejo del texto en la división para el próximo ejemplo, crearemos un diseño de reflexión de diseño. El proceso es muy similar a cómo crearía una reflexión de imagen. Sin embargo, para este ejemplo, crearé una reflexión para una fila completa. Esto permitirá que el uso refleje tanto el texto como la imagen de fondo para un hermoso diseño de encabezado. Aquí le mostramos cómo hacerlo. Primero cree una nueva sección habitual con una fila con una columna. Luego agregue un módulo de texto en una fila.

Actualice el contenido con la palabra “Reflexión”.

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

TEXTO DE FUENTE: OSWALD TEXTO DE TEXTO TEXTO: TT El color del texto del texto: # 333333 Tamaño del texto del texto: 10VW La altura de la línea de texto: .9em Orientación del texto: Margen personalizado: 0 PX Bajo el revestimiento Personalizado: El 4VW superior

Actualice la configuración de línea 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: Fondo de pantalla: escriba la imagen de fondo el ancho de la canaleta: 1 Ancho: 100% de ancho máximo: 100% de trenza personalizada: 0 px arriba, 0 px abajo

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

Creando la fila de texto de reflexión para crear el texto de reflexión para este diseño, reflejaremos toda la fila, para que podamos incluir la imagen de fondo en la reflexión. Duplicar la fila y actualizar lo siguiente: El eje y de la escala de transformación: -100%Ahora la fila a continuación es una imagen reflejada de la fila de arriba. Ahora todo lo que tenemos que hacer es agregar una superposición. Agregue una superposición de gradiente usando un módulo de texto para agregar una superposición de gradiente a la reflexión de texto en la fila inferior, podemos usar un módulo de texto como lo hicimos en el primer diseño de reflexión de diseño. Como antes, podemos darle al módulo de texto una posición absoluta para llenar toda la fila y pararse sobre el otro texto con nuestro texto de reflexión. Luego podemos agregar un fondo de gradiente al superponer el módulo de texto. Continúe y cree un nuevo módulo de texto en el 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 izquierdo del gradiente de fondo: #FFFFFF El color derecho del gradiente de fondo: RGBA (255.255.0.13) Posición inicial: 38% Ancho: 100% Altura: 100%
Luego agregue los siguientes CSS personalizados al elemento principal: Publicación: ¡Absoluto! Importante;

Arriba: 0;

¡Eso es todo! Resultado final verifique el resultado final.

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