con las modas WooCommerce en Divi, hay toneladas de diseños que puedes hacer. En este tutorial Divi, intentaremos inspirarte con otra idea de diseño que puedas lograr usando solo las opciones integradas de Divi. Específicamente, le mostraremos cómo enmarcar un producto en su imagen de fondo. El resultado depende completamente de tu imagen de fondo, pero si sigues este tutorial sabrás qué pasos seguir para personalizar la técnica a tu medida. Sitio web! ¡También podrá descargar el archivo JSON del tutorial de forma gratuita!

vista

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

Diseño de imagen de producto Divi

1. Configure la sección con una imagen de fondo receptiva

Añadir una nueva sección

Imagen de fondo adaptable

El primer paso para enmarcar un producto en su imagen de fondo es agregar una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y descargue imágenes de fondo receptivas. Puede encontrar las dos imágenes que usamos en la carpeta que pudo descargar al comienzo de este artículo.

  • Imagen de fondo: paisaje
  • Tamaño de la imagen de fondo: Ajustar
  • Posición de la imagen de fondo: centro superior
Agregar una sección de fondo divi
  • Imagen de fondo: cuadrado
Agregar una imagen de fondo cuadrada

espaciamiento

Vaya a la pestaña de diseño y agregue relleno superior e inferior personalizado en diferentes tamaños de pantalla.

  • Acolchado superior: 3vw (escritorio), 0vw (tableta y teléfono)
  • Acolchado inferior: 3vw (escritorio), 7vw (tableta), 18vw (teléfono)
Configurar el relleno divi

Frontera

Complete los parámetros de la sección agregando un borde.

  • Ancho del borde: 2vw
  • Color del borde: #ffffff
Configuración de la sección Divi

2. Agregue diferentes elementos de marco a la columna

Añadir una nueva linea

Estructura de la columna

Ahora, como puede ver en la imagen de fondo, el producto se encuentra en el lado derecho de la imagen de fondo. Elegiremos una estructura de columna correspondiente para una nueva fila en nuestra sección. En este caso, es la siguiente estructura de columnas:

Personalizar la estructura de la columna divi

apresto

Sin agregar módulos todavía, abra los parámetros de línea y modifique los parámetros de dimensionamiento en consecuencia:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 1
  • Ecualizar alturas de columna: Sí
  • Ancho: 100%
  • Ancho máximo: 100%
Personaliza la columna divi

espaciamiento

Complete los parámetros de línea agregando relleno izquierdo y derecho personalizado.

  • Relleno izquierdo: 5vw
  • Relleno derecho: 5vw
Tutorial de configuración de Divi Line

Agregue un módulo de texto a la columna 2

Deje el área de contenido vacía

¡Es hora de comenzar a agregar módulos! Para permitir que el producto se muestre, usaremos un módulo de texto vacío.

Agregar módulo de texto columna 2 divi

espaciamiento

Luego aumentaremos la altura del módulo en la configuración de espaciado.

  • Acolchado superior: 22vw (escritorio), 39vw (tableta), 35vw (teléfono)
  • Acolchado inferior: 15vw (escritorio), 39vw (tableta), 35vw (teléfono)
Espaciado de línea del módulo Divi

Frontera

Y también agregaremos un borde.

  • Ancho del borde: 3vw
  • Ancho del borde inferior: 1vw
  • Color del borde: rgba (255,255,255,0,7)
Configuración de borde Divi

Agregue el módulo de título Woo a la columna 2

Contenido dinámico

Pasemos al siguiente módulo, que es un módulo de título de Woo. Seleccione un producto de su elección.

  • Producto: Buscar en la lista
Módulo woo titire divi

Color de fondo

Utilice el siguiente color de fondo:

  • Color de fondo: rgba (255,255,255,0,7)
Personalizar el color de fondo de divi

Configuración del texto del título

Cambie a la pestaña de diseño del módulo y cambie la configuración del texto H3 en consecuencia:

  • Nivel de título: H3
  • Fuente del título: Work Sans
  • Tamaño del texto del título: 2.5vw (escritorio), 5vw (tableta), 6vw (teléfono)
Personalizar el módulo de título de fuente woocommerce

espaciamiento

También agregue valores de relleno personalizados.

  • Acolchado superior: 1vw
  • Relleno inferior: 1vw
  • Relleno izquierdo: 3vw
  • Relleno derecho: 3vw
Configurar el espaciado del módulo de título divi

Agregue el módulo de descripción de Woo a la columna 2

Contenido dinámico

El siguiente módulo que necesitamos es un módulo de descripción de Woo. Seleccione un producto de su elección.

  • Producto: Buscar en la lista
  • Tipo de descripción: breve descripción
Módulo woo descripción divi

Color de fondo

Cambie el color de fondo del módulo en consecuencia:

  • Color de fondo: rgba (255,255,255,0,7)
Módulo woo descripción fondo divi

Configuraciones de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

  • Fuente de texto: Open Sans
  • Tamaño del texto: 0.9vw (escritorio), 2.2vw (tableta), 2.8vw (teléfono)
  • Altura de la línea de título: 2,2 em
Personalizar la configuración de texto divi

espaciamiento

Complete los parámetros del módulo agregando valores de relleno personalizados.

  • Acolchado superior: 1vw
  • Relleno inferior: 1vw
  • Relleno izquierdo: 3vw
  • Relleno derecho: 3vw
Configuración de descripción woo

Agregue el módulo de texto Woo Price a la columna 2

Contenido dinámico

A continuación, tenemos el módulo de texto de precios de Woo. Seleccione un producto de su elección.

  • Producto: Buscar en la lista
Ajuste del módulo divi del precio de Woo

Color de fondo

Cambia el color de fondo.

  • Color de fondo: rgba (255,255,255,0,7)
Módulo divi de ajuste de precio woo trasero

Configuración de texto de precio

Cambie a la pestaña de diseño del módulo y cambie la configuración del texto del precio en consecuencia:

  • Política de precios: trabajo sin
  • Color del texto del precio: # 000000
  • Precio Tamaño del texto: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
Ajuste de fuente del módulo divi de precio woo

espaciamiento

Complete los parámetros del módulo agregando valores de relleno personalizados.

  • Acolchado superior: 2vw
  • Relleno inferior: 2vw
  • Relleno izquierdo: 3vw
  • Relleno derecho: 3vw
Ajuste de espaciado del módulo divi del precio de Woo

Añadir Woo Añadir a la cesta Módulo en la columna 2

Contenido dinámico

Pasemos al siguiente y último módulo, que es el módulo Woo Add To Cart. Seleccione un producto de su elección.

  • Producto: Buscar en la lista
Añadir al carrito módulo divi

Color de fondo

Cambia el color de fondo.

  • Color de fondo: rgba (255,255,255,0,7)
Ajuste trasero del módulo Divi añadir al carrito

Configuraciones de campo

Modifique también los parámetros de los campos del módulo.

  • Color de fondo de los campos: #ffffff
  • Color del texto del campo: # 000000
  • Fuente de campo: Open Sans
Personalización de los campos del módulo añadir al carrito divi
  • Ancho del borde inferior de los campos: 1px
  • Color del borde inferior de los campos: # 000000
Personalización del borde del módulo Divi

Configuraciones de botones

Continúe con el estilo del botón de la siguiente manera:

  • Use estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 1.1vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
  • Color de texto del botón: #ffffff
  • Color de fondo del botón: # 000000
  • Ancho del borde del botón: 0px
Módulo de botones de personalización divi agregar a la configuración del carrito
  • Radio del borde del botón: 10vw
  • Fuente del botón: Abrir sin
Módulo de botón de icono de personalización divi añadir al carrito
  • Acolchado superior: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)
  • Relleno izquierdo: 4vw (escritorio), 6vw (tableta), 10vw (teléfono)
  • Relleno derecho: 4vw (escritorio), 6vw (tableta), 10vw (teléfono)
Módulo de margen de personalización divi add tocart divi

espaciamiento

Y complete los parámetros del módulo agregando un margen personalizado y valores de relleno.

  • Margen inferior: 2vw
  • Acolchado superior: 3vw
  • Relleno inferior: 3vw
  • Relleno izquierdo: 3vw
  • Relleno derecho: 3vw
Personalización del espaciado del módulo Divi

3. Columna de estilo, cambio de tamaño y reposicionamiento

Modificar los parámetros de la columna 2

Fondo degradado

Ahora, la última parte de este tutorial nos permite unir los diferentes módulos. Abra la configuración de la columna 2 y use el siguiente fondo degradado:

  • Color 1: rgba (43,135,218,0)
  • Color 2: #ffffff
  • Tipo de gradiente: lineal
  • Posición inicial: 39%
Personalización del módulo de fondo divi

Frontera

También agregue esquinas redondeadas.

  • Todas las esquinas: 1vw
Módulo divi de personalización de bordes redondeados

Caja de sombra

Creamos profundidad agregando también una sombra de cuadro sutil.

  • Fuerza de desenfoque de sombra de caja: 100 px
  • Color de sombra: rgba (0,0,0,0,24)
Personalización de la sombra de la columna Divi

Transformador Traducir

Y completaremos la configuración de la columna cambiando los valores de conversión de transformación en diferentes tamaños de pantalla. Este paso nos permite reposicionar la columna como queramos. Cuando use su propia imagen de fondo, definitivamente apreciará esta opción.

  • Derecha: 0px (oficina), 9vw (tableta y teléfono)
  • Abajo: -5vw (oficina), 0vw (tableta y teléfono)
Personalizar la transformación del módulo divi

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

Resultado final del módulo Divi

Consideraciones finales

En este artículo, le mostramos cómo enmarcar un producto en su imagen de fondo utilizando las opciones y módulos integrados de Divi. WooCommerce incluido en Divi Builder. El enfoque que adopte depende de la imagen de fondo que esté usando, pero leer este tutorial lo ayudará a comprender el enfoque general. ¡También pudo descargar el archivo JSON del diseño de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.