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.
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
- Imagen de fondo: cuadrado
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)
Frontera
Complete los parámetros de la sección agregando un borde.
- Ancho del borde: 2vw
- Color del borde: #ffffff
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:
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%
espaciamiento
Complete los parámetros de línea agregando relleno izquierdo y derecho personalizado.
- Relleno izquierdo: 5vw
- Relleno derecho: 5vw
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.
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)
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)
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
Color de fondo
Utilice el siguiente color de fondo:
- Color de fondo: rgba (255,255,255,0,7)
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)
espaciamiento
También agregue valores de relleno personalizados.
- Acolchado superior: 1vw
- Relleno inferior: 1vw
- Relleno izquierdo: 3vw
- Relleno derecho: 3vw
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
Color de fondo
Cambie el color de fondo del módulo en consecuencia:
- Color de fondo: rgba (255,255,255,0,7)
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
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
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
Color de fondo
Cambia el color de fondo.
- Color de fondo: rgba (255,255,255,0,7)
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)
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
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
Color de fondo
Cambia el color de fondo.
- Color de fondo: rgba (255,255,255,0,7)
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
- Ancho del borde inferior de los campos: 1px
- Color del borde inferior de los campos: # 000000
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
- Radio del borde del botón: 10vw
- Fuente del botón: Abrir sin
- 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)
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
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%
Frontera
También agregue esquinas redondeadas.
- Todas las esquinas: 1vw
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)
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)
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
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.