16 ejemplos inspiradores de increíbles controles deslizantes modernos de la página inicial

¡Las diapositivas de la página inicial han regresado! O, debo decir, nunca se fueron. Si creía que la brigada anti-Slip, las diapositivas de la página inicial son aburridas, molestas y perjudiciales para las conversiones. Pero la evidencia real demuestra lo contrario. Las diapositivas modernas han evolucionado más allá de las presentaciones de diapositivas básicas que existían en todas partes hace 7 años. Las grandes marcas como SpaceX o Microsoft tienen controles deslizantes bien diseñados en sus sitios web. Las diapositivas contemporáneas son hermosas. Presentan imágenes sorprendentes, generalmente fotografía de alta resolución, junto con una escritura cuidadosa, CTA y elementos de diseño bien colocados que aseguran que la información sea oportuna, para que los usuarios puedan absorber el contenido de cada diapositiva.
¡Subir a bordo! ¡Únete a los 142,416 suscriptores nuestros!
Reciba las últimas noticias, tutoriales, guías, consejos y ofertas entregadas en su casilla de correo electrónico.
Sin spam. Sin pago. Solo correos electrónicos limpios.
¿Por qué usar un cambio para el sitio web de WordPress? Muchos beneficios incluyen:
Enfoque. La capacidad de concentrar a los usuarios en sus mensajes clave sobre el pliegue.
Imágenes visuales. A los usuarios les encantan las imágenes increíbles. Las diapositivas le permiten mostrar más de una sola imagen.
Urgencia a la acción. Las diapositivas brindan oportunidades para mostrar más CTA para su contenido importante.
Echemos un vistazo a algunos ejemplos sobre cómo usar las diapositivas de la página inicial.
1. Slisier con gradiente de ancho completo

🎓 Disponible en Smart Slider 3 gratis – Slider con gradiente de ancho completo
En la biblioteca de plantillas Smart Slider 3 puede cumplir con esa hermosa plantilla de diapositivas gratuita. Es una forma simple de mostrar la información más importante con un título, un texto corto, un botón y una imagen simple. Hay más oportunidades para navegar por otras diapositivas, puede usar marcadores y flechas o simplemente navegar con una diapositiva del mouse. El fondo de gradiente lo hace colorear y llena el 100% del ancho de su página. Lo que funciona: el control deslizante es simple y hace la primera buena impresión si la usa en la parte superior de su página. Es compatible con dispositivos móviles y se ve bien en cada dispositivo. No es demasiado y contiene solo la información importante, también es fácil de personalizar.
2. Cursos deslizantes
🎓 Disponible en Smart Slider 3 Pro – Cursos

La diapositiva deslizante es un excelente ejemplo de diapositiva para la página de inicio de ancho completo. La presentación de diapositivas tiene un fondo azul oscuro con un tono con forma que rompe y anima la estructura de la página inicial. Con esto, puede concentrarse en las imágenes y el contenido en el centro. La estructura es excelente y se ve bien en los dispositivos móviles.
👍 Por qué funciona: CTA se destaca de la diapositiva y, con eso, puede explorar una determinada página. Hay todo el contenido que necesita saber sobre el curso en sí: lecciones, tiempo y puede verificar un video introductorio en una caja de la caja de luz.
3. Portafolio de toda la página
🎓 Disponible en Smart Slider 3 Pro – Portafolio de página completa

Smart Slider ofrece una diapositiva de cartera de página completa que realmente puede funcionar en su página inicial. Se puede usar como encabezado de héroe en su sitio web. Llena todo el ancho y la altura del navegador y puede cambiar las siguientes diapositivas por desfile. Las animaciones de capa hacen que este interruptor de la página inicial sea más emocionante, la imagen principal se carga primero y luego se muestra el contenido. Y hay muchas cosas interesantes en la diapositiva, como el título resaltado, que resalta un texto importante, el botón, que puede navegar en la siguiente diapositiva o los medidores que hacen que el control deslizante sea más interesante.
4. Página de destino de la agencia
🎓 Disponible en Smart Slider 3 Pro – Página de destino de la agencia
¿Crees que puedes crear una página completa con diapositivas? Imagine colocar diapositivas entre sí y úselas como una página de destino, como en la plantilla de la agencia. Use eventos para explorar otras diapositivas y no tendrá problemas con la capacidad de responder. Este grupo de diapositivas se inspira claramente en la idea de construir el lado tecnológico de la presencia en línea.

👍 Por qué trabajar: las diapositivas se pasan entre sí y están en armonía. En la parte superior hay una simple navegación con enlaces donde puede correr a otra diapositiva. Todo lo que necesita es una plantilla mínima, luego personalice las diapositivas y úsela de manera simple.
5. escaparate de la ventana
🎓 Disponible en Smart Slider 3 Pro – bodega
La diapositiva de la bodega es un excelente ejemplo de la cantidad de opciones disponibles para presentar un producto. Esta diapositiva de presentación puede introducir más productos uno al lado del otro y ayudarlo a vender esos vinos. La diapositiva activa está en el medio y haciendo clic en las diapositivas siguientes o anteriores, puede avanzar o volver para ver a los demás. El propósito es que el visitante haga clic en los botones y compre el producto. Las animaciones de las capas son únicas en cada diapositiva y, debido a este movimiento, el visitante se centrará en las botellas.

6. Complete el video en su página inicial
🎓 Disponible en Smart Slider 3 Pro – Bloque de video para toda la página
Al navegar por la web, puede cumplir con muchos videos en la página de inicio del sitio web. Los videos pueden atraer la atención de los visitantes y son excelentes elementos de diseño. En este bloque de control deslizante de video, puede navegar por otras páginas, para que pueda usarse como un bloque de navegación en la parte superior de la página.
👍 Por qué funciona: el control deslizante es simple, pero el visitante puede ver suficiente información. Lo que realmente me gusta de esta diapositiva es que realmente está en la pantalla completa y, por esta razón, puede ser un excelente punto de partida.

7. Cerrar la página inicial del podcast
🎓 Disponible en Smart Slider 3 Pro – Bloque de podcast
Para la primera impresión, esta diapositiva puede parecer llena, pero si la miras más a fondo, creerás que cada elemento es importante y bien organizado. Esta diapositiva de podcast sale de la multitud y contiene elementos interactivos: un CTA, iconos que indican redes sociales y un archivo de audio que puede reproducir. Simplemente mueva el mouse sobre el contenido y las partículas se moverán. Esto puede ser un efecto genial cuando el visitante se sobrepasa el bloque y le gustará.
8. Juego automático de Slisor Religious Slisor

🎓 Disponible en Smart Slider 3 Pro – Reproducción automática de control deslizante estático
La presentación de diapositivas completas de pantalla con un texto estático y fondos variados es una forma atractiva de mostrar la información que puede atraer a las personas. La diapositiva estática siempre está por encima de las otras diapositivas que se mueven detrás de él. En este caso, las capas recibirán más atención porque siempre son visibles. Y el indicador de reproducción automática le muestra que la diapositiva está activa y que sucederá algo.
👍 ¿Por qué funciona?: Una diapositiva estática siempre es visible y debe crearla una vez. Esta es una buena manera de mostrar su logotipo o marca de agua, pero es una buena manera de poner un texto que requiere atención. Y la reproducción automática con la animación en el fondo lo hace más visible.
9. Slisor para la página inicial del equipo


🎓 Disponible en Smart Slider 3 Pro – Team Slider
Esta diapositiva se centra en los miembros de un equipo. Ofrece una nota agradable y personal al sitio web de una empresa y ayuda a desarrollar la confianza de los clientes. Puede navegar con la flecha en la parte inferior o con las miniaturas en el lado derecho. Los números en la parte superior ayudan al visitante a averiguar cuántas diapositivas están disponibles y cuáles son visibles. Es obvio que se ha puesto durante mucho tiempo y diseño en esta diapositiva, cada uno de sus elementos trabajando juntos en armonía. Es un gran ejemplo de una diapositiva que lleva el concepto de presentación de diapositivas a un nivel completamente nuevo.
10. Ejemplo de diapositivas de capa
🎓 Disponible en Smart Slider 3 Pro – Ejemplo por Slider de capa

Todos aman las elegantes transiciones en su sitio, ayudan a atraer la atención de los visitantes. El propósito de ese cursor es llamar al visitante a una acción, los botones e íconos están esperando un clic. Es importante tener armonía visual entre las capas y el fondo, esto hace que la diapositiva se complete. Puede parecer fácil poner capas entre sí. Sin embargo, si el contraste entre las capas y el fondo no es suficiente, puede usar una superposición del jardinero para agregar un color a su diapositiva, como en este ejemplo de un control deslizante inteligente.
👍 ¿Por qué funciona? El título animado atrae los ojos y el visitante hará clic en botones e íconos. La última diapositiva es mi favorita, hay un video de fondo con una capa HTML que contiene un formulario de contacto y hace que el visitante haga algo.
11. Ejemplo de diapositiva para la página inicial del hotel
🎓 Disponible en Smart Slider 3 Pro – Hotel de página completa

Esta diapositiva es un gran ejemplo de cuán útil puede ser usar líneas y columnas y crear una estructura en una diapositiva. Hay muchos tipos diferentes de capas: título, texto, botón y un buen medidor con animación. El fondo se mueve un poco, este Ken Burns da un movimiento al tobogán. Con las cajas, puede explorar las diapositivas siguientes y anteriores, y muestran una imagen cuando pasa con el mouse sobre él, lo cual es un efecto muy fuerte. Comenzando. La fila en la parte inferior contiene toda la información útil de una manera atractiva. El divisor de la forma hace la ilusión de que esta fila se superpone al diapositivo, lo que fomenta el diseño.
12. exhibición de historias de clientes
🎓 Disponible en Smart Slider 3 Pro – Historias Cliente
Esta diapositiva es una de mis favoritas. Llena todo el ancho del navegador y hay 2 secciones: una parte de información con una CTA y una navegación y una imagen con un testimonio en una caja blanca. La capacidad de respuesta también es muy buena: las dos columnas están debajo de las demás en tabletas y dispositivos móviles.

👍 Por qué funciona: con respecto a CTA podemos ver que su fondo negro contrasta fuertemente con el fondo pastel, atrayendo rápidamente la atención del usuario.
13. Grid deslizante rota
🎓 Disponible en Smart Slider 3 Pro – Broken Grid Slider
Esta increíble diapositiva es una nueva adición a la biblioteca Smart Slider 3 y, aunque parece simple, hay muchos efectos de diseño diferentes. Para empezar, tiene una apariencia de la red rota, que se ha convertido en una tendencia popular para el sitio web en los últimos meses y es poco probable que desaparezca pronto. Cuando pasa con el mouse sobre la diapositiva, se mueve usando un efecto de paralaje encantador que le dará vida a las imágenes estáticas. Luego está el separador en forma de blanco en el fondo que ayuda a las imágenes. Además de todo esto, hay muchos comandos para deslizar a través de imágenes: flechas de navegación, comandos de bala en la parte inferior y también puede hacer clic y deslizar. Puede cumplir con cada segundo sitio web. Haga el control deslizante único y, con la apariencia de la cuadrícula rota, su sitio se verá moderno. Este control deslizante puede ser una buena diapositiva de héroe en la parte superior de su página.

14. Presentación de moda de toda la página
🎓 Disponible en Smart Slider 3 Pro – Slider de moda de página completa
Lo que me gusta de esta diapositiva es que es un ejemplo perfecto de lo que puede hacer con una excelente foto, controles deslizantes bien elegidos y un diseño cuidadoso. El enfoque principal de cada diapositiva es la imagen transparente a la izquierda, pero detrás de cada modelo hay una forma fija con un efecto de paralaje sutil. El título, el texto y la CTA brindan a los visitantes una dirección clara sobre dónde hacer clic para comprar. También hay muchos pedidos disponibles para moverse a través de las diapositivas, incluidas las flechas de navegación izquierda, los números correctos (que también indican cuántas diapositivas existen) y una miniatura de la próxima imagen de diapositivas, por lo que los visitantes saben qué sigue. A continuación se muestra por qué funciona: cada capa tiene su propio papel, el título atrae la atención de los visitantes, las flechas y los números ayuda a navegar, y la miniatura muestra lo que está en la próxima diapositiva. Los botones se pueden usar como elementos de apelación a la acción, a través de la cual puede dar a los visitantes algo para hacer clic y navegar en otra página.
15. Ejemplo de diapositivas de productos en la página de inicio

🎓 Disponible en Smart Slider 3 Pro – Ejemplo deslizador de productos en la página de inicio
No pensarías que esto es una diapositiva, ¡pero lo es! A medida que se desplaza hacia abajo en la página, cada página es anime, que muestra un color de fondo de color diferente, varias imágenes, texto y una solicitud final para descargar la aplicación de Apple App Store. Es un concepto simple con (por sí solo) tantos conmovedores y animados.
👍 Por qué funciona: las animaciones funcionan en armonía juntos, vienen una tras otra. Hace que el cursor sea limpio y moderno. Esta no es una diapositiva tradicional, puede usarla usted mismo en su página inicial. La animación posterior ayuda al visitante a navegar y verificar más información y detalles sobre su producto16. Diapositiva de color de ancho completo
🎓 Disponible en Smart Slider 3 Pro – Slider de colores en todo el ancho

Este colorido control deslizante es uno de los mejores ejemplos para una diapositiva de ancho completo. El efecto de paralaje de la capa con el título resaltado hace que el control deslizante y la conciencia. Con este resaltado, puede enfocar la parte más importante de la diapositiva. Los colores están en armonía, y el título es más legible porque existe un fuerte contraste entre el color y el color de fondo.
👍 Por qué funciona: con el resaltado animado, el visitante puede centrarse en el mensaje más importante, lo que desea resaltar, pero también los botones CTA son la parte principal de la diapositiva. Al hacer clic en ellas, aparecerán varias capas con una buena animación y mostrarán más información sobre su proyecto.
Cree su propio control deslizante agradable para la página de inicio Smart 3 Smart 3 con Smart Slider 3, puede crear fácilmente hermosas diapositivas para la página inicial. Si le gustan los ejemplos de Smart Slider anterior, puede usarlos, simplemente importarlos en la instalación de WordPress cuando se registre en Smart Slider 3 Pro.