Tutorial Divi: Posts recientes en la barra lateral personalizados
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!
Comentarios