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 puede personalizarse según sus necesidades.

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

 

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. Puedes usar cualquier programa que desees. 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: Recorta la mitad y guarda

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 mesas de trabajo nuevas y redimensionelas 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úrese de recortar solo el fondo transparente, no toque la imagen. Lo hice en Photoshop cambiando el tamaño del lienzo con el ancla al costado de la imagen.

¡Comencemos a recrear!

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 espaciado 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 encabezado de la siguiente manera.

  • Nivel de texto del encabezado: H2
  • Fuente H2: Corben
  • Alineación H2:
    • Escritorio: izquierda
    • Tableta + 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;
01
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
    • Tablet + 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
    • Tablet + 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, dale estilo al texto del encabezado.

  • Nivel de texto del 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
  • Espaciado de 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 al Módulo de Acción 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

Agregar 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 llamada a la acción y ¡listo!

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!