Cómo agregar información de producto deslizable a su página de producto Divi

La forma en que diseña las páginas de sus productos dice mucho sobre su tienda en general. El diseño de la página de su producto es una parte importante de la experiencia de compra, por lo que a menudo vale la pena hacer un esfuerzo adicional. Si está buscando crear una página de producto que sea un poco más interactiva, le encantará esta publicación. En este tutorial, le mostraremos cómo agregar información de producto deslizable dentro de un diseño de página de producto bellamente construido. ¡También convertiremos este diseño en una plantilla de página de producto y podrá descargar el archivo JSON gratis!

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

Para poner sus manos en la plantilla de página de producto deslizable, 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!

1. Agregar / Abrir producto WooCommerce

Detalles de producto

Empiece por crear un nuevo producto o abrir uno existente. Para lograr exactamente el mismo resultado en el diseño, deberá agregar los siguientes detalles a su producto:

• Nombre
• Descripción
• Imagen del producto con fondo transparente
• Precio
• Categoría

Habilite Divi Builder y modifique la configuración de la página del producto

Habilite Divi Builder y cambie el diseño de la página en la esquina superior derecha.

• Diseño de página: ancho completo

Cambiar a Visual Builder

Una vez que haya cambiado el diseño de la página, puede cambiar al Visual Builder de Divi haciendo clic en 'Construir en la interfaz'.

2. Crear diseño de página de producto de información de producto deslizable

Eliminar varias filas en la página

Dentro del editor de la página del producto, notará varios elementos relevantes para su producto. Solo necesitamos los elementos de la segunda fila, así que continúe y elimine la primera y la última fila dentro de la sección.

Modificar la configuración de la sección

Color de fondo

¡Es hora de comenzar a modificar los diferentes elementos para crear nuestro diseño de información de producto deslizable! Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # ffe4a5

Dimensionamiento

Agregue también una altura mínima a la configuración de tamaño. Este paso permitirá que la sección ocupe toda la altura de su navegador.

• Altura mínima: 100vh

Espaciado

Luego, vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.

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

Visibilidad

Oculte también los desbordamientos de la sección. Esto ayudará a garantizar que no aparezca ninguna barra horizontal cuando se realicen las animaciones.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Modificar la configuración de la fila

Dimensionamiento

A continuación, abra la configuración de la fila y modifique la configuración de tamaño en diferentes tamaños de pantalla.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100% (escritorio), 90% (tableta y teléfono)

Espaciado

Elimine también el relleno superior e inferior predeterminado de la fila.

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

Posición

Luego, vaya a la configuración de posición y asegúrese de que la fila permanezca en la parte inferior de la sección modificando la configuración en consecuencia:

• Posición: Absoluta (escritorio), predeterminada (tableta y teléfono)
• Ubicación: Centro Inferior

Modificar la configuración de la columna 2

Color de fondo

A continuación, haremos algunos cambios en la segunda columna. Utilice un color de fondo blanco.

• Color de fondo: #FFFFFF

Espaciado

Luego, agregue algunos valores de relleno personalizados a la configuración de espaciado.

• Acolchado superior: 10vw
• Acolchado inferior: 10vw
• Acolchado izquierdo: 8vw
• Acolchado derecho: 8vw

Filtro predeterminado

Pase a la configuración de filtros de la columna y asegúrese de que los filtros de brillo, inversión y sepia mantengan su valor predeterminado en un estado normal.

• Brillo: 100%
• Invertir: 0%
• Sepia: 0%

Filtro flotante

Sin embargo, al pasar el mouse, cambiaremos los valores en consecuencia:

• Brillo: 49%
• Invertir: 100%
• Sepia: 100%

Posición

También nos aseguramos de que la columna se coloque en la esquina inferior derecha del contenedor de filas aplicando la siguiente configuración de posición:

• Posición: Absoluta (escritorio), predeterminada (tableta y teléfono)
• Ubicación: Abajo a la derecha

Modificar el módulo de título de Woo en la columna 2

Configuración del texto del título

¡Es hora de comenzar a personalizar los diferentes módulos en la columna 2! Abra el módulo de título Woo y cambie la configuración de texto H1 de la siguiente manera:

• Fuente del título: Playfair Display
• Color del texto del título: # 000000
• Tamaño del texto del título: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)

Modificar el módulo de precio de Woo en la columna 2

Configuración de texto de precio

Abra la configuración del Módulo de precios de Woo a continuación y cambie la configuración del texto del precio.

• Fuente de precio: Poppins
• Precio de color del texto: # e5bc87
• Precio Tamaño del texto: 1.4vw (escritorio), 3vw (tableta), 4vw (teléfono)

Espaciado

Agregue también un margen superior e inferior personalizado en diferentes tamaños de pantalla.

• Margen superior: 2vw (escritorio), 4vw (tableta y teléfono)
• Margen inferior: 3vw (escritorio), 5vw (tableta y teléfono)

Modificar el módulo de descripción de Woo en la columna 2

Configuración de texto

Vamos al módulo de descripción de Woo. Modifique la configuración de texto del módulo en consecuencia:

• Fuente de texto: Poppins
• Peso de la fuente del texto: Ligero
• Tamaño del texto: 0.8vw (escritorio), 1.8vw (tableta), 2.7vw (teléfono)
• Altura de la línea de texto: 2.1em

Espaciado

Agregue un margen inferior receptivo también.

• Margen inferior: 3vw (escritorio), 5vw (tableta y teléfono)

Modificar el módulo Woo Add to Cart en la columna 2

Configuración de campos

A continuación, tenemos el módulo Woo Add to Cart. Cambie la configuración de los campos del módulo.

• Color de fondo de los campos: rgba (255,255,255,0)
• Color del texto de los campos: # 000000
• Fuente Fields: Poppins
• Tamaño del texto de los campos: 0.9vw (escritorio), 2vw (tableta), 3vw (teléfono)

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

Configuración de botones

Continúe con la configuración del botón y modifique el estilo del botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.9vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: #ffffff
• Color de degradado 1: # e5bd89
• Color de degradado 2: # e5bc87
• Tipo de degradado: lineal
• Dirección del gradiente: 153 grados
• Ancho del borde del botón: 0px

• Radio del borde del botón: 1 px
• Fuente del botón: Poppins

• Acolchado superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado izquierdo: 3vw (escritorio), 6vw (tableta), 9vw (teléfono)
• Relleno derecho: 3vw (escritorio), 6vw (tableta), 9vw (teléfono)

Espaciado

Complete la configuración del módulo agregando un margen de botón en diferentes tamaños de pantalla.

• Margen inferior: 2vw (Destkop), 4vw (tableta y teléfono)

Modificar el módulo Woo Meta en la columna 2

Configuración de texto

Continúe abriendo el Woo Meta Module y cambie la configuración del texto.

• Fuente Meta: Poppins
• Peso de la fuente meta: Ligero
• Tamaño del metatexto: 0.8vw (escritorio), 1.8vw (tableta), 3vw (teléfono)

Configuración del texto del enlace

Cambie también el color del texto del enlace.

• Color del texto del enlace: # e5bc87

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

Para cambiar el color de fondo del zoom del módulo de imagen de Woo, necesitaremos un poco de código CSS que colocaremos en un nuevo módulo de código en la columna 2.

Agregue código CSS para cambiar el color de fondo del zoom de la imagen de Woo

Agregue las siguientes líneas de código CSS al módulo de código:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Agregue la configuración de animación sincronizada a los contenedores

Módulo de imagen de Woo

Ahora que hemos diseñado los diferentes elementos en nuestra página de producto, ¡es hora de hacer que suceda el efecto de información del producto deslizante! Para lograr esto, usaremos la configuración de animación incorporada de Divi. Abra el Módulo de imagen de Woo en la columna 1 y aplique la siguiente animación:

• Estilo de animación: diapositiva
• Dirección de animación: Arriba
• Opacidad inicial de la animación: 50%
• Curva de velocidad de animación: facilidad

Columna 1

Abra la configuración de la columna 1 a continuación y use la siguiente configuración de animación:

• Estilo de animación: diapositiva
• Dirección de animación: izquierda (escritorio), arriba (tableta y teléfono)
• Retraso de animación: 950ms (escritorio), 0vw (tableta y teléfono)
• Intensidad de la animación: 25%
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: Ease-In-Out

Columna 2

Por último, aplique la siguiente configuración de animación a la columna 2:

• Estilo de animación: diapositiva
• Dirección de animación: izquierda (escritorio), arriba (tableta y teléfono)
• Duración de la animación: 1200ms
• Retraso de animación: 800 ms (escritorio), 0 ms (tableta y teléfono)
• Opacidad inicial de la animación: 100%
• Curva de velocidad de animación: Ease-In-Out

4. Convierta el diseño de la página del producto en una plantilla

Guardar diseño en la biblioteca Divi

Una vez que haya completado el diseño completo de la página del producto, puede guardarlo en su Biblioteca Divi. Usaremos este diseño de página de producto guardado para crear una nueva plantilla de página de producto.

Vaya a Divi Theme Builder y agregue una nueva plantilla

Vaya a Divi Theme Builder y agregue una nueva plantilla.

Usar plantilla en todos los productos

Utilice la nueva plantilla en todos los productos.

• Usar en: todos los productos

Cargar diseño en el cuerpo de la plantilla de la página del producto

Luego, haga clic en 'Agregar cuerpo personalizado' y haga clic en 'Agregar desde biblioteca'.

Vaya a 'Sus diseños guardados' y seleccione el diseño de página del producto que ha subido a su biblioteca Divi.

5. Guarde los cambios del Creador de temas y vea el resultado

Una vez que haya subido el diseño a su nueva plantilla de página de producto, lo único que queda por hacer es guardar todos los cambios de Theme Builder y ver el resultado en su sitio web.

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 darle vida a las páginas de sus productos mostrándole cómo diseñar un diseño de información de producto deslizable. Esta es una excelente manera de agregar interacción adicional a las páginas de sus productos. ¡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.