Cómo enmarcar un producto en su imagen de fondo con las opciones de columna de Divi
Publicado: 2020-01-26Con los módulos WooCommerce de Divi, hay toneladas de diseños que puedes lograr usando Divi. En el tutorial de Divi de hoy, intentaremos inspirarte con otra idea de diseño que puedas lograr usando solo las opciones integradas de Divi. Más específicamente, le mostraremos cómo enmarcar un producto en su imagen de fondo. El resultado depende completamente de su imagen de fondo, pero si sigue este tutorial, ¡sabrá qué pasos seguir para personalizar la técnica para su propio sitio web! ¡También podrás descargar el archivo JSON del tutorial 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
Descargue el diseño del producto The Frame GRATIS
Para poner sus manos en el diseño del producto de marco libre, 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 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
1. Configurar sección con imagen de fondo receptiva
Agregar nueva sección
Imagen de fondo receptiva
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 cargue imágenes de fondo receptivas. Puede encontrar las dos imágenes que hemos usado en la carpeta que pudo descargar al principio de esta publicación.
- 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
Espaciado
Vaya a la pestaña de diseño y agregue un 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 la configuración de la sección agregando un borde.
- Ancho del borde: 2vw
- Color del borde: #ffffff
2. Agregue diferentes elementos de marco a la columna
Agregar nueva fila
Estructura de la columna
Ahora, como puede observar en la imagen de fondo, el producto se encuentra en el lado derecho de la imagen de fondo. Elegiremos una estructura de columna coincidente para una nueva fila en nuestra sección. En este caso, esa es la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño en consecuencia:
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ecualizar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Complete la configuración de la fila agregando un relleno personalizado a la izquierda y a la derecha.
- Acolchado izquierdo: 5vw
- Acolchado derecho: 5vw
Agregar módulo de texto a la columna 2
Dejar el cuadro de contenido vacío
¡Es hora de comenzar a agregar módulos! Para permitir que el producto se muestre, usaremos un módulo de texto vacío.
Espaciado
A continuación, 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)
Agregar 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
Vaya a la pestaña de diseño del módulo y modifique la configuración del texto H3 en consecuencia:
- Nivel de encabezado del título: H3
- Fuente del título: Work Sans
- Tamaño del texto del título: 2.5vw (escritorio), 5vw (tableta), 6vw (teléfono)
Espaciado
Agregue también algunos valores de relleno personalizados.
- Acolchado superior: 1vw
- Acolchado inferior: 1vw
- Acolchado izquierdo: 3vw
- Acolchado derecho: 3vw
Agregar 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: Descripción breve
Color de fondo
Cambie el color de fondo del módulo en consecuencia:
- Color de fondo: rgba (255,255,255,0.7)
Configuración de texto
Vaya a la pestaña de diseño del módulo y modifique 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.2em
Espaciado
Complete la configuración del módulo agregando algunos valores de relleno personalizados.
- Acolchado superior: 1vw
- Acolchado inferior: 1vw
- Acolchado izquierdo: 3vw
- Acolchado 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 Woo Price. Seleccione un producto de su elección.
- Producto: Buscar en la lista
Color de fondo
Modifica el color de fondo.
- Color de fondo: rgba (255,255,255,0.7)
Configuración de texto de precio
Vaya a la pestaña de diseño del módulo y cambie la configuración del texto del precio en consecuencia:
- Fuente de precio: Work Sans
- Precio Color del texto: # 000000
- Precio Tamaño del texto: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
Espaciado
Complete la configuración del módulo agregando algunos valores de relleno personalizados.
- Acolchado superior: 2vw
- Acolchado inferior: 2vw
- Acolchado izquierdo: 3vw
- Acolchado derecho: 3vw
Agregue Woo Add To Cart Module a 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)
Configuración de campos
Modifique también la configuración de los campos del módulo.
- Color de fondo de los campos: #ffffff
- Color del texto de los campos: # 000000
- Fuente Fields: Open Sans
- Ancho del borde inferior de los campos: 1 px
- Color del borde inferior de los campos: # 000000
Configuración de botones
Continúe diseñando el botón de la siguiente manera:
- Usar 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 del 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: Open Sans
- Acolchado superior: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)
- Acolchado izquierdo: 4vw (escritorio), 6vw (tableta), 10vw (teléfono)
- Relleno derecho: 4vw (escritorio), 6vw (tableta), 10vw (teléfono)
Espaciado
Y complete la configuración del módulo agregando algunos valores de margen y relleno personalizados.
- Margen inferior: 2vw
- Acolchado superior: 3vw
- Acolchado inferior: 3vw
- Acolchado izquierdo: 3vw
- Acolchado derecho: 3vw
3. Aplicar estilo, cambiar el tamaño y cambiar la posición de la columna
Modificar la configuración 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 para ello:
- Color 1: rgba (43,135,218,0)
- Color 2: #ffffff
- Tipo de degradado: lineal
- Posición inicial: 39%
Frontera
Agrega también algunas esquinas redondeadas.
- Todos los rincones: 1vw
Sombra de la caja
Estamos creando algo de profundidad agregando también una sombra de cuadro sutil.
- Fuerza de desenfoque de sombra de caja: 100px
- Color de sombra: rgba (0,0,0,0.24)
Transformar 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 uses tu propia imagen de fondo, definitivamente disfrutarás de esta opción.
- Derecha: 0px (escritorio), 9vw (tableta y teléfono)
- Abajo: -5vw (escritorio), 0vw (tableta y teléfono)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo enmarcar un producto en su imagen de fondo utilizando las opciones integradas de Divi y los módulos de WooCommerce que se incluyen dentro de Divi Builder. El enfoque que adopte depende de la imagen de fondo que esté utilizando, pero seguir 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.
Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.