Las páginas de categorías son una parte importante de cualquier sitio de comercio electrónico. Los clientes exploran las categorías de productos para encontrar lo que necesitan. Es por eso que las páginas de categorías deben verse tan bien como las páginas de productos. Con Theme Builder de Divi , crear plantillas de páginas de categorías es más fácil que nunca. En este tutorial, le mostraremos cómo crear una plantilla de página de categoría paso a paso y diseñarla usando Divi y sus opciones integradas. Además, le mostraremos cómo hacer que se pueda filtrar con la ayuda del complemento Themify WooCommerce Product Filters .
Abra dos pestañas del navegador una al lado de la otra. Use la primera pestaña para el generador de temas y la segunda pestaña para la vista previa en vivo de una página de categoría. Trabaje de esta manera para ver el progreso a medida que avanza. Para su comodidad, también hemos agregado la plantilla como descarga gratuita.
¡Hagámoslo!
Antes de comenzar a recrear la plantilla, echemos un vistazo a cómo se ve la plantilla de página de categoría en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga la plantilla de página de categoría de Woo GRATIS
Para poner sus manos en la plantilla de página de categoría gratuita de Woo, 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.
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!
1. Actualice sus productos y categorías
Antes de crear la plantilla, asegúrese de que sus productos estén organizados en las categorías correctas. Compruebe si también están etiquetados correctamente. Estos serán importantes al configurar el complemento de filtro de producto.
2. Complemento de configuración
Descargar e instalar
Descargue los filtros de productos de WooCommerce . Navegue hasta el panel de control de su complemento y cargue el archivo .zip del complemento para instalarlo. Alternativamente, busque el complemento en el directorio. El complemento agregará una nueva pestaña en el menú de su tablero. Asegúrate de activar el complemento también.
Agregar nuevo formulario de filtro
Haga clic en la pestaña del complemento en su tablero. Dentro de la configuración del complemento, haga clic en el botón para agregar un nuevo formulario de filtro.
Configurar formulario de filtro
Para que su barra lateral filtrable se vea exactamente como la de la vista previa de esta publicación, use la configuración que se menciona a continuación. Siempre puede ajustar esta configuración después.
- Diseño: Vertical
- Campos vacíos: no mostrar el campo si está vacío
- Clasificación de productos: Ocultar clasificación de productos
- Opción de paginación: Desplazamiento infinito
- Botón de reinicio: sin botón de reinicio
- Relación lógica entre taxonomías : Y
- Plantilla de página de resultados: muestra los resultados en la misma página
Crear campo de categoría
En la barra de menú debajo del área principal, verá una selección de pestañas. Arrastre y suelte la pestaña ‘Categoría’ en el generador debajo de ella. Luego ajuste la configuración de la siguiente manera:
- Título del campo: Categorías
- Incluir niños: Sí
- Mostrar como: casilla de verificación
- Lógica: O
- Orden: Nombre, Descendente
- Diseño: Horizontal, 2 columnas
Crear campo de etiqueta
Ahora arrastre y suelte la pestaña ‘Etiqueta’ en el generador. Asegúrate de que esté debajo de la pestaña «Categoría». Ajuste la configuración de la siguiente manera:
- Título del campo: Tipo
- Mostrar como: casilla de verificación
- Orden: Nombre, Descendente
- Diseño: Horizontal, 2 columnas
- Iconos de colores
- Fondo: transparente
- Color del texto: Marrón oscuro #44000d
Haga clic en Guardar para generar código corto
Guarde su trabajo y cierre el constructor. Verá el código abreviado en el menú principal del complemento. Cópialo, lo necesitarás más tarde.
3. Vuelva a crear la plantilla de página de categoría de producto en Theme Builder
Abrir generador de temas/Agregar nueva plantilla
¡Es hora de comenzar a recrear la plantilla! Abra su generador de temas y agregue una nueva plantilla.
Establecer la configuración de la plantilla
En la configuración de la plantilla, seleccione ‘Páginas de categorías de productos específicos’. Haga clic en las categorías a las que desea asignar esta plantilla. Seleccionaremos artículos de cuero hechos a mano.
Agregar cuerpo personalizado
Luego, haga clic en ‘Agregar cuerpo personalizado’.
Seleccione Crear cuerpo personalizado
Volveremos a crear esta plantilla desde cero, así que adelante, elija ‘Crear cuerpo personalizado’.
Construir desde cero
Una vez dentro del constructor visual, seleccione la opción para construir desde cero una vez más.
Configuración de la sección 1
Fondo
Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y agregue un color de fondo.
- Color de fondo: Gris azulado transparente – rgba(68,66,109,0.02)
Añadir fila
Estructura de la columna
Ahora agregue una nueva fila con la siguiente estructura de columna:
Dimensionamiento
Ajuste la configuración de tamaño de la fila siguiente.
- Ancho del canalón: 1
- Ancho
- Escritorio: 90%
- Tableta y teléfono: 85%
- Ancho máximo: 1920px
Espaciado
Luego, aplique algunos valores de espaciado diferentes en diferentes tamaños de pantalla.
- Margen izquierdo y derecho
- Escritorio: automático
- Tableta: 55px
- Teléfono: 30px
- Relleno superior: 100px
Agregar módulo de título de publicación a la primera columna
Elementos
Es hora de agregar módulos, comenzando con un Módulo de título de publicación en la columna 1. Habilite solo el título.
- Mostrar título: Sí
Fondo
Agregue un color de fondo a continuación.
- Color: #e8e8e8
Texto del título
Vaya a la pestaña de diseño y aplique estilo al texto del título.
- Nivel de título: H1
- Fuente: Josefin Sans
- Peso: Negrita
- Estilo: TT
- Color: #44000d
- Tamaño
- Escritorio: 32px
- Tableta: 28px
- Teléfono: 30px
- Altura de la línea: 1,2 em
Espaciado
Ajuste el espaciado también.
- Acolchado superior
- Escritorio y tableta: 100px
- Relleno inferior: 80px
- Relleno izquierdo
- Escritorio y tableta: 30px
- Relleno derecho
- Escritorio y tableta: 30px
- Teléfono: 10px
Borde
Dale al módulo algunas esquinas redondeadas.
- Esquinas redondeadas: 15px los cuatro
Sombra de la caja
Y agrega una sombra de caja sutil.
- Sombra de caja: segunda opción
- Posición Horizontal: 12px
- Posición vertical: 12px
- Fuerza de desenfoque: 20px
- Fuerza de propagación: -5px
- Color de sombra: #dddddd
Agregar módulo de texto a la primera columna
Contenido
Agregue un módulo de texto justo debajo del módulo anterior. En el cuadro de contenido, agregue el código abreviado que copió del complemento.
- Cuerpo: código abreviado del complemento
Fondo
Agregue un color de fondo a continuación.
- Color: #e8e8e8
Texto
Dale estilo al texto.
- Fuente: Josefin Sans
- Color: #44000d
- Tamaño
- Escritorio: 20px
- Tableta: 18px
- Teléfono: 16px
- Espaciado: 1px
Espaciado
Ajuste la configuración de espaciado también.
- Margen superior: 50px
- Relleno superior e inferior: 40px
- Relleno izquierdo y derecho: 30px
Borde
Luego, agrega algunas esquinas redondeadas.
- Esquinas redondeadas: 15px los cuatro
Sombra de la caja
Y complete la configuración del módulo agregando una sutil sombra de cuadro.
- Sombra de caja: segunda opción
- Posición Horizontal: 12px
- Posición vertical: 12px
- Fuerza de desenfoque: 20px
- Fuerza de propagación: -5px
- Color de sombra: #dddddd
Agregar módulo de tienda a la segunda columna
Contenido
¡A la siguiente columna! Agregue un módulo de tienda y ajuste la configuración principal de la siguiente manera:
- Tipo de vista del producto: Predeterminado
- Usar página actual: Sí
- Diseño de columna: 3 columnas
Imagen
Pase a la pestaña de diseño y aplique estilo a la imagen en consecuencia:
- Esquinas redondeadas de la imagen: 15px los cuatro
- Sombra de cuadro de imagen: segunda opción
- Posición Horizontal: 6px
- Posición vertical: 6px
- Fuerza de desenfoque: 18px
- Color de sombra: #dddddd
Texto del título
Aplique estilo al texto del título a continuación.
- Fuente: Josefin Sans
- Peso: semi negrita
- Alineación: Derecha
- Color: #44000d
- Tamaño
- Escritorio: 26px
- Tableta: 24px
- Teléfono: 17px
- Espaciado: 2px
Texto de precio
No olvide aplicar estilo al texto del precio también.
- Fuente: Josefin Sans
- Alineación: Derecha
- Color: #44000d
- Tamaño: 15px
- Espaciado entre letras: 2px
- altura de línea: 46px
Espaciado
Ajuste la configuración de espaciado también.
- Acolchado superior
- Tableta y teléfono: 50px
- Relleno izquierdo
- Escritorio: 50px
- Tableta y teléfono: 0px
CSS personalizado
Y por último, pero no menos importante, agregue dos líneas personalizadas de código CSS en la pestaña avanzada para generar algo de espacio entre los diferentes elementos en el módulo de la tienda. ¡Eso es todo!
- Imagen: relleno inferior: 20px
- Precio: fondo acolchado: 40px
|
01
|
padding-bottom: 20px; |
|
01
|
padding-bottom: 40px; |
Avance
Hemos terminado de recrear la plantilla de página de categoría de producto de WooCommerce. Echemos un vistazo nuevamente al diseño terminado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
Esta plantilla de página de categoría de producto se puede aplicar a todas las categorías y etiquetas en su tienda WooCommerce. Con la ayuda del complemento de filtro de productos, puede agregar la configuración de filtro que se adapte a su propia tienda y productos. Puedes usar cualquiera de los módulos Divi woo para personalizar tu tienda como quieras. Esperamos que esta plantilla lo ayude a agregar un aspecto personalizado a sus diseños. ¡Háganos saber en los comentarios si tiene alguna pregunta o sugerencia!