Cómo crear tutoriales móviles con el módulo deslizante de Divi (descarga gratuita)


Los controles deslizantes siempre han sido muy populares en el diseño web. Una de sus mayores ventajas es el hecho de que los visitantes pueden deslizarlos en dispositivos móviles. Hoy en día, deslizar es el nuevo clic, por lo que no hace falta decir que incluir controles deslizantes puede ayudar a mejorar la experiencia del usuario móvil que los visitantes tienen en su sitio web. Al crear un sitio web con Divi, puede agregar fácilmente el módulo deslizante a cualquier fila o sección en la que esté trabajando. Y con un poco de creatividad y experimentación, puede lograr diseños web impresionantes.

Una de las cosas que puede hacer es crear un tutorial móvil con el módulo deslizante. Puede agregar tantas diapositivas como desee y el tutorial se verá igualmente bien en computadoras de escritorio y tabletas, aunque inicialmente está diseñado para dispositivos móviles. En esta publicación, recrearemos un ejemplo sorprendente desde cero y ofreceremos la sección para descargar al final.

¡Hagámoslo!

Avance

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

Estático

recorrido móvil

GIF

recorrido móvil

¡Empecemos a recrear!

Cómo crear tutoriales móviles con el módulo deslizante de Divi

(incrustar) https://www.youtube.com/watch?v=tkOMv-Daq3g (/ incrustar)

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Espaciado

¡Empecemos a crear! Agregue una nueva página o abra una existente y agregue una nueva sección regular. Abra la configuración de la sección y agregue algunos valores de relleno personalizados que coincidan con los diferentes tamaños de pantalla.

  • Acolchado superior: 4vw (escritorio), 5vw (tableta), 3vw (teléfono)
  • Acolchado inferior: 4vw (escritorio), 5vw (tableta), 3vw (teléfono)
  • Acolchado izquierdo: 30vw (escritorio), 18vw (tableta), 3vw (teléfono)
  • Relleno derecho: 30vw (escritorio), 18vw (tableta), 3vw (teléfono)

recorrido móvil

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

recorrido móvil

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un fondo de degradado radial.

  • Color 1: # f9f9f9
  • Color 2: rgba (255,255,255,0)
  • Tipo de degradado: radial
  • Dirección radial: superior
  • Posición inicial: 40%
  • Posición final: 40%

recorrido móvil

Dimensionamiento

Continúe yendo a la configuración de tamaño de la fila y elimine todo el espacio entre columnas.

  • Hacer esta fila de ancho completo: Sí
  • Usar ancho de canalón personalizado: Sí
  • Ancho del canal: 1

recorrido móvil

Espaciado

También estamos agregando algo de relleno en la parte inferior de la fila.

  • Acolchado inferior: 30px

recorrido móvil

Frontera

A continuación, agregue "20px" a cada una de las esquinas en la configuración del borde.

recorrido móvil

Sombra de la caja

Por último, pero no menos importante, agregue una sombra de cuadro sutil a la fila para crear algo de profundidad en la página.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Color de sombra: rgba (0,0,0,0.07)

recorrido móvil

Agregar módulo deslizante

Cambiar el color de fondo

Una vez que haya terminado de modificar la configuración de la fila, puede continuar y agregar un módulo deslizante. Abra la configuración del módulo y modifique el color de fondo. Todos los cambios que realice en la pestaña de diseño se aplicarán automáticamente a todas las diapositivas que agregue posteriormente.

  • Color de fondo: rgba (255,255,255,0)

recorrido móvil

Configuración de texto

Luego, vaya a la pestaña de diseño y cambie la configuración del texto.

  • Orientación del texto: centro
  • Color de sombra: rgba (0,0,0,0)

recorrido móvil

Configuración del texto del cuerpo

A continuación, modifique la configuración del texto del cuerpo.

  • Fuente del cuerpo: Predeterminado (Sans abierto)
  • Tamaño del texto del cuerpo: 0.6vw (escritorio), 1.5vw (tableta), 2.4vw (teléfono)
  • Altura de la línea del cuerpo: 2.2em (escritorio), 2.3em (tableta), 2.4em (teléfono)

recorrido móvil

Espaciado

Agregue un poco de acolchado superior e inferior personalizado también.

  • Acolchado superior: 2vw
  • Acolchado inferior: 2vw

recorrido móvil

Botón CSS personalizado

También necesitaremos agregar algunos valores de margen y relleno personalizados al botón del Módulo de control deslizante en particular. Debido a que este elemento se combina con diferentes elementos en cada diapositiva, tendrá que agregar el relleno y el margen manualmente usando el código CSS en la pestaña avanzada.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

recorrido móvil

Eliminar controles deslizantes activos

Una vez que haya terminado de modificar todas las configuraciones generales de diapositivas, puede continuar y eliminar las diapositivas activas que ya están allí. En lugar de usar estos, vamos a crear uno desde cero en la siguiente parte de la publicación. Esto nos ayudará a modificar y personalizar todo más rápido.

recorrido móvil

Personalizar la primera diapositiva

Personalizar contenido en el cuadro de contenido

Agregue una nueva diapositiva al módulo deslizante y comience a personalizar el contenido en el cuadro de contenido. En las pantallas de impresión a continuación, observará que estamos agregando la imagen al cuadro de contenido en lugar de a la configuración de la imagen. Esto nos permitirá colocar la imagen encima del contenido escrito. Puede encontrar las ilustraciones que hemos utilizado yendo a la Publicación del paquete de diseño de Illustrator gráfico y descargando las imágenes al final del mismo. También estamos agregando y aplicando estilo a un título H3 en el cuadro de contenido en lugar del campo de título para que se muestre exactamente donde queremos.

recorrido móvil

recorrido móvil

Enlace de botón

Continúe yendo a la configuración del enlace y agregue un enlace al botón que redirigirá a los visitantes a una página más detallada sobre la diapositiva en cuestión.

recorrido móvil

Fondo degradado

Luego, agregue un fondo degradado usando la siguiente configuración:

  • Color 1: #aaacff
  • Color 2: rgba (255,255,255,0)
  • Tipo de degradado: radial
  • Dirección radial: superior
  • Posición inicial: 30%
  • Posición final: 30%

recorrido móvil

Navegación

A continuación, modifique la configuración del texto.

  • Flechas de color personalizado: # f4f4f4
  • Dot Nav Color personalizado: # 000000

recorrido móvil

Configuración de texto

Y cambie el color del texto en la configuración de texto de la diapositiva.

  • Color del texto: oscuro

recorrido móvil

Botón

Por último, pero no menos importante, modifique el botón para que se vea exactamente como desea.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.8vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Color del texto del botón: #ffffff
  • Color de fondo del botón: #aaacff
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 10px

recorrido móvil

recorrido móvil

Clonar diapositiva tantas veces como sea necesario

Una vez que haya terminado de crear y personalizar la primera diapositiva, puede continuar y clonar la diapositiva tantas veces como desee. Deberá realizar algunas modificaciones manuales en cada uno de los duplicados.

recorrido móvil

Cambiar contenido en el cuadro de contenido

Lo primero que deberá cambiar es el contenido del cuadro de contenido. Esto incluye la imagen / ilustración que se está utilizando. Puede encontrar las dos ilustraciones que se utilizaron en este tutorial yendo a la Publicación del paquete de diseño de Illustrator gráfico y descargando las imágenes al final del mismo.

recorrido móvil

recorrido móvil

Cambiar enlace

Cambie también el enlace del botón.

recorrido móvil

Modificar fondo degradado

También puede personalizar la paleta de colores de cada diapositiva duplicada cambiando el primer color de degradado.

  • Color 1: #ffccaa

recorrido móvil

Cambiar el color de fondo del botón

Use ese mismo color para cambiar el color de fondo del botón. Repite estos pasos para cada uno de los duplicados que crees y listo.

  • Color de fondo del botón: #ffccaa

recorrido móvil

Descargue la sección Tutorial móvil GRATIS

Para poner sus manos en la sección de guía móvil gratuita, primero deberá descargarla 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.

Avance

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

Estático

recorrido móvil

GIF

recorrido móvil

Pensamientos finales

En esta publicación, le mostramos cómo usar el módulo deslizante de Divi para crear un magnífico tutorial para dispositivos móviles. Aunque inicialmente se diseñó para tamaños de pantalla móviles, se ve igualmente bien en tabletas y computadoras de escritorio. Puede utilizar este enfoque para crear todo tipo de secciones de diapositivas en su sitio web e interactuar sin problemas con sus visitantes. Esperamos que este tutorial lo inspire a ser creativo con el módulo deslizante de Divi. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!