- Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
- Theme Builder de Divi. Lo encontramos en Divi > Generador de temas.
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 muestro 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.
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.
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.
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:
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:
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).
Ahora podemos asignarle estilos al título dinámico de la página de categoría. Por ejemplo los siguientes:
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í:
De ésto lo más importante es marcar en Sí la opción Posts For Current Page, para que el módulo muestre solo las entradas de la categoría actual.
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.
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.
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:
Y en la pestaña Diseño configuramos lo siguiente:
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.
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:
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 ;
}
}
</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.
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:
¡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.
Al momento de activar el constructor Divi se crea una nueva opción en el menú…
Divi es un constructor para WordPress que se instala como un si fuera un tema…
En esta guía te muestro paso a paso cómo crear una caja con información del…
En esta guía te muestro cómo cambiar el encabezado de la página home para que…
En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…
En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…
