Al crear una página de producto en Divi , podemos utilizar el módulo de acordeón para mostrar la información del producto mediante contenido dinámico. Esto le dará a las páginas de productos un diseño único y preservará un espacio valioso en la página.
En este tutorial, le mostraremos cómo usar la funcionalidad de contenido dinámico de Divi para crear un acordeón de información de producto y también cómo diseñar el acordeón (y su contenido) usando Divi Visual Builder.
Empecemos.
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descargue el diseño de acordeón de información del producto GRATIS
Para poner sus manos en el diseño de diseño de este tutorial, primero deberá descargarlo 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Tenga en cuenta que debe tener una configuración de producto como se describe en este tutorial para ver los mismos resultados.
Vayamos al tutorial, ¿de acuerdo?
Empezando
Para comenzar, deberá hacer lo siguiente:
Configuración del producto de ejemplo
Para configurar el producto de ejemplo para este tutorial, vaya a Productos > Agregar nuevo. Asigne al producto el título, «Masaje (sesión única)», y haga clic para usar Divi Builder.
A continuación, actualice la siguiente configuración de la página del producto y la información del producto:
1. En Configuración de página Divi, seleccione el diseño de página Sin barra lateral.
2. Agregue/seleccione una categoría de producto
3. Agregue la imagen del producto
4. Agregue el siguiente contenido de descripción larga del producto:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<h3>Quality Massage</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Vestibulum sagittis orci ac odio dictum tincidunt.</li> <li>Donec ut metus leo.</li></ul><h3>Our Gaurantee</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. |
5. En Datos del producto, cambie el tipo de producto a Producto variable.
6. Agregue un atributo llamado «Tipo» con los siguientes valores: Sueco | Piedra caliente | Aromaterapia | Tejido profundo. Asegúrese de seleccionar «Usado para variaciones».
7. Luego, en la pestaña de variaciones debajo del interruptor de datos del producto, use la entrada desplegable para crear variaciones de todos los atributos.
8. Seleccione «Establecer precios regulares» en el menú desplegable para establecer el precio regular para las tres variables.
9. En el cuadro emergente, ingrese el valor «50» y seleccione Aceptar.
10. Una vez que haya terminado, guarde o publique el producto.
Ahora está listo para comenzar a diseñar su diseño con un acordeón de información de producto personalizado.
Creación del acordeón de información de producto con contenido dinámico en Divi
El diseño del producto predeterminado muestra la información del producto utilizando varios módulos Woo en todo momento. Para este ejemplo, queremos usar el acordeón para mostrar tres piezas principales de información del producto: descripción del producto, información adicional del producto y reseñas del producto. Las tres piezas de contenido se muestran actualmente dentro del módulo de pestañas Woo. Todo lo que tenemos que hacer es eliminar el módulo de pestañas Woo y reemplazarlo con un módulo de acordeón con la misma información extraída a través de contenido dinámico.
Aquí está cómo hacerlo.
Primero, haga clic para usar Divi en la interfaz para implementar el generador visual. Luego, elimine el módulo Woo Tabs.
Luego, agregue un nuevo módulo de acordeón para reemplazar las pestañas.
En la ventana emergente Configuración de acordeón, haga clic en el icono de engranaje en el primer acordeón para abrir la configuración de acordeón individual.
Introduzca el título, «Acerca del producto».
Luego pase el cursor sobre el cuadro de entrada de contenido del cuerpo y haga clic en el icono de contenido dinámico.
Seleccione «Descripción del producto» de la lista de contenido dinámico.
Esto extraerá la descripción larga del producto que hemos establecido para el producto en el backend.
Una vez que tenga el contenido del primer acordeón en su lugar, abra la configuración del segundo acordeón y actualice lo siguiente:
- Título: Especificaciones
Luego agregue el contenido dinámico «Información adicional del producto» al cuerpo.
Una vez que el contenido del segundo acordeón esté listo, agregue un nuevo elemento de acordeón y actualice la configuración de ese acordeón de la siguiente manera:
- Título: Reseñas
Luego agregue el contenido dinámico «Reseñas de productos» al cuerpo para extraer el elemento/contenido de revisión del producto.
NOTA: Asegúrese de haber agregado al menos una reseña al producto para poder ver el contenido en la página en vivo.
Diseño del acordeón de información de producto y contenido con Divi
Ahora que nuestro acordeón de información del producto tiene el contenido dinámico necesario para mostrar la información del producto, estamos listos para diseñar el acordeón usando la configuración del módulo de acordeón incorporado.
Abra la configuración del módulo de acordeón y actualice lo siguiente:
- Color del icono: #ff9375
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 26px
- Alternar cerrado Color de fondo: #ffffff
- Color del texto del título abierto: #ff9375
- Color del texto del título: #222222
- Fuente del título: Lato
- Peso de la fuente del título: Negrita
- Estilo de fuente del título: TT
- Tamaño del texto del título: 20px
- Espaciado entre letras del título: 0,2 em
- Altura de la línea del título: 2em
- Fuente del cuerpo: Lato
- Tamaño del cuerpo del texto: 16px
- Altura de la línea del cuerpo: 1,8 em
- Color del texto del enlace: #ff9375
Esto apuntará a cualquier enlace que tenga dentro del contenido dinámico para cada acordeón incluido cosas como la calificación de estrellas de revisión.
- Color de texto de lista desordenada: #ff9375
- Tipo de estilo de lista desordenada: Círculo
- Sangría de elemento de lista desordenada: 5%
- Ancho del borde: 0px
- Ancho del borde superior: 1px
- Color del borde superior: #222222
Y como paso final, agreguemos un pequeño fragmento de css para eliminar el margen predeterminado entre los botones de acordeón.
En la pestaña avanzada, agregue el siguiente CSS al elemento Toggle:
|
01
|
margin-bottom: 0px; |
Ahora veamos el diseño final del acordeón de información del producto.
Ajustes finales al diseño
Hay algunos ajustes que podemos hacer en el diseño para que coincida con el diseño del acordeón. Por ejemplo, podemos ajustar la fuente de cada uno de los módulos a Lato, agregar un borde personalizado y un radio de borde alrededor del menú desplegable variable, y actualizar el botón Agregar al carrito con un color de fondo sólido para que coincida.
Una vez hecho esto, aquí está el resultado final.
He incluido este diseño de diseño como una descarga gratuita arriba. Siéntete libre de comprobarlo por ti mismo. Tenga en cuenta que debe tener la configuración del producto como se describe en este tutorial para ver los mismos resultados.
NOTA: El color predeterminado para muchos de los elementos de WooCommerce para un producto en Divi se hereda del valor de color secundario de la Configuración del personalizador de temas . Puede ser más fácil actualizar este color secundario una vez en lugar de actualizar los colores por módulo woo.
Pensamientos finales
Como hemos aprendido, los módulos Woo no son los únicos elementos que se pueden usar para obtener información dinámica del producto. El acordeón de información del producto es un gran ejemplo de cómo puede usar cualquier módulo Divi para mostrar la información del producto de una manera única y concisa. Siéntase libre de explorar nuevos y emocionantes diseños de acordeón para sus páginas de productos. Y, por supuesto, puede usar varios módulos de alternancia en lugar de un acordeón para lograr resultados similares.
Espero escuchar de usted en los comentarios.
¡Salud!