Cómo apilar verticalmente las imágenes de la galería Woo dentro de la plantilla de página de tu producto Divi

De manera predeterminada, tan pronto como agregue imágenes de la galería a sus productos de WooCommerce, aparecerán horizontalmente debajo de la imagen destacada de su producto en la interfaz del diseño de la página de su producto. En algunos diseños específicos, el apilamiento vertical de estas imágenes de la galería woo puede ser más conveniente, por ejemplo, en diseños de páginas de productos de pantalla completa. Si está buscando una forma rápida de apilar verticalmente las imágenes de la galería de Woo dentro de la plantilla de la página del producto que crea con Divi’s Theme Builder , le encantará este tutorial. Te mostraremos paso a paso cómo llegar. ¡Acompañaremos este enfoque con una plantilla de página de producto mínima que también podrá descargar de forma gratuita! Este tutorial funciona mejor en páginas de productos que usan imágenes con una proporción de 1:1.

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 la plantilla de la página del producto GRATIS

Para poner sus manos en la plantilla de página de producto gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Crear plantilla de página de producto dentro de Divi Theme Builder

Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience yendo a Divi Theme Builder y haga clic en ‘Agregar nueva plantilla’.

Usar plantilla en todos los productos

Usaremos esta plantilla en todos los productos, pero siéntete libre de modificar las condiciones como quieras.

Introduzca el editor de plantillas del cuerpo de la plantilla

Una vez que haya creado la plantilla, haga clic en ‘Agregar cuerpo personalizado’ y continúe seleccionando ‘Crear cuerpo personalizado’ para ser redirigido al editor de plantillas.

Comience a construir el cuerpo de la plantilla de la página de categoría

Modificar Sección #1

Color de fondo

Dentro del editor de plantillas, verás una sección. Abra esa sección y agregue un color de fondo blanco.

  • Color de fondo: #ffffff

Espaciado

Pase a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado a continuación.

  • Relleno superior: 0px
  • Relleno inferior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila, pase a la pestaña de diseño y cambie la configuración de tamaño en consecuencia:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 95%
  • Ancho máximo: 2560px
  • Alineación de filas: Centro

Espaciado

También usaremos un relleno superior e inferior personalizado en tamaños de pantalla más pequeños.

  • Relleno superior: 100 px (solo tableta y teléfono)
  • Relleno inferior: 100 px (solo tableta y teléfono)

Elemento principal CSS

Para alinear el contenido de la columna en el escritorio, usaremos dos líneas de código CSS en el elemento principal de la fila. Recuperaremos la propiedad de visualización en tabletas y teléfonos.

Escritorio:

01
02
display: flex;
align-items: center;

Tableta y teléfono:

01
display: block;

 

Fondo degradado de la columna 2

Una vez que haya terminado con la configuración general de la fila, abra la configuración de la segunda columna y aplique un fondo degradado radial.

  • Color 1: #f7f2ef
  • Color 2: rgba (255.255.255,0)
  • Tipo de gradiente: Radial
  • Dirección radial: Centro
  • Posición inicial: 20%
  • Posición final: 20%

Columna 2 Espaciado

Pase a la pestaña de diseño de la columna y cambie los valores de relleno personalizados en diferentes tamaños de pantalla.

  • Relleno superior: 30 % (escritorio), 10 % (tableta y teléfono)
  • Acolchado inferior: 10%
  • Relleno izquierdo: 5%
  • Relleno derecho: 5%

Agregue el módulo de imágenes de Woo a la columna 1

Contenido dinámico

¡Es hora de agregar módulos! El primer módulo que necesitamos en la columna 1 es un módulo de imágenes de Woo. Este tutorial funciona mejor si está utilizando una imagen destacada e imágenes de galería con una proporción de 1:1. De esa manera, podremos convertir las imágenes en círculos en los próximos pasos. Una vez que haya agregado el módulo de imágenes de Woo, asegúrese de que el contenido dinámico esté configurado en ‘Este producto’.

  • Producto: Este Producto

Agregar módulo de código a la columna 1

Agregar código CSS

Justo debajo del módulo de imágenes de Woo, vamos a agregar un módulo de código. El código CSS que insertamos en este módulo de código nos ayudará a apilar verticalmente las imágenes de la galería Woo en el lado izquierdo de nuestra columna.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
 
.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}
 
.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}
 
.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}
 
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}
 
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}
 
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}
 
</style>

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

Contenido dinámico

A la siguiente columna. Allí, el primer módulo que necesitamos es un módulo de título de Woo.

  • Producto: Este Producto

Configuración del texto del título

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

  • Fuente del título: PT Sans
  • Peso de la fuente del título: Negrita
  • Color del texto del título: #000000
  • Tamaño del texto del título: 84 px (escritorio), 60 px (tableta), 45 px (teléfono)

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

Contenido dinámico

Pasemos al siguiente módulo, que es un módulo de descripción de Woo.

  • Producto: Este Producto
  • Tipo de descripción: Descripción breve

Configuración de texto

Modifique la configuración de texto del módulo en consecuencia:

  • Fuente del texto: Karla
  • Tamaño del texto: 17 px (computadora de escritorio y tableta), 15 px (teléfono)
  • Altura de línea de texto: 1,9 em

Espaciado

Complete la configuración del módulo agregando un margen superior e inferior.

  • Margen superior: 5%
  • Margen inferior: 5%

Agregue el módulo de precios de Woo a la columna 2

Contenido dinámico

Agregue un módulo de precios de Woo justo debajo del módulo de descripción de Woo.

  • Producto: Este Producto

Configuración de texto de precio

Pase a la pestaña de diseño del módulo y modifique la configuración del texto del precio de la siguiente manera:

  • Fuente de precio: PT Sans
  • Peso de fuente de precio: Negrita
  • Color del texto del precio: #ce8654
  • Precio Tamaño del Texto: 27px

Agregar Woo Agregar al módulo del carrito a la columna 2

Contenido dinámico

El siguiente y último módulo que necesitamos para completar este tutorial es un módulo Woo Add to Cart.

  • Producto: Este Producto

Configuración de campos

Pase a la pestaña de diseño y cambie la configuración de los campos de la siguiente manera:

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

  • Todas las esquinas: 0px
  • Ancho del borde inferior de los campos: 1px
  • Color del borde inferior de los campos: #ce8654

Configuración de botones

Luego, diseñe el botón en la configuración del botón.

  • Usar estilos personalizados para el botón: Sí
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: #0a0201
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 100px

  • Fuente del botón: PT Sans
  • Peso de la fuente del botón: Negrita

  • Relleno superior del botón: 20px
  • Relleno inferior del botón: 20px
  • Relleno izquierdo del botón: 50px
  • Relleno derecho del botón: 50px

Espaciado

Y complete la configuración del módulo, y este tutorial, agregando un margen superior al módulo Woo Add to Cart. Una vez que haya terminado de modificar la plantilla de la página del producto, asegúrese de guardar todos los cambios de Theme Builder antes de ver el resultado en las páginas de su producto.

  • Margen superior: 5%

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 ser creativo con las páginas de productos que crea utilizando Divi’s Theme Builder y los módulos de WooCommerce. Más específicamente, le mostramos cómo apilar verticalmente las imágenes de la galería Woo. Este enfoque va bien con un diseño de página de producto de pantalla completa, pero puede ser útil para cualquier tipo de plantilla de página de producto que construyas. ¡También pudo descargar el archivo JSON 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 regalos de Divi, 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 los beneficios de este contenido gratuito.