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 sus 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, puedes lograr impresionantes diseños web.
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á igual de bien en computadoras de escritorio y tabletas, aunque inicialmente está diseñado para dispositivos móviles. En esta publicación, recrearemos un impresionante ejemplo desde cero y ofreceremos la sección para descargar al final.
¡Hagámoslo!
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
¡Comencemos 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.
- Relleno superior: 4vw (escritorio), 5vw (tableta), 3vw (teléfono)
- Acolchado inferior: 4vw (escritorio), 5vw (tableta), 3vw (teléfono)
- Relleno 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 utilizando la siguiente estructura de columnas:
Fondo degradado
Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un fondo degradado radial.
- Color 1: #f9f9f9
- Color 2: rgba (255.255.255,0)
- Tipo de gradiente: 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 columnas.
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
También estamos agregando algo de relleno inferior a la fila.
- Relleno inferior: 30px
Borde
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 sutil sombra de cuadro a la fila para crear algo de profundidad en la página.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.07)
Agregar módulo deslizante
Cambiar 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 después.
- 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
Modifique la configuración del texto del cuerpo a continuación.
- Fuente del cuerpo: Predeterminada (Open Sans)
- Tamaño del cuerpo del texto: 0.6vw (escritorio), 1.5vw (tableta), 2.4vw (teléfono)
- Altura de la línea del cuerpo: 2,2 em (escritorio), 2,3 em (tableta), 2,4 em (teléfono)
Espaciado
Agregue un poco de relleno 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 deslizante en particular. Debido a que este elemento se combina con diferentes elementos en cada diapositiva, deberá agregar el relleno y el margen manualmente usando el código CSS en la pestaña avanzada.
|
01
02
03
04
05
|
padding-left: 80px;padding-right: 80px;padding-top: 8px;padding-bottom: 8px;margin-bottom: 80px; |
Eliminar controles deslizantes activos
Una vez que haya terminado de modificar todas las configuraciones generales de las 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.
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, 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 usado yendo a la publicación del paquete de diseño de Illustrator gráfico y descargando las imágenes al final de la misma. 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 gradiente: Radial
- Dirección radial: Superior
- Posición inicial: 30%
- Posición final: 30%
Navegación
Modifique la configuración de texto a continuación.
- Color personalizado de las flechas: #f4f4f4
- Color personalizado de Dot Nav: #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 lo 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 Illustrator gráfico y descargando las imágenes al final.
Cambiar enlace
Cambie el enlace del botón también.
Modificar fondo degradado
También puede personalizar la paleta de colores de cada diapositiva duplicada cambiando el primer color del 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. Repite estos pasos para cada uno de los duplicados que crees y ¡listo!
- Color de fondo del botón: #ffccaa
Descargue la sección de guía 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 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!
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 hermoso recorrido móvil. Aunque inicialmente se diseñó para tamaños de pantalla de dispositivos móviles, se ve igual de 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!