Cómo crear elegantes secciones de información de producto de imagen dividida con Divi

Avance

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

Escritorio

Móvil

Descargue el diseño de imagen dividida gratis GRATIS

Para poner sus manos en el diseño gratuito de imagen dividida, 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.

Suscríbete a nuestro canal de Youtube

Cree un efecto de imagen dividida con Photoshop e Illustrator

Antes de comenzar con Divi, debe tener un conjunto de imágenes listas para cargar. Dado que se trata de un efecto de imagen dividida, necesita dos imágenes que encajen bien juntas. Necesitará dos tamaños de imagen diferentes: 960 px de ancho por 1200 px de alto para escritorio y 600 px de ancho por 1200 px de alto para tabletas y dispositivos móviles.

Paso 1: selecciona las imágenes

Seleccione dos imágenes HD de sus productos.

Paso 2: borra el fondo

Borra los fondos para crear recortes. Puedes usar cualquier programa que quieras. Pero aquí hay una guía paso a paso para Photoshop .

Paso 3: abre un nuevo proyecto en Illustrator

Abra un nuevo proyecto en Illustrator, 1920 px de ancho por 1200 px de alto.

Paso 4: agregue una guía vertical.

Agregue una guía vertical a través del centro del lienzo vacío. Asegúrate de que esté justo en el centro.

Paso 5: Importe o coloque las imágenes recortadas

Coloque ambas imágenes recortadas en el lienzo.

Paso 6: Comience a visualizar la división

Haz dos duplicados de cada imagen. Use la función de recorte para dividirlos por la mitad en diferentes puntos. Primero por el centro, y luego un poco menos y un poco más para los duplicados. Ahora tendrás tres versiones divididas de cada imagen.

Paso 7: finaliza el efecto

Usando los diferentes recortes divididos, encuentre la mejor composición para sus imágenes. Asegúrese de que el borde recto de cada imagen esté justo en la guía central del lienzo. Intente cambiar el tamaño de las imágenes para que se ajusten mejor. Recuerde que el lienzo tiene el tamaño de una pantalla de ancho completo, así que ajuste el tamaño de las imágenes en consecuencia.

Paso 8: recortar la mitad y guardar

Cuando termine el diseño, deshágase de los recortes adicionales. Vuelva a verificar que el borde recto de cada imagen toque la guía central. Cree dos mesas de trabajo nuevas y cambie su tamaño para que se ajusten a cada lado, asegurándose de que estén separadas justo en la guía central. Exporte para web, una mesa de trabajo a la vez y guárdela como .png. Ahora, tienes dos imágenes diferentes. Ambos 960px de ancho y 1200px de alto.

Paso 9: cambiar el tamaño para tabletas y dispositivos móviles

Cambie el tamaño de ambas imágenes a 960 px de ancho por 1200 px de alto. Asegúrate de recortar solo el fondo transparente, no toques la imagen. Lo hice en Photoshop cambiando el tamaño del lienzo con el ancla al costado de la imagen.

¡Empecemos a Recrear!

Agregar nueva sección

Fondo

Ahora que hemos pasado por la primera parte del tutorial, ¡es hora de comenzar con Divi! Cree una nueva página o agregue una nueva sección a una página existente. Agregue un fondo degradado a la sección.

• Fondo: Gradiente
• Color uno: Blanco hueso #f7f7f7
• Color dos: verde fresco #b7e778
• Dirección del gradiente: 90 grados
• Posición inicial y final: 50%

Espaciado

Cambie la configuración de espaciado de la sección a continuación.

• Acolchado superior: 5vw
• Acolchado inferior: 12vw

Visibilidad

Finalmente, ajusta la visibilidad.

• Desbordamiento vertical y horizontal: oculto

Agregar 1ra Fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Ajuste la configuración de tamaño de la fila.

• Ancho del canalón: 2
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Agregue también algunos valores de relleno personalizados.

• Acolchado superior e inferior: 2vw

Configuración de la columna 1

Transformar

Vaya a la configuración de la columna 1 a continuación y cambie los valores de traducción de transformación.

• Transformar Traducir: -2vw eje y

Configuración de la columna 2

Transformar

Haz lo mismo para la columna 2.

• Transformar Trasladar: 2vw eje x

Agregar módulo de texto a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un módulo de texto a la columna 1 con algún contenido H2 de su elección.

Texto del título

En la pestaña de diseño, cambie la configuración del texto del título.

• Nivel de texto de encabezado: H2
• Fuente H2: Corben
• Alineación H2:
  
  • Escritorio: Izquierda
  • Tableta + Teléfono: Centro
• Color de texto H2: Gris muy oscuro #3a3a3a
• Tamaño de texto H2:
  
  • Escritorio: 7vw
  • Tableta + teléfono: 16vw

Espaciado

Luego, ajuste el espaciado.

• Margen derecho:
  
  • Escritorio: -1vw
  • Tableta + Teléfono: 0vw
• Relleno derecho:
  
  • Tableta + Teléfono: 35vw

Agregar módulo de texto a la columna 2

Agregar contenido

Ahora, agregue un módulo de texto a la segunda columna. Inserte algún contenido de H2 de su elección.

Texto del título

Luego, diseñe el texto del encabezado de la siguiente manera.

• Nivel de texto de encabezado: H2
• Fuente H2: Corben
• Alineación H2:
  
  • Escritorio: Izquierda
  • Tableta + Teléfono: Derecha
• Color de texto H2: Gris muy oscuro #3a3a3a
• Tamaño de texto H2:
  
  • Escritorio: 7vw
  • Tableta + Teléfono: 14vw

Espaciado

Finalmente, ajuste el espaciado.

• Margen superior:
  
  • Tableta: -12vw
  • Teléfono: -14vw
• Margen izquierdo:
  
  • Escritorio + Tableta: -0.5vw
• Relleno derecho:
  
  • Tableta + Teléfono: 17vw

Agregar segunda fila

Estructura de la columna

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

Dimensionamiento

Abra la configuración de la fila y ajuste la configuración de tamaño.

• Ancho del canalón: 1
• Igualar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Modifique la configuración de espaciado a continuación.

• Margen superior:
  
  • Escritorio: -15vw
  • Tableta: -36vw
  • Teléfono: -40vw
• Acolchado superior e inferior:
  
  • Escritorio: 0vw
  • Tableta: 9vw
  • Teléfono: 12vw

CSS personalizado

Complete la configuración de la fila agregando una sola línea de código CSS al elemento principal de la fila. Esto ayudará a mantener las imágenes juntas.

• Elemento principal: pantalla: flex;

Agregar módulo de imagen a la columna 1

Añadir imagen

Agregue la mitad de la imagen izquierda a la columna 1.

• Imagen:
  
  • Escritorio: la imagen de 960 px de ancho
  • Tableta + Teléfono: La imagen de 600px de ancho

Dimensionamiento

Haga que el módulo de imagen sea de ancho completo.

• Forzar ancho completo: sí

Agregar módulo de imagen a la columna 2

Añadir imagen

Agregue la mitad de la imagen derecha a la columna 2.

• Imagen:
  
  • Escritorio: la imagen de 960 px de ancho
  • Tableta + Teléfono: La imagen de 600px de ancho

Dimensionamiento

Haga que este módulo de imagen también sea de ancho completo.

• Forzar ancho completo: sí

Añadir tercera fila

Estructura de la columna

¡A la siguiente fila! Elija la siguiente estructura de columna:

Dimensionamiento

Ajuste el tamaño de la fila de la siguiente manera:

• Ancho del canalón: 4
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Luego, ajuste el espaciado.

• Margen superior:
  
  • Escritorio: -38vw
  • Tableta + Teléfono: -14vw

Configuración de la columna 1

Espaciado

Antes de agregar módulos, ajuste el espaciado en las columnas. Comience con la columna 1.

• Relleno izquierdo:
  
  • Escritorio: 7vw
  • Tableta + Teléfono: 12vw
• Relleno derecho:
  
  • Escritorio: 15vw
  • Tableta + Teléfono: 12vw

Configuración de la columna 2

Espaciado

Luego, ajuste la configuración de espaciado de la columna 2

• Relleno izquierdo:
  
  • Escritorio: 15vw
  • Tableta + Teléfono: 12vw
• Relleno derecho:
  
  • Escritorio: 7vw
  • Tableta + Teléfono: 12vw

Agregar módulo de texto a la columna 1

Agregar contenido

Agregue un módulo de texto a la columna 1 y agregue algún contenido H3 de su elección.

Fondo

Cambia el color de fondo.

• Color de fondo
• Color: Gris muy oscuro #333333

Texto del título

Luego, aplique estilo al texto del título.

• Nivel de texto de encabezado: H3
• Fuente H3: Corben
• Alineación H3: Centro
• Color de fuente H3: blanquecino #f7f7f7
• Tamaño de fuente H3:
  
  • Escritorio: 2.2vw
  • Tableta: 6.4vw
  • Teléfono: 7vw
• Espaciado entre letras H3: 3 px

Espaciado

Agregue algunos valores de espaciado personalizados a continuación.

• Acolchado superior:
  
  • Escritorio + Tableta: 0.2vw
  • Teléfono: 1vw
• Acolchado inferior:
  
  • Escritorio: 0.5vw
  • Tableta: 1.2vw
  • Teléfono: 1vw

Borde

Complete la configuración del módulo agregando algunas esquinas redondeadas.

• Esquinas redondeadas: 1vw las cuatro esquinas

Duplique el módulo de texto y arrástrelo a la columna 2

Ahora, duplique el módulo de texto y arrástrelo a la columna 2.

Cambiar contenido

Por supuesto, deberá cambiar el contenido en el módulo de texto duplicado.

Agregue el módulo de llamada a la acción a la columna 1

Agregar contenido

Debajo del módulo de texto en la columna 1, agregue un módulo de llamada a la acción con algún contenido de su elección.

• Título
• Botón
• Cuerpo

Añadir enlace

Continúe agregando un enlace al botón de la CTA.

Fondo

Y agregue un color de fondo a la tableta y al móvil.

• Color de fondo:
  
  • Tableta + Teléfono: Blanquecino #f7f7f7

Texto del título

En la pestaña de diseño, aplique estilo a la configuración de texto H4.

• Nivel de texto de encabezado: H4
• Fuente H4: Open Sans
• H4 Color: Gris muy oscuro #333333
• Tamaño de texto H4:
  
  • Escritorio: 1.4vw
  • Tableta: 4.5vw
  • Teléfono: 7vw
• Espaciado entre letras H3: 2px
• Altura de la línea H3: 1,5 em

Cuerpo de texto

Cambie la configuración del texto del cuerpo a continuación.

• Fuente del cuerpo: Open Sans
• Alineación del cuerpo del texto: Centro
• Color del cuerpo del texto: Gris muy oscuro #333333
• Tamaño de fuente del cuerpo:
  
  • Escritorio: 0.9vw
  • Tableta: 3vw
  • Teléfono: 4vw
• Altura de la línea del cuerpo: 1,8 em

Botón

Dale estilo al botón también.

• Tamaño del texto del botón:
  
  • Escritorio: 1vw
  • Tableta: 2.2vw
  • Teléfono: 3.8vw
• Color de fuente del botón: Gris muy oscuro #333333
• Color de fondo del botón:
  
  • Tableta + Móvil: Fresh Green #b7e778
• Ancho del borde del botón:
  
  • Escritorio: 1px
• Color del borde del botón:
  
  • Escritorio: gris muy oscuro #333333
• Radio del borde del botón: 1vw

Espaciado

Y agregue algunos valores de espaciado personalizados.

• Margen superior:
  
  • Escritorio + Tableta: -2vw
  • Teléfono: 3vw
• Relleno izquierdo y derecho:
  
  • Escritorio: 0vw
  • Tableta + Teléfono: 4vw

Borde

Por último, pero no menos importante, aplique estilo al borde en diferentes tamaños de pantalla.

• Esquinas redondeadas: 1vw todas las esquinas
• Estilos de borde:
  
  • Tablet + Teléfono: los cuatro lados
• Ancho del borde:
  
  • Tableta + Teléfono: 1px
• Color del borde:
  
  • Tableta + Teléfono: Gris muy oscuro #333333

Duplique el módulo de llamada a la acción y arrástrelo a la columna 2

Duplique el módulo de llamada a la acción y arrástrelo a la columna 2.

Cambiar contenido

Para completar el diseño, cambie el contenido en el módulo de llamado a la acción duplicado y ¡listo!

Avance

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

Escritorio

Móvil

Conclusión

En esta publicación, le mostramos cómo crear una sección de información de producto de imagen dividida con Divi. Hemos explicado cómo crear las imágenes divididas usando el software de edición de imágenes y continuamos usando los archivos en nuestro diseño Divi. Esperamos que este diseño lo inspire a ser creativo con sus propias imágenes de productos. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!