Seleccionar página
Crea un slider con el modulo de divi muestra tu equipo con estilo
Crea Un Slider Con El Modulo De Divi

El módulo Slider o Deslizador de Divi

Un control deslizante es una excelente manera de mostrar las características de su producto, servicio o equipo de trabajo.

La combinación de imágenes y contenido realmente puede dar a sus productos una sensación profesional que se destaca.

Para este ejemplo, agregaremos un control deslizante para mostrar algunas características de nuestro equipo. Cada diapositiva tendrá una imagen arriba del texto.

Vamos a empezar con el divi slider xD

Ocuparemos módulo nativo de Divi, las imágenes tendrán una pequeña transición. La idea de crear este Slider fue porque estoy creando una Landing Page para abogados o un despacho de abogados. Cuando yo estaba diseñando el Slider no me había puesto a pensar en las limitaciones del módulo de Slider de divi, ⁣ así que lo diseñe como creía que era mejor, tanto estéticamente como responsivamente. Bien, pues cuando termine de diseñar toda la Landing Page, dije voy a intentar generar el módulo de Slider. Así que abrí Divi Themes.

  • Inserte una sección regular
  • Añadí una columna
  • Añadí mi módulo de Slider.
Tenía todo listo, añadí mis imágenes el nombre de la persona y su cargo, lo difícil empieza cuando quería pasar la imagen a la parte superior del texto, pero todo fue en vano. Así que tuve que hacer maroma y circo para llegar al resultado que estamos viendo.

divi slider autoplay o divi deslizador automático

A veces no queremos que nuestro slider tenga una reproducción automática o autoplay, esta configuración esta un poco escondida.

Adjunto captura de pantalla

Configuración del control deslizante -> pestaña Diseño -> Animación -> Animación automática

Animación automática

Si desea que el control deslizante se deslice automáticamente, sin que el visitante tenga que hacer clic en el botón siguiente, habilite esta opción y luego ajuste la velocidad de rotación a continuación si lo desea.

Velocidad de animación automática (en ms)

Aquí puede designar qué tan rápido se desvanece el control deslizante entre cada diapositiva, si la opción “Animación automática” está habilitada arriba. Cuanto mayor sea el número, mayor será la pausa entre cada rotación.

Continuar deslizamiento automático al pasar el mouse

Activar esto permitirá que el deslizamiento automático continúe al pasar el mouse.

Desactivar encendido

Esta opción le permite controlar en qué dispositivos aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos, o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.

divi slider Mostrar imagen / video en el móvil

A medida que el tamaño de la pantalla se reduce en los dispositivos móviles, el espacio de la pantalla se vuelve más valioso.

Es una buena idea deshabilitar algunos elementos del control deslizante menos importantes para reducir el tamaño del control deslizante y hacerlo más legible.
Al habilitar esta configuración, se mostrarán imágenes de diapositivas y videos en el móvil (están deshabilitados de manera predeterminada).

Yo te aconsejo que utilices unos plug-ins (como diviflash o divigears)  si no manejas bien el CSS o te dará un gran dolor de cabeza, lo que hice fue adaptar estos valores a lo que necesitaba en el momento. Te dejo el layout del slider para que lo descargues y lo modifiques a tu gusto. Recuerda que los resultados pueden variar. Buena suerte

Código CSS y Jquery Módulo Divi

Copia y pega

Descubre nuestra selección de diseños web gratuitos y prémium para sus proyectos de diseño.

Contenido nuevo

Entérate de nuestros nuevos Artículos, cursos y productos cada 15 días

Pin It on Pinterest

Share This