Cómo colocar un producto en su imagen de fondo con las opciones de columna de división

Con los módulos de WooCommerce del DIV, hay muchos modelos que puede hacer con Div. En el tutorial de la división de hoy, intentaremos inspirarle otra idea de diseño que puede hacer solo el uso de las opciones construidas en el div. Específicamente, le mostraremos cómo colocar un producto en segundo plano. El resultado depende completamente de su imagen de fondo, pero si realiza este tutorial, ¡sabrá qué pasos necesita para personalizar la técnica para su propio sitio web! ¡Podrá descargar el archivo tutorial de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue el aspecto del producto Fremi de forma gratuita para poner su mano en el producto. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Configure la sección de fondo receptivo Agregue una nueva sección de fondo receptivo El primer paso para ajustar un producto en el fondo es agregar una nueva sección a la página que trabaja. Abra la configuración de la sección y cargue imágenes de fondo receptivo. Puede encontrar ambas imágenes que usé en el archivo que podría descargar al comienzo de esta publicación.
Imagen de fondo: paisaje
Tamaño de la imagen de fondo: adecuado
Posición de la imagen de fondo: el centro superior
Imagen de fondo: cuadrado

Espacio ir a la pestaña de diseño y agregar algunos forros personalizados en la parte superior e inferior en diferentes tamaños de pantalla.

Revelaje superior: 3VW (escritorio), 0VW (tableta y teléfono)
Bajo forro: 3VW (escritorio), 7VW (tableta), 18VW (teléfono)
Border llene la configuración de la sección agregando un borde.

Ancho de la frontera: 2VW
Color del borde: #ffffff
2. Agregue diferentes elementos de cuadro a la columna Agregue una nueva fila La estructura de la columna ahora, como puede ver en el fondo, el producto se encuentra en el lado derecho de la imagen de fondo. Elegiremos una estructura de columna adecuada para una nueva línea en nuestra sección. En este caso, esta es la siguiente estructura de la columna: dimensionar sin agregar módulos, abrir la configuración de la fila y modificar la configuración del tamaño en consecuencia:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
El espacio completa la configuración de la fila agregando algunos rellenos personalizados a la izquierda y a la derecha.
ENLIZACIÓN IZQUIERDA: 5VW

Junta derecha: 5VW
Agregue un módulo de texto en la columna 2 ¡Deje el cuadro de contenido es hora de comenzar a agregar módulos! Para permitir que se muestre el producto, usaremos un módulo de texto vacío.
Espacio aumentaremos la altura del módulo en la siguiente configuración de espaciado.

Revelaje superior: 22VW (escritorio), 39VW (tableta), 35VW (teléfono)

Bajo forro: 15 VW (escritorio), 39VW (tableta), 35VW (teléfono)
Borde y agregaremos una ventaja.
Ancho de la frontera: 3VW

Ancho de borde inferior: 1 VW
Color del borde: RGBA (255,255,255,0,7)
Agregue el módulo de título WOO al contenido dinámico de la columna 2 al siguiente módulo, que es un módulo de título WOO. Seleccione un producto de su elección.
Producto: Encuentra en la lista

El color del sótano usa el siguiente color de fondo:
Color de fondo: RGBA (255,255,255,0,7)

Configuración de texto de título Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H3 en consecuencia:
Nivel de encabezado del título: H3

Título de la fuente: Work Sans
Título Tamaño del texto: 2.5VW (escritorio), 5VW (tableta), 6VW (teléfono) Agregue algunos valores de llenado personalizados.
Revestimiento superior: 1VW
Revestimiento inferior: 1 VW

Junta izquierda: 3VW
Junta derecha: 3VW
Agregue el módulo de descripción Woo a la columna 2 Contenido dinámico El siguiente módulo que necesitamos es un módulo de descripción Woo. Seleccione un producto de su elección.
Producto: Encuentra en la lista
Tipo de descripción: descripción corta


El color del sótano cambia 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 Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Abrir sans
Tamaño de texto: 0.9VW (escritorio), 2.2VW (tableta), 2.8VW (teléfono)

Altura de la línea de título: 2.2em
El espacio completa la configuración del módulo agregando algunos valores de llenado personalizados.
Revestimiento superior: 1VW
Revestimiento inferior: 1 VW

Junta izquierda: 3VW
Junta derecha: 3VW
Agregue el módulo de texto de precio de WOO al contenido dinámico continuo de la columna 2, tenemos el módulo de texto del precio WOO. Seleccione un producto de su elección.
Producto: Encuentra en la lista
El color del sótano cambia el color de fondo.

Color de fondo: RGBA (255,255,255,0,7)
Configuración de texto de precio Vaya a la pestaña Diseño del módulo y modifique la configuración del texto del precio según:

Price Font: Work Sans
Color de texto de precio: # 000000

Tamaño de texto de precio: 2VW (escritorio), 4VW (tableta), 5VW (teléfono)
El espacio completa la configuración del módulo agregando algunos valores de llenado personalizados.
Revestimiento superior: 2VW
Revestimiento inferior: 2VW

Junta izquierda: 3VW
Junta derecha: 3VW
Agregue el módulo Agregar a la canasta al contenido dinámico de la columna 2 al siguiente y último módulo, ¡que es el módulo Woo Agregar al CART! Seleccione un producto de su elección. Producto: Busque en la lista
El color de fondo cambia el color de fondo.
Color de fondo: RGBA (255,255,255,0,7)

Configuración de campo cambiada y configuración del campo del módulo.
El color del fondo del campo: #ffffff

Color de texto de campo: # 000000
Campos de fuentes: Open Sans

Campos el ancho del borde inferior: 1 PX
Campos Color Borde inferior: # 000000
Botón Configuración Continuar estilizando el botón de la siguiente manera:
Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 1.1VW (escritorio), 2.5VW (tableta), 3.5VW (teléfono)
El color del texto del botón: #ffffff

El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón Raza: 10VW
Botón de fuente: Abrir sans
Revelaje superior: 1VW (escritorio), 2VW (tableta), 4VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 4VW (teléfono)

ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 6VW (tableta), 10VW (teléfono)
Revestimiento derecho: 4VW (escritorio), 6VW (tableta), 10VW (teléfono)

Espacio y complete la configuración del módulo agregando valores de margen y llenado personalizados.
Margen inferior: 2 VW
Revestimiento superior: 3VW
Revestimiento inferior: 3VW

Junta izquierda: 3VW
Junta derecha: 3VW
3. El estilo, el cambio de tamaño y la columna de reposicionamiento cambian la configuración de fondo de gradiente 2 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 de gradiente para esto:
Color 1: RGBA (43,135.218.0)
Color 2: #ffffff
Tipo de gradiente: lineal

Comience Posoton: 39%de borde Agregue algunas esquinas redondeadas.
Todas las esquinas: 1VW
Box Shadow Creamos algo de profundidad agregando una sombra de caja sutil.
Poder de poco claro de la sombra de la caja: 100 px
Color de la sombra: RGBA (0.0,0,0.24)

Transformar la traducción y completaremos la configuración de la columna cambiando los valores de traducción en diferentes tamaños de pantalla. Este paso nos permite reposicionar la columna como deseamos. ¡Cuando use su propia imagen de fondo, definitivamente disfrutará de esta opción!
Derecha: 0 PX (escritorio), 9VW (tableta y teléfono)

La parte inferior: -5VW (escritorio), 0VW (tableta y teléfono)
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré cómo colocar un producto en segundo plano utilizando las opciones incorporadas de la Divic y los módulos WooCommerce que se incluyen en el constructor. El enfoque que adopta depende de la imagen de fondo que use, pero viajar este tutorial lo ayudará a comprender el enfoque general. ¡Podrías descargar el archivo JSON gratis! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.