Una página de categoría puede ser extremadamente útil para los usuarios, dándoles una página completa llena de cosas que les interesa (o búsqueda). Pero a menudo la página de categoría puede sufrir cuando se trata de diseño. En el DIV, antes de los días de los días del constructor de temas Div, los desarrolladores tuvieron que confiar en la personalización manual del código PHP en una plantilla de categoría de página temática y luego en la estilización de la plantilla de página solo con CSS externo. Pero ahora, con Divic Builder, ¡este proceso se ha vuelto fácil y agradable! En este tutorial, le mostraremos cómo crear una plantilla de página de categoría para su blog completo, utilizando Divic Builder. Le mostraremos cómo configurar rápidamente una nueva plantilla atribuida a las publicaciones, así como diseñar la plantilla utilizando los módulos apropiados y los contenidos dinámicos utilizando Divi Builder.
¡Vamos a empezar! Tire de la vista con un vistazo rápido a la plantilla de página de categoría que diseñaremos juntos en este tutorial. En esta imagen, se utiliza para mostrar todas las publicaciones en la categoría de “negocio”.

Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia de la plantilla en su sitio web, deberá acceder al Builder Divic y utilizar la opción de portabilidad para importar el archivo .json en el generador de temas.
Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás 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).
Debido a que crearemos una plantilla de página de categoría para publicaciones de blog, deberá tener publicaciones ya creadas en su sitio con categorías asignadas a ellos.
Después de eso, estás listo para irte. Módulos dinámicos y contenido disponibles para plantillas de página de categoría Al crear una plantilla de página de categoría para un Div. Es importante comprender qué herramientas están disponibles para usted, por lo que puede construir efectivamente una plantilla que muestre dinámicamente la información. Correcto. Para una plantilla de página de categoría para publicaciones de blog, estamos más interesados ​​en mostrar publicaciones de acuerdo con la categoría actual cada vez que un usuario visita una página de categoría. Por ejemplo, si un usuario hace clic en el enlace de la categoría de “negocio”, debe ver una página de archivo que muestre todas las publicaciones con la categoría de “negocio”. Algunos módulos Divi tienen opciones incorporadas para mostrar el contenido dinámico en una plantilla bastante fácil. El blog del módulo de blog es el módulo principal que debe usarse para mostrar las plantillas de página de categoría. Esto se debe a que tiene la opción Built -in para mostrar publicaciones para la página actual.
Esto prácticamente le dice que muestre publicaciones que normalmente se generan cada vez que un usuario visita la página. Entonces, con la opción configurada para mostrar “publicaciones para la página actual”, el usuario podrá ver una página de categoría y mostrar publicaciones correctamente. Publicar el modo deslizante y el modo de publicación de título, también puede usar el módulo Slider de Post para mostrar las publicaciones de la página actuales. Esto es útil para crear una diapositiva de publicación dinámica que muestra las publicaciones generadas al visitar una página de categorías, al igual que el módulo de blog.
El módulo de publicación de título también se puede utilizar, pero se limita a la capacidad de visualización dinámica del título de la página. La mayoría de los otros elementos disponibles en el título de publicación no se aplican a una página de archivo, sino solo a plantillas de publicación específicas. Publicación / Título del archivo (Contenido dinámico) Una forma más fácil de mostrar el título de la página Post / Archiving es usar un módulo de división ordinario y luego ingresar el título de la página Post / Archiving utilizando la función de contenido dinámico dentro de todos los módulos de Divic. Por ejemplo, puede usar un módulo de texto y luego agregar el título de la página Post / Archive como un contenido dinámico al contenido del cuerpo. Luego, puede estilizar el título de todos modos. Ahora que comprende las herramientas necesarias para crear una plantilla de página de categoría, omitir y crear una juntas. Cómo crear una plantilla de página de categoría para su blog para esta plantilla de página de categoría, el objetivo es crear un área de cuerpo personalizada para una plantilla que se asigne a todas las páginas de categoría para las publicaciones de blog en DIV. No crearemos un encabezado personalizado o un área en el sótano para esta plantilla. Pero puede usar fácilmente esta plantilla en su propio sitio web con su propio encabezado y sótano. Creación y asignación de una plantilla personalizada para publicar categorías para comenzar, acceder al tablero de WordPress y navegar en Div> Temo Builder. Luego haga clic en el área vacía del cuadro gris para agregar una nueva plantilla.

Luego asigne la plantilla a todas las categorías de páginas.

Agregando un nuevo área de cuerpo personalizada a la plantilla para construir el cuerpo personalizado para la plantilla, haga clic en el cuerpo de agregar y luego seleccione “Construir cuerpo personalizado”. Luego elija la opción “Construir desde cero”.

Agregue un título de archivo dinámico al editor de apariencia de plantilla, cree una nueva fila con una sola columna en la sección habitual.

Luego agregue un módulo de texto en una fila.

Elimine el contenido predeterminado del cuerpo y haga clic en el icono “Usar contenido dinámico” y seleccione el título “Post / Archive.

Una vez que el elemento de título Post / Archiving esté en su lugar, abra la configuración haciendo clic en el icono de la rueda.

Luego actualice las áreas de entrada antes y después de envolver el contenido en una etiqueta H1 y agregue una pieza adicional de contenido estático después del título dinámico de la siguiente manera: antes:

después: artículos

Debemos envolver el título en -O Etiqueta H1 para fines de SEO. El título agrega la palabra estática “artículos”, por lo que si un usuario accede a una página de la categoría “Negocios”, el título leerá “artículos de negocios”.

Estilo de archivo dinámico de título Una vez que el contenido dinámico está en su lugar, podemos estilizarlo utilizando lo siguiente:

Fuente del título: Ubuntu

Fuente del título: Peso: Bold

Texto Pre -Text: # 192231

Encabezado de texto de tamaño: 48 PX (escritorio), 38 PX (tableta), 28 PX (teléfono)
Altura de la línea de dirección: 1.2em
Usando el módulo de blog para mostrar dinámicamente publicaciones para la categoría actual con la página de categoría dinámica, debemos agregar el módulo de blog para mostrar las publicaciones de la página de categoría actual. Agregue una nueva línea Agregue una nueva fila con una columna debajo de la fila superior actual. Agregue un modo de blog y luego agregue un módulo de blog en una fila.
Actualizar opciones de contenido de la siguiente manera:
Publicaciones para la página actual: Sí
Número de publicaciones: 9

Muestra el botón Leer más: Sí

Recuerde, debemos asegurarnos de que las publicaciones para la página actual se activen para la página de categoría para extraer el archivo de publicación correcto. El modo de diseño del blog con la configuración de contenido en vigor, para hacer algunos cambios de diseño de la siguiente manera:


Apariencia: cuadrícula
Título de la fuente: Ubuntu
Título Fuente de peso: Bold
Color de texto del título: # 192231

Meta Font: Ubuntu
Meta Text Color: # 985e6d

Meta de texto Tamaño: 13 PX
Leer más fuente: Ubuntu
Leer más fuente de peso: Bold
Leer más estilo de fuentes: subrayar
Leer más color de texto: # 985E6D
Pagination Font: Ubuntu

El color del texto de la paginación: # 985E6D
Tamaño del texto de la paginación: 18 PX
Altura de la línea de paginación: 2em
Ancho del borde de la cuadrícula de apariencia: 0 PX
Box Shadow: Ver captura de pantalla
Poder de poco claro de la sombra de la caja: 70 px
Poder de extender la sombra de la caja: -10px
Color de la sombra: RGBA (25,34,49,0.3)

En este momento tenemos una página de la categoría básica en operación completada con el título de la página y las publicaciones de blog que se mostrarán correctamente de acuerdo con la página de categoría actual. Sin embargo, podemos ser más creativos agregando un módulo adicional para mostrar la publicación de manera creativa. Cree una publicación para publicaciones para extraer las 4 últimas publicaciones en la categoría actual. Podemos usar un módulo post -posto para mostrar las publicaciones en la página de categoría dinámica. Aquí le mostramos cómo hacerlo. Agregue una nueva fila Primero agregue una nueva fila con una apariencia de 1/3 de columna 2/3 debajo de la fila superior. Coloque el módulo posterior al control deslizante a la columna izquierda, agregue un módulo posterior a la poste.
Luego actualice las opciones de contenido de Post -Glisor de la siguiente manera:
Publicaciones para la página actual: Sí
Número de publicaciones: 4
Visualización meta meta: no

Design Post Slider Module Ahora que el contenido de publicación SLISOR está en su lugar, actualice la configuración de diseño de la siguiente manera:

Alineación de texto: izquierda

Título de la fuente: Ubuntu
Altura de la línea de título: 1.3em
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 16 PX

El color de fondo del botón: # 985E6D
El ancho del nudo del botón: 0 PX
Botón de fuente: Ubuntu
Box Shadow: Ver captura de pantalla
Poder de poco claro de la sombra de la caja: 70 px
Poder de extender la sombra de la caja: -10px
Color de la sombra: RGBA (25,34,49,0.3)
Cree un módulo de blog con una apariencia de ancho completo en la columna derecha, podemos agregar otro módulo de blog con un ancho completo en lugar de un aspecto de cuadrícula. Esto nos permitirá ofrecer otro área de visualización única para publicaciones en nuestra categoría. Agregue un módulo de blog para ahorrar tiempo, copie el módulo de blog existente en la fila inferior y pegue a la columna derecha junto a la diapositiva de publicación. Permita que la configuración del módulo duplicada abra la configuración del módulo de blog duplicada y actualice lo siguiente:
Publicaciones para la página actual: Sí

Número de publicaciones: 3
Longitud adicional: 120
Mostrar la imagen presentada: No (al menos por el momento)
Show Paging: No

Apariencia: ancho completo:

Box Shadow: Ninguno
El resultado hasta ahora, el resultado es la visualización mínima de las tres publicaciones de blog.
Pero si queremos dar un paso más allá, podemos agregar algunas imágenes pequeñas presentadas a la izquierda de cada fragmento desde la publicación. Use CSS personalizado para crear imágenes recomendadas más pequeñas que floten a la izquierda de la publicación de publicación. Para agregar algunas pequeñas imágenes presentadas a la izquierda de los fragmentos de publicaciones de blog, debemos agregar algunas CSS personalizadas. Dé al módulo de blog CSS CSS CSS para que comience, necesitamos agregar una clase CSS personalizada al módulo de blog. Abra la configuración del blog y, en la pestaña avanzada, ingrese lo siguiente:
Clase CSS: Bloque izquierdo-imagina
Agregue el código CSS con un módulo de código porque solo agregamos un fragmento CSS pequeño a esta plantilla, podemos usar un módulo de código. Agregue un módulo de código en el módulo de blog.
Ingrese el código CSS y luego ingrese el siguiente CSS en la zona de contenido del código: @Media (Min-Width: 981px) {

.Left-Blog-Image .ET_PB_POST .Ntry-FeAte-IMage-Ill {
Flotador izquierdo;

Ancho: 100%;

Max-Width: 150px;
margen: 0 20px 30px 0;

}

.Left-Blog-Image .et_pb_post {
Margen-Bottom: 20px! Importante;
}
}

Actualice la configuración del módulo de blog para incluir la imagen recomendada ahora, podemos agregar la imagen presentada para que se muestre en la nueva posición a la izquierda, gracias al fragmento CSS.
Estilo adicional para la plantilla antes de completar las cosas, para hacer algunos ajustes de diseño menores. Agregue y estilice un divisor bajo el título del archivo Agregue un módulo divisor directamente bajo el título de la página del archivo en la parte superior de la plantilla.
Luego actualice la configuración del divisor de la siguiente manera:
Color de línea: # 985e6d
Peso del divisor: 3 PX
Ancho máximo: 200 PX
Agregue el divisor de la sección a la aparición Abra la configuración de la sección y agregue un separador de sección de la siguiente manera:
El estilo del divisor superior: ver la captura de pantalla

Mayor color divisor: RGBA (73,78,107,077)

Altura del divisor: 90VW

Divisor de flip: horizontal y vertical
Use el número de publicación de compensación con cada módulo para evitar mostrar publicaciones duplicadas en este momento, todos nuestros módulos atraen el mismo contenido para la página de categoría actual. Para evitar que estos módulos muestren duplicados, podemos usar la opción de número de desplazamiento posterior para “saltar” un cierto número de publicaciones que muestran el flujo de publicación. Compate la publicación para el módulo de ancho completo porque nuestra diapositiva de publicación ya está mostrando la primera publicación (más reciente) para la página de categoría actual, podemos compensar esta publicación en el módulo de blog adyacente. Abra la configuración para el módulo de blog a la derecha de la diapositiva de publicación y actualice el número de publicación de la siguiente manera: Número de compensación posterior: 1
Ahora el módulo comenzará con la segunda publicación más reciente para la página de categoría actual. Modo de blog de compensación de publicación Una vez que la primera compensación de la publicación del módulo de blog está en su lugar, debemos compensar las publicaciones en el módulo de blog principal en la parte inferior de la plantilla. Abra ese módulo de blog y actualice el número de compensación laboral de la siguiente manera:
Número de desplazamiento posterior: 4

Debemos establecer el número de compensación en 4 para tener en cuenta las 4 publicaciones que ya se muestran anteriormente. El módulo ahora comenzará desde donde permanecen los otros módulos y comenzarán con la quinta publicación más reciente.
Resultados finales Para ver el resultado final, acceder al tablero de WordPress y navegar por las categorías de publicaciones>. Luego haga clic para ver una de las categorías existentes.
Aquí esta el resultado final.
Y aquí está en la visualización de la tableta y el teléfono.