Cómo alinear verticalmente las imágenes de Woo de un producto en Divi

Profesor: Jefferson M.

Publicación: 4 septiembre 2020

Contenido Premium

Desbloquea este contenido suscribiéndote o accediendo con tu cuenta.

En este vídeo tutorial premium aprenderás a alinear las imágenes de la galería Woo verticalmente en un producto en Divi. Es un tutorial premium pedido por uno de nuestros suscriptores así que nos pusimos manos a la obra.

Recuerda que puedes descargar tanto el archivo .JSON como el código que se uso en el tutorial en la parte inferior, en la zona de recursos del tutorial.

Objetivo del profesor:

La idea es lograr apilar las imágenes de la galería de productos que nos muestra Woocommerce en cada producto, e insertar un pequeño cachó de código CSS personalizado dentro del Theme Builder para lograr generar está visualización correcta.

Es un proceso relativamente sencillo pero hay que tomar en cuenta varios detalles, como la anchura del contenedor de producto y la distribución de las columnas en la página de producto. Lo vemos a detalle en el vídeo, de está manera lograremos alinear verticalmente las imágenes de Woo de un producto en Divi.

Resultado:

Lograremos un resultado igual a este:

alinear verticalmente las imágenes de Woo de un producto en Divi

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido premium.

Recursos, snippets y descargas

Aquí podrás descargar los recursos que usamos en el tutorial: plugins, código, snippets, layouts, .json, etc. Para ver los recursos debes acceder con tu cuenta de suscriptor.

1 Comentario

  1. Avatar

    Hola, excelente vídeo. Como podría hacer si tengo mas de 4 imágenes en galería de productos. Una opción para que puede usar botones de navegación cuando sean mas de 4. Saludos

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Valóranos!

¿Te han gustado nuestros tutoriales y cursos? por favor, déjanos una valoración de 5 estrellas en truspilot, nos ayudará mucho su calificación ¡Gracias!

Shares