Divi y su módulo de barra lateral son 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. Estaré diseñando 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!
Aquí hay un pequeño adelanto del diseño que construiremos en este tutorial.
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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Suscríbete a nuestro canal de Youtube
Creación del área de widgets de publicaciones recientes
Dado que vamos a agregar un widget de publicaciones recientes a nuestro diseño de 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 (llámela «publicaciones recientes» si lo desea) y haciendo clic en el botón Crear. Actualice la página para ver la nueva área de widgets disponible.
Abra la palanca del widget de publicaciones recientes que viene con WordPress a la izquierda de la página. Luego elija el área de widgets de «publicaciones recientes» de la lista y haga clic en Agregar widget para agregar el widget al área de widgets.
A continuación, abra el área de widgets de publicaciones recientes y actualice el widget de Publicaciones recientes con un título. Establezca la cantidad de publicaciones para mostrar en una gran cantidad para que tengamos suficientes publicaciones para desplazarnos cuando nuestro diseño esté completo.
Ahora que tenemos nuestra área de widgets en su lugar, podemos comenzar con nuestro diseño Divi.
Creación de la sección «De nuestro blog» con el área de widgets de publicaciones recientes desplazable
Diseño de la sección de encabezado
Cree una nueva sección regular con una fila de una columna.
Antes de agregar un módulo, actualice la sección con lo siguiente:
Color de fondo: #333333
Relleno personalizado: 0px inferior
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.
Luego actualice la siguiente configuración de Texto:
Para el contenido, agregue el siguiente encabezado h2 html:
|
01
|
<h2>From our Blog</h2> |
Luego actualice la siguiente configuración de texto:
Título 2 Fuente: Roboto
Título 2 Estilo de fuente: TT
Título 2 Color del texto: #ffffff
Título 2 Tamaño del texto: 40px
Título 2 Espaciado entre letras: 2px
Eso se ocupa del encabezado de nuestro diseño. Ahora es el momento de crear el resto del diseño usando una sección especial.
Creación de la sección de especialidades
El uso de una sección especial 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á cambiar 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 especializada con un diseño de columna en la barra lateral derecha de la siguiente manera:
Luego agregue una fila de una columna a la sección.
Antes de agregar un módulo, actualicemos nuestra configuración de sección y fila.
Personalización de 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 medianil: 2
Relleno personalizado: 0px superior
Columna 2 Relleno personalizado: 0px superior, 0px inferior
Personalizar la configuración de la fila
A continuación, abra la configuración de la fila y actualice lo siguiente:
Altura: 640 px
Ancho del borde superior: 8 px
Color del borde superior: #444444
Ancho del borde inferior: 8 px
Color del borde inferior: #444444
La altura personalizada de 640 px se proporciona para que coincida con la altura del área del widget de publicaciones recientes desplazable 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 a la izquierda, agregue un módulo de blog.
Luego actualice la configuración del módulo de blog de la siguiente manera:
Número de publicaciones: 2
Diseño:
Título de la cuadrícula Fuente: Roboto
Meta fuente: Roboto
Meta Fuente Peso:
Meta ligero Estilo de fuente: TT
Paginación Fuente: Roboto
Paginación Estilo de fuente: TT Paginación
Color del texto: #ffffff
Paginación Tamaño del texto: 18px
Espaciado entre letras de paginación: 2px
Agregar el área de widget de publicaciones recientes desplazables
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.
Luego, seleccione el área de widgets de «publicaciones recientes» que creó anteriormente seleccionándola del menú desplegable Área de widgets en la pestaña de contenido.
Luego actualice el diseño del texto Título y 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 entre letras del título: 2px
Fuente del cuerpo: Roboto
Estilo de fuente del cuerpo: Subrayado
A continuación, oculte el separador de bordes de la siguiente manera:
Mostrar separador de borde: NO
Luego, asigne al módulo de la barra lateral una altura máxima y un relleno personalizado de la siguiente manera:
Altura máxima: 640 px
Relleno personalizado: 30 px arriba, 30 px abajo, 5 % a la derecha
La altura máxima de 640 px coincide con la altura personalizada de 640 px dada a la fila adyacente.
Ahora que le hemos dado al módulo de la barra lateral una altura máxima de 640 px, debemos configurar el desbordamiento vertical para que se desplace para obtener nuestra funcionalidad desplazable. Para hacer esto, vaya a la pestaña Avanzado y actualice lo siguiente:
Desbordamiento vertical: desplazamiento
Resultado final
¡Eso es todo! Ahora veamos el resultado final.
Opción de bonificación: agregar CSS personalizado a la barra de desplazamiento de diseño (no compatible con todos los navegadores)
Diseñar una barra de desplazamiento en WordPress es un poco molesto si desea compatibilidad con varios navegadores. Entonces, en la mayoría de los casos, querrá dejarlo con los estilos predeterminados del navegador y llamarlo un día. Pero si desea personalizar la barra de desplazamiento para que coincida con el diseño de su página, puede agregar CSS personalizado. Desafortunadamente, el soporte del navegador está limitado a los navegadores que admiten las propiedades CSS prefijadas de ::webkit (básicamente solo Safari y Chrome). Aquí está cómo hacerlo.
Abra la configuración de la sección de especialidad y agregue la siguiente Clase CSS:
Clase CSS: desplazamiento personalizado
Luego abra el modal de configuración de la página y agregue el siguiente CSS personalizado a la página.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
/* 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 para la pista y el controlador. Siéntase libre de experimentar con más diseños y colores por su cuenta.
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 cuando desea brindarles a los usuarios la opción de ver más contenido en un espacio reducido. Un área de widget de publicaciones recientes desplazable es un gran ejemplo de cómo el desplazamiento vertical puede funcionar realmente bien. Por supuesto, puede reemplazar el módulo de 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.
Con respecto al diseño de la barra de desplazamiento, estoy seguro de que hay otros complementos o soluciones de Javascript que brindarían una solución de navegador más cruzada. Si conoce alguno bueno, no dude en compartirlo con nosotros.
Espero escuchar de usted en los comentarios a continuación.
¡Salud!