Tutorial Divi: Posts recientes en la barra lateral personalizados

Inicio / Blog / Divi Blog Magazine / Tutorial Divi: Posts recientes en la barra lateral personalizados

Autor: Jefferson M

Publicación: 10 Nov, 2020

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

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

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

4 + 5 =


Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi