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!
0 comentarios