En este tutorial de Divi te enseñamos a crear y personalizar posts recientes en la barra lateral de tu blog en Divi, y lo haremos de manera sencilla con algo de código CSS personalizado. Este es otro tutorial de nuestra serie de contenidos de Tutoriales Free donde nos centramos en el mejoramiento y personalización del blog en Divi.

Tiempo de lectura estimado: 3 minutos

Índice

Con este tutorial lograrás este resultado:

En Divi las opciones para mostrar nuestro contenido del blog son bastante amplias pero siempre podemos crear más. En este caso aprenderemos a configurar una barra lateral con los posts más recientes del blog.

Mostrar una barra lateral con los posts recientes deja a la vista más contenido y aumenta el tiempo de la visita de los usuarios. Permite a los usuarios navegar entre otros posts sin entrar en algún menú o retroceder a la página principal. Este es un tutorial inspirado en el tutorial de Nelson Miller de Pee-aye Creative.

¿Cómo mostrar los posts recientes en la barra lateral?

¡Comencemos!

Configuración inicial

Configura el módulo de blog en pantalla completa con la pestaña de Diseño y luego en Layout, que debería estar definida por defecto. Puedes darle estilo al texto del título y la metadescripción de las entradas que se mostrarán en los posts recientes. La barra lateral también mostrará la fecha e imagen.

Recuerda que este módulo no será un widget, así que si ya tienes uno, solo debes agregar este módulo encima o debajo del módulo de barra lateral en tu página del blog o donde quieras con el Divi Builder.

Añade la clase CSS

Lo siguiente que debes hacer es agregar la clase CSS al módulo que acabas de añadir. Entra a la pestaña de Avanzado, luego en CSS personalizado y añade “ud-blog-sidebar-list” en el campo de input.

Debes copiar y pegar el snippet a continuación en las Opciones de Tema de Divi o en las opciones de la página en CSS personalizado para ver los posts recientes en la barra lateral de tu página.

/*Código CSS para mostrar lista de de post recientes en barra lateral*/

/*Ancho de la imagen*/

.ud-blog-sidebar-list .entry-featured-image-url {
	width: 100px;
	float: left;
	margin-bottom: 0!important;
}


/*Ancho del texto*/

.ud-blog-sidebar-list .entry-title,
.ud-blog-sidebar-list .post-meta {
	width: calc(100% - 100px);
	float: left;
	padding-left: 20px;
}


/*Hacer imagen cuadrada*/

.ud-blog-sidebar-list .entry-featured-image-url {
	padding-top: 100px;
	display: block;
}

.ud-blog-sidebar-list .entry-featured-image-url img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}


/*Ajustar espaciado y generar borde en los post*/

.ud-blog-sidebar-list .et_pb_post:not(:last-child) {
	border-bottom: 1px solid #dddddd!important;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

Si no deseas que las fotos de los posts recientes se vean cuadradas, puedes cambiar la altura y anchura en el snippet. Recuerda que en la configuración del módulo es donde debes personalizar el título, el meta texto y la imagen redondeada en las esquinas.

Tips adicionales

• ¿Quieres personalizar los posts de tu blog? Te dejamos este tutorial y un plugin totalmente gratis para que des un nuevo aspecto a tus entradas.
• ¿Qué tipos de blog posts atraen más tráfico a tu página web? Conócelos todos y toma ideas para tu web.
• ¿Necesitas que la imagen de tu web tenga un texto encima? Este tutorial súper fácil te puede ayudar.
• Para tu página de blog: Cómo cambiar la paginación.
• ¡Más opciones para tu blog! Personaliza el botón de “Leer más” con este tutorial.

¿Ves que es facilísimo? ¡No te pierdas nuestros tutoriales premium con tu suscripción de UXDivi!