Cómo diseñar superposiciones de imágenes personalizadas en Divi

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Descargue el diseño de superposiciones de imágenes Divi GRATIS

Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Creación de superposiciones de imágenes personalizadas en Divi

Construcción de la sección, la fila y las columnas

Para comenzar, cree una fila de tres columnas dentro de la sección predeterminada.

Abra la configuración de la sección y agregue el siguiente color de fondo:

• Color de 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

La clase CSS es necesaria para activar los efectos de desplazamiento de los elementos superpuestos que vamos a construir. El desbordamiento oculto es necesario porque vamos a tener un efecto de desplazamiento que escala la imagen más allá del contenedor de la columna.

Agregar la imagen

Ahora que la sección, la fila y la columna están listas, continúe y agregue un nuevo módulo de imagen a la columna 1. Esta será la imagen principal detrás de nuestros diseños superpuestos.

Sube una imagen que sea más un retrato que un paisaje. Estoy usando uno que mide aproximadamente 800 px por 1050 px. Asegúrese de que sea lo suficientemente ancho para abarcar todo el ancho 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 de diseño, actualice lo siguiente:

• Margen: 0px inferior

En la pestaña avanzada, agregue la siguiente clase CSS:

• Clase CSS: et-overlay-image

Adición del color de superposición de imágenes mediante un módulo divisor

Para crear el color de superposición de la imagen, vamos a utilizar un módulo divisor. La idea es crear una cubierta sobre la imagen haciendo que el divisor abarque todo el alto y el ancho de la columna para que se asiente perfectamente sobre la imagen. Una vez en posición, puede ajustar el color de fondo del módulo divisor para obtener el color de superposición que queremos.

Primero, agregue un módulo divisor debajo de la imagen.

Luego coloque el divisor como absoluto para que quede encima de la imagen:

• Posición: Absoluta

En la pestaña de contenido, actualice lo siguiente:

• Mostrar divisor: NO
• Color de fondo: rgba(247,37,133,0.8)

Luego actualice la altura y el ancho del divisor:

• Ancho: 100%
• Altura: 100%

Una vez que el diseño esté en su lugar, agregue la siguiente Clase CSS al divisor:

• et-overlay-item

(NOTA: esta clase debe agregarse a todos los elementos de diseño superpuestos que desea mostrar solo al pasar el mouse sobre ellos. Si no desea que el elemento se oculte inicialmente, déjelo fuera).

Para ayudar a realizar un seguimiento de los elementos/módulos de diseño, abra el modal de capas y etiquete el módulo divisor («color de superposición»).

Adición del texto de encabezado superpuesto

Debajo del módulo divisor, agregue un nuevo módulo de texto. Esto servirá como nuestro texto de encabezado superpuesto que aparecerá en la parte superior de la imagen al pasar el mouse.

Actualice el contenido con un encabezado H2:

Luego actualice la etiqueta del módulo de texto para referenciarlo más adelante.

En la configuración de diseño de texto, actualice lo siguiente:

• Alineación de texto: Centro
• Color del texto: Claro

• Encabezado 2 Fuente: Cormorant Garamond
• Encabezado 2 Peso de fuente: Negrita
• Encabezado 2 Tamaño del texto: 40px

• Ancho: 100%
• Ancho máximo: 85%

En la pestaña avanzada, 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 necesitar menos desplazamiento)

A continuación, agregue las siguientes clases de CSS al módulo de texto:

• Clase CSS: et-overlay-item move-down

Además de la clase «et-overlay-item», estamos agregando una clase adicional de «mover hacia abajo» para usar CSS personalizado para mover el encabezado ligeramente hacia abajo al pasar el mouse por encima.

Creación del 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 del duplicado, cambie la etiqueta a «cuerpo superpuesto».

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 al centro.

Dado que no queremos que este se mueva al pasar el mouse (solo aparezca), actualice la clase CSS para que solo incluya lo siguiente:

• Clase CSS: et-overlay-item

Creación del botón de superposición

El último elemento superpuesto en esta imagen será el botón. Para crear el botón, agregue un nuevo módulo de botón debajo del módulo de texto «cuerpo de texto».

Antes de cambiar 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.

Mientras está en la pestaña avanzada, actualice la clase CSS y agregue un fragmento de CSS personalizado al elemento principal de la siguiente manera:

• Clase CSS: et-overlay-item move-up
• Elemento principal CSS:
  

  01	min-width: 15em

Observe que se agregó una clase adicional al botón para moverlo ligeramente hacia arriba al pasar el mouse por encima. Esto es para complementar el movimiento descendente del texto del encabezado al pasar el mouse.

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

• Alineación de botones: Centro
• Tamaño del texto del botón: 14px
• Color de fondo del botón: #4361ee
• Ancho del borde del botón: 0px
• Espaciado entre letras de botones: 0,1 em
• Peso de la fuente del botón: Negrita
• Estilo de fuente del botón: TT
• Relleno: 0,8 em arriba, 0,8 em abajo, 0 px a la izquierda, 0 px a la derecha

Agregar el CSS personalizado con el módulo de código

Antes de crear algunas otras versiones de este diseño de superposición, agreguemos el CSS personalizado necesario para los efectos de desplazamiento de la superposición. Para hacer esto, agregue un módulo de código debajo del botón.

Luego pegue el siguiente CSS dentro del contenido del código. No olvide envolver el código en las etiquetas de script necesarias.

El código se comenta para que pueda comprender dónde puede ajustar el CSS según sea necesario.

Duplicar la columna para más diseños

Aunque ya tenemos dos columnas vacías adicionales con las que trabajar, es más fácil transferir todos los módulos y el diseño dentro de la primera columna a una nueva columna duplicando la columna completa. Para hacer esto, abra el modal de capas, elimine las dos columnas vacías y luego duplique la columna que contiene el diseño de superposición de imagen 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

Ahora que tenemos todos los elementos de diseño en su lugar dentro de cada una de las columnas, podemos modificar el diseño para crear superposiciones de imágenes adicionales. Para este próximo diseño, vamos a colocar el botón en el centro de la imagen (siempre visible). Luego moveremos el encabezado y el texto del cuerpo a la vista desde la parte superior e inferior de la imagen.

Ajustar 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 %

Luego actualice la clase CSS con lo siguiente:

• Clase CSS: et-overlay-item move-up

Ajustar 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 Centro

Luego elimine la clase CSS porque queremos mantener el botón visible siempre.

Abra la configuración del módulo divisor (color de superposición) 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:

• Color de fondo del botón: #f72585

Ajustar imagen y clase CSS

A continuación, 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-escala

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 de tamaño, creando un efecto de acercamiento al pasar el mouse por encima.

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.

Ajustar el contenido del texto del cuerpo superpuesto y la clase CSS

Comience abriendo la configuración para el módulo de texto del cuerpo superpuesto en la columna 3 y agregue el encabezado H2 sobre el texto del párrafo. Ahora los dos estarán dentro de un módulo en lugar de dos.

Luego, elimine la clase CSS para que el texto permanezca visible en la parte superior de la imagen.

Ajustar el desplazamiento del botón y la clase CSS

Abra la configuración del módulo de botones y actualice el desplazamiento vertical de la posición:

• Desplazamiento vertical: 5 %

Eliminar encabezado superpuesto

A continuación, elimine el módulo de texto de encabezado superpuesto.

Ajustar el color de superposición y la clase CSS

Abra la configuración del módulo divisor (color de superposición) y actualice el fondo con lo siguiente:

• Gradiente de fondo Color izquierdo: rgba(67,97,238,0.8)
• Gradiente de fondo Color derecho: rgba(247,37,133,0.8)
• Posición inicial: 25%
• Posición final: 75%

Y dado que queremos mantener la superposición de degradado visible en todo momento, elimine la Clase CSS.

Ajustar la clase CSS de la imagen

Por último, vamos a agregar una clase CSS adicional («et-rotate») a la imagen principal que escalará y rotará la imagen al pasar el mouse.

• Clase CSS: et-overlay-image et-rotar

Toques finales

Antes de verificar nuestros resultados finales, debemos hacer algunos ajustes.

Saque el margen inferior predeterminado para todos los módulos

De forma predeterminada, cada módulo viene con un margen inferior de 30 px debido al ancho de medianil predeterminado (3) en la configuración de fila. Esto puede alterar el posicionamiento de los módulos en nuestro diseño superpuesto. Para eliminarlos, abra la configuración del módulo de imagen para una de las imágenes en el diseño. Como ya actualizamos 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 elija «ampliar margen».

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 hayan transferido al duplicar la primera columna. Solo debes tener uno. Puedes hacer esto fácilmente desde el modal de capas.

Resultados finales

Ahora que nuestros tres diseños están completos, veamos los resultados finales de nuestros diseños de superposición de imágenes.

Y aquí está el diseño en el móvil. Los efectos de desplazamiento de superposición se aplican solo al escritorio a través de la consulta de medios CSS personalizada en el módulo de código. Por lo tanto, las superposiciones estarán siempre visibles en el móvil.

Pensamientos finales

Crear superposiciones de imágenes personalizadas es realmente muy divertido. Hay innumerables diseños que puede probar visualmente con el constructor Divi y solo se necesita una pequeña cantidad de CSS personalizado para aplicar los efectos de desplazamiento. Incluso los efectos de desplazamiento para los elementos superpuestos requieren CSS personalizado, aún puede aprovechar las opciones integradas de desplazamiento para apuntar a cada uno de los elementos superpuestos individualmente.

Espero escuchar de usted en los comentarios.

¡Salud!