¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Galería de imágenes vertical en Woocommerce con Divi

Sep 7, 2020 | Tutoriales para Divi

De forma predeterminada, tan pronto como agregue imágenes de 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 de 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.

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

apilar verticalmente imágenes de la galería woo

Móvil

apilar verticalmente imágenes de la galería woo

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 a Divi Theme Builder y haga clic en ‘Agregar nueva plantilla’.

apilar verticalmente imágenes de la galería woo

Usar plantilla en todos los productos

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

apilar verticalmente imágenes de la galería woo

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.

apilar verticalmente imágenes de la galería woo

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

Modificar la secció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

apilar verticalmente imágenes de la galería woo

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

apilar verticalmente imágenes de la galería woo

Agregar nueva fila

Estructura de columna

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

apilar verticalmente imágenes de la galería woo

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

apilar verticalmente imágenes de la galería woo

Espaciado

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

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

apilar verticalmente imágenes de la galería woo

Elemento principal CSS

To align column content on desktop, we’ll use two lines of CSS Code in the row’s main element. We’ll bring back the display property on tablet and phone.

Desktop:

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

Tablet & Phone:

01
display: block;

 

apilar verticalmente imágenes de la galería woo

Column 2 Gradient Background

Once the general row settings are done, open the second column’s settings and apply a radial gradient background.

apilar verticalmente imágenes de la galería woo

  • Color 1: #f7f2ef
  • Color 2: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 20%
  • End Position: 20%

apilar verticalmente imágenes de la galería woo

Column 2 Spacing

Move on to the column’s design tab and change the custom padding values across different screen sizes.

  • Top Padding: 30% (Desktop), 10% (Tablet & Phone)
  • Bottom Padding: 10%
  • Left Padding: 5%
  • Right Padding: 5%

apilar verticalmente imágenes de la galería woo

Add Woo Images Module to Column 1

Dynamic Content

Time to add modules! The first module we need in column 1 is a Woo Images Module. This tutorial works best if you’re using a featured image and gallery images with a 1:1 ratio. That way, we’ll be able to turn the images into circles in the upcoming steps. Once you’ve added the Woo Images Module, make sure the dynamic content is set to ‘This Product’.

  • Product: This Product

apilar verticalmente imágenes de la galería woo

Add Code Module to Column 1

Add CSS Code

Right below the Woo Images Module, we’re going to add a Code Module. The CSS code we insert in this Code Module will help us vertically stack woo gallery images on the left side of our column.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
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>

apilar verticalmente imágenes de la galería woo

Add Woo Title Module to Column 2

Dynamic Content

On to the next column. There, the first module we need is a Woo Title Module.

  • Product: This Product

apilar verticalmente imágenes de la galería woo

Title Text Settings

Move on to the module’s design tab and change the heading text settings as follows:

  • Title Font: PT Sans
  • Title Font Weight: Bold
  • Title Text Color: #000000
  • Title Text Size: 84px (Desktop), 60px (Tablet), 45px (Phone)

apilar verticalmente imágenes de la galería woo

Add Woo Description Module to Column 2

Dynamic Content

On to the next module, which is a Woo Description Module.

  • Product: This Product
  • Description Type: Short Description

apilar verticalmente imágenes de la galería woo

Text Settings

Modify the module’s text settings accordingly:

  • Text Font: Karla
  • Text Size: 17px (Desktop& Tablet), 15px (Phone)
  • Text Line Height: 1.9em

apilar verticalmente imágenes de la galería woo

Spacing

Complete the module settings by adding some top and bottom margin.

  • Top Margin: 5%
  • Bottom Margin: 5%

apilar verticalmente imágenes de la galería woo

Add Woo Price Module to Column 2

Dynamic Content

Add a Woo Price Module right below the Woo Description Module.

  • Product: This Product

apilar verticalmente imágenes de la galería woo

Price Text Settings

Move on to the module’s design tab and modify the price text settings as follows:

  • Price Font: PT Sans
  • Price Font Weight: Bold
  • Price Text Color: #ce8654
  • Price Text Size: 27px

apilar verticalmente imágenes de la galería woo

Add Woo Add to Cart Module to Column 2

Dynamic Content

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

  • Producto: este producto

apilar verticalmente imágenes de la galería woo

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

apilar verticalmente imágenes de la galería woo

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

apilar verticalmente imágenes de la galería woo

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

apilar verticalmente imágenes de la galería woo

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

apilar verticalmente imágenes de la galería woo

  • Acolchado superior del botón: 20px
  • Acolchado de la parte inferior del botón: 20px
  • Relleno del botón izquierdo: 50px
  • Acolchado del botón derecho: 50px

apilar verticalmente imágenes de la galería woo

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%

apilar verticalmente imágenes de la galería woo

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

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This