Descargue 9 superposiciones de imágenes en forma GRATIS para Divi

La forma en que muestra las imágenes en su sitio web realmente puede marcar la diferencia en el diseño general que está creando. Con las opciones integradas de Divi, ya puede aplicar varias configuraciones de diseño que lo ayudarán a mostrar imágenes de una manera sorprendente, piense en bordes y sombras de cuadros, por ejemplo. Pero si buscas darle a tus imágenes una forma más única, esta publicación te ayudará. Vamos a compartir 9 superposiciones de imágenes con formas GRATUITAS que puede descargar y usar en cualquier sitio web que cree. Después de compartir estas superposiciones de imágenes con formas, también le mostraremos cómo aprovecharlas mientras crea un sitio web con Divi. Esperamos que este tutorial lo inspire a crear su propio tipo de superposiciones de imágenes con formas también.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial y descargarlo, echemos un vistazo rápido al resultado que puede esperar en diferentes tamaños de pantalla.

Escritorio

Teléfono

Descargue las superposiciones de imágenes en forma GRATIS

Para poner sus manos sobre las superposiciones de imágenes con forma, primero deberá descargarlas usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 y viernes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Acercarse

• Las superposiciones de imágenes con forma que puede encontrar en la carpeta de descarga están listas para usar si las combina con una fila blanca y / o un color de fondo de sección
• Si desea ajustar las superposiciones de la imagen con forma de acuerdo con otro color de fondo, deberá exportar las superposiciones de la imagen con forma en otro color utilizando el archivo ilustrador que se incluye en la descarga anterior.
• Le mostraremos cómo cambiar el color de la superposición de la imagen con forma en la primera parte del tutorial (usando Adobe Illustrator)
• Luego, pasaremos a Divi y cargaremos una de las superposiciones de imágenes con forma a un módulo de imagen.
• También agregaremos una imagen de fondo y un fondo degradado al Módulo de imagen que se mostrará a través de la superposición de la imagen con forma.

Modificación de superposiciones de imágenes con forma al color de fondo de la sección con Adobe Illustrator

Abra el archivo de Illustrator en la carpeta de descarga

Como se mencionó en la sección de enfoque de esta publicación, si desea usar las superposiciones en forma de imagen sobre un fondo blanco, está listo para usar simplemente los archivos PNG que puede encontrar en la carpeta de descargas. Sin embargo, si desea utilizar las superposiciones de imágenes con forma en un color de fondo de fila y / o sección diferente, deberá cambiar el color manualmente utilizando el archivo de Adobe Illustrator que también se incluye en la carpeta de descarga. Cambiar el color toma poco o nada de tiempo y le permite usar las superposiciones de imágenes en forma literalmente en cualquier sitio web que cree, así que veamos los pasos. En primer lugar, deberá abrir el archivo de Adobe Illustrator.

Seleccione la superposición de forma de imagen de su elección

Una vez que haya abierto el archivo, encontrará 9 mesas de trabajo diferentes con las superposiciones de imágenes en forma que puede usar para cualquier tipo de propósito. Seleccione el que desea editar.

Cambiar el color para que coincida con el color de fondo de la sección

Continúe cambiando el color de la forma al mismo color de fondo que planea usar para su fila y / o sección.

Seleccionar mesa de trabajo

Una vez que se modifica el color, puede seleccionar toda la mesa de trabajo que contiene la superposición de la imagen con forma.

Guardar superposición de imagen en forma PNG para la Web

Y guárdelo como un archivo de imagen PNG para web yendo a Archivo> Exportar> Guardar para Web .

¡Empecemos a crear!

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

¡Es hora de cambiar a Divi y crear el resultado! Cree una nueva página o abra una existente y agregue una nueva sección regular.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de imagen a la columna 1

Subir superposición de imagen con forma

El único módulo que necesitaremos en la columna 1 es un módulo de imagen. Aquí es donde sucederá toda la magia. Comenzaremos cargando la superposición de imágenes con forma. Notarás que una parte de la imagen es completamente transparente. Esto permitirá que la imagen de fondo y el fondo degradado se muestren en los próximos pasos.

Fondo degradado

Continúe y agregue un fondo degradado de su elección a continuación.

• Color 1: # aa2bff
• Color 2: # 09f7eb

Imagen de fondo

Y cargue una imagen de fondo PNG, o simplemente una normal si no desea que se vea el fondo degradado. También puede descargar las ilustraciones que estamos usando yendo a la siguiente publicación que hemos creado sobre cómo cambiar un fondo degradado al pasar el mouse.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: centro inferior
• Repetición de imagen de fondo: sin repetición

Dimensionamiento

Otro paso importante para que este tutorial funcione es habilitar la opción 'Forzar ancho completo' en la configuración de tamaño del Módulo de imagen. Esto asegurará que el fondo degradado y la imagen de fondo solo se muestren a través del área transparente de la superposición de la imagen con forma.

• Forzar ancho completo: Sí

Agregar módulo de texto de título a la columna 2

Agregar contenido

Pasemos a la segunda columna. Aquí, el primer módulo que necesitaremos es un título Módulo de texto. Agregue algún contenido de su elección.

Configuración de texto

Luego, vaya a la configuración del texto del encabezado y realice algunos cambios.

• Fuente del encabezado 2: Antic Didone
• Peso de fuente del encabezado 2: Negrita
• Tamaño del texto del encabezado 2: 45px
• Espacio entre letras del encabezado 2: -2px

Espaciado

Agregue también un margen superior personalizado.

• Margen superior: 100 px

Agregar módulo de texto descriptivo a la columna 2

Agregar contenido

El segundo módulo que necesitaremos es un módulo de texto descriptivo. Ingrese algún contenido de su elección.

Configuración de texto

Luego, vaya a la configuración de texto y cambie la orientación del texto del módulo.

• Orientación del texto: justificar

Dimensionamiento

Cambie también el ancho en la configuración de tamaño.

• Ancho: 63%

Agregar módulo de botones a la columna 2

Agregar copia

El siguiente y último módulo que necesitaremos es un módulo de botones. Ingrese algún contenido de su elección.

Configuración de botones

Continúe yendo a la configuración del botón y cambiando la apariencia del botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 17px
• Color del texto del botón: #ffffff
• Color de degradado 1: # aa2bff
• Color de degradado 2: # 09f7eb
• Dirección del gradiente: 111 grados

• Ancho del borde del botón: 0px
• Radio del borde del botón: 100 px
• Espacio entre letras del botón: -2px
• Peso de fuente: Ultra Bold
• Estilo de fuente: mayúsculas

Espaciado

Agregue un poco de relleno personalizado adicional al botón también.

• Acolchado superior: 10px
• Acolchado inferior: 10px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Sombra de la caja

Por último, pero no menos importante, complete el diseño agregando una sutil sombra de arco al botón.

• Fuerza de desenfoque de sombra de caja: 50px
• Fuerza de propagación de la sombra de caja: -5px

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Teléfono

Pensamientos finales

En esta publicación, hemos compartido 9 superposiciones de imágenes con formas GRATUITAS para Divi que puede usar para cualquier tipo de sitio web que esté creando. Esperamos que este tutorial lo inspire a crear sus propias superposiciones de imágenes con formas únicas que pueda reutilizar constantemente. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!