Una página de categoría puede ser extremadamente útil para los usuarios al proporcionarles una página completa llena de cosas que les interesan (o buscan). Pero muchas veces la página de categoría puede sufrir cuando se trata de diseño. En Divi, antes de los días de Divi Theme Builder, los desarrolladores tenían que confiar en personalizar manualmente el código php en un archivo de tema de plantilla de página de categoría y luego diseñar la plantilla de página únicamente con CSS externo. Pero ahora, con Divi Theme Builder, ¡este proceso se ha vuelto fácil y divertido!

En este tutorial, le mostraremos cómo crear una plantilla de página de categoría para su blog completamente desde cero utilizando Divi Theme Builder. Le mostraremos cómo configurar rápidamente una nueva plantilla asignada para publicar categorías, así como cómo diseñar la plantilla utilizando los módulos apropiados y el contenido dinámico utilizando Divi Builder.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido a la plantilla de página de categoría que diseñaremos juntos en este tutorial. En esta imagen, se está utilizando para mostrar todas las publicaciones con la categoría «Empresa».

plantilla de página de categoría divi

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Tema Divi instalado (o el Complemento Divi Builder si no está usando el Tema Divi).
  2. Como crearemos una plantilla de página de categoría para publicaciones de blog, deberá tener publicaciones ya creadas en su sitio web con categorías asignadas a ellas.

Después de eso, estás listo para partir.

Módulos y contenido dinámico disponibles para plantillas de página de categoría

Al crear una plantilla de página de categoría para un blog Divi, es importante comprender qué herramientas están a su disposición para que pueda crear de manera efectiva una plantilla que muestre dinámicamente la información correcta. Para una plantilla de página de categoría para publicaciones de blog, estamos más interesados ​​en mostrar publicaciones por 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 «Empresa», debería ver una página de archivo que muestra todas las publicaciones con la categoría «Empresa». Algunos módulos Divi tienen opciones incorporadas para facilitar la visualización de contenido dinámico en una plantilla.

El módulo de blog

El módulo de blog es el módulo principal que se debe usar para mostrar las plantillas de página de categoría. Esto se debe a que tiene la opción integrada para mostrar publicaciones para la página actual.

plantilla de página de categoría divi

Básicamente, esto le dice a Divi que muestre las 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 correctamente las publicaciones por categoría.

Módulo deslizante de publicación y módulo de título de publicación

También puede usar el módulo deslizante Publicar para mostrar las publicaciones de la página actual. Esto es útil para crear un control deslizante de publicación dinámico que muestre las publicaciones generadas al visitar una página de categoría, al igual que puede hacer el módulo de blog.

plantilla de página de categoría divi

El módulo de título de publicación también se puede usar, pero está bastante limitado a la capacidad de mostrar el título de la página de forma dinámica. La mayoría de los otros elementos disponibles en el módulo de título de la publicación no son aplicables a una página de archivo, solo plantillas de publicación específicas.

Título de publicación / archivo (contenido dinámico)

Una forma más fácil de mostrar el Título de la página Publicar / Archivar es usar un módulo Divi normal y luego extraer el Título de la Página Publicar / Archivar usando la función de contenido dinámico disponible en todos los módulos Divi.

Por ejemplo, puede usar un módulo de texto y luego agregar el título de la página de publicación / archivo como contenido dinámico al contenido del cuerpo. Luego puedes diseñar el título como quieras.

plantilla de página de categoría divi

Ahora que comprende las herramientas necesarias para crear una plantilla de página de categoría, comencemos y creemos una juntos.

Cómo crear una plantilla de página de categoría para tu blog

Para esta plantilla de página de categoría, el objetivo es crear un área de cuerpo personalizada para una plantilla que se asigna a todas las páginas de categoría para publicaciones de blog en Divi. No vamos a crear un área personalizada de encabezado o pie de página para esta plantilla. Pero puede usar fácilmente esta plantilla en su propio sitio web con su propio encabezado y pie de página.

Crear y asignar una plantilla personalizada para categorías de publicaciones

Para comenzar, vaya a su Panel de WordPress y navegue hasta Divi> Generador de temas. Luego haga clic en el área vacía del cuadro gris para agregar una nueva plantilla.

plantilla de página de categoría divi

A continuación, asigne la plantilla a todas las páginas de categoría.

plantilla de página de categoría divi

Agregar un nuevo área de cuerpo personalizado a la plantilla

Para crear el cuerpo personalizado para la plantilla, haga clic en el área Agregar cuerpo personalizado y luego seleccione “Crear cuerpo personalizado”.

plantilla de página de categoría divi

Luego elija la opción, «Construir desde cero».

plantilla de página de categoría divi

Agregar título de archivo dinámico

En el Editor de diseño de plantilla, cree una nueva fila de una columna dentro de la sección normal.

plantilla de página de categoría divi

Luego agregue un módulo de texto a la fila.

plantilla de página de categoría divi

Elimine el contenido predeterminado del cuerpo y haga clic en el icono «Usar contenido dinámico» y seleccione la opción «Título de publicación / archivo».

plantilla de página de categoría divi

Una vez que el elemento Título de publicación / archivo esté en su lugar, abra la configuración haciendo clic en el ícono de ajustes.

plantilla de página de categoría divi

Luego, actualice las áreas de entrada Antes y Después para 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 de:

01
<h1>

Después:

01
Articles</h1>

Necesitamos envolver el título en una etiqueta H1 para fines de SEO. La palabra estática «Artículos» se agrega después del título, de modo que si un usuario visita una página de categoría «Empresa», el título leerá «Artículos empresariales».

plantilla de página de categoría divi

Título de archivo dinámico de estilo

Una vez que el contenido dinámico está en su lugar, podemos diseñarlo usando lo siguiente:

  • Fuente de encabezado: Ubuntu
  • Título Fuente: Peso: Negrita
  • Color del texto del encabezado: # 192231
  • Tamaño del texto del encabezado: 48 px (escritorio), 38 px (tableta), 28 px (teléfono)
  • Altura de la línea de rumbo: 1.2em

plantilla de página de categoría divi

Uso del módulo de blog para mostrar publicaciones para la categoría actual dinámicamente

Con el título de la página de categoría dinámica en su lugar, necesitamos agregar el módulo de blog para mostrar las publicaciones de la página de categoría actual.

Agregar nueva fila

Agregue una nueva fila de una columna debajo de la fila superior actual.

plantilla de página de categoría divi

Agregar módulo de blog

Luego agregue un módulo de blog a la fila.

plantilla de página de categoría divi

Actualice las opciones de Contenido de la siguiente manera:

  • Publicaciones para la página actual: SÍ
  • Recuento de publicaciones: 9
  • Mostrar Leer más Botón: SÍ

plantilla de página de categoría divi

Recuerde, debemos asegurarnos de que las Publicaciones para la página actual estén habilitadas para que la página de categoría obtenga el archivo de publicación correcto.

Design Blog Module

Con la configuración de contenido en su lugar, hagamos algunos cambios en el diseño de la siguiente manera:

  • Diseño: cuadrícula

plantilla de página de categoría divi

  • Fuente del título: Ubuntu
  • Peso de la fuente del título: negrita
  • Color del texto del título: # 192231
  • Meta Fuente: Ubuntu
  • Color del texto meta: # 985e6d
  • Meta Tamaño del texto: 13px

plantilla de página de categoría divi

  • Leer más Fuente: Ubuntu
  • Leer más Font Weight: Bold
  • Leer más Estilo de fuente: Subrayado
  • Leer más Color del texto: # 985e6d
  • Fuente de paginación: Ubuntu
  • Color del texto de paginación: # 985e6d
  • Tamaño del texto de paginación: 18 px
  • Altura de la línea de paginación: 2em

plantilla de página de categoría divi

  • Ancho de borde de diseño de cuadrícula: 0px
  • Box Shadow: ver captura de pantalla
  • Caja Shadow Blur Fuerza: 70px
  • Fuerza de propagación de la sombra de la caja: -10px
  • Color de sombra: rgba (25,34,49,0.3)

plantilla de página de categoría divi

En este punto, tenemos una página de categoría básica en funcionamiento con el título de la página y las publicaciones del 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 un control deslizante de publicaciones para obtener las 4 publicaciones más recientes en la categoría actual.

También podemos usar un módulo deslizante de publicación para mostrar dinámicamente las publicaciones de la página de categoría. Aquí está cómo hacerlo.

Agregar nueva fila

Primero agregue una nueva fila con un diseño de columna 1/3 2/3 debajo de la fila superior.

plantilla de página de categoría divi

Agregar módulo deslizante de publicaciones

En la columna izquierda, agregue un módulo deslizante de publicación.

plantilla de página de categoría divi

Luego actualice las opciones de contenido del control deslizante de la publicación de la siguiente manera:

  • Publicaciones para la página actual: SÍ
  • Recuento de publicaciones: 4
  • Mostrar meta del mensaje: NO

plantilla de página de categoría divi

Módulo de control deslizante de postes de diseño

Ahora que el contenido del control deslizante de publicación está en su lugar, actualice la configuración de diseño de la siguiente manera:

  • Alineación de texto: izquierda
  • Fuente del título: Ubuntu
  • Altura de la línea de título: 1.3em
  • Usar estilos personalizados para el botón: SÍ
  • Tamaño del texto del botón: 16 px
  • Color de fondo del botón: # 985e6d
  • Ancho del borde del botón: 0px
  • Fuente del botón: Ubuntu

plantilla de página de categoría divi

  • Box Shadow: ver captura de pantalla
  • Fuerza de desenfoque de sombra de caja: 70 px
  • Fuerza de propagación de la sombra de la caja: -10px
  • Color de sombra: rgba (25,34,49,0.3)

plantilla de página de categoría divi

Crear un módulo de blog con diseño de ancho completo

En la columna derecha, podemos agregar otro módulo de blog con un diseño de ancho completo en lugar de un diseño de cuadrícula. Esto nos permitirá proporcionar otra área de visualización única para nuestras publicaciones de categoría.

Agregar módulo de blog

Para ahorrar tiempo, copiemos el módulo de blog existente en la fila inferior y péguelo en la columna derecha al lado del control deslizante de la publicación.

plantilla de página de categoría divi

Actualice la configuración del módulo de blog duplicado

Abra la configuración del módulo de blog duplicado y actualice lo siguiente:

  • Publicaciones para la página actual: SÍ
  • Recuento de publicaciones: 3
  • Longitud del extracto: 120
  • Mostrar imagen destacada: NO (al menos por ahora)
  • Mostrar paginación: NO

plantilla de página de categoría divi

  • Diseño: ancho completo:
  • Box Shadow: ninguno

plantilla de página de categoría divi

Resultado hasta ahora

Hasta ahora, el resultado es una visualización mínima de las tres publicaciones de blog.

plantilla de página de categoría divi

Pero si queremos ir un paso más allá, podemos agregar algunas pequeñas imágenes destacadas a la izquierda de cada uno de los extractos de la publicación.

Use CSS personalizado para crear imágenes destacadas más pequeñas que floten a la izquierda del contenido del extracto de la publicación.

Para agregar algunas pequeñas imágenes destacadas a la izquierda de los extractos de publicaciones de blog, necesitamos agregar algunos CSS personalizados.

Dar clase de CSS de módulo de blog personalizado

Para empezar, necesitamos agregar una clase CSS personalizada al módulo Blog. Abra la configuración del blog y, en la pestaña avanzada, ingrese lo siguiente:

  • Clase CSS: left-blog-image

plantilla de página de categoría divi

Agregar código CSS con un módulo de código

Como solo estamos agregando un pequeño fragmento de CSS a esta plantilla, podemos usar un módulo de código. Agregue un módulo de código debajo del módulo de blog.

plantilla de página de categoría divi

Insertar código CSS

Luego ingrese el siguiente CSS dentro del área de contenido del código:

01
02
03
04
05
06
07
08
09
10
11
12
13
<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

plantilla de página de categoría divi

Actualice la configuración del módulo de blog para incluir la imagen destacada

Ahora, podemos volver a agregar la imagen destacada para que se muestre en la nueva posición a la izquierda gracias al fragmento de CSS.

plantilla de página de categoría divi

Estilo adicional a la plantilla

Antes de terminar, hagamos algunos retoques menores al diseño.

Agregar y diseñar un divisor debajo del título del archivo

Agregue un módulo divisor directamente debajo del título de la página de archivo en la parte superior de la plantilla.

plantilla de página de categoría divi

Luego actualice la configuración del divisor de la siguiente manera:

  • Color de línea: # 985e6d
  • Divisor de peso: 3px
  • Ancho Máx .: 200px

plantilla de página de categoría divi

Agregar divisor de sección al diseño

Abra la configuración de la sección y agregue un divisor de sección de la siguiente manera:

  • Estilo divisor superior: ver captura de pantalla
  • Color del divisor superior: rgba (73,78,107,0.07)
  • Altura del divisor: 90vw
  • Divider Flip: horizontal y vertical

plantilla de página de categoría divi

Utilice el número de desplazamiento de publicación con cada módulo para evitar pantallas de publicación duplicadas

En este momento, todos nuestros módulos están sacando el mismo contenido de publicación para la página de categoría actual. Para evitar que esos módulos muestren duplicados, podemos usar la opción Número de desplazamiento de publicación para «omitir» un cierto número de publicaciones que muestran el feed de publicaciones.

Desplazamiento de publicación de módulo de blog de ancho completo

Dado que nuestro control deslizante de publicaciones ya muestra la primera publicación (la 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 del control deslizante de la publicación y actualice el número de desplazamiento de la publicación de la siguiente manera:

  • Número de compensación de publicación: 1

plantilla de página de categoría divi

Ahora el módulo comenzará con la segunda publicación más reciente para la página de categoría actual.

Desplazamiento de publicación del módulo de blog de cuadrícula

Una vez que el primer desplazamiento de la publicación del módulo de blog está en su lugar, necesitamos 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 desplazamiento de la publicación de la siguiente manera:

  • Número de compensación de publicación: 4

Necesitamos establecer el número de desplazamiento en 4 para tener en cuenta las 4 publicaciones que ya se muestran arriba. El módulo ahora continuará donde lo dejaron los otros módulos y comenzará con la quinta publicación más reciente.

plantilla de página de categoría divi

Resultados finales

Para ver el resultado final, vaya al panel de WordPress y navegue a Publicaciones> Categorías. Luego haga clic para ver una de las categorías existentes.

plantilla de página de categoría divi

Aquí esta el resultado final.

plantilla de página de categoría divi

Y aquí está en la pantalla de la tableta y el teléfono.

plantilla de página de categoría divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!