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 pasar a través de ellos 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 recorrido móvil con el módulo deslizante. Puede agregar tantas diapositivas como desee y el tutorial se verá igual de bien en computadoras de escritorio y tabletas, aunque inicialmente está diseñado para dispositivos móviles. En esta publicación, recrearemos un ejemplo impresionante 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

GIF

¡Empecemos a recrear!

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

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)

Agregar nueva fila

Estructura de la columna

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

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%

Dimensionamiento

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

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

Espaciado

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

• Acolchado inferior: 30px

Frontera

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

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)

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)

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)

Configuración del texto del cuerpo

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

• Fuente del cuerpo: Predeterminado (Open Sans)
• 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)

Espaciado

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

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

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;

Quitar 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, crearemos uno desde cero en la siguiente parte de la publicación. Esto nos ayudará a modificar y personalizar todo más rápido.

Personalizar la primera diapositiva

Personalizar contenido en el cuadro de contenido

Agregue una nueva diapositiva al módulo de control deslizante y comience a personalizar el contenido en el cuadro de contenido. En las pantallas de impresión a continuación, notará 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 Graphic Illustrator y descargando las imágenes al final. También estamos agregando y diseñando un título H3 en el cuadro de contenido en lugar del campo de título para que se muestre exactamente donde queremos.

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.

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%

Navegación

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

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

Configuración de texto

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

• Color del texto: oscuro

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

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.

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 usaron en este tutorial yendo a la publicación del paquete de diseño de Graphic Illustrator y descargando las imágenes al final.

Cambiar enlace

Cambie también el enlace del botón.

Modificar fondo degradado

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

• Color 1: #ffccaa

Cambiar el color de fondo del botón

Use ese mismo color para cambiar el color de fondo del botón. Repita estos pasos para cada uno de los duplicados que cree y ¡listo!

• Color de fondo del botón: #ffccaa

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.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Avance

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

Estático

GIF

Pensamientos finales

En esta publicación, le mostramos cómo usar el módulo deslizante de Divi para crear un magnífico tutorial móvil. Aunque inicialmente fue diseñado 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!