Cómo diseñar un área de widget de publicaciones recientes desplazables en Divi


El módulo de la barra lateral de Divi es una herramienta extremadamente útil para integrar áreas de widgets personalizados en su diseño. Esto le permite mostrar cualquier widget de WordPress dentro de un diseño Divi. En este tutorial, le mostraré cómo crear un área de widget de publicaciones recientes desplazable en Divi. Diseñaré una sección "De nuestro blog" con el área del widget de publicaciones recientes en el lado derecho de un módulo de blog. Esto será perfecto para mostrar algunas de sus publicaciones de blog más recientes en una página de inicio o página de destino.

¡Empecemos!

Vistazo

Aquí hay un pequeño adelanto del diseño que crearemos en este tutorial.

publicaciones recientes desplazables

publicaciones recientes desplazables

Descargue el diseño de publicaciones recientes desplazables GRATIS

Para poner sus manos en el diseño de diseño de publicaciones recientes desplazables de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

(incrustar) https://www.youtube.com/watch?v=jYrEoirjXQ8 (/ incrustar)

Suscríbete a nuestro canal de Youtube

Creación del área de widget de publicaciones recientes

Dado que vamos a agregar un widget de publicaciones recientes a nuestro diseño Divi, lo primero que debemos hacer es crear una nueva área de widgets (con el widget de publicaciones recientes) para usar con el módulo de la barra lateral de Divi.

Para crear el área de widgets de publicaciones recientes, vaya a Apariencia> Widgets. A continuación, cree una nueva área de widgets dándole un nombre al área de widgets (llámela "publicaciones recientes" si lo desea) y haga clic en el botón Crear. Actualice la página para ver la nueva área de widgets disponible.

publicaciones recientes desplazables

Abra la palanca del widget de publicaciones recientes que viene con WordPress a la izquierda de la página. Luego, elija el área del widget de "publicaciones recientes" de la lista y haga clic en Agregar widget para agregar el widget al área de widgets.

publicaciones recientes desplazables

Luego, abra el área del widget de publicaciones recientes y actualice el widget de publicaciones recientes con un título. Establezca el número de publicaciones que se mostrarán en un número grande para que tengamos suficientes publicaciones para desplazarnos cuando nuestro diseño esté completo.

publicaciones recientes desplazables

Ahora que tenemos nuestra área de widgets en su lugar, podemos comenzar con nuestro diseño Divi.

Creación de la sección "Desde nuestro blog" con área de widget de publicaciones recientes desplazables

Diseño de la sección de encabezado

Cree una nueva sección regular con una fila de una columna.

publicaciones recientes desplazables

Antes de agregar un módulo, actualice la sección con lo siguiente:

Color de fondo: # 333333
Relleno personalizado: 0px inferior

publicaciones recientes desplazables

Luego, elimine el relleno inferior de la fila también actualizando la configuración de la fila:

Relleno personalizado: 0px inferior

Luego agregue un módulo de texto a la fila.

publicaciones recientes desplazables

Luego actualice la siguiente configuración de texto:

Para el contenido, agregue el siguiente encabezado h2 html:

From our Blog

publicaciones recientes desplazables

Luego actualice la siguiente configuración de texto:

Fuente del encabezado 2: Roboto
Estilo de fuente del título 2: TT
Color del texto del título 2: #ffffff
Tamaño del texto del encabezado 2: 40px
Encabezado 2 espaciado de letras: 2px

publicaciones recientes desplazables

Eso se encarga del encabezado de nuestro diseño. Ahora es el momento de crear el resto del diseño utilizando una sección especializada.

Creación de la sección de especialidad

El uso de una sección de especialidad separada para el resto del diseño nos permitirá tener una barra lateral dedicada a la derecha para nuestra área de widgets desplazables. Además, nos permitirá ajustar el tamaño y el estilo de nuestras filas en el lado izquierdo de la sección por separado del área de la barra lateral.

Continúe y agregue una sección de especialidad con un diseño de columna de la barra lateral derecha de la siguiente manera:

publicaciones recientes desplazables

Luego agregue una fila de una columna a la sección.

publicaciones recientes desplazables

Antes de agregar un módulo, actualice nuestra configuración de sección y fila.

Personalizar la configuración de la sección

Abra la configuración de la sección de especialidad y actualice lo siguiente:

Color de fondo: # 333333
Ancho de la canaleta: 2
Relleno personalizado: 0px arriba
Relleno personalizado de la columna 2: 0px arriba, 0px abajo

publicaciones recientes desplazables

Personalizar la configuración de la fila

A continuación, abra la configuración de la fila y actualice lo siguiente:

Alto: 640px
Ancho del borde superior: 8px
Color del borde superior: # 444444
Ancho del borde inferior: 8px
Color del borde inferior: # 444444

publicaciones recientes desplazables

La altura personalizada de 640px se da para que coincida con la altura del área de widget de publicaciones recientes desplazables que agregaremos a la barra lateral de nuestra sección especializada. esto asegurará que los dos tengan la misma altura para un diseño más agradable estéticamente.

Agregar el módulo de blog

En la fila de una columna de la izquierda, agregue un módulo de blog.

publicaciones recientes desplazables

Luego actualice la configuración del módulo de blog de la siguiente manera:

Número de mensajes: 2

publicaciones recientes desplazables

Diseño: cuadrícula
Fuente del título: Roboto
Fuente Meta: Roboto
Peso de fuente meta: ligero
Estilo de fuente Meta: TT
Fuente de paginación: Roboto
Estilo de fuente de paginación: TT
Color del texto de paginación: #ffffff
Tamaño del texto de paginación: 18px
Espaciado de letras de paginación: 2px

publicaciones recientes desplazables

Agregar el área de widget de publicaciones recientes desplazable

Finalmente, es hora de agregar las publicaciones recientes desplazables a nuestro diseño. Para hacer esto, agregue un módulo de barra lateral al área de la barra lateral de la sección de especialidad a la derecha.

publicaciones recientes desplazables

Luego, seleccione el área de widget de "publicaciones recientes" que creó anteriormente seleccionándola en el menú desplegable Área de widgets debajo de la pestaña de contenido.

publicaciones recientes desplazables

Luego actualice el diseño del texto del Título y el Cuerpo de la siguiente manera:

Fuente del título: Roboto
Estilo de fuente del título: TT
Color del texto del título: #ffffff
Espaciado de letras de título: 2px
Fuente del cuerpo: Roboto
Estilo de fuente del cuerpo: subrayado

publicaciones recientes desplazables

A continuación, oculte el separador de bordes de la siguiente manera:

Mostrar separador de bordes: NO

publicaciones recientes desplazables

Luego, asigne al módulo de la barra lateral una altura máxima y un relleno personalizado de la siguiente manera:

Altura máxima: 640px
Relleno personalizado: 30 píxeles en la parte superior, 30 píxeles en la parte inferior, 5% a la derecha

La altura máxima de 640 px coincide con la altura personalizada de 640 px dada a la fila adyacente.

publicaciones recientes desplazables

Ahora que le hemos dado al módulo de la barra lateral una altura máxima de 640px, necesitamos configurar el desbordamiento vertical para que se desplace para obtener nuestra funcionalidad de desplazamiento. Para hacer esto, vaya a la pestaña Avanzado y actualice lo siguiente:

Desbordamiento vertical: desplazamiento

publicaciones recientes desplazables

Resultado final

¡Eso es! Ahora veamos el resultado final.

publicaciones recientes desplazables

publicaciones recientes desplazables

publicaciones recientes desplazables

publicaciones recientes desplazables

Opción de bonificación: agregar CSS personalizado a la barra de desplazamiento de diseño (no es compatible con todos los navegadores)

Diseñar una barra de desplazamiento en WordPress es un poco complicado si desea compatibilidad con varios navegadores. Por lo tanto, en la mayoría de los casos, querrá dejarlo en los estilos predeterminados del navegador y terminarlo. Pero si desea personalizar la barra de desplazamiento para que coincida con el diseño de su página, puede agregar algo de CSS personalizado. Desafortunadamente, el soporte de navegador está limitado a navegadores que admitan propiedades CSS con prefijo :: webkit (básicamente solo Safari y Chrome). He aquí cómo hacerlo.

Abra la configuración de la sección de especialidad y agregue la siguiente clase CSS:

Clase CSS: cust-scroll

publicaciones recientes desplazables

Luego abra el modal de configuración de página y agregue el siguiente CSS personalizado a la página.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

Esto cambia el ancho de la barra de desplazamiento a 8px y ajusta los colores de la pista y el asa. Siéntete libre de experimentar con más diseños y colores por tu cuenta.

publicaciones recientes desplazables

Y en caso de que se lo pregunte, la alternativa para otros navegadores será el estilo predeterminado de los navegadores para las barras de desplazamiento.

Pensamientos finales

Agregar desplazamiento vertical al contenido es útil siempre que desee brindar a los usuarios la opción de ver más contenido en un espacio reducido. Un área de widgets de publicaciones recientes desplazables es un gran ejemplo de cómo el desplazamiento vertical puede funcionar realmente bien. Por supuesto, puede reemplazar el módulo de la barra lateral utilizado en este tutorial con un módulo de texto y agregar desplazamiento vertical a cualquier contenido que desee. La misma personalización se aplicará a cualquier módulo.

En lo que respecta al estilo de la barra de desplazamiento, estoy seguro de que hay otros complementos o soluciones de Javascript que darían una solución de navegador más cruzada. Si conoce algunos buenos, no dude en compartirlos con nosotros.

Espero tener noticias tuyas en los comentarios a continuación.

¡Salud!