Para crear la sección de entradas recientes con Divi vamos a usar las siguientes herramientas:

• Divi. Actualizado a la última versión. Consíguelo aquí.
• Theme Builder de Divi. Vamos a usarlo para editar la plantilla de entradas agregando la sección de entradas recientes.
• Módulo Blog de Divi. Lo vamos a usar para mostrar la última entrada de cada categoría.
• Módulo Texto de Divi. Lo vamos a usar para mostrar la etiqueta de la categoría.

Hoy te voy a mostrar cómo crear con Divi una sección de entradas recientes que nos muestre la última entrada de cada categoría.

La sección de entradas recientes es un clásico en WordPress y en cualquier tipo de blog.

Por lo general se ubica al final del contenido de todas las entradas del blog y tiene un doble propósito:

1. Incentivar al lector a que siga navegando por el sitio web.
2. Dar a conocer las publicaciones más nuevas que son las que menos tráfico reciben.

Cómo Hacer una Sección de Entradas Recientes con Divi

Normalmente es necesario agregar un plugin para mostrar entradas recientes en WordPress, pero en este caso lo vamos a hacer con el Theme Builder de Divi.

Además, no conozco ningún plugin de entradas recientes para WordPress que ofrezca tanta personalización como el editor de Divi.

Paso a paso

En el video te muestro paso a paso cómo crear una sección de entradas recientes con Divi clasificadas por categorías.

Paso 1 – Fila con 4 columnas

Añadimos una fila con estructura de 4 columnas en el lugar donde queremos agregar la sección de entradas recientes con Divi.

SEPARACIÓN:

• Relleno superior: 0px

Paso 2 – Módulo Blog

Añadimos un módulo Blog en cualquiera de las columnas para mostrar la última entrada de la categorías y lo configuramos según lo indicado a continuación.

CONTENIDO:

• Publicaciones para la página actual: No
• Tipo de contenido: Entrada
• Recuento de entradas: 1
• Categorías incluidas: elegir una sola categoría

ELEMENTOS:

• Mostrar categoría: No.
• Mostrar extracto: No.
• Mostrar paginación: No.

FONDO:

• Color del fondo: blanco
• Color del fondo (Flotar): elije un color

TEXTO DEL TÍTULO:

• Fuente: Default
• Peso de la fuente: Semi bold
• Estilo: Mayúsculas
• Tamaño: 24px.
• Espacio entre letras: 1px
• Altura de línea: 1.4em

TEXTO DE LOS METADATOS:

• Peso de la fuente: Claro
• Espacio entre letras: 3px

TAMAÑO:

• Altura mínima: 420px

SEPARACIÓN:

• Relleno (Superior, base, izquierda y derecha): 5%

SOMBRA DE LA CAJA:

• Estilo de sombra: seleccionar la primera opción.

Animación:

• Estilo de la animación: Zoom o Alejar.

Paso 3 – Módulo Texto

Añadimos un módulo Texto para crear la etiqueta de la categoría. Lo arrastramos arriba del módulo Blog y configuramos según lo indicado a continuación.

TEXTO:

• Cuerpo: nombre de la categoría.

FONDO:

• Color de fondo: utilizar el mismo color que elegiste para el módulo Blog en Flotar.

TEXTO:

• Fuente: Default
• Peso de la fuente: Ultra negrita.
• Color: blanco
• Alineación del texto: centrado

TAMAÑO:

• Ancho: 120px

SEPARACIÓN:

• Margen superior: 60px
• Margen inferior: -80px
• Relleno superior y base: 10px

ANIMACIÓN:

• Estilo de animación: Desvanecer.

PUESTO:

• Indice Z: 1

Paso 4 – Columna 1

Aplicamos a la columna una transformación para que aumente de tamaño cuando pasamos por encima.

TRANSFORMAR:

• Escala (Flotar): 115%

Paso 5 – Columnas 2, 3 y 4

Borramos las 3 columnas vacías y duplicamos la columna en la que estuvimos trabajando hasta tener las 4 columnas iguales.

Paso 6 – Ajustar categorías

Cambiamos las categorías y colores en las otras 3 columnas, tanto en el módulo de blog como en la etiqueta, hasta tener 4 categorías con sus respectivos colores.

Ten en cuenta de que coincida el color de fondo de la etiqueta (módulo Texto) con el color de fondo Flotar del módulo Blog.

Esta sección de entradas recientes que acabamos de hacer con Divi no solo es útil en una plantilla de entradas. También podrías añadirla a la home o a cualquier página del sitio web.

Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.