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

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 página de producto deslizable GRATIS

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

1. Agregar/abrir producto de WooCommerce

Detalles de producto

Comience creando un nuevo producto o abriendo 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 a Visual Builder de Divi haciendo clic en ‘Crear en el front-end’.

2. Cree un 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 una altura mínima a la configuración de tamaño también. 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
• Relleno 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 configuración de fila

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 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
• Relleno 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 estamos asegurando de que la columna se coloque en la esquina inferior derecha del contenedor de fila aplicando la siguiente configuración de posición:

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

Modifique 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 de Woo y cambie la configuración de texto H1 de la siguiente manera:

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

Modifique el módulo de precios de Woo en la columna 2

Configuración de texto de precio

A continuación, abra la configuración del Módulo de precios de Woo y cambie la configuración del texto del precio.

• Precio Fuente: Poppins
• Color del texto del precio: #e5bc87
• Tamaño del texto del precio: 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)

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

Configuración de texto

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

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

Espaciado

Agregue también un margen inferior receptivo.

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

Modifique el módulo Agregar al carrito de Woo en la columna 2

Configuración de campos

A continuación tenemos el módulo Agregar al carrito de Woo. 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 de los campos: 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: 1px
• Color del borde inferior de los campos: #e5bc87

Configuración de botones

Pase a la configuración del botón y diseñe el 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 degradado 1: #e5bd89
• Color degradado 2: #e5bc87
• Tipo de gradiente: lineal
• Dirección del gradiente: 153 grados
• Ancho del borde del botón: 0px

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

• Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Relleno 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)

Modifique Woo Meta Module en la columna 2

Configuración de texto

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

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

Ajustes de texto de enlace

Cambie el color del texto del enlace también.

• 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 el 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:

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

Módulo de imagen Woo

Ahora que hemos diseñado los diferentes elementos en nuestra página de productos, ¡es hora de hacer que suceda el efecto de deslizar la información del producto! Para lograr esto, usaremos la configuración de animación integrada 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 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)
• Retardo de animación: 950 ms (escritorio), 0vw (tableta y teléfono)
• Intensidad de animación: 25%
• Opacidad inicial de animación: 100%
• Curva de velocidad de animación: Facilidad de entrada y salida

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
• Retardo de animación: 800 ms (escritorio), 0 ms (tableta y teléfono)
• Opacidad inicial de animación: 100%
• Curva de velocidad de animación: Facilidad de entrada y salida

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 todo el diseño 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

Subir diseño al cuerpo de la plantilla de la página del producto

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

Navega a ‘Tus diseños guardados’ y selecciona el diseño de la página del producto que has subido a tu Biblioteca Divi.

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

Una vez que haya cargado el diseño en 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 al mostrarle cómo diseñar un diseño de información de producto deslizable. Esta es una excelente manera de agregar alguna interacción adicional a las páginas de sus productos. ¡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.