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

De forma predeterminada, tan pronto como agregue imágenes de la galería a sus productos 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, apilar verticalmente estas imágenes de la galería de cortejo podría ser más conveniente, por ejemplo, en diseños de páginas de productos a pantalla completa. Si está buscando una forma rápida de apilar verticalmente las imágenes de la galería woo dentro de la plantilla de página del producto que crea con el Generador de temas de Divi, 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 utilizan 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 tener en sus manos 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 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.

Descarga los archivos

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.

DESCARGAR

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!

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

Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience por ir al Divi Theme Builder y haga clic en 'Agregar nueva plantilla'.

Usar plantilla en todos los productos

Usaremos esta plantilla en todos los productos, pero no dude en modificar las condiciones como desee.

Ingrese al editor de plantillas de 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 la sección n. ° 1

Color de fondo

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

• Color de fondo: #ffffff

Espaciado

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

• Relleno superior: 0px
• Acolchado 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 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 de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 95%
• Ancho máximo: 2560px
• Alineación de filas: centro

Espaciado

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

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

CSS del elemento principal

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. Devolveremos la propiedad de visualización en tabletas y teléfonos.

Escritorio:

display: flex;
align-items: center;

Tableta y teléfono:

display: block;

Fondo degradado de la columna 2

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

• Color 1: # f7f2ef
• Color 2: rgba (255,255,255,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 20%
• Posición final: 20%

Espaciado de la columna 2

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

• Acolchado superior: 30% (escritorio), 10% (tableta y teléfono)
• Acolchado inferior: 10%
• Acolchado izquierdo: 5%
• Acolchado 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á usando 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.

<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>

Agregar módulo de título 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 Woo.

• Producto: este producto

Configuración del texto del título

Vaya 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)

Agregar 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 de texto: Karla
• Tamaño del texto: 17px (escritorio y tableta), 15px (teléfono)
• Altura de la línea de texto: 1.9em

Espaciado

Complete la configuración del módulo agregando algunos márgenes superior e inferior.

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

Agregar módulo de precio de Woo a la columna 2

Contenido dinámico

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

• Producto: este producto

Configuración de texto de precio

Vaya 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 la fuente del precio: Negrita
• Precio Color del texto: # ce8654
• Precio Tamaño del texto: 27px

Agregue Woo Add to Cart Module 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

Vaya 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 Fields: Open Sans

• Todas las esquinas: 0px
• Ancho del borde inferior de los campos: 1 px
• 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: 100 px

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

• Acolchado superior del botón: 20px
• Acolchado de la parte inferior del botón: 20px
• Acolchado del botón izquierdo: 50px
• Acolchado del botón derecho: 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 del Creador de temas 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 el Generador de temas de Divi y los módulos WooCommerce. Más específicamente, le mostramos cómo apilar verticalmente las imágenes de la galería de woo. Este enfoque va bien con un diseño de página de producto a pantalla completa, pero puede resultar útil para cualquier tipo de plantilla de página de producto que cree. ¡También pudo 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 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.