Cómo crear un carrusel automático con Divi y Slick.js


Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear un carrusel automático con Divi, Slick.js y el Paquete de diseño de la tienda de helados. Comenzaremos por incluir la elegante biblioteca JS en nuestro sitio web y continuaremos haciéndola funcionar dentro del Divi Builder. Esta es una excelente manera de crear un carrusel automático para cualquier tipo de módulo que desee mostrar. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Avance

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

Escritorio

carrusel automático

Móvil

carrusel automático

Descargar The Automatic Carousel Layout GRATIS

Para poner sus manos en el diseño de carrusel automático 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Asegúrese de incluir el archivo Slick.js en sus etiquetas de cabeza! Sin ella, no funcionará. Vea el primer paso a continuación.

1. Agregue Slick JS a su integración de Divi Theme

Ir a Opciones de tema Divi

La primera parte de este tutorial es muy importante; agregando Slick.js a su sitio web. Para hacer eso, vaya a sus Opciones de tema Divi.

carrusel automático

Agregar Slick.js a las etiquetas principales

Vaya a la pestaña de integración y agregue el archivo Slick.js a las etiquetas principales de su sitio web.

carrusel automático

2. Crear una nueva página usando el diseño del menú de la tienda de helados

Agregar nueva página

Continúe agregando una nueva página a su sitio web. Dé un título a su página, publíquela y cambie a Divi Builder.

carrusel automático

Subir el diseño del menú de la tienda de helados

Para este tutorial, usaremos el diseño del menú del Paquete de diseño de la tienda de helados, pero puede usar cualquier otra página / diseño que elija.

carrusel automático

2. Agregar nueva sección a la página

Agregar nueva sección

El siguiente paso para crear el carrusel automático es agregar una nueva sección a su página.

carrusel automático

Color de fondo

Abra la configuración de la sección y cambie el color de fondo.

  • Color de fondo: # f5f5f5

carrusel automático

Divisor inferior

Agregue un divisor inferior a la sección también.

  • Estilo divisor: Buscar en la lista
  • Color del divisor: #ffffff
  • Divisor de peso: 10vw

carrusel automático

Espaciado

Junto con algo de relleno inferior.

  • Relleno inferior: 10vw

carrusel automático

Agregar nueva fila

Estructura de columna

Continúe agregando la primera fila utilizando la siguiente estructura de columnas:

carrusel automático

Agregar módulo de texto de título a columna

Añadir contenido H2

Agregue un módulo de texto a la columna de la fila e inserte el contenido H2 que prefiera.

carrusel automático

Configuraciones de texto H2

Pase a la pestaña de diseño y cambie la configuración del texto H2 en consecuencia:

  • Título 2 Fuente: Aviso
  • Título 2 Peso de fuente: Ultraligero
  • Encabezado 2 Alineación de texto: centro
  • Encabezado 2 Tamaño del texto: 60 px (escritorio), 40 px (tableta), 25 px (teléfono)
  • Encabezado 2 Altura de línea: 1.2em

carrusel automático

Dimensionamiento

Modifique también la configuración de tamaño del módulo.

  • Ancho Máx .: 800px
  • Alineación del módulo: centro

carrusel automático

3. Dedique la nueva fila de una columna al control deslizante automático

Agregar nueva fila

Estructura de columna

Para crear el carrusel automático, tendremos que dedicar una nueva fila a los elementos que queremos colocar dentro del carrusel. Asegúrese de elegir una fila con una sola columna. En los próximos pasos, transformaremos esta columna en un carrusel automático.

carrusel automático

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla en la configuración de tamaño.

  • Ancho: 100%
  • Ancho Máx .: 100%

carrusel automático

Espaciado

Agregue un poco de margen superior y elimine todos los rellenos superiores e inferiores predeterminados a continuación.

  • Margen superior: 50 px
  • Relleno superior: 0px
  • Relleno inferior: 0px

carrusel automático

Desbordamientos

También nos estamos asegurando de que nada supere el contenedor de filas al ocultar los desbordamientos.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

carrusel automático

Configuraciones de columna

Continúe abriendo la configuración de la columna.

carrusel automático

Clases CSS

Agregue dos clases CSS diferentes a la columna. Asegúrate de dejar un espacio entre ellos. Más adelante en este tutorial, utilizaremos estas clases para crear el carrusel automático.

  • Clase CSS: control deslizante de elementos de helado

carrusel automático

Agregar el primer elemento del control deslizante a la columna (Módulo de llamada a la acción)

Contenido predeterminado

¡Es hora de comenzar a agregar el primer elemento de carrusel! Usaremos un Módulo de Llamado a la Acción, pero puede usar cualquier otro módulo que elija. Ingrese algún contenido de su elección.

carrusel automático

Desplazar contenido

Reemplace el título y el contenido del cuerpo con un carácter vacío (como este: ‘’) para eliminar el contenido al pasar el mouse.

carrusel automático

Enlace

Asegúrese de agregar también un enlace al módulo para que aparezca el botón.

  • URL del enlace del botón: #

carrusel automático

Fondo degradado predeterminado

Luego, vaya a la configuración de fondo y agregue un fondo degradado.

  • Color 1: # 8300e9
  • Color 2: rgba (41,196,169,0)
  • Tipo de degradado: radial
  • Dirección radial: superior
  • Posición de inicio: 35%
  • Posición final: 35%

carrusel automático

Eliminar fondo de degradado flotante

Elimina el fondo degradado al pasar el cursor.

carrusel automático

Imagen de fondo

Suba también una imagen de fondo relevante.

carrusel automático

Configuración del texto del título

Pase a la pestaña de diseño y cambie la configuración del texto del título en consecuencia:

  • Fuente del título: Aviso
  • Tamaño del texto del título: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
  • Altura de la línea de título: 2vw (escritorio), 3vw (tableta), 4vw (teléfono)

carrusel automático

Configuración de texto del cuerpo

Modifique la configuración del texto del cuerpo también.

  • Fuente del cuerpo: Open Sans
  • Tamaño del texto del cuerpo: 0.9vw (escritorio), 2vw (tableta), 2.5vw (teléfono)
  • Altura de la línea del cuerpo: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)

carrusel automático

Configuraciones de botones

Luego, ve a la configuración del botón y dale estilo al botón de la siguiente manera:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.9vw (escritorio), 1.5vw (tableta), 2vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: # 000000 (predeterminado), # ff6f7e (pasar el mouse)
  • Ancho del borde del botón: 0px

carrusel automático

  • Radio del borde del botón: 0px
  • Espacio entre letras de botones: 2px
  • Fuente del botón: Aviso
  • Peso de fuente del botón: regular
  • Estilo de fuente del botón: mayúscula

carrusel automático

  • Margen superior: 19vw (escritorio), 30vw (tableta), 45vw (teléfono)
  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado izquierdo: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
  • Relleno derecho: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

carrusel automático

Dimensionamiento

También estamos modificando el ancho y la altura del módulo.

  • Ancho: 23vw
  • Altura: 23vw (escritorio), 50vw (tableta), 80vw (teléfono)

carrusel automático

Espaciado

Por último, pero no menos importante, vaya a la configuración de espaciado y agregue algunos valores personalizados de margen y relleno.

  • Margen izquierdo: 1vw
  • Margen derecho: 1vw
  • Relleno superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)

carrusel automático

4. Clone el control deslizante tantas veces como desee

Clone CTA Module Four Times

Una vez que haya completado el primer módulo de CTA, puede continuar y clonarlo tantas veces como desee. Cada módulo en esta columna será parte del carrusel automático.

carrusel automático

Cambiar contenido, fondo de degradado e imagen de fondo para cada duplicado

Asegúrese de cambiar el contenido, el fondo degradado y la imagen de fondo de cada duplicado para que cada módulo de CTA sea único.

carrusel automático

5. Agregue una nueva fila debajo de la anterior

Agregue la fila siguiente y última a la sección utilizando la siguiente estructura de columnas:

carrusel automático

Insertar primer módulo de código con código jQuery

Agregar nuevo módulo de código a la columna

Agregue un primer módulo de código a la columna.

carrusel automático

Insertar código CSS

E inserte las siguientes líneas de código CSS:

carrusel automático

Insertar segundo módulo de código con código CSS

Agregar nuevo módulo de código a la columna

Agregue otro módulo de código justo debajo del anterior.

carrusel automático

Insertar código jQuery

E inserte las siguientes líneas de código jQuery:

carrusel automático

Una vez que haya agregado el código CSS y jQuery, ¡puede salir del Visual Builder para ver el resultado!

Avance

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

Escritorio

carrusel automático

Móvil

carrusel automático

Pensamientos finales

En esta publicación, le mostramos cómo crear un carrusel automático usando Divi, slick.js y el Paquete de diseño de Ice Cream Shop. Esta es una excelente manera de agregar interacción a su sitio web. ¡Puede hacer que esta técnica funcione con cualquier tipo de módulo que desee mostrar! Si tiene alguna pregunta o sugerencia, asegúrese de 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.