¿Le gustaría aprender a diseñar superposiciones de imágenes personalizadas con Divi ?
Las superposiciones de imágenes han existido en el diseño web durante mucho tiempo. Son perfectos para enganchar visitantes al revelar contenido Elementos adicionales y de diseño al pasar el cursor sobre la imagen.
En este tutorial, le mostraremos cómo diseñar superposiciones de imágenes personalizadas en Divi. Estas superposiciones cambiarán y revelarán elementos cuando pase el mouse sobre la imagen.
No se necesitan complementos.
Vamos a empezar!
vista
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
Crear una nueva página con Divi Builder
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Uso Divi Astillero
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Creación de superposiciones de imágenes personalizadas en Divi
Diseñar la sección, fila y columnas.
Para comenzar, cree una fila de tres columnas en la sección predeterminada.
Abra la configuración de la sección y agregue el siguiente color de fondo:
- Fondo: #3a0ca3
A continuación, abra la configuración de la columna 1 y actualice lo siguiente:
- Clase CSS: et-overlay-container
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Añadir imagen
Ahora que la sección, la fila y la columna están listas, agregue un nuevo módulo Imagen a la columna 1. Esta será la imagen principal detrás de nuestros diseños superpuestos.
Sube una imagen que parezca más un retrato que un paisaje. Asegúrese de que sea lo suficientemente ancho para cubrir el ancho completo de la columna en todos los tamaños de navegador.
NOTA: puede usar imágenes apaisadas, pero es posible que deba ajustar la posición de los elementos superpuestos en consecuencia para que no se superpongan.
En la pestaña Diseño, actualice lo siguiente:
- Margen (inferior): 0px
En la pestaña Avanzado, agregue la siguiente clase CSS:
- Clase CSS: et-overlay-image
Agregar color de superposición de imagen usando un módulo "Divisor"
Para crear el color de superposición de la imagen, usaremos un módulo Divisor.
Primero, agregue un módulo Divisor debajo de la imagen.
Luego coloque el separador en absoluto para que quede encima de la imagen:
- Posición: Absoluta
En la pestaña Contenido, actualice lo siguiente:
- Mostrar divisor: NO
- Color de fondo: rgba(247,37,133,0.8)
Luego actualice la altura y el ancho del separador:
- Ancho: 100%
- Altura: 100%
Con el diseño en su lugar, agregue la siguiente clase CSS al divisor:
- y-superposición-elemento
NOTA: Esta clase debe agregarse a todos los elementos de diseño de superposición que desea mostrar solo al pasar el mouse por encima. Si no desea que el elemento se oculte inicialmente, déjelo fuera.
Para ayudarlo a realizar un seguimiento de los elementos/módulos de diseño, abra el modal de capas y etiquete el divisor del módulo ("Color de superposición").
Texto de encabezado superpuesto agregado
Debajo del módulo Divisor, agregue un nuevo módulo de Texto. Esto servirá como el texto del encabezado superpuesto que aparecerá en la parte superior de la imagen al pasar el mouse.
Actualizar el contenido con un título H2:
<h2>Coaching</h2>A continuación, actualice la etiqueta del módulo de texto para referencia futura.
En la pestaña Diseño, actualice lo siguiente:
- Alineación de texto: centrado
- Color del texto: Claro
- Fuente: Cormorant Garamond
- Peso de fuente: Negrita
- Tamaño del texto: 40px
- Ancho: 100%
- Ancho máximo: 85%
En la pestaña Avanzado, actualice la posición de la siguiente manera:
- Posición: Absoluta
- Ubicación: centro superior
- Desplazamiento vertical: 10 %
NOTA: Es posible que sea necesario ajustar el desplazamiento vertical según el tamaño de la relación de aspecto de la imagen. Por ejemplo, una imagen de tipo paisaje puede requerir menos compensación
A continuación, agregue las siguientes clases de CSS al módulo de texto:
- Clase CSS: et-overlay-item move-down
además de clase “y-elemento-superpuesto”, agregamos una clase adicional "mover hacia abajo" para usar el CSS personalizado para mover el encabezado ligeramente hacia abajo al pasar el mouse por encima.
Crear el texto del cuerpo superpuesto
Para crear la superposición de texto del cuerpo, podemos duplicar el módulo de texto utilizado para la superposición del encabezado. Antes de actualizar los parámetros duplicados, cambie la etiqueta a "Cuerpo superpuesto".
Abra la configuración de texto del nuevo módulo de texto y actualice el contenido del cuerpo con algunas frases de texto de párrafo.
En la pestaña Avanzado, cambie la ubicación absoluta del módulo al centro.
Dado que no queremos que este se mueva al pasar el mouse (solo aparezca), actualice la clase CSS para incluir solo lo siguiente:
- Clase CSS: et-overlay-item
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 Botón debajo del segundo módulo Texto.
Antes de modificar el diseño, actualice la posición del botón de la siguiente manera:
- Posición: absoluta
- Desplazamiento vertical: 10 %
Ahora el botón debe estar centrado en la parte inferior de la imagen.
En la pestaña Avanzado, actualice la clase CSS y agregue un fragmento CSS personalizado al elemento principal de la siguiente manera:
- Clase CSS: et-overlay-item move-up
- Elemento CSS principal:
min-width: 15em;Tenga en cuenta que se ha agregado una clase adicional al botón para moverlo ligeramente hacia arriba al pasar el mouse por encima. Esto es para complementar el movimiento hacia abajo del texto del encabezado al pasar el mouse.
A continuación, actualice la siguiente configuración de diseño:
- Alineación de botones: centrado
- Usar estilos personalizados para el botón: SÍ
- Tamaño del texto del botón: 14px
- Color de fondo: #4361ee
- Ancho del borde del botón: 0 píxeles
- Espaciado entre letras de botones: 0,1 em
- Peso de fuente: Negrita
- Estilo de fuente del botón: TT
- Relleno: 0,8 em (superior e inferior), 0 px (izquierda y derecha)
Agregar CSS personalizado con el módulo Código
Agregue un módulo de código debajo del botón.
Luego pegue el siguiente CSS en el contenido del código. No olvide envolver el código en las etiquetas de script necesarias.
<style>
@media all and (min-width: 981px) {
.et-fb-root-ancestor .et-overlay-item {
opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
}
.et-overlay-item {
opacity: 0; /*hides overlay items by default*/
margin-bottom: 0px;
}
.et-overlay-item, .et-overlay-image {
transition: all 400ms !important; /*sets transition speed of all overlay items*/
}
.et-overlay-container:hover .et-overlay-item {
opacity: 1; /*reveals hidden overlay items on hover*/
}
.et-overlay-container:hover .et-overlay-image {
/*add new styles here to change image on hover*/
}
.et-overlay-container:hover .et-overlay-image.et-scale {
transform: scale(1.2); /*adjust scale of image here*/
}
.et-overlay-container:hover .et-overlay-image.et-rotate {
transform: scale(1.4)
rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
}
.et-overlay-container:hover .et-overlay-item.move-up {
margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
}
.et-overlay-container:hover .et-overlay-item.move-down {
margin-top: 10%; /*adjust how far you want the overlay item to move down*/
}
}
</style>
El código se comenta para que pueda comprender dónde puede ajustar el CSS para satisfacer sus necesidades.
Duplica la columna para más diseño.
Abra la capa modal, primero elimine las dos columnas vacías.
Luego, duplique la columna que contiene el diseño de superposición de imágenes dos veces. Deberías tener un total de tres columnas con diseños idénticos.
Creación de un diseño de superposición de imágenes n.º 2
Para este próximo diseño, colocaremos el botón en el centro de la imagen (siempre visible). A continuación, moveremos el encabezado y el texto del cuerpo a la vista 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 del módulo de texto del cuerpo superpuesto en la columna 2 y actualice la posición:
- Ubicación: centro inferior
- Desplazamiento vertical: 5 %
A continuación, actualice la clase CSS con lo siguiente:
- Clase CSS: et-overlay-item move-up
Ajuste la ubicación del botón y la clase CSS
A continuación, abra la configuración del botón en la columna 2 y actualice la siguiente ubicación de posición:
- Ubicación: Centro
A continuación, elimine la clase CSS, ya que queremos que el botón permanezca siempre visible.
Abra la configuración del módulo Divisor (color de superposición) y cambie el fondo de la siguiente manera:
- Fondo: rgba(67,97,238,0.8)
Luego abra la configuración del botón y cambie el color de fondo:
- Color de fondo: #f72585
Ajustar imagen y clase CSS
Luego abra la configuración de imagen y cargue una nueva imagen (si lo desea).
Luego agregue la siguiente clase CSS a la imagen:
- Clase CSS: et-overlay-image et-escala
Tenga en cuenta que además de la clase "et-overlay-image", hay una clase adicional llamada "et-scale" que aumentará el tamaño de la imagen, creando un efecto de acercamiento al pasar el mouse sobre ella.
Creación de un diseño de superposición de imágenes n.º 3
Ahora es el momento de crear el tercer diseño de superposición de imágenes en la columna 3.
Ajuste el contenido del texto del cuerpo superpuesto y la clase CSS
Comience abriendo la configuración del módulo de texto del cuerpo superpuesto en la columna 3. A continuación, agregue el encabezado H2 sobre el texto del párrafo. Ahora ambos estarán dentro de un módulo.
Luego elimine la clase CSS para que el texto permanezca visible sobre la imagen.
Ajuste el desplazamiento del botón y la clase CSS
Abra la configuración del módulo Botón y actualice el desplazamiento de la posición vertical:
- Desplazamiento vertical: 5 %
Eliminar encabezado superpuesto
A continuación, elimine el módulo Texto de encabezado superpuesto.
Ajuste el color de superposición y la clase CSS
Abra la configuración del módulo Divider (color de superposición) y actualice el fondo a lo siguiente:
- Color de degradado de fondo izquierdo: rgba(67,97,238,0.8)
- Color degradado de fondo derecho: rgba(247,37,133,0.8)
- Posición inicial: 25%
- Posición final: 75%
Y dado que queremos mantener visible la superposición de degradado en todo momento, elimine la clase CSS.
Ajustar la clase CSS de la imagen.
Finalmente, agregaremos una clase CSS adicional ("et-rotate") a la imagen principal que cambiará el tamaño y rotará la imagen al pasar el mouse.
- Clase CSS: et-overlay-image et-rotar
Toques finales
Antes de comprobar nuestros resultados finales, necesitamos hacer algunos ajustes.
Eliminar el margen inferior predeterminado para todos los módulos
Como ya hemos actualizado el margen con un margen inferior de 0px, podemos extender este margen a todos los módulos.
Haga clic con el botón derecho en la configuración del margen y seleccione “Ampliar Márgenes”.
Luego elija extender el margen a Todos los módulos en la página.
Eliminar módulos de código duplicados
Asegúrese de eliminar los módulos de código adicionales que se transfirieron de la duplicación de la primera columna. Solo debes tener uno. Puedes hacer esto fácilmente desde las capas modales.
Resultados finales
Ahora que nuestros tres diseños están completos, echemos un vistazo a los resultados finales de nuestros diseños de superposición de imágenes.
¡¡¡Descarga DIVI ahora!!!
Y aquí está el diseño en el móvil. Los efectos de superposición de desplazamiento solo se aplican en el escritorio. Por lo tanto, las superposiciones seguirán siendo visibles en dispositivos móviles.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Crear superposiciones de imágenes personalizadas es realmente muy divertido. Hay innumerables diseños que puede probar visualmente con Divi Builder.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
