Seleccionar página

Crear un layout de categorías de productos en tienda con el Theme Builder de Divi

¡Divi Lovers! en este tutorial te explicaremos como crear un layout de categorías de productos en la tienda con el Theme Builder de Divi.

Por Jefferson M.

Sep 23, 2021

¡Hola Divi Lovers! en este tutorial te explicaremos como crear un layout de categorías de productos en la tienda con el Theme Builder de Divi. Con este tutorial continuaremos con la serie para personalizar una tienda online con el maquetador visual de Divi.

Índice

En este tutorial construiremos este layout:

Crear un layout de categorías de productos en tienda con el Theme Builder de Divi DEMO

¿Por qué es importante personalizar el layout de categorías o archivos en Divi?

Crear un layout de categorías, archivos o etiquetas personalizado en Divi es necesario porque con ello completamos el esquema de diseño que estemos manejando en nuestro sitio. Recordemos por un momento como se ve por defecto el layout de categorías de Divi:

Crear un layout de categorías de productos en tienda con el Theme Builder de Divi

Como puedes ver, no es la vista más atractiva ni funcional que queremos para el usuario. Por ello, crear algo personalizado y adaptarlo al diseño completo del sitio es necesario para que tu tienda online se vea con calidad.

Recuerda que esto lo explicamos con más detalle en nuestro curso básico de Woocommerce, o cualquiera de los live design en los que hemos trabajado layouts diferentes layouts de Woocommerce con Divi.

¿Como crear un layout de categorías con el Theme Builder de Divi?

Al igual que hicimos en nuestro tutorial anterior donde creamos un layout personalizado de productos con Divi, debes asignar un nuevo diseño a un plantilla de «todas las categorías» en el generador de temas de Divi.

Crear un layout de categorías de productos en tienda con el Theme Builder de Divi

Una vez que asignes las reglas de aplicación a la plantilla de categorías en el theme builder se abrirá el constructor visual y a partir de allí todo es cuestión de creatividad.

Puedes crear encabezados, barras laterales, banners o cualquier otro elemento que te ayude a darle una apariencia correcta y estilos a tu página de categorías de productos con Divi, pero lo más importante es indicarle a esta plantilla que debe desplegar los productos de manera dinámica dentro de Divi. Es decir, que si un usuario escoge una categoría llamada «camisetas» solo despliegue los productos de manera dinámica de esa categoría en particular.

Para ello debes añadir el módulo de tienda por defecto que viene con Divi, y allí seleccionar ciertas condiciones:

  • Tipo de vista de productos: Categorías
  • Categorías > Categoría actual
Crear un layout de categorías de productos en tienda con el Theme Builder de Divi

Con ello, le estarás indicando a Divi, que muestre la categorías o etiqueta que el usuario haya seleccionado de manera dinámica dentro de ese diseño. Si deseas ver como hacemos la barra lateral y los demás elementos en este diseño, te recomendamos ver el video de la parte superior.

Una vez que tengas el diseño completo, solo guardas la plantilla y guardas los cambios en el theme builder. Con ello tendrás un layout de categorías de producto con el Theme Builder de Divi genial y totalmente activo.

Conclusiones

Crear un layout de categorías de productos con el Theme Builder de Divi es una manera fácil y rápida de hacer que los productos de ciertas categorías dentro de tu tienda online se desplieguen de forma personalizada y con un diseño profesional. Recuerda que no quieres que tus compradores piensen que tu tienda no se ve sería y profesional, es por ello que es importarte, por no decir que obligatorio, que tu tienda online tenga unas categorías personalizadas, y que se muestren de manera correcta con Divi.

Recuerda que cada semana publicaremos un nuevo tutorial gratuito donde estaremos personalizando varios de los layouts de nuestra tienda con el theme builder de Divi.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido premium.

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

APRENDE DIVI

Accede a más de 700 contenidos especializados en Diseño web con Divi por menos de $10 USD/mes

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *