homefinance blog
Cuando construimos una página de producto en la división, podemos usar el módulo de acordeón para mostrar información del producto utilizando contenido dinámico. Esto le dará a las páginas de productos un diseño único, y mantendrá el espacio valioso en la página. En este tutorial, le mostraremos cómo utilizar la funcionalidad dinámica del contenido del contenido de la Divic para crear un acordeón con la información del producto y también cómo diseñar el acordeón (y su contenido) utilizando Visual Builder. Vamos a empezar. Él dibuja un breve vistazo al proyecto que construiremos en este tutorial.
Descargue el diseño gratuito del acuerdo de información del producto para poner su mano en el diseño de diseño en este tutorial, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Suscríbase a nuestro canal de YouTube para importar su aspecto, simplemente extraiga zip y extraiga el archivo json en el builder div. Tenga en cuenta que debe tener una configuración de producto como se describe en este tutorial para ver los mismos resultados. Pasemos al tutorial, ¿no? Nociones básicas para comenzar, deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el creador de Divi Plugin si no usa el tema Div).
Instale y active el complemento WooCommerce. Si esta es la primera vez que configura WooCommerce, deberá ejecutar el experto en configuración básica para preparar su tienda. Después de haber terminado, está listo para agregar los nuevos productos.
Cree un nuevo producto según las siguientes instrucciones. Para obtener más información sobre cómo agregar un nuevo producto, consulte este tutorial.
Configuración del producto Por ejemplo, para configurar el ejemplo del producto para este tutorial, explore los productos> Agregar un nuevo. Dale al producto el título “Masaje (sesión simple)” y haga clic para usar Divi Builder.
Luego, actualice la siguiente configuración e información del producto: 1. En Configuración de la página Div, seleccione la apariencia de la barra sin lateral. 2. Agregue / seleccione una categoría de producto 3. Agregue la imagen del producto 4. Agregue el siguiente contenido Descripción larga del producto:
Masaje de calidad
Lorem ipsum dolor sit amet, consecuencia adipiscing elit. Vestibulum sagittis orci ac odio dictum tintcidunt. Donec ut Metus Leo. Clase Aptent Taciti Soiosqu ad Litora Torquent por Conubia, según Startos Himenaeos.
lorem ipsum dolor sit amet, consecuencia adipiscing elit.
Vestibulum sagittis orci ac odio dictum tincidunt.
Donec ut Metus Leo.
Nuestra garantía
Lorem ipsum dolor sit amet, consecuencia adipiscing elit. Vestibulum sagittis orci ac odio dictum tintcidunt. Donec ut Metus Leo. Clase Aptent Taciti Soiosqu ad Litora Torquent por Conubia, según Himenaeos principiantes.
5. Según los datos del producto, cambie el tipo de producto al producto variable.
6. Agregue un atributo llamado “tipo” con los siguientes valores: sueco | Piedra caliente | Aromaterapia | Tejido profundo. Asegúrese de seleccionar “usado para variantes”.
7. Luego, en las variaciones en variaciones de conmutación, use la entrada desplegable para crear variaciones de todos los atributos.
8. Seleccione “Conjunto de precios comunes” en el menú Drop -down para establecer el precio habitual de las tres variables.
9. En el cuadro emergente, ingrese el valor “50” y seleccione Aceptar.
10. Después de haber terminado, guarde o publique el producto. Ahora está listo para comenzar a diseñar su aspecto con producto de acordeón personalizado.
Crear el acordeón de información sobre el producto con contenido dinámico en el producto predeterminado muestra información del producto que utiliza diferentes módulos WOO en todo el mundo. Para este ejemplo, queremos utilizar el acordeón para mostrar tres información principal del producto: descripción del producto, información adicional del producto y revisiones de productos. Actualmente, todas estas tres piezas de contenido se muestran dentro del módulo Woo Tabs. Todo lo que tenemos que hacer es eliminar el módulo de pestaña WOO y reemplazarlo con un módulo de acordeón con la misma información extraída por contenido dinámico. Primero, haga clic para usar Divin en el frente para implementar el Visual Builder. Luego elimine el módulo de pestañas WOO.
Luego agregue un nuevo módulo de acordeón para reemplazar las pestañas.
En la configuración de la ventana emergente, haga clic en el icono de la rueda en el primer acordeón, abra la configuración de acordeón individual.
Ingrese el título “Acerca del producto”. Luego coloque el cursor sobre el cuadro de contenido del cuerpo y haga clic en el icono de contenido dinámico.
Seleccione la “Descripción del producto” de la lista de contenido dinámico.
Esto dibujará la larga descripción del producto que establecemos para el producto en el Backynd.
Después de instalar el primer contenido de acordeón, abra la configuración para el segundo acordeón y actualice lo siguiente:
Título: Especificaciones
Luego agregue contenido dinámico “información adicional del producto” en el cuerpo.
Después de que el contenido del segundo acordeón esté listo, agregue un nuevo elemento de acordeón y actualice la configuración para ese acordeón de la siguiente manera:
Título: Reseñas
Luego agregue el contenido dinámico “reseñas producidas” al cuerpo para dibujar el elemento / contenido de la revisión del producto. Nota: asegúrese de haber agregado al menos una revisión del producto para ver el contenido en la página en vivo. Proyectando información y contenido del producto ahora que la información del acordeón del producto tiene el contenido dinámico de mostrar información del producto, estamos listos. Para estilizar el acordeón utilizando el acordeón. Configuración del acordeón incorporado. Abra la configuración del módulo de acordeón y actualice lo siguiente:
Icono de color: # FF9375
Use el tamaño de fuente de iconos: sí
Icono de tamaño de fuente: 26 PX
Fondo de conmutación oscura: #fffff
Abra el color del texto del título: # FF9375
Color de texto del título: # 222222
Título de la fuente: Lato
Título Fuente de peso: Bold
Título del estilo de fuente: TT
Título Tamaño del texto: 20 PX
Cartas de título Espaciado: 0.2em
Altura de la línea de título: 2em
Font Corp: Lato
Tamaño del texto del cuerpo: 16 PX
La altura de la línea del cuerpo: 1.8em
Color de texto de enlace: # FF9375
Esto se dirigirá a todos los enlaces que tiene en el contenido dinámico para cada acordeón, incluidas cosas como la evaluación de estrellas.
El color del texto de la lista desordenada: # FF9375
Tipo de estilo de lista desordenado: Círculo
Allado del elemento de lista desordenado: 5%
Ancho fronterizo: 0 PX
El ancho del borde superior: 1 PX
Color de borde superior: # 222222
Y para un último paso, agregue un fragmento CSS pequeño para eliminar el margen predeterminado entre los interruptores de acordeón.
En la pestaña avanzada, agregue los siguientes CSS al elemento de alternar: Bottom de margen: 0px;
Ahora, verifiquemos el diseño final del acordeón con la información del producto. Ayuda final a mirar. Hay algunos ajustes que podemos hacer para buscar para adaptarse al diseño del acordeón. Por ejemplo, podemos ajustar la fuente para cada uno de los módulos Lato, podemos agregar un borde personalizado y un rayo de borde alrededor del menú de caída variable y podemos actualizar el Agregar a la canasta con un fondo sólido para que coincida. Una vez terminado, aquí está el resultado final.
Incluí este diseño de diseño como una descarga gratuita de arriba. Siéntase libre de comprobarlo por su cuenta. 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 la división se hereda del valor secundario del color desde la configuración del personalizador. Puede ser más fácil actualizar este color secundario una vez en lugar de actualizar los colores por modo woo. Pensamientos finales Como aprendimos, los módulos WOO no son los únicos elementos que se pueden usar para extraer información dinámica. El acordeón de información del producto es un excelente ejemplo de cómo puede usar cualquier modo de división para mostrar la información del producto de una manera única y concisa. Siéntase libre de explorar modelos de acordeón nuevos e interesantes para sus páginas de productos. Y, por supuesto, puede usar más módulos de conmutación en lugar de acordeón para lograr resultados similares. Espero tener noticias suyas en los comentarios. ¡Suerte!
