Cómo crear procedimientos móviles utilizando el módulo Slider Divi (¡descarga gratuita!)

Los controles deslizantes siempre han sido muy populares en el diseño web. Una de sus mayores ventajas es que los visitantes pueden pasar por dispositivos móviles. Hoy en día, el deslizamiento es el nuevo clic, por lo que está claro que incluidas las diapositivas puede ayudar a mejorar la experiencia del usuario móvil que los visitantes tienen en su sitio web. Al crear un sitio web con DIV, puede agregar fácilmente el módulo deslizante a cualquier fila o sección que trabaje. Y con un poco de creatividad y experimentación, puedes hacer modelos web increíbles. Una de las cosas que puede hacer es crear una presentación móvil con el módulo deslizante. Puede agregar cuántas diapositivas desea y el paso se verá igual de bien en el escritorio y la tableta, aunque inicialmente está diseñado para dispositivos móviles. En esta publicación, recrearemos un ejemplo sorprendente desde cero y proporcionaremos la sección para descargar al final.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado que recrearemos en diferentes tamaños de pantalla. Estático

Gif

¡Comencemos a recrear! Cómo crear procedimientos móviles utilizando el módulo deslizante Div, suscríbase a nuestro canal de YouTube ¡Agregue una nueva sección para comenzar a crear! Agregue una nueva página o abra una existente y agregue una nueva sección habitual. Abra la configuración de la sección y agregue algunos valores de llenado personalizados que coincidan con las diferentes dimensiones de la pantalla.
Revelaje superior: 4VW (escritorio), 5VW (tableta), 3VW (teléfono)
Bajo forro: 4VW (escritorio), 5VW (tableta), 3VW (teléfono)
Revelaje izquierdo: 30VW (escritorio), 18 VW (tableta), 3VW (teléfono) Revelaje recto: 30VW (escritorio), 18 VW (tableta), 3VW (teléfono)
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Fondo de gradiente sin agregar módulos, abrir la configuración de la fila y agregar un fondo de gradiente radial.

Color 1: # F9F9F9
Color 2: RGBA (255,255,255.0)
Tipo de gradiente: radial
Dirección radial: arriba
Posición inicial: 40%
Posición final: 40%
La dimensión continúa accediendo a la configuración de dimensionamiento de la fila y eliminando todo el espacio entre las columnas.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
El espacio también agregue un forro más bajo en una fila.

Finamiento inferior: 30 px
Border luego, agregue “20px” a cada una de las esquinas en la configuración del borde.

Por último, pero no menos importante, Box Shadow agrega una sombra de un cuadro sutil en una fila para crear una cierta profundidad de la página.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,07)
Agregue un módulo deslizante Cambiar el color de fondo después de haber terminado de cambiar la configuración de la fila, puede continuar y agregar un módulo deslizante. Abra la configuración del módulo y cambie 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 más adelante.

Color de fondo: RGBA (255,255,255.0)
Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto.

Orientación de texto: centro
Color de la sombra: RGBA (0.0,0,0)
Configuración de texto del cuerpo y luego cambie la configuración de texto de su cuerpo.

Font Corps: Tamaño de texto del cuerpo predeterminado (abierto SANS): 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)
El espacio agregue algunos revestimientos personalizados desde arriba e abajo.
Revestimiento superior: 2VW

Revestimiento inferior: 2VW
El botón CSS personalizado también deberá agregar un relleno y margen más 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 borde utilizando manualmente el código CSS a la pestaña avanzada.
RODING-LEFT: 80px;

Right de relleno: 80px;
Top-top: 8px;
Bottom: 8px;
Margen-Bottom: 80px;
Retire las diapositivas activas después de que haya terminado de cambiar toda la configuración de diapositivas general, puede continuar y eliminar las diapositivas activas que ya están allí. En lugar de usarlos, crearemos uno desde cero en la siguiente parte de la publicación. Esto nos ayudará a cambiar y personalizar todo más rápido.
Personalice la primera diapositiva personalice el 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 agregamos la imagen al cuadro de contenido en lugar de la configuración de la imagen. Esto nos permitirá colocar la imagen sobre el contenido escrito. Puede encontrar las ilustraciones que utilizamos accediendo a la publicación del paquete de diseño de ilustrador gráfico y descargando las imágenes al final. También agregamos y llamamos un título H3 en el cuadro de contenido, en lugar del campo de título, para que aparezca exactamente donde queremos.

El botón Continúa accediendo al acceso 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.

Color 1: #AAACFF



Color 2: RGBA (255,255,255.0)

Tipo de gradiente: radial
Dirección radial: arriba
Posición inicial: 30%
Posición final: 30%
Navegación Cambie la configuración de texto a continuación.
Flechas de color personalizadas: # F4F4F4
Color personalizado Dot Nav: # 000000

Configuración de texto y cambie el color de texto en la configuración del texto.
Color de texto: oscuro
Botón por último, pero no menos importante, cambie el botón para que se vea exactamente como desee.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.8VW (escritorio), 2VW (tableta), 3VW (teléfono)

El color del texto del botón: #ffffff
El color del fondo del botón: #AAACFF
El ancho del nudo del botón: 0 PX
Botón Raza: 10 PX
Clonar la diapositiva siempre que sea necesario después de haber terminado de crear y personalizar la primera diapositiva, puede continuar la diapositiva tantas veces como desee. Deberá realizar algunos cambios manuales en cada uno de los duplicados.
Cambie el contenido en el cuadro de contenido Lo primero que necesitará cambiar es el contenido en el cuadro de contenido. Esto incluye la imagen / ilustración que se usa. Puede encontrar ambas ilustraciones que se han utilizado en este tutorial accediendo al paquete de diseño de ilustrador gráfico y descargando las imágenes al final.
Cambie el cambio de conexión y el enlace del botón.


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

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


El color del fondo del botón: #ffccaa

Descargue la sección de tutorial móvil de forma gratuita para poner su mano en la sección de acceso móvil gratuita, primero deberá descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!

Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado que recrearemos en diferentes tamaños de pantalla.Staticgif
Pensamientos finales En esta publicación, le mostré cómo usar el módulo Slider Divi para crear una hermosa presentación móvil.Aunque originalmente fue diseñado para el tamaño de la pantalla móvil, se ve igual de bien en la tableta y el escritorio.Puede usar este enfoque para crear todo tipo de diapositivas en su sitio web e interactuar perfectamente con sus visitantes.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.