Más de 15 excelentes ejemplos de controles deslizantes de WordPress (escaparate)

¿Buscas inspiración para tu control deslizante de WordPress? Los controles deslizantes permiten a los propietarios de sitios web mostrar su contenido más importante en una presentación de diapositivas atractiva e interactiva, para que los usuarios puedan ver los aspectos más destacados y tomar medidas de inmediato. ¡No es de extrañar que tantos sitios usen controles deslizantes con todo lo que pueden hacer!

• Entregue contenido de manera eficiente y con estilo
• Empaca mucha información en un espacio pequeño
• Agregue interacción a su sitio web
• Visitantes directos a promociones y páginas importantes

En este artículo, le mostraremos más de 15 excelentes ejemplos de controles deslizantes de WordPress. También le mostraremos cómo crear rápidamente un magnífico control deslizante para su propio sitio web.

Muestra de inspiración de control deslizante

Estos son algunos de los mejores ejemplos de controles deslizantes para su inspiración. Los criterios que usamos para elegir estos controles deslizantes fueron 1) creatividad y 2) facilidad de uso. Algunos diseños tienen ambos, y algunos solo tienen un aspecto.

CNBC primer

El control deslizante de CNBC es legible y fácil de usar. Usan una fuente gruesa para los títulos de los programas, por lo que es fácil de leer. Colorear el texto realmente ayuda a que se destaque contra el fondo también.

CBS

El control deslizante de CBS utiliza imágenes atractivas con letra grande y mucho espacio en blanco para que sea fácil de leer y usar. Las viñetas grandes dejan muy claro lo que sucederá cuando hagas clic.

universal orlando

El control deslizante de Universal tiene un propósito simple: atraerlo para que visite su parque de diversiones. Aunque los CTA hacen algunas ofertas tentadoras, las fotos hablan por sí solas.

Dove Cotes de Saville

Saville's usa una elegante fuente serif combinada con fotos que resaltan la calidad y la artesanía de sus palomares. También explican su amplio conocimiento de las palomas, por lo que puede estar seguro de que está comprando las mejores casas para sus amigos emplumados.

Panadería Magnolia

Magnolia Bakery es un gran ejemplo de un control deslizante de solo imagen. Cuando tienes pasteles deliciosos, ¿quién necesita charlar? Estos tres mini-deslizadores se ven deliciosos en esta página web.

Garganta llameante

Flaming Gorge es una atracción popular de Utah. Los titulares de su galería lo dicen todo: puede disfrutar de la amplitud de la vista sin sufrir en el resort Flaming Gorge.

Temas de avance

Headway Themes hace un uso creativo del control deslizante. En lugar del típico control deslizante de la parte superior de la página, colocaron el suyo más abajo y lo usaron para mostrar sitios web que usan sus temas. ¡Inteligente!

Galería Smithsonian Freer Sackler

Smithsonian Freer Sackler utiliza un control deslizante de navegación simple para dirigirlo a las páginas clave del sitio web. La apariencia simple y limpia del control deslizante, rodeada de espacios en blanco que lo atraen a las imágenes, es perfecta para una galería de arte.

Planeta solitario

El control deslizante de Lonely Planet se vuelve elegante con una imagen giratoria a pantalla completa y animaciones llamativas. Este no solo es un control deslizante de aspecto magnífico, sino que también es fácil de navegar a cualquier lugar que te apetezca.

Puerto Este

El control deslizante de Converse pone todo el enfoque justo donde debería estar: en el producto. Los detalles y las texturas son tan claros en este deslizador que casi podrías estirar la mano y tocar la tela.

Hojaz

El control deslizante de Sheetz utiliza colores brillantes y divertidos con botones de avance interactivos que se deslizan hacia afuera cuando pasas el mouse sobre ellos. Los controles deslizantes como este simplemente ruegan que se juegue con ellos.

xbox

El control deslizante de Xbox apuesta por la simplicidad con imágenes limpias de productos, pocas palabras y muchos espacios en blanco. Este es definitivamente un caso donde menos es más.

Tim Hortons

El control deslizante de Tim Hortons es un ejemplo clásico de excelente fotografía de alimentos en el trabajo. ¡Haz que se te haga la boca agua, combínalo con grandes ofertas y BOOM! Tienes un control deslizante que es extremadamente difícil de resistir.

crujido de sony

Crackle sticks con un esquema de color blanco y naranja simple que llama la atención sobre el control deslizante giratorio. Los pequeños anuncios publicitarios en cada diapositiva te dan la necesidad de encender el tubo y ver algunos programas de televisión.

Instituto Smithsonian

El control deslizante del Smithsonian utiliza flechas grandes y llamativas para que pueda volver a una diapositiva anterior que se haya perdido. Eso es importante en este caso, porque hay mucho texto para leer en cada diapositiva.

Lumbrera

El control deslizante del Louvre es exactamente lo que esperarías: histórico y elegante. Eso es gracias al amplio espacio en blanco, la fuente serif y el simple pero dramático fundido a negro en las imágenes. La otra gran cosa acerca de este control deslizante es el botón de reproducción/pausa en la esquina inferior derecha.

Cómo crear su propio control deslizante de WordPress

Ahora puede que se pregunte: " Estos controles deslizantes son increíbles, pero ¿cómo puedo crear uno para mi propio sitio web?"

Bueno, afortunadamente, en realidad es bastante simple gracias al complemento Soliloquy para WordPress.

Primero, debe instalar y activar el complemento Soliloquy Slider. Para obtener más detalles, consulte esta guía paso a paso sobre cómo instalar un complemento en WordPress.

A continuación, es hora de crear su primer control deslizante. Vaya a Soliloquio » Agregar nuevo para agregar un control deslizante. Puede seleccionar archivos de su computadora si necesita cargar imágenes. Si ya ha subido imágenes a su sitio web, seleccione archivos de otras fuentes.

Continúe desplazándose hacia abajo. Verá las imágenes que ha seleccionado para su control deslizante. Desde aquí, puede hacer clic en el icono del lápiz para editar imágenes o hacer clic en la X roja para eliminar imágenes de su control deslizante.

También puede configurar otros detalles sobre su control deslizante seleccionando la pestaña Configuración a la izquierda. Puede establecer el tamaño de la imagen, el tema del control deslizante y la velocidad de las transiciones de diapositivas. La posición de la leyenda de texto también se puede cambiar aquí. Revise estos ajustes.

Una vez que esté satisfecho con su configuración, eche un vistazo a la pestaña Móvil . Esto le permitirá probar cómo se ve su sitio web en un dispositivo móvil y ajustar la configuración de resolución móvil según sea necesario.

(Además, vea la pestaña Varios para importar o exportar su control deslizante).

Agregar un control deslizante a una página o publicación

¡Has terminado de crear tu control deslizante! Ahora es el momento de agregarlo a la publicación o página de su elección. Edite una publicación o página, haga clic en el botón Agregar control deslizante y seleccione su control deslizante. Recuerda publicar o actualizar tu publicación/página para guardar los cambios.

Su control deslizante ahora estará en vivo en su sitio web:

¡Eso es! Ahora tienes tu propio control deslizante de WordPress. Esperamos que este artículo lo haya inspirado con más de 15 excelentes ejemplos de controles deslizantes de WordPress y lo haya ayudado a crear su primer control deslizante.

También puede consultar todas las funciones avanzadas que puede utilizar al diseñar sus controles deslizantes. Las posibilidades para personalizar su control deslizante son prácticamente infinitas, ¡así que comience hoy con Soliliquy! Estos son solo algunos ejemplos de lo que puede hacer con un control deslizante de Soliloquy.

• Crear un control deslizante de imagen de ancho completo en WordPress
• Cambiar el tiempo del control deslizante en WordPress
• Crear un control deslizante de video receptivo en WordPress

Si te gusta este artículo, síguenos en Facebook y Twitter para obtener más tutoriales gratuitos de WordPress.