homefinance blog
La superposición de la imagen existe durante mucho tiempo en el diseño web. Son maravillosos para atraer a los visitantes, revelando contenido adicional y elementos de diseño cuando repasas la imagen. Debido a que esta es una característica de diseño tan popular, hay muchos complementos dedicados a crear superposiciones. Sin embargo, dependiendo del complemento, pueden ser bastante limitantes o pueden ser un poco exagerados para lo que puede necesitar. Por lo tanto, te ayuda a tener el conocimiento necesario para construirlos solo en el Div. En este tutorial, le mostraremos cómo diseñar imágenes personalizadas superpuesta en el Div. Estas superposiciones cambiarán y revelarán elementos cuando repases la imagen. La mejor parte es que tiene un control completo sobre el diseño de las superposiciones de la imagen utilizando las opciones de diseño incrustadas. Y, con algunos fragmentos CSS personalizados, puede tener algunas superposiciones de hermosas imágenes para llevar su sitio al siguiente nivel. No se requiere complemento.
¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue la división de superposiciones de imagen de forma gratuita para poner su mano en los dibujos en este tutorial, primero debe descargarla 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 se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente: si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creación de imágenes personalizadas superpuestas en la división de la sección, fila y columnas para comenzar, cree una fila con tres columnas en la sección predeterminada.
Abra la configuración de la sección y agregue el siguiente color de fondo:
Color de fondo: # 3A0CA3
Luego abra la configuración para la columna 1 y actualice lo siguiente:
Clase CSS: ET-Overlay-Container
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
La clase CSS es necesaria para activar los efectos flotantes de los artículos superpuestos que vamos a construir. La superación oculta es necesaria porque tendremos un efecto flotante que escala la imagen más allá del contenedor de columna.
Agregar la imagen ahora que la sección, el giro y la columna están listos, continúan y agregan un nuevo módulo de imagen en la columna 1. Esta será la imagen principal detrás de nuestros proyectos superpuestos.
Sube una imagen que sea más un retrato que un paisaje. Utilizo uno que tenga alrededor de 800 PX con 1050 PX. Asegúrese de que sea lo suficientemente ancho como para cubrir todo el ancho de la columna en todos los tamaños del navegador. (Nota: puede usar imágenes de paisaje, pero puede ser necesario ajustar el posicionamiento de elementos superpuestos para que no se superpongan).
En la pestaña Diseño, actualice lo siguiente:
Marja: 0 px a continuación
En la pestaña avanzada, agregue la siguiente clase CSS: CSS CLASS: ET-Overlay-Image
Agregar el color de la superposición de la imagen usando un módulo divisor para crear el color de la superposición de la imagen, usaremos un módulo divisor. La idea es crear una cubierta sobre la imagen haciendo que el separador se extienda sobre toda la altura y el ancho de la columna, de modo que esté perfectamente sobre la imagen. Una vez que alcance la posición, puede ajustar el color de fondo del módulo divisor para obtener el color superpuesto deseado. Primero, agregue un módulo divisor debajo de la imagen.
Luego coloque el divisor como absoluto para que pueda estar por encima de la imagen:
Posición: Absoluto
En la pestaña Contenido, actualice lo siguiente:
Divisor del espectáculo: no
Color de fondo: RGBA (247,37,133,0,8)
Luego actualice la altura y el ancho del separador:
Ancho: 100%
Altura: 100%
Una vez que el diseño esté en su lugar, agregue la siguiente clase CSS al divisor:
ET-Overlay-Weitem
(Nota: esta clase debe agregarse a todos los elementos de diseño superpuestos que desea mostrar solo en la carrera.
Para ayudar a rastrear los elementos / módulos de diseño, abra las capas modales y etiquete el módulo Divisor (“Color superpuesto”).
Agregar el texto del encabezado de texto -superpuesto en el módulo divisor, agregue un nuevo módulo de texto. Servirá como un texto de encabezado superpuesto, que aparecerá en la parte superior de la imagen de la carrera.
Actualice el contenido con un título H2:
Coaching
Luego actualice la etiqueta del módulo de texto para referirse posteriormente.
En la configuración de diseño de texto, actualice lo siguiente:
Alineación de texto: Centro
Color de texto: Abierto
2 Sección de fuentes: Cormoran Garamonditlul 2 Fuente de peso: Bold
Rúbrica 2 Dimensión de texto: 40 PX
Ancho: 100%
Ancho máximo: 85%
En la pestaña avanzada, actualice el puesto de la siguiente manera:
Posición: Absoluto
Ubicación: Center de sus
Brecha vertical: 10%
(Nota: se puede requerir que el espacio vertical se ajuste de acuerdo con el tamaño de la apariencia de la imagen. Por ejemplo, un tipo de paisaje puede necesitar un espacio más pequeño)
Luego agregue las siguientes clases de CSS al módulo de texto:
Clase CSS: ET-Overlay-WeItem Rechin
Además de la clase “ET-Overlay-Wetem”, agregamos una clase adicional de “descenso” para usar CSS Custom para mover el título al pasaje.
Creando el texto del cuerpo superpuesto para crear el texto del cuerpo superpuesto, podemos duplicar el módulo de texto utilizado para el encabezado superpuesto. Antes de actualizar la configuración duplicada, cambie la etiqueta a “superposición del cuerpo”.
Abra la configuración de texto para el nuevo módulo de texto y actualice el contenido del cuerpo con algunas oraciones de texto de párrafo.
En la pestaña avanzada, cambie la ubicación absoluta del módulo en el centro.
Como no queremos que se mueva a Hover (solo aparece), actualice la clase CSS para incluir lo siguiente:
Clase CSS: ET-Overlay-Weitem
Crear el botón de superposición La última superposición en esta imagen será el botón. Para crear el botón, agregue un nuevo módulo de botón en el módulo de texto “Texto del cuerpo”.
Antes de cambiar el diseño, actualice la posición del botón de la siguiente manera:
Posición: Absoluto
Brecha vertical: 10%
Ahora el botón debe centrarse en la parte inferior de la imagen. En la pestaña Avanzada, actualice la clase CSS y agregue un fragmento CSS personalizado al elemento principal de la siguiente manera: Clase CSS: ET-Overlay-Wetem Move
Artículo principal CSS: Min-Width: 15em
Tenga en cuenta que hay una clase adicional agregada al botón para moverlo ligeramente hacia la carrera. Esto es para completar el movimiento hacia abajo del texto del título durante el viaje.
Luego actualice la siguiente configuración de diseño:
Alineación de botones: centro
Tamaño de texto de texto: 14 PX
Botón de color de fondo: # 4361EE
Botón Botón: 0 PX
Distancia entre letras y botones: 0.1em
Botón de peso de fuente de fuente: en negrita
Botón de estilo de fuente: TT
Forro: 0.8 em arriba, 0.8 em jos, 0 izquierda, 0 px derecho
Agregar CSS personalizado con el módulo de código antes de crear varias otras versiones de este diseño superpuesto, para agregar CSS personalizado necesario para los efectos de salida de la superposición. Para hacer esto, agregue un módulo de código debajo del botón.
Luego pegue el siguiente CSS en el contenido del código. Recuerde envolver el código en las etiquetas de script necesarias.
@Media all y (min-width: 981px) {
.et-fb-raot-ansesor .et-overlay-weitem {
Opacidad: 1; /*Muestra elementos de superposición oculta cuando se usa Visual Divi Builder*/
}
.et-superlay-weitem {
Opacidad: 0; /*Oculta los elementos de superposición por defecto*/
Botón de margen: 0px;
}
.et-overlay-weitem, .et-overlay-image {
Transición: ¡todos los 400 ms! Importantes; /*Establece la velocidad de transición de todos los elementos de superposición*/
}
.et-overlay-continer: hover .et-overlay-weitem {
Opacidad: 1; /*Revela elementos de superposición oculta en Hover*/
}
.et-overlay-continer: hover .et-overlay-image {
/*Agregue nuevos estilos aquí para cambiar la imagen en Hover*/
}
.et-overlay-continer: hover .et-overlay-image.et-escal {
Transformar: escalas (1.2); /*Ajuste la escala de imagen aquí*/
}
.et-overlay-continer: hover .et-overlay-image.et-rite {
Transformar: escala (1.4)
Rotatez (10deg)! Importante; /*Ajuste la rotación de la imagen y la escala necesaria para la rotación aquí*/
}
.et-overlay-continer: hover .et-verlay-item.move-up {
Margen Bottom: 15%! Importante; /*Ajuste qué tan lejos desea que el elemento de superposición se mueva*/
}
.et-overlay-continer: hover .et-verlay-item.move down {
margen-top: 10%; /*Ajuste qué tan lejos desea que el elemento de superposición se mueva hacia abajo*/
}
}
Se comenta el código para que pueda comprender dónde puede ajustar CSS según sea necesario. Duplicación de la columna para varios modelos Aunque ya tenemos dos columnas adicionales para trabajar, es más fácil transferir todos los módulos y diseñar en la primera columna a una nueva columna que duplica la columna completa. Para hacer esto, abra las capas modales, borre las dos columnas vacías, luego copie el doble de la columna que contiene el diseño de la superposición de la imagen. Debe tener un total de tres columnas con patrones idénticos.
Creando el Proyecto de superposición de la imagen # 2 ahora, que tenemos todos los elementos de diseño en su lugar en cada una de las columnas, podemos cambiar el diseño para crear superposiciones de imagen adicionales. Para el siguiente diseño, colocaremos el botón en el centro de la imagen (siempre visible). Luego moveremos el encabezado y el texto del cuerpo a la visualización desde la parte superior e inferior de la imagen. Ajuste la ubicación del texto del cuerpo y la clase CSS abra la configuración para el módulo del cuerpo superpuesto en la columna 2 y actualice la posición:
Ubicación: el centro inferior
Brecha vertical: 5%
Luego actualice la clase CSS con lo siguiente: Clase CSS: ET-Overlay-Wetem Move
Ajuste la ubicación del botón y la clase CSS luego, abra la configuración para el botón de la columna 2 y actualice la siguiente ubicación de posición:
Ubicación: centro central
Luego retire la clase CSS porque queremos mantener el botón siempre visible.
Abra la configuración del módulo divisor (color superplaz) y cambie el fondo de la siguiente manera:
Color de fondo: RGBA (67,97,238,0,8)
Luego abra la configuración del botón y cambie el color de fondo:
El color de fondo del botón: # F72585
Ajuste la clase y la clase CSS luego, abra la configuración de la imagen y cargue una nueva imagen (si lo desea).
Luego agregue la siguiente clase CSS a la imagen:
Clase CSS: ET-Overlay-Image ET-Scale
Tenga en cuenta que, además de la clase “ET-Overlay-Image”, hay una clase adicional llamada “ET-Scale” que hará que la imagen aumente en tamaño, creando un aumento en la salida.
Crear el Proyecto de superposición de la imagen # 3 Ahora es el momento de crear la tercera imagen superpuesta en la columna 3. Ajuste el contenido del cuerpo superpuesto y la clase CSS comience abriendo la configuración del módulo de texto del cuerpo -3 y agregue el título H2 por encima del texto del párrafo. Ahora los dos estarán dentro de un módulo en lugar de dos.
Luego retire la clase CSS para que el texto permanezca visiblemente por encima de la imagen.
Ajuste el botón de compensación y la clase CSS abra la configuración del módulo de botón y actualice el espacio vertical:
Brecha vertical: 5%
Elimine el título superpuesto y luego, elimine el módulo de texto de encabezado superpuesto.
Ajuste el color de superposición y la clase CSS Abra la configuración para el módulo divisor (color superpuesto) y actualice el fondo con lo siguiente: Color de fondo izquierdo: RGBA (67.97,238,0,8)
Color derecho del gradiente de fondo: RGBA (247,37,133,0,8)
Posición inicial: 25%
Posición final: 75%
Y dado que queremos mantener visible la superposición de gradiente en cualquier momento, retire la clase CSS.
Ajuste la imagen de la clase CSS al final, agregaremos una clase CSS adicional a la imagen principal, que cambiará el tamaño y rueda la imagen al pasar el ronco.
Clase CSS: ET-Overlay-Image ET-T-thel
Toques finales Antes de verificar los resultados finales, necesitamos hacer algunos ajustes. Elimine el margen inferior predeterminado para todos los módulos por defecto, cada módulo viene con un margen más bajo de 30 PX debido al ancho predeterminado del canal (3) de la configuración ordinaria. Esto puede eliminar el posicionamiento de módulos en nuestro diseño de superposición. Para eliminarlos, abra la configuración del módulo de imagen para una de las imágenes de diseño. Debido a que ya hemos actualizado el margen con un margen más bajo de 0 PX, podemos expandir este margen a todos los módulos. Haga clic en la configuración del borde y elija “Extienda el margen”.
Luego elija expandir el borde a todos los módulos en la página.
Elimine los módulos de código duplicados Asegúrese de eliminar módulos de código adicionales que se han informado al copiar la primera columna. Deberías tener solo uno. Puede hacer esto fácilmente desde las capas modales.
Resultados finales Ahora que nuestros tres modelos están completos, para verificar los resultados finales de nuestros proyectos de superposición de imágenes.Y aquí está el diseño móvil.Los efectos superpuestos se aplican solo al escritorio mediante una consulta de medios CSS personalizada en el módulo de código.Por lo tanto, las superposiciones siempre serán visibles en el móvil. Final cómo construir las superposiciones de imágenes personalizadas es realmente muy divertido.Hay innumerables modelos que puede probar visualmente con el Div Builder y solo se necesita una pequeña cantidad de CSS personalizado para aplicar los efectos de desplazamiento.Incluso los efectos del desplazamiento para los elementos superpuestos requieren CSS personalizados, puede continuar aprovechando las opciones construidas en desplazamiento para apuntar a cada uno de los elementos superpuestos.Espero tener noticias suyas en los comentarios.¡Suerte!
