Esta publicación es la parte 2 de 5 en nuestra mini serie titulada 5 formas interesantes de diseñar el módulo deslizante de Divi . ¡Estén atentos para conocer los cinco ejemplos únicos del módulo deslizante y los tutoriales sobre cómo lograrlos!
En el tutorial del control deslizante de hoy, vamos a cambiar la animación del control deslizante para que el texto y el botón se deslicen hacia abajo desde la parte superior. También lo diseñaremos usando la configuración de paralaje para que las imágenes transparentes que estamos usando parezcan «flotar» sobre el fondo. Es un efecto atractivo cuando se hace correctamente y atrae la atención hacia tu llamado a la acción.
¡Entremos en ello!
El control deslizante no viene con ninguna imagen predeterminada almacenada en el interior, por lo que agregué algunas imágenes de fondo (y algo de texto ficticio ) con anticipación, pero no cambié ninguna de las configuraciones predeterminadas en los módulos.
Terminaremos con un control deslizante de paralaje a pantalla completa y un nuevo y agradable efecto para las diapositivas. Estoy usando un motivo de restaurante ya que parecía encajar bien con este estilo.
Cómo agregar elementos de paralaje y una transición deslizante hacia abajo al módulo deslizante Divi
Suscríbete a nuestro canal de Youtube
El concepto y la inspiración
He visto este concepto antes en las redes, usando png transparentes en parallax para dar la ilusión de capa mixta, o «flotante» como me gusta llamarlo, simplemente pensé en probarlo con un control deslizante.
Preparación de los elementos de diseño
Para este diseño en particular, preparé mis imágenes transparentes de antemano. Si no está seguro de cómo hacer una imagen con un fondo transparente, Elegant Themes tiene este excelente tutorial , desplácese hacia abajo hasta el n. ° 3.
Cuando esté buscando imágenes para usar, intente la consulta «____________ aislado». Esto generalmente mostrará algunas opciones de fondo blanco.
Aquí están las dimensiones de la imagen que usé en esta publicación:
- Fondo de la sección: 1920px por 1280px
- Fondo del control deslizante: 1920 px por 1500 px
Implementando el Diseño con Divi
Usaré el generador de back-end clásico porque es con lo que me siento más cómodo, pero todo lo que hacemos ciertamente se puede lograr y editar con el nuevo Visual Builder de front-end, como se muestra en el video de arriba.
La configuración de la sección
Comenzaremos con una sección estándar de 1 columna y le agregaremos un módulo deslizante.
A continuación, cambiaremos algunas configuraciones en el propio módulo de sección.
Para la sección Configuración general , subo mi imagen de fondo y especifico un relleno superior e inferior, superior: 0px / inferior: 0px
La configuración del módulo de fila
En la Configuración general , aplique la configuración como se muestra a continuación.
La configuración del módulo deslizante
Para la configuración general del módulo deslizante , establezca lo siguiente:
- mostrar flechas
- mostrar controles: no
- animación automática: activada
- velocidad de animación establecida en 8000
- continuar deslizamiento automático al pasar el mouse: encendido
- usar efecto de paralaje: sí
- método de paralaje: paralaje verdadero
- eliminar la sombra interior: sí
Para la Configuración de diseño avanzado del módulo deslizante , el color que ve que se usa es #000000 (negro) y los tamaños de fuente del encabezado son Escritorio: 44 / tableta: 44 / teléfono inteligente: 30 . Puede usar #1d1d1d en lugar de negro si cree que es demasiado duro para los ojos.
Para la configuración de CSS personalizada del módulo deslizante , agregue el siguiente código:
Descripción de la diapositiva : cambia la animación de la diapositiva para que se deslice hacia abajo desde la parte superior y cambia el relleno predeterminado.
|
01
02
|
animation-name: fadeInTop;padding: 18% 10%; |
Título de la diapositiva : no usamos ningún cuerpo de texto en las diapositivas, por lo que agregamos un poco más de espacio entre el título y el botón.
|
01
|
margin-bottom: 15px; |
La configuración de diapositivas
Para la configuración general de la diapositiva , consulte a continuación, el color de fondo es rgba (0,0,0,0) y el color de superposición de fondo es rgba (0,0,0,0.2)
Importante: no olvide agregar sus imágenes png transparentes como imagen de fondo en cada diapositiva individual, así como el título y el texto del botón para crear el efecto completo. Además, dado que estamos usando paralaje, deberá tener contenido debajo de la sección del control deslizante para poder desplazarse y ver cómo funciona el paralaje.
Después de insertar todas las imágenes de fondo de las diapositivas, ahora ha creado un control deslizante de paralaje bastante bueno que debería impresionar a sus clientes y/o visitantes. ¡Espero que puedas hacer un gran uso de este tutorial, y no dudes en publicar tus usos en los comentarios!
Mañana: cómo crear un control deslizante de «superposición de caja suave» con el módulo deslizante de Divi
En la publicación de mañana continuaré esta serie sobre cómo diseñar el módulo deslizante de Divi de maneras interesantes. Le mostraré cómo crear un sutil efecto de superposición con el fondo del control deslizante para que se vea el fondo de la sección. También usaremos css para cambiar la transición del control deslizante. ¡Te veo allí!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!