Cómo crear un efecto superpuesto único con imágenes de fondo

Al diseñar un sitio web, a veces es difícil encontrar el equilibrio adecuado de creatividad. No desea que su diseño sea demasiado «exagerado», pero tampoco desea decepcionar a su audiencia. Una excelente manera de agregar un aspecto sutil pero creativo a su diseño es con lo que yo llamo el efecto de superposición de imágenes (un nombre creativo que conozco).

Este efecto de superposición hace que los íconos de imagen parezcan estar elevados cuando se superponen a otro elemento en la página, como una calcomanía que sujeta una hoja de papel a la pared o sella un sobre. El truco consiste en colocar imágenes de fondo en diferentes capas (como secciones, filas y módulos) para permitir que una sombra de cuadro divida la imagen por la mitad y parezca elevada en el centro.

Este diseño funciona muy bien para los íconos de imágenes publicitarias y también funcionará para agregar una imagen al costado del módulo de texto.

Empecemos.

Lo que necesitas para este tutorial

Para este tutorial, necesitará lo siguiente:

  • Tema Divi (instalado y activo)
  • El diseño de página de funciones de marketing de software cargado en una nueva página
  • Un editor de fotos simple para recortar imágenes (como Vista previa)

Vistazo

Aquí hay un adelanto del diseño que construiremos en este tutorial.

Crear una nueva página y cargar el diseño

Para este diseño, voy a utilizar el diseño de la página de funciones de marketing de software para que todo funcione. Continúe y cree una nueva página y cargue el diseño en la página usando Visual Builder.

Recorta tus iconos de imagen

Antes de sumergirnos en la personalización del diseño, debemos recortar los íconos de imagen para poder usarlos como imágenes de fondo.

Puede tomar uno de los íconos del diseño fácilmente viendo la versión en vivo de la página y arrastrando uno de los íconos de imagen a su escritorio. Luego abra la imagen en Vista previa (si usa una Mac) o cualquier software de edición de imágenes. Dado que los íconos en este diseño son de 128 px por 128 px, deberá cortar la imagen por la mitad recortando la imagen a exactamente 64 px en el lado derecho.

Esto creará una versión de la mitad derecha del icono de la imagen.

Guarde la imagen y vuelva a abrir el archivo original para recortar la mitad izquierda del icono de la imagen.

Finalmente, recorte una versión de la mitad inferior del icono de la imagen.

Si va a utilizar diferentes imágenes a lo largo de su diseño, también deberá recortarlas.

Ahora tienes lo que necesitas para abordar el diseño.

Crear iconos de imagen de Blurb superpuestos

Agregar degradado de fondo a la sección

En la segunda sección del diseño, actualice la configuración para incluir un fondo degradado.

Fondo degradado Color izquierdo: #f8f8f8

Fondo degradado Color derecho: #efeffc


Dirección del degradado: 90 grados

Agregar imágenes de fondo a las columnas

Para crear el efecto de superposición, necesitamos tener una versión completa del ícono de la imagen como imagen de fondo en cada una de las tres columnas para cada uno de nuestros anuncios publicitarios. Para cada columna, agregue una imagen de fondo con la siguiente configuración:

Tamaño de la imagen de fondo: Tamaño real (esto es importante)

Posición de la imagen de fondo: Centro superior


Repetición de la imagen de fondo: No repetir

Una vez que haya agregado un fondo a una columna, puede copiar la imagen de fondo y pegarla en las otras dos columnas.

Personaliza los módulos de Blurb

En este momento, no puedes ver las imágenes de fondo porque la publicidad las está superponiendo, pero eso se solucionará.

Abra la configuración del módulo de publicidad para la primera publicidad y agregue la versión de la mitad inferior de nuestro icono de imagen como icono de publicidad.

Luego agregue un color de fondo de #ffffff también.

Ahora actualice la configuración del diseño de la publicidad de la siguiente manera:

Esquinas redondeadas de la imagen: 0px

Ancho del borde de la imagen: 0px

Para el espaciado, necesitamos agregar exactamente 64 px de margen superior a nuestra publicidad para exponer la imagen de fondo de la columna. Esto asegurará que el ícono se corte por la mitad en la parte superior de la propaganda. También necesitamos algo de relleno para nuestro texto.



Margen personalizado: 64 px Relleno personalizado
superior : 8 % Inferior, 8 % Izquierda, 8 % Derecha

A continuación, agregue una sombra de cuadro a la propaganda. Esta es la clave para hacer que este efecto superpuesto se vea único.

Ahora copie y pegue el módulo para reemplazar los otros dos anuncios publicitarios en la fila y elimine la fila con los anuncios publicitarios antiguos a continuación.

Aquí está el resultado final de la fila.

Cree iconos de imágenes superpuestas en los lados de los módulos de texto

Para la siguiente sección de nuestro diseño, agregaremos el mismo tipo de efecto de superposición de imágenes al lado de nuestro módulo de texto en la columna derecha.

Agregar imágenes de fondo para crear el efecto de superposición en los lados de los módulos es un poco más desafiante ya que también tenemos que tener en cuenta los dispositivos móviles. Es por eso que sugeriría usar imágenes de alrededor de 128 px de ancho para que también pueda mostrar la imagen en los teléfonos inteligentes.

El truco de este diseño es tener varias imágenes de fondo: una en el centro de la sección y otra en el centro izquierdo de la columna 2.

Agregar icono de imagen de fondo a la sección

Primero, copie los estilos de sección de la sección anterior y péguelos en la sección directamente debajo para que podamos tener degradados de fondo coincidentes. Luego agregue su imagen a la sección con la siguiente configuración:

Tamaño de la imagen de fondo: Tamaño real

Posición de la imagen de fondo: Centro


Repetición de la imagen de fondo: Sin repetición

Agregar icono de imagen de fondo a la columna 2

Como la imagen de fondo de nuestra sección está centrada, no será visible a la izquierda de nuestro módulo de texto en el móvil. Es por eso que necesitamos agregar otra imagen de fondo a la izquierda de la columna 2. De esa manera, podemos ajustar el espaciado en el dispositivo móvil para revelar la imagen de fondo a la izquierda del módulo.

Continúe y copie la imagen de fondo de la sección y péguela en el fondo de la columna 2. Luego actualice la posición de la imagen de fondo de la columna 2 a Centro Izquierda.

Personalizar la configuración de la fila

Vamos a querer que la fila eventualmente se extienda al 100% del ancho en el móvil para que tengamos más espacio para la imagen de fondo. Actualice la siguiente configuración de fila:

Usar ancho personalizado: SÍ

Unidad: %


Ancho personalizado: 100%


Usar ancho de canalón personalizado: SÍ


Ancho de canalón: 1

Ahora, un poco de magia de relleno para ajustar para dispositivos móviles.

Relleno personalizado (escritorio): 10 % a la izquierda, 10 % a la derecha

Relleno personalizado (tableta): 5 % a la izquierda, 5 % a la derecha


Relleno personalizado (teléfono inteligente): 0 % a la izquierda, 0 % a la derecha

Relleno personalizado de la columna 2 (tableta): 64 px a la izquierda, 64 px a la derecha

Relleno personalizado de la columna 2 (teléfono inteligente): 64 px a la izquierda, 0 px a la derecha

Observe que la columna 2 tiene un margen izquierdo de 64 px en el dispositivo móvil. Esto es para mostrar exactamente la mitad de la imagen de fondo a la izquierda del módulo.

Guardar ajustes.

Ahora elimine la imagen debajo del módulo de texto en la columna derecha. Sus imágenes de fondo aún no están alineadas, pero eso se arreglará una vez que personalicemos nuestro módulo de imagen y texto. El truco es asegurarse de que el módulo de texto de la derecha siempre tenga más altura que la imagen de la columna de la izquierda. Esto mantendrá las imágenes de fondo perfectamente alineadas.

Reducir el módulo de imagen

Reduzcamos un poco el módulo de imagen en la columna izquierda para dejar espacio para la imagen de fondo. Actualice la siguiente configuración:

Ancho: 75 % (en computadoras de escritorio y tabletas)

Alineación del módulo: Centro

Agregar fondo y espaciado al módulo de texto

A continuación, debemos agregar un color de fondo a nuestro módulo de texto.

Color de fondo: #ffffff

Para nuestra imagen de fondo, necesitamos usar la mitad derecha de nuestra imagen y luego asegurarnos de que esté centrada a la izquierda.

Tamaño de la imagen de fondo: Tamaño real

Posición de la imagen de fondo: Centro izquierda


Repetición de la imagen de fondo: No repetir

Actualice el resto de la configuración de la siguiente manera:

Ancho: 100 %

relleno personalizado: 15 % superior, 15 % inferior, 15 % izquierda, 15 % derecha


Seleccionar sombra de cuadro

Ahora vamos a comprobar el resultado final.

Debido a que agregamos una segunda imagen de fondo a la izquierda de la columna 2, también tenemos un excelente resultado en tabletas y dispositivos móviles.

Y aquí está el diseño completo.

Pensamientos finales

Este diseño de superposición de imágenes puede ser una forma sutil de diferenciar su diseño. Siéntase libre de experimentar con diferentes colores de fondo y efectos de filtro para crear diseños aún más únicos. También puede usar imágenes regulares también. Solo tenga en cuenta que este diseño funciona cuando sus imágenes de fondo están configuradas en su tamaño real, así que intente usar imágenes pequeñas (alrededor de 128px de ancho).

Espero escuchar de usted en los comentarios.

¡Salud!