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


Ser creativo con las imágenes definitivamente puede ayudar a llamar la atención sobre sus CTA. En esta publicación, le mostraremos cómo recrear una hermosa sección de información de producto de imagen dividida con Divi. El diseño que estamos recreando es hermoso, llamativo y se puede personalizar según sus necesidades. ¡También podrás descargar el archivo JSON del diseño de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargar The Free Split-Image Layout 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 nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

Crear efecto de imagen dividida con Photoshop e Illustrator

Antes de comenzar con Divi, debe tener un conjunto de imágenes listas para cargar. Como se trata de un efecto de imagen dividida, necesita dos imágenes que encajen bien. 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. Puede usar cualquier programa que desee. Pero Aquí hay una guía paso a paso para Photoshop.

Paso 3: abrir 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: Importar o colocar 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 a través del centro, y luego un poco menos y un poco más para los duplicados. Ahora tendrá tres versiones divididas de cada imagen.

Paso 7: finalizar 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, por lo tanto, ajuste el tamaño de las imágenes en consecuencia.

Paso 8: recortar la mitad y guardar

Cuando el diseño esté terminado, elimine los recortes adicionales. Verifique que el borde recto de cada imagen toque la guía central. Cree dos nuevas mesas de trabajo y cambie su tamaño para que se ajusten a cada lado, asegurándose de que estén separadas directamente en la guía central. Exportar para web, una mesa de trabajo a la vez y guardar como .png. Ahora tienes dos imágenes diferentes. Tanto 960 px de ancho como 1200 px de alto.

Paso 9: Cambiar el tamaño para tableta y móvil

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.

¡Comencemos a recrearnos!

Agregar nueva sección

Antecedentes

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 roto # f7f7f7
  • Color dos: verde fresco # b7e778
  • Dirección de degradado: 90 grados
  • Posición inicial y final: 50%

Espaciado

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

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

Visibilidad

Finalmente, ajuste la visibilidad.

  • Desbordamiento vertical y horizontal: oculto

Añadir primera fila

Estructura de columna

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

Dimensionamiento

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

  • Ancho de canal: 2
  • Ancho: 100%
  • Ancho Máx .: 100%

Espaciado

Agregue algunos valores de relleno personalizados también.

  • Acolchado superior e inferior: 2vw

Configuración de 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 columna 2

Transformar

Haga lo mismo para la columna 2.

  • Transformar Traducir: 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 encabezado.

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

Espaciado

Luego, ajuste el espacio.

  • 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 H2 de su elección.

Texto del título

Luego, diseñe el texto del título de la siguiente manera.

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

Espaciado

Finalmente, ajuste el espacio.

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

Agregar segunda fila

Estructura de columna

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

Dimensionamiento

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

  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 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 juntas las imágenes.

  • Elemento principal: pantalla: flex;
display: 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 panorámica de 960 píxeles
    • Tableta + teléfono: la imagen de 600 píxeles de ancho

Dimensionamiento

Haga el módulo de imagen de ancho completo.

  • Forzar ancho completo: sí

Agregar módulo de imagen a la columna 2

Añadir imagen

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

  • Imagen:
    • Escritorio: la imagen panorámica de 960 píxeles
    • Tableta + teléfono: la imagen de 600 píxeles de ancho

Dimensionamiento

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

  • Forzar ancho completo: sí

Agregar 3ra fila

Estructura de columna

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

Dimensionamiento

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

  • Ancho de canal: 4
  • Ancho: 100%
  • Ancho Máx .: 100%

Espaciado

Luego, ajuste el espacio.

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

Configuración de columna 1

Espaciado

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

  • Acolchado Izquierdo:
    • Escritorio: 7vw
    • Tableta + teléfono: 12vw
  • Relleno derecho:
    • Escritorio: 15vw
    • Tableta + teléfono: 12vw

Configuración de columna 2

Espaciado

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

  • Acolchado 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 contenido H3 de su elección.

Antecedentes

Cambia el color de fondo.

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

Texto del título

Luego, peina el texto del encabezado.

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

Espaciado

Agregue algunos valores de espaciado personalizados a continuación.

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

Frontera

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

  • Esquinas redondeadas: 1vw las cuatro esquinas

Módulo de texto duplicado y arrastre 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.

Agregar un llamado a la acción del módulo a la columna 1

Agregar contenido

Debajo del módulo de texto en la columna 1, agregue un módulo de llamado 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 CTA.

Antecedentes

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

  • Color de fondo:
    • Tablet + Teléfono: Off White # f7f7f7

Texto del título

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

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

Cuerpo de texto

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

  • Fuente del cuerpo: Open Sans
  • Alineación del texto del cuerpo: centro
  • Color del texto del cuerpo: 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.8em

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:
    • Tablet + 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

Frontera

Por último, pero no menos importante, diseñe el borde en diferentes tamaños de pantalla.

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

Módulo de llamada a la acción duplicado y arrastre 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 duplicado de llamado a la acción 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. Explicamos 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!