Al crear una página de producto en Divi, podemos usar el módulo de acordeón para mostrar información del producto usando contenido dinámico. Esto le dará un diseño único para las páginas de productos, al mismo tiempo que conserva un valioso espacio en la página.
En este tutorial, le mostraremos cómo usar la función de contenido dinámico de Divi para crear un acordeón de información de producto, así como también cómo diseñar el acordeón (y su contenido) usando Divi Visual Builder.
Vamos a empezar.
vista
Aquí hay una vista previa del diseño que crearemos en este tutorial.
Tenga en cuenta que debe tener una configuración de producto como se describe en este tutorial para lograr los mismos resultados.
Commencer
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el Tema divi instalado (o el complemento Divi Builder si no está utilizando el Tema divi).
- Instalar y activar el complemento WooCommerce. Si configura WooCommerce por primera vez, deberá ejecutar el asistente de configuración básica para preparar su tienda. Una vez hecho esto, está listo para agregar sus nuevos productos.
- Cree un nuevo producto como se muestra a continuación.
Configurar el producto de muestra
Para configurar el producto de muestra 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.
Luego actualice la siguiente configuración de la página del producto y la información del producto:
1. En Configuración de la página Divi, seleccione el diseño Sin barra lateral.
2. Agregar / seleccionar una categoría de producto
3. Agregar imagen de producto
4. Agregue el contenido de la descripción.
5. Sous Datos Personales 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 Variaciones debajo de la palanca 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 de diálogo, ingrese el valor "50" y seleccione Aceptar.
10. una 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 producto personalizado.
Creación del acordeón Product Info con contenido dinámico en Divi
El diseño de producto predeterminado muestra información del producto utilizando varios módulos de Woo. Para este ejemplo, queremos usar el acordeón para mostrar tres datos principales sobre el producto: descripción del producto, información adicional del producto y reseñas del producto. Estos tres contenidos se muestran actualmente en el módulo de pestañas de cortejo. 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 introducida a través de contenido dinámico.
Aquí está cómo hacerlo.
Primero, haga clic para usar Divi en el sistema de front-end para implementar el generador visual. Luego retire 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 del acordeón, haga clic en el icono de engranaje en el primer acordeón para abrir la configuración del acordeón individual.
Ingrese el título "Acerca del producto".
Luego, coloque el cursor sobre el cuadro de entrada del contenido del cuerpo y haga clic en el ícono de contenido dinámico.
Seleccione "Descripción del producto" de la lista de contenido dinámico.
Esto mostrará la descripción larga del producto que hemos definido para el producto en el backend.
Una vez que el primer contenido de acordeón esté en su lugar, abra la configuración del segundo acordeón y actualice lo siguiente:
- Título: Especificaciones
A continuación, 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 acordeón de la siguiente manera:
- Título: Información adicional
Luego, agregue el contenido dinámico "Reseñas de productos" al cuerpo para incorporar el artículo / contenido de la reseña del producto.
NOTA: asegúrese de haber agregado al menos una reseña de producto para ver el contenido en la página en vivo.
Diseño del producto y acuerdo de contenido con Divi
Ahora que nuestro acordeón de información de producto tiene el contenido dinámico para mostrar información de producto, estamos listos para personalizarlo usando la configuración del módulo de acordeón incorporado.
Abra la configuración del módulo Accordion y actualice lo siguiente:
- Color del icono: # ff9375
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 26px
- Alternar color de fondo: #ffffff
- Título del texto abierto Color: #ff9375
- Título del texto: #222222
- Fuente del título: Lato
- Título de la fuente: Bold
- Título Tipo de letra: TT
- Tamaño del título del texto: 20px
- Espacio de las letras del título: 0.2em
- Altura de la línea de título: 2em
- Fuente del cuerpo: Lato
- Tamaño del texto del cuerpo: 16px
- Altura del cuerpo: 1.8em
- Color del texto del enlace: #ff9375
Esto apuntará a todos los enlaces que tiene en el contenido dinámico para cada acordeón, como la clasificación por estrellas.
- Color del texto de la lista desordenada: # ff9375
- Tipo de estilo de lista desordenada: círculo
- Sangría de elemento de lista desordenado: 5%
- Ancho del borde: 0px
- Ancho del borde superior: 1px
- Color del borde superior: #222222
Y para el último paso, agreguemos un pequeño extracto de CSS para extraer el margen predeterminado entre las escalas de acordeón.
En la pestaña Avanzado, agregue el siguiente CSS al elemento Toggle:
margin-bottom: 0px;
Ahora veamos el diseño final del acordeón de información del producto.
Ajustes finales al diseño.
Se pueden hacer algunos ajustes al 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 de la lista desplegable de variables y actualizar el botón Agregar al carrito con un color de fondo sólido que le conviene.
Una vez hecho, aquí está el resultado final.
He incluido este diseño como descarga gratuita arriba. No dude en comprobarlo usted mismo. Tenga en cuenta que debe tener la configuración del producto descrita en este tutorial para lograr los mismos resultados.
NOTA: El color predeterminado para la mayoría de los artículos. WooCommerce de un producto en Divi se hereda del valor de color secundario de la configuración de personalización del tema. Podría ser más fácil actualizar este color secundario una vez que el módulo de colores corteje.
Consideraciones finales
Como hemos aprendido, los módulos Woo no son las únicas cosas que se pueden usar para extraer información dinámica de productos. El acordeón de información del producto es un gran ejemplo de cómo puede utilizar cualquier módulo Divi para mostrar información del producto de una manera única y concisa. No dude en explorar nuevos y emocionantes diseños de acordeón para las páginas de sus productos. Y, por supuesto, puede utilizar varios módulos de balancín en lugar de un acordeón para lograr resultados similares.
