¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Convierte tu módulo de blog en un carrusel avanzado arrastrable / deslizable con Divi & Slick

Jun 22, 2020 | Tutoriales para Divi

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 posterior 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 sus publicaciones de blog y también diseñarlas. Si está buscando una manera de llevar la experiencia de búsqueda de publicaciones al siguiente nivel, le encantará esta publicación. Le mostraremos cómo convertir el módulo de blog Divi incorporado en un carrusel avanzado deslizable / deslizable con los elementos integrados de Divi y la biblioteca js slick gratuita . ¡También podrás descargar el archivo JSON gratis!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

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

Escritorio

carrusel de deslizamiento arrastrable

Móvil

carrusel de deslizamiento arrastrable

1. Crear página de blog

Agregar nueva página

Comience agregando una nueva página al sitio web en el que está trabajando. Asigne un título a su página, publíquela y cambie a Visual Builder.

carrusel de deslizamiento arrastrable

carrusel de deslizamiento arrastrable

Subir 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 del blog de Interior Design Company, pero puedes usar cualquier otro diseño que elijas.

carrusel de deslizamiento arrastrable

2. Crear diseños de flecha anteriores y siguientes utilizando módulos Blurb

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

Estructura de columna

Una vez que estamos dentro de la página del blog, podemos comenzar a construir el carrusel deslizable avanzado deslizable. La primera parte está dedicada al diseño de las flechas que necesitamos para permitir a los visitantes ir y venir entre publicaciones. Las flechas no serán la única opción que los visitantes tendrán para navegar a través del carrusel. Podrán arrastrar el carrusel en el escritorio y deslizar en el móvil también. Para diseñar las flechas, usaremos el módulo integrado Blurb de Divi, pero puedes usar cualquier otro módulo que elijas. Agregue una nueva fila a la parte superior de la sección de su blog utilizando la siguiente estructura de columnas:

carrusel de deslizamiento arrastrable

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áx .: 100%

carrusel de deslizamiento arrastrable

Añadir módulo de publicidad

Añadir título

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

carrusel de deslizamiento arrastrable

Seleccionar icono

Seleccione un icono a continuación.

carrusel de deslizamiento arrastrable

Configuraciones de iconos

Pase 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
  • Colocación de imagen / ícono: Arriba
  • Alineación de imagen / icono: centro

carrusel de deslizamiento arrastrable

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 Bold
  • Alineación del texto del título: centro
  • Color del texto del título: # 000000

carrusel de deslizamiento arrastrable

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

carrusel de deslizamiento arrastrable

Clase CSS

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

  • Clase CSS: botón de retroceso

carrusel de deslizamiento arrastrable

Elemento principal CSS

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

01
cursor: pointer;

carrusel de deslizamiento arrastrable

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.

carrusel de deslizamiento arrastrable

carrusel de deslizamiento arrastrable

Cambiar título

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

carrusel de deslizamiento arrastrable

Cambiar el ícono

Junto con el ícono.

carrusel de deslizamiento arrastrable

Cambiar clase de CSS

Y modifique la clase CSS también.

  • Clase CSS: botón siguiente

carrusel de deslizamiento arrastrable

3. Prepare el módulo de blog

Módulo de blog de fila abierta que contiene

Dimensionamiento

Una vez que las flechas estén en su lugar, es hora de comenzar a ajustar el Módulo del 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áx .: 100%

carrusel de deslizamiento arrastrable

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

carrusel de deslizamiento arrastrable

Modificar el módulo del 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

carrusel de deslizamiento arrastrable

Diseño

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

  • Diseño: ancho completo

carrusel de deslizamiento arrastrable

Cubrir

También estamos agregando una superposición.

  • Superposición de imagen destacada: activada
  • Color del icono de superposición: #ffffff
  • Color de fondo superpuesto: rgba (1,0,66,0.33)

carrusel de deslizamiento arrastrable

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

carrusel de deslizamiento arrastrable

Post Meta CSS

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

01
margin-bottom: 50px;

carrusel de deslizamiento arrastrable

4. Agregue la funcionalidad Slick JS

Agregue el 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).

carrusel de deslizamiento arrastrable

Agregar etiquetas de script Slick JS

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.

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

carrusel de deslizamiento arrastrable

Agregar código CSS de diapositiva

Modificaremos ligeramente cada publicación de blog a nivel individual utilizando 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.

01
02
03
04
.slick-slide {
float: left;
margin: 2vw;
}

carrusel de deslizamiento arrastrable

Agregar código JQuery

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
25
26
27
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
    }
    }]
 
});
});

carrusel de deslizamiento arrastrable

5. Guardar página y salir de Visual Builder para ver el resultado

Dentro del Visual Builder, no verá el resultado. Por lo tanto, tan pronto como termine, guarde su página, salga de Visual Builder y vea el resultado en su sitio web.

carrusel de deslizamiento arrastrable

carrusel de deslizamiento arrastrable

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This