Una categoría de tu blog puede ser algo extremadamente útil para los lectores ya que se trata de una página llena de cosas que les pueden interesar.

Pero la mayoría de las veces en WordPress es casi imposible o muy complicado diseñar una página de categoría para dotarla de la forma, el estilo y los contenidos que nosotros queremos.

Incluso con Divi, hasta hace poco no era posible utilizar el constructor más que en páginas y entradas. Pero desde el lanzamiento de Divi 4.0 y su Theme Builder, diseñar una página de categoría es muy fácil y hasta divertido.

En este tutorial te voy a mostrar cómo crear una plantilla de categoría para tu blog completamente desde cero utilizando Divi.

El siguiente es un ejemplo de cómo se vería una categoría utilizando la plantilla que vamos a diseñar en este tutorial.

Cómo crear una plantilla de Categoría para tu blog

Esta plantilla que vamos a crear la vamos a asignar a todas las páginas de categorías para que se muestren, con el mismo diseño o estructura, los posts de la categoría en la que estemos.

Pero también es posible crear diferentes diseños para diferentes categorías.

#1. Asignar una plantilla personalizada a las categorías

Para comenzar, vamos al Escritorio de WordPress y buscamos la opción Divi > Theme Builder. Luego hacemos clic donde dice Add New Template.

En segundo lugar asignamos la plantilla que estamos creando a todas las categorías (All Category Pages).

Y hacemos clic en Add Custom Body y elegimos Build Custom Body para comenzar a construir la plantilla de página de categoría.

Después elegimos Construir desde cero o Build From Scratch.

Luego de ésto te vas a encontrar dentro del editor visual de Divi que ya conoces, como si estuvieras diseñando una nueva página.

Comencemos con el diseño de la categoría.

#2. Agregar un título dinámico con el nombre de la categoría

Lo primero que vamos a necesitar es que la página muestre el nombre de la categoría en la que el lector se encuentre en un determinado momento. Por lo tanto no podemos escribirlo así sin más.

Para conseguir que Divi muestre el nombre de la categoría en la que estamos tenemos que usar el contenido dinámico.

Pero antes que nada insertamos una fila de una sola columna.

Después agregamos un módulo de texto.

Borramos el texto que viene pre-cargado y, utilizando el ícono de Contenido Dinámico, añadimos la opción Post/Archive Title (Título de la Entrada o Archivo).

Una vez que tenemos el elemento Post/Archive Title hacemos clic en sus ajustes.

Y vamos a completar donde dice Antes y Después:

  • Antes: <h1>
  • Después: </h1>

Esto es para que transforme el nombre de la categoría en el encabezado H1 de la página. También podrías añadir cualquier otra palabra estática al título, por ejemplo:

  • Antes: <h1>Entradas de la categoría
  • Después: </h1>

Lo que daría como resultado el título: Entradas de la categoría Tutoriales. Siendo Tutoriales el nombre de la categoría (contenido dinámico).

#3. Asignarle estilos al título de la página de categoría.

Ahora podemos asignarle estilos al título dinámico de la página de categoría. Por ejemplo los siguientes:

  1. Heading Font: Ubuntu
  2. Heading Font: Weight: Bold
  3. Heading Text Color: #192231
  4. Heading Text Size: 48px (desktop), 38px (tablet), 28px (phone)
  5. Heading Line Height: 1.2em

#4. Mostrar entradas de la categoría con el Módulo de Blog

Ahora que ya tenemos el título de la página de categoría necesitamos empezar a mostrar las entradas publicadas en la categoría. Para eso vamos a usar, en primer lugar, el módulo de blog de Divi.

Para ésto añadimos una nueva fila.

Y luego un módulo de blog.

Ajustamos las opciones de la pestaña Contenido del módulo de Blog, por ejemplo así:

  1. Posts for Current Page: SI
  2. Post Count: 9
  3. Show Read More Button: SI

De ésto lo más importante es marcar en la opción Posts For Current Pagepara que el módulo muestre solo las entradas de la categoría actual.

#5. Ajustar los estilos del módulo de blog

Ahora podemos definir algunos estilos para mejorar el aspecto con el que se van a mostrar las entradas de la categoría.

Lo primero es elegir en la pestaña Diseño, sección Diseño la opción Rejilla.

  1. Title Font: Ubuntu
  2. Title Font Weight: Bold
  3. Title Text Color: #192231
  4. Meta Font: Ubuntu
  5. Meta Text Color: #985e6d
  6. Meta Text Size: 13px

  1. Read More Font: Ubuntu
  2. Read More Font Weight: Bold
  3. Read More Font Style: Underline
  4. Read More Text Color: #985e6d
  5. Pagination Font: Ubuntu
  6. Pagination Text Color: #985e6d
  7. Pagination Text Size: 18px
  8. Pagination Line Height: 2em

  1. Grid Layout Border Width: 0px
  2. Box Shadow: ver captura de pantalla
  3. Box Shadow Blur Strength: 70px
  4. Box Shadow Spread Strength: -10px
  5. Shadow Color: rgba(25,34,49,0.3)

Y acá podríamos dar por finalizado este tutorial sobre cómo personalizar una categoría con Divi.

En este punto, tenemos una página de categoría básica completa, con el nombre de la categoría y las publicaciones de blog, que se mostrarán correctamente de acuerdo con la página de categoría en la que nos encontremos.

Sin embargo, podemos ser más creativos agregando un par de módulos más.

#6. Insertar un módulo Post Slider para mostrar los últimos posts

Vamos a insertar un módulo Post Slider para mostrar de manera destacada las 4 últimas entradas de la categoría. Para ésto agregamos una nueva fila debajo del título de la página.

Y vamos a elegir la fila que tiene 2 columnas repartidas en 1/3 y 2/3 del ancho.

En la columna de la izquierda vamos a insertar el módulo Post Slider, o Deslizador (según la traducción de Divi que tengas).

Después asignamos las siguientes opciones en la pestaña Contenido:

  1. Posts for Current Page: SI
  2. Post Count: 4
  3. Show Post Meta: NO

Y en la pestaña Diseño configuramos lo siguiente:

  1. Text Alignment: Left
  2. Title Font: Ubuntu
  3. Title Line Height: 1.3em
  4. Use Custom Styles for Button: SI
  5. Button Text Size: 16px
  6. Button Background Color: #985e6d
  7. Button Border Width: 0px
  8. Button Font: Ubuntu

  1. Box Shadow: ver captura de pantalla.
  2. Box Shadow blur Strength: 70px
  3. Box Shadow Spread Strength: -10px
  4. Shadow Color: rgba(25,34,49,0.3)

#7. Insertar otro módulo de blog de ancho completo

En la columna derecha de la misma fila donde insertamos el slider vamos a poner otro módulo de blog pero esta vez de Ancho Completo en vez de Rejilla, y le damos formato.

  1. Posts for Current Page: SI
  2. Post Count: 3
  3. Excerpt Length: 120
  4. Show Featured Image: NO (al menos por ahora).
  5. Show Pagination: NO

  1. Layout: Fullwidth
  2. Box Shadow: none

Y así es como nos va quedando…

Pero vamos a mejorarlo un poco más. Para darle un mejor aspecto y más profesional vamos a añadir la imagen destacada del post a la izquierda de cada uno. Para ésto necesitamos añadir un poco de código CSS.

Primero vamos a la pestaña Avanzado del módulo de blog y en Clase CSS ponemos lo siguiente:

  1. Clase CSS: left-blog-image

Después añadimos un módulo de código en cualquier lugar de la página para poder añadir fácilmente el CSS necesario.

Y pegamos el siguiente código:

<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>

Y por último vamos nuevamente a la pestaña Contenido y activamos la opción de mostrar la imagen destacada. También apagamos el botón Leer mas.

Y ahora sí nuestra página de categoría queda con aspecto bien profesional.

#8. Evitar que se muestren entradas repetidas

Cómo quizás te estés imaginando, al insertar en una misma página 3 módulos que muestran entradas, éstas van a aparecer repetidas. Para evitarlo tenemos que usar la opción Número de desplazamiento o Post Offset Number que se encuentra en la pestaña Contenido de cada módulo.

En ese campo tenemos que poner desde que número de orden se comienzan a mostrar las entradas, donde cero muestra la entrada más reciente, 1 la anterior y así sucesivamente… Por ejemplo podemos configurarlo de esta forma:

  • 0 para el slider.
  • 1 para el módulo de blog de ancho completo.
  • 4 para el módulo de blog en rejilla.

 

¡Y así de bonita nos queda nuestra página de categoría terminada!

¡Ojo! Antes de irte no te olvides de hacer estas 2 cosas: debes Guardar los cambios en el layout que acabas de diseñar. Y luego de cerrar la plantilla también debes Guardar los cambios en el Theme Builder.

 

Espero que esta guía te ayude a diseñar páginas de categorías espectaculares para tu blog con WordPress y Divi.

Y no te olvides que la opción de desplazamiento de entradas te permite combinar múltiples módulos de blog y módulos de slider en una misma página sin ver publicaciones repetidas.