Convirtiendo su módulo de blog en un carrusel avanzado que se puede arrastrar / deslizar con Divi & Slick

Para muchos sitios web, los blogs se han convertido en una parte importante de su estrategia de SEO. Pero además de crear contenido de alta calidad, también es importante simplificar el proceso de navegación de publicaciones para sus visitantes. De esa manera, pueden saltar de una publicación a otra y pasar más tiempo en su sitio web leyendo el contenido que publica. Dentro de Divi, hay un módulo de blog que puede usar para mostrar dinámicamente las publicaciones de su blog y diseñarlas también. Si estás buscando una manera de llevar la experiencia de búsqueda de publicaciones al siguiente nivel, te encantará esta publicación. Le mostraremos cómo convertir el módulo de blog Divi incorporado en un carrusel avanzado que se puede arrastrar / deslizar con los elementos integrados de Divi y la biblioteca gratuita slick js. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue GRATIS el diseño del carrusel deslizante arrastrable del módulo Blog

Para poner sus manos en el diseño de carrusel de deslizamiento arrastrable del Módulo de blog gratuito, 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.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Crear página de blog

Agregar nueva página

Comience agregando una nueva página al sitio web en el que está trabajando. Dale un título a tu página, publica la página y cambia a Visual Builder.

Cargar diseño de página de blog de empresa de diseño de interiores

En este tutorial de caso de uso, usaremos el diseño de blog de Interior Design Company, pero puede usar cualquier otro diseño de su elección.

2. Cree diseños de flechas anteriores y siguientes utilizando módulos de Blurb

Agregar nueva fila a la parte superior de la sección

Estructura de la columna

Una vez que estemos dentro de la página del blog, podemos comenzar a construir el carrusel de deslizamiento avanzado que se puede arrastrar. La primera parte está dedicada a diseñar las flechas que necesitamos para permitir a los visitantes ir y venir entre publicaciones. Las flechas no serán la única opción que tendrán los visitantes para navegar por el carrusel. Podrán arrastrar el carrusel en el escritorio y deslizar el dedo también en el móvil. Para diseñar las flechas, usaremos el módulo Blurb incorporado de Divi, pero puede usar cualquier otro módulo de su elección. Agrega una nueva fila en la parte superior de la sección de tu blog usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila toque el lado izquierdo y derecho de la sección cambiando la configuración de tamaño de la siguiente manera:

• Ancho: 100%
• Ancho máximo: 100%

Agregar módulo Blurb

Añadir título

Luego, agregue un módulo Blurb e inserte un título.

Seleccionar icono

Seleccione un icono a continuación.

Configuración de iconos

Vaya a la pestaña de diseño y cambie la configuración del icono de la siguiente manera:

• Color del icono: # 000000
• Icono de círculo: Sí
• Color del círculo: # f2f2f2
• Ubicación de la imagen / icono: parte superior
• Alineación de imagen / icono: centro

Configuración del texto del título

Luego, modifique la configuración del texto del título.

• Fuente del título: Muli
• Peso de la fuente del título: Semi negrita
• Alineación del texto del título: centro
• Color del texto del título: # 000000

Dimensionamiento

A continuación, cambiaremos la configuración de tamaño del módulo en diferentes tamaños de pantalla.

• Ancho: 10% (escritorio), 20% (tableta), 30% (teléfono)
• Alineación del módulo: derecha

Clase CSS

Y también agregaremos una clase CSS. Esta clase de CSS nos ayudará a activar la acción del carrusel al hacer clic más adelante en el tutorial.

• Clase CSS: botón de retroceso

CSS del elemento principal

Por último, pero no menos importante, también agregaremos una línea de código CSS al elemento principal del módulo para convertir el cursor en un puntero.

cursor: pointer;

Clonar fila y colocar en la parte inferior de la sección

Una vez que haya completado la primera flecha, puede clonar todo el contenedor de filas y colocar la fila duplicada al final de la sección del blog.

Cambiar título

Abra el módulo Blurb en la fila duplicada y cambie el título.

Cambiar el ícono

Junto con el icono.

Cambiar clase CSS

Y modifique también la clase CSS.

• Clase CSS: botón siguiente

3. Prepare el módulo de blog

Módulo de blog que contiene una fila abierta

Dimensionamiento

Una vez que las flechas están en su lugar, es hora de comenzar a ajustar el Módulo de blog, comenzando con la fila en la que se encuentra. Abra la configuración de la fila y modifique la configuración de tamaño en consecuencia:

• Ancho: 100%
• Ancho máximo: 100%

Visibilidad

Luego, coloque los desbordamientos de la fila en ocultos. Esto ayudará a garantizar que el carrusel no haga que aparezca ninguna barra de desplazamiento horizontal dentro de nuestra página.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Modificar módulo de blog

Ocultar paginación

Una vez que la configuración de la fila esté en su lugar, abra la configuración del Módulo de blog. Asegúrese de que la paginación esté deshabilitada en la configuración de elementos.

• Mostrar paginación: No

Diseño

Luego, pase a la pestaña de diseño y cambie el diseño a ancho completo.

• Diseño: ancho completo

Cubrir

También estamos agregando una superposición.

• Superposición de imágenes destacadas: Activado
• Color del icono de superposición: #ffffff
• Color de fondo de superposición: rgba (1,0,66,0.33)

Clase CSS

A continuación, agregaremos una clase CSS a nuestro blog, que nos ayudará a habilitar el carrusel más adelante en el tutorial.

• Clase CSS: módulo de blog

Publicar Meta CSS

Y generaremos algo de espacio entre la meta de la publicación y el extracto agregando un margen inferior al elemento CSS de la meta de la publicación en la pestaña avanzada.

margin-bottom: 50px;

4. Agregue la funcionalidad Slick JS

Agregar módulo de código debajo del módulo de blog

Una vez que todas las configuraciones de Divi estén en su lugar, ¡es hora de agregar la funcionalidad slick js! Agregue un módulo de código justo debajo del módulo de blog (o en cualquier otro lugar de la página).

Agregar etiquetas Slick JS Script

Luego, agregue la biblioteca slick js dentro de las etiquetas de script (como puede ver en la pantalla de impresión a continuación). También puede agregarlos al encabezado de su sitio web en la configuración del tema Divi.

src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js

Agregar código CSS de diapositiva

Modificaremos ligeramente cada publicación de blog en un nivel individual usando algún código CSS. Asegúrese de colocar el código entre las etiquetas de estilo como se ve en la pantalla de impresión a continuación.

.slick-slide {
float: left;
margin: 2vw;
}

Agregar código JQuery

Y por último, pero no menos importante, agregaremos algo de código JQuery para permitir que el carrusel de deslizamiento avanzado que se puede arrastrar tome su forma. Dentro del código a continuación, también agregamos los botones que hemos diseñado a la funcionalidad del carrusel. Asegúrese de colocar el código dentro de las etiquetas de secuencia de comandos, como puede ver en la pantalla de impresión a continuación.

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. Guarde la página y salga de Visual Builder para ver el resultado

Dentro del Visual Builder, no verá el resultado. Entonces, tan pronto como haya terminado, guarde su página, salga de Visual Builder y vea el resultado en su sitio web.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo llevar el diseño de su módulo de blog al siguiente nivel. Más específicamente, le mostramos cómo convertir el módulo de blog integrado de Divi en un carrusel de deslizamiento avanzado que se puede arrastrar utilizando la biblioteca gratuita slick js. ¡También proporcionamos el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.