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 heladería. Comenzaremos por incluir la elegante biblioteca JS en nuestro sitio web y continuaremos haciéndola funcionar dentro de Divi Builder. Esta es una excelente manera de crear un carrusel automático para cualquier tipo de módulo que desee exhibir. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de carrusel automático 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 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!
¡Asegúrate de incluir el archivo Slick.js en tus etiquetas de encabezado! Sin él, no funcionará. Vea el primer paso a continuación.
1. Agregue Slick JS a la integración de su tema Divi
Ir a Opciones de tema Divi
La primera parte de este tutorial es muy importante; agregar Slick.js a su sitio web. Para hacer eso, vaya a sus Opciones de tema Divi .
Navegue a la pestaña de integración y agregue el archivo Slick.js a las etiquetas principales de su sitio web.
|
01
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> |
Agregar nueva página
Continúe agregando una nueva página a su sitio web. Asigne un título a su página, publíquela y cambie a Divi Builder.
Para este tutorial, estamos usando el diseño de menú del paquete de diseño de heladería, pero siéntete libre de usar cualquier otra página/diseño de tu elección.
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.
Color de fondo
Abra la configuración de la sección y cambie el color de fondo.
- Color de fondo: #f5f5f5
Divisor inferior
Agregue un divisor inferior a la sección también.
- Estilo de divisor: Buscar en la lista
- Color del divisor: #ffffff
- Peso del divisor: 10vw
Espaciado
Junto con un poco de relleno inferior.
- Acolchado inferior: 10vw
Agregar nueva fila
Estructura de la columna
Continúe agregando la primera fila usando la siguiente estructura de columnas:
Agregar módulo de texto de título a la columna
Agregar contenido H2
Agregue un módulo de texto a la columna de la fila e inserte algún contenido H2 de su elección.
Configuración de texto H2
Pase a la pestaña de diseño y cambie la configuración de texto H2 en consecuencia:
- Título 2 Fuente: Prompt
- Encabezado 2 Peso de fuente: ultraligero
- Encabezado 2 Alineación de texto: Centro
- Título 2 Tamaño del texto: 60 px (escritorio), 40 px (tableta), 25 px (teléfono)
- Encabezado 2 Altura de línea: 1,2 em
Dimensionamiento
Modifique también la configuración de tamaño del módulo.
- Ancho máximo: 800px
- Alineación del módulo: Centro
3. Dedique una nueva fila de una columna al control deslizante automático
Agregar nueva fila
Estructura de la columna
Para crear el carrusel automático, necesitaremos 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.
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áximo: 100%
Espaciado
Agregue un poco de margen superior y elimine todo el relleno superior e inferior predeterminado a continuación.
- Margen superior: 50px
- Relleno superior: 0px
- Relleno inferior: 0px
desbordamientos
También nos aseguramos de que nada sobrepase el contenedor de fila al ocultar los desbordamientos.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Configuración de columna
Continúe abriendo la configuración de la columna.
Clases CSS
Agregue dos clases CSS diferentes a la columna. Asegúrate de dejar un espacio entre ellos. Más adelante en este tutorial, usaremos estas clases para crear el carrusel automático.
- Clase CSS: control deslizante de artículos de helado
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 del carrusel! Usaremos un módulo de llamada a la acción, pero siéntase libre de usar cualquier otro módulo de su elección. Introduzca algún contenido de su elección.
Contenido flotante
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.
Enlace
Asegúrese de agregar un enlace al módulo también para que aparezca el botón.
- URL del enlace del botón: #
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 gradiente: Radial
- Dirección radial: Superior
- Posición inicial: 35%
- Posición final: 35%
Quitar fondo degradado flotante
Elimine el fondo degradado al pasar el mouse.
Imagen de fondo
Cargue también una imagen de fondo relevante.
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)
Configuración del texto del cuerpo
Modifique también la configuración del texto del cuerpo.
- Fuente del cuerpo: Open Sans
- Tamaño del cuerpo del texto: 0.9vw (escritorio), 2vw (tableta), 2.5vw (teléfono)
- Altura de la línea del cuerpo: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
Configuración de botones
Luego, vaya a la configuración del botón y diseñe el 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 (Hover)
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Espaciado entre letras de botones: 2px
- Fuente del botón: Aviso
- Peso de la fuente del botón: Regular
- Estilo de fuente del botón: Mayúsculas
- Margen superior: 19vw (escritorio), 30vw (tableta), 45vw (teléfono)
- Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Relleno izquierdo: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
- Relleno derecho: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
Dimensionamiento
También estamos modificando el ancho y alto del módulo.
- Ancho: 23vw
- Altura: 23vw (escritorio), 50vw (tableta), 80vw (teléfono)
Espaciado
Por último, pero no menos importante, vaya a la configuración de espaciado y agregue algunos márgenes personalizados y valores de relleno.
- Margen izquierdo: 1vw
- Margen derecho: 1vw
- Acolchado superior: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
4. Clona el elemento deslizante tantas veces como quieras
Clonar módulo CTA cuatro veces
Una vez que haya completado el primer módulo CTA, puede continuar y clonarlo tantas veces como desee. Cada módulo en esta columna será parte del carrusel automático.
Cambiar contenido, fondo degradado e imagen de fondo para cada duplicado
Asegúrate de cambiar el contenido, el fondo degradado y la imagen de fondo de cada duplicado para que cada Módulo CTA sea único.
5. Agregue una nueva fila debajo de la anterior
Agregue la siguiente y la última fila a la sección utilizando la siguiente estructura de columnas:
Insertar primer módulo de código con jQuery Code
Agregar nuevo módulo de código a la columna
Agregue un primer módulo de código a la columna.
Insertar código CSS
E inserte las siguientes líneas de código CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
<style>.slick-slider{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;}.slick-slide{float: left;}</style> |
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.
Insertar código jQuery
E inserte las siguientes líneas de código jQuery:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
<script>jQuery(function($){$('.icecream-items').slick({slidesToShow: 4,slidesToScroll: 1,autoplay: true,autoplaySpeed: 700,arrows: false,dots: false,pauseOnHover: true,responsive: [{breakpoint: 1079,settings: {slidesToShow: 2}}]});});</script> |
Una vez que haya agregado el código CSS y jQuery, puede salir de 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
Móvil
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 heladería. 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 de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.