Con los módulos de WooCommerce de Divi, hay toneladas de diseños que puedes lograr usando Divi. En el tutorial de Divi de hoy, trataremos de 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 tomar para personalizar la técnica para su propio sitio web. ¡También podrás descargar el archivo JSON del tutorial de forma gratuita!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

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

Escritorio

enmarcar un producto

Móvil

enmarcar un producto

1. Configurar sección con imagen de fondo sensible

Agregar nueva sección

Imagen de fondo sensible

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 ambas imágenes que hemos usado en la carpeta que pudo descargar al principio de esta publicación.

  • Imagen de fondo: paisaje
  • Tamaño de imagen de fondo: ajuste
  • Posición de la imagen de fondo: centro superior

enmarcar un producto

  • Imagen de fondo: cuadrado

enmarcar un producto

Espaciado

Pase a la pestaña de diseño y agregue algunos rellenos superiores e inferiores personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 3vw (escritorio), 0vw (tableta y teléfono)
  • Acolchado inferior: 3vw (escritorio), 7vw (tableta), 18vw (teléfono)

enmarcar un producto

Frontera

Complete la configuración de la sección agregando un borde.

  • Ancho del borde: 2vw
  • Color del borde: #ffffff

enmarcar un producto

2. Agregue diferentes elementos de marco a la columna

Agregar nueva fila

Estructura de 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:

enmarcar un producto

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

enmarcar un producto

Espaciado

Complete la configuración de la fila agregando algunos rellenos personalizados izquierdo y derecho.

  • Acolchado izquierdo: 5vw
  • Relleno derecho: 5vw

enmarcar un producto

Agregar módulo de texto a la columna 2

Deje el cuadro de contenido vacío

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

enmarcar un producto

Espaciado

A continuación, aumentaremos la altura del módulo en la configuración de espaciado.

  • Relleno superior: 22vw (escritorio), 39vw (tableta), 35vw (teléfono)
  • Acolchado inferior: 15vw (escritorio), 39vw (tableta), 35vw (teléfono)

enmarcar un producto

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)

enmarcar un producto

Añadir Woo Title Module a la Columna 2

Contenido dinámico

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

  • Producto: Buscar en la lista

enmarcar un producto

Color de fondo

Use el siguiente color de fondo:

  • Color de fondo: rgba (255,255,255,0.7)

enmarcar un producto

Configuración del texto del título

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

  • Nivel de título 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)

enmarcar un producto

Espaciado

Agregue algunos valores de relleno personalizados también.

  • Relleno superior: 1vw
  • Relleno inferior: 1vw
  • Acolchado izquierdo: 3vw
  • Relleno derecho: 3vw

enmarcar un producto

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 Woo. Seleccione un producto de su elección.

  • Producto: Buscar en la lista
  • Tipo de descripción: Descripción breve

enmarcar un producto

Color de fondo

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

  • Color de fondo: rgba (255,255,255,0.7)

enmarcar un producto

Configuraciones de texto

Pase a la pestaña de diseño del módulo y modifique la configuración de 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

enmarcar un producto

Espaciado

Complete la configuración del módulo agregando algunos valores de relleno personalizados.

  • Relleno superior: 1vw
  • Relleno inferior: 1vw
  • Acolchado izquierdo: 3vw
  • Relleno derecho: 3vw

enmarcar un producto

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

enmarcar un producto

Color de fondo

Modificar el color de fondo.

  • Color de fondo: rgba (255,255,255,0.7)

enmarcar un producto

Configuración de texto de precio

Pase 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
  • Color del texto del precio: # 000000
  • Tamaño del texto del precio: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

enmarcar un producto

Espaciado

Complete la configuración del módulo agregando algunos valores de relleno personalizados.

  • Relleno superior: 2vw
  • Acolchado inferior: 2vw
  • Acolchado izquierdo: 3vw
  • Relleno derecho: 3vw

enmarcar un producto

Añadir Woo Añadir al módulo de carro a la columna 2

Contenido dinámico

¡En el próximo y último módulo, que es el Módulo Añadir al carro de Woo! Seleccione un producto de su elección.

  • Producto: Buscar en la lista

enmarcar un producto

Color de fondo

Cambia el color de fondo.

  • Color de fondo: rgba (255,255,255,0.7)

enmarcar un producto

Configuraciones de campos

Modifique la configuración de los campos del módulo también.

  • Color de fondo de los campos: #ffffff
  • Color del texto de los campos: # 000000
  • Campos Fuente: Open Sans

enmarcar un producto

  • Campos Ancho del borde inferior: 1px
  • Color del borde inferior de los campos: # 000000

enmarcar un producto

Configuraciones de botones

Continúe con el estilo del 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

enmarcar un producto

  • Radio del borde del botón: 10vw
  • Fuente del botón: Abrir sin

enmarcar un producto

  • Relleno superior: 1vw (escritorio), 2vw (tableta), 4vw (teléfono)
  • Relleno 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)

enmarcar un producto

Espaciado

Y complete la configuración del módulo agregando algunos márgenes personalizados y valores de relleno.

  • Margen inferior: 2vw
  • Relleno superior: 3vw
  • Acolchado inferior: 3vw
  • Acolchado izquierdo: 3vw
  • Relleno derecho: 3vw

enmarcar un producto

3. Columna de Estilo, Cambio de Tamaño y Reposición

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:

  • Color 1: rgba (43,135,218,0)
  • Color 2: #ffffff
  • Tipo de degradado: lineal
  • Posición inicial: 39%

enmarcar un producto

Frontera

Agregue algunas esquinas redondeadas también.

  • Todas las esquinas: 1vw

enmarcar un producto

Sombra de la caja

Estamos creando algo de profundidad agregando también una sombra de cuadro sutil.

  • Caja Shadow Blur Fuerza: 100px
  • Color de sombra: rgba (0,0,0,0.24)

enmarcar un producto

Transformar Traducir

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

  • Derecha: 0px (escritorio), 9vw (tableta y teléfono)
  • Abajo: -5vw (escritorio), 0vw (tableta y teléfono)

enmarcar un producto

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

You have Successfully Subscribed!