Cómo Crear Fácilmente un Slider Responsivo en WordPress

¿Alguna vez has visitado un sitio web y te ha impresionado una hermosa galería deslizante en la página de inicio? Es una excelente manera de destacar tu mejor contenido, pero hacer que se vea bien en cada dispositivo puede ser un verdadero dolor de cabeza.

Sabemos lo frustrante que es cuando un slider se ve perfecto en tu computadora pero es torpe o no funciona en un smartphone. Una mala experiencia móvil puede ahuyentar fácilmente a los visitantes.

Después de probar docenas de herramientas en nuestros propios sitios, hemos encontrado las formas más sencillas de crear sliders que funcionan a la perfección en todas partes. No necesitas ninguna habilidad de codificación para construir uno que capture la atención de tus visitantes.

En este artículo, te mostraremos algunos métodos sencillos para agregar un slider adaptable a tu sitio web de WordPress.

¿Por qué agregar un slider adaptable de WordPress a tu sitio web?

Un slider de contenido o presentación de diapositivas es una excelente manera de destacar tus productos populares de WooCommerce, los últimos videos de YouTube, reseñas de clientes y más.

Algunos sliders se reproducen automáticamente, por lo que se mueven entre diapositivas de forma automática. Esto te permite mostrar mucha información en un espacio pequeño, dejando mucho espacio para otro contenido.

Solo recuerda, la clave para un gran slider es usar imágenes de alta calidad pero bien optimizadas. Esto mantendrá tu slider con un aspecto nítido sin ralentizar tu sitio web. 👍

Por esta razón, muchos sitios web utilizan carruseles en sus páginas más importantes, como una página de destino, página de inicio o página de ventas.

Incluso si un carrusel está configurado para reproducirse automáticamente, los visitantes generalmente pueden moverse entre diapositivas manualmente usando los botones de navegación. De esta manera, un carrusel anima a los visitantes a interactuar con tu sitio, lo que lo hace más atractivo.

Puedes ver en el GIF a continuación lo dinámico que un carrusel de video puede hacer una página.

Dicho esto, veamos cómo puedes crear fácilmente un carrusel adaptable en WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar.

• Método 1. Crea un carrusel adaptable de WordPress usando un plugin (rápido y fácil)
• Método 2. Crea un carrusel adaptable usando un constructor de páginas (más personalizable)
• Método 3. Crea un carrusel usando Smash Balloon (ideal para publicaciones y reseñas sociales)
• Preguntas frecuentes sobre carruseles adaptables
• Recursos adicionales

Método 1. Crea un carrusel adaptable de WordPress usando un plugin (rápido y fácil)

Si deseas crear un carrusel simple que se vea bien en escritorio y móvil, te recomendamos usar el plugin Soliloquy.

Este plugin de carrusel para WordPress te permite crear diapositivas usando imágenes de tu biblioteca de medios y también puede mostrar videos alojados en plataformas de terceros como YouTube.

También puedes agregar texto alternativo y subtítulos a cada diapositiva, lo cual es excelente para crear contenido amigable para SEO.

Primero, necesitarás registrarte para obtener una cuenta de Soliloquy. Después de eso, puedes instalar y activar el plugin Soliloquy en tu sitio web. Para más detalles, sigue nuestra guía sobre cómo instalar un plugin de WordPress.

Al activar, ve a Soliloquy » Ajustes en el panel de WordPress e ingresa tu clave de licencia.

La clave se puede encontrar iniciando sesión en tu cuenta en el sitio web de Soliloquy. Después de ingresar esta información, haz clic en el botón ‘Verificar clave’.

Hecho esto, puedes agregar un nuevo slider a tu sitio web de WordPress yendo a Soliloquy » Agregar nuevo.

Puedes empezar escribiendo un título. Esto es solo para tu referencia, así que puedes usar cualquier cosa que te ayude a identificar el slider en tu panel de WordPress.

A continuación, es hora de agregar imágenes y videos al slider. Puedes arrastrar y soltar archivos en el editor o hacer clic en ‘Seleccionar archivos de otras fuentes’.

Si deseas usar imágenes, puedes agregar esos archivos de la misma manera en que agregas imágenes en el editor de bloques de WordPress.

Si deseas incluir videos, te recomendamos subirlos a un sitio de alojamiento de videos como YouTube o Vimeo. Subir videos directamente a tu sitio web no es una buena idea, ya que puede ralentizar tu sitio y ocupar mucho espacio de almacenamiento.

Mientras tanto, plataformas como YouTube están optimizadas para video, por lo que puedes mostrar videos de alta resolución en tus sliders sin afectar negativamente tu sitio web.

Después de elegir una plataforma de alojamiento de videos, tienes que subir todos los videos que deseas incluir en el slider de WordPress. Si no estás seguro de cómo subir videos, te recomendamos leer la documentación oficial o el manual de usuario de la plataforma de video que hayas elegido.

Hecho esto, simplemente haz clic en el botón ‘Seleccionar archivos de otras fuentes’ y luego selecciona ‘Insertar diapositiva de video’.

Ahora puedes proceder y pegar la URL del video en el campo ‘URL del video’.

Soliloquy muestra todos los formatos de enlace compatibles en el lado derecho, así que asegúrate de que tu enlace utilice uno de estos formatos.

Una vez hecho esto, puedes escribir un título en el campo 'Título'. Esto es solo para tu referencia, así que puedes usar lo que quieras. También puedes agregar texto alternativo, lo que ayudará a los motores de búsqueda a entender de qué trata esta diapositiva.

Después de eso, puedes escribir un pie de foto opcional en el campo 'Pie de foto'. Esto se mostrará en una barra gris en la parte inferior del video antes de que el visitante presione 'Reproducir'.

Si no quieres mostrar esta barra, simplemente deja el campo 'Pie de foto' vacío.

Cuando estés satisfecho con la información que ingresaste, puedes crear más diapositivas haciendo clic en 'Agregar otra diapositiva de video'.

Para configurar esta nueva diapositiva, simplemente sigue el mismo proceso descrito anteriormente.

Una vez que hayas creado todas tus diapositivas, haz clic en 'Insertar en el control deslizante'.

Ahora verás todas tus diapositivas en la sección 'Actualmente en tu control deslizante'.

A continuación, puedes hacer clic en la pestaña 'Configuración' y usar los ajustes del control deslizante para personalizarlo. Por ejemplo, puedes elegir un nuevo tema para el control deslizante, cambiar el tamaño de la imagen y cambiar la posición del control deslizante y los pies de foto.

También puedes personalizar las flechas del control deslizante y el botón de pausa/reproducción, ajustar la velocidad de transición, cambiar el tiempo de espera y más.

A continuación, querrás asegurarte de que tu control deslizante se vea tan bien en dispositivos móviles como en computadoras y laptops.

Dicho esto, haz clic en la pestaña 'Móvil' y marca la casilla junto a 'Crear imágenes de control deslizante para móviles'.

Luego puedes escribir los tamaños que deseas usar para las imágenes y videos en dispositivos móviles. Al tomar estas decisiones, puede ser útil ver la versión móvil de tu sitio de WordPress en un escritorio.

Por defecto, Soliloquy ocultará los subtítulos para los usuarios móviles. A menudo, esto ayuda a que las diapositivas encajen más cómodamente en las pantallas más pequeñas que suelen usar los teléfonos inteligentes y las tabletas.

Por esa razón, recomendamos dejar esta configuración desactivada, pero puedes marcar la casilla junto a ‘Mostrar subtítulos en móvil’ si lo prefieres.

Hecho esto, haz clic en la pestaña ‘Misc’. Aquí, puedes agregar CSS personalizado a tu slider, editar el título y el slug del slider, y exportar el slider.

Cuando estés satisfecho con la configuración del slider, haz clic en el botón ‘Publish’.

Soliloquy creará automáticamente un shortcode que puedes agregar a cualquier página, publicación o área lista para widgets.

Para obtener más información sobre cómo colocar el shortcode, consulta nuestra guía sobre cómo agregar un shortcode en WordPress.

Para usuarios avanzados, Soliloquy también proporciona fragmentos de código que se pueden agregar directamente a los archivos de tu tema de WordPress. Este método ofrece un control más preciso, pero solo se recomienda si te sientes cómodo editando código. Para la mayoría de los usuarios, ¡quedarse con el bloque o el shortcode es la forma más fácil y segura de hacerlo!

Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo agregar fácilmente código personalizado en WordPress.

La forma más fácil de agregar el slider a tu sitio es usando el bloque Soliloquy en el editor de Gutenberg. Simplemente ve a la página o publicación donde quieres mostrar el slider y luego haz clic en el botón ‘+’.

En la ventana emergente que aparece, escribe ‘Soliloquy’.

Cuando aparezca el bloque correcto, haz clic para agregarlo a tu blog o sitio web de WordPress.

Después de eso, abre el bloque Soliloquy y selecciona el slider que acabas de crear.

Ahora puedes hacer clic en el botón ‘Actualizar’ o ‘Publicar’ para que el slider esté en vivo.

Método 2. Crea un carrusel adaptable usando un constructor de páginas (más personalizable)

Si quieres crear un slider simple de video o imagen, entonces un plugin como Soliloquy es una excelente opción. Sin embargo, si quieres integrar un slider sin problemas en un diseño de página completamente personalizado, como una página de destino o página de inicio, te recomendamos usar un plugin de constructor de páginas en su lugar.

SeedProd es el mejor constructor de páginas de WordPress de arrastrar y soltar. Te permite diseñar páginas de destino personalizadas e incluso crear un tema personalizado de WordPress sin tener que escribir una sola línea de código.

También tiene un bloque de Carrusel de Imágenes que puedes usar para crear sliders impresionantes.

Simplemente puedes colocar este bloque listo para usar en cualquier lugar de una página y luego personalizarlo usando el potente editor de arrastrar y soltar.

Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de activar el plugin, SeedProd te pedirá tu clave de licencia.

Puedes encontrar esta clave de licencia en tu cuenta en el sitio web de SeedProd. Después de ingresar la información, haz clic en el botón 'Verificar clave'.

Hecho esto, ve a SeedProd » Páginas de destino en tu panel de WordPress.

1. Elige una plantilla de página

SeedProd viene con más de 180 plantillas diseñadas profesionalmente que están agrupadas en categorías. En la parte superior, verás categorías que te permiten crear hermosas páginas de 'próximamente', activar el modo de mantenimiento, crear una página de inicio de sesión personalizada para WordPress y más.

Todas las plantillas de SeedProd son fáciles de personalizar, así que puedes usar el diseño que quieras. Cuando encuentres una plantilla que te guste, simplemente pasa el cursor sobre ella y haz clic en el ícono de la marca de verificación.

Ahora puedes escribir un nombre para tu página de destino en el campo 'Nombre de la página'. SeedProd creará automáticamente una 'URL de la página' usando el nombre de la página.

Es inteligente incluir palabras clave relevantes en esta URL siempre que sea posible, ya que esto ayudará a los motores de búsqueda a entender de qué trata la página. Esto a menudo puede mejorar tu SEO de WordPress.

Para cambiar la URL generada automáticamente de la página, simplemente escribe en el campo 'URL de la página'.

Cuando estés satisfecho con la información que ingresaste, haz clic en 'Guardar y empezar a editar la página'. Esto cargará la interfaz del constructor de páginas de SeedProd.

2. Personaliza el diseño de tu página

El constructor de arrastrar y soltar de SeedProd muestra una vista previa en vivo del diseño de tu página a la derecha. A la izquierda hay un menú con todos los diferentes bloques y secciones que puedes agregar a la página.

Cuando encuentres un bloque que quieras agregar, simplemente arrástralo y suéltalo en tu plantilla.

Para personalizar un bloque, solo haz clic para seleccionarlo en el editor de SeedProd. El menú de la izquierda se actualizará para mostrar todas las configuraciones que puedes usar para personalizarlo.

Mientras construyes la página, puedes mover los bloques por tu diseño arrastrándolos y soltándolos. Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo crear una página de destino con WordPress.

3. Agrega y diseña tu slider responsivo

Para crear un slider responsivo usando SeedProd, simplemente busca el bloque Carrusel de imágenes en el menú de la izquierda y luego arrástralo a tu diseño.

A continuación, haz clic para seleccionar el bloque Carrusel de imágenes en el editor de la página.

Ahora puedes proceder a agregar todas las imágenes que deseas mostrar en el slider. Para empezar, haz clic en el elemento 'Imagen 1' que SeedProd crea por defecto.

Ahora puedes usar una foto de la biblioteca integrada de SeedProd o hacer clic en 'Usar tu propia imagen' y elegir un archivo de la biblioteca de medios de WordPress.

Después de elegir una imagen, puedes agregar un pie de foto que aparecerá debajo de esa imagen. SeedProd no muestra pies de foto por defecto, pero te mostraremos cómo habilitarlos más adelante en esta publicación.

Cuando estés satisfecho con la configuración de la diapositiva, haz clic en el botón 'Agregar imágenes' para crear otra diapositiva.

Para agregar más diapositivas, simplemente sigue el mismo proceso descrito anteriormente.

Después de agregar todas las imágenes a tu slider, es hora de personalizar cómo se ve y actúa ese slider.

En el menú de la izquierda, haz clic para expandir la sección 'Configuración del carrusel'.

Para empezar, puedes alternar entre modos claro y oscuro para los botones de navegación del slider.

Para probar estos diferentes modos, haz clic en los botones junto a ‘Modo de color de navegación’. La vista previa en vivo se actualizará automáticamente para que puedas ver qué modo te gusta más.

Por defecto, el carrusel muestra una sola diapositiva, y los visitantes necesitarán usar los controles de navegación para ver más contenido.

Sin embargo, es posible que desees mostrar varias diapositivas a la vez abriendo el menú desplegable ‘Diapositiva a mostrar’ y eligiendo un número de la lista. Esto puede ser útil si el slider tiene mucho contenido y te preocupa que los visitantes no hagan clic en todas las diapositivas.

Por defecto, los visitantes necesitarán hacer clic para ver la siguiente diapositiva. Teniendo esto en cuenta, es posible que desees habilitar la reproducción automática, ya que esto a menudo aumenta la cantidad de diapositivas que ve un visitante.

Para hacer esto, haz clic para habilitar el interruptor ‘Reproducción automática’ y luego especifica cuánto tiempo debe permanecer cada diapositiva en pantalla escribiendo un número en ‘Velocidad de reproducción automática’.

Si agregaste subtítulos a tus imágenes, asegúrate de hacer clic en el control deslizante ‘Mostrar subtítulo’ para cambiarlo de ‘No’ a ‘Sí’.

También puedes cambiar la alineación del subtítulo.

Dependiendo del color de fondo, es posible que necesites cambiar el color del subtítulo antes de que sean visibles para los visitantes.

Para hacer esto, haz clic en la pestaña ‘Avanzado’ y luego usa la configuración de ‘Color del subtítulo’.

Puedes estilizar aún más el texto haciendo clic en el botón ‘Editar’ junto a ‘Tipografía del subtítulo’.

Esto agrega algunas configuraciones donde puedes cambiar el tamaño de fuente, la altura de línea, el espaciado y más.

Cuando estés satisfecho con la apariencia de los subtítulos, puedes agregar diferentes sombras de caja a las diapositivas usando el menú desplegable ‘Estilos de imagen del slider’.

Estas sombras pueden hacer que las diapositivas realmente destaquen, así que vale la pena probar diferentes sombras para ver si encajan con el diseño de tu página.

En la pestaña ‘Avanzado’ también encontrarás configuraciones que te permiten agregar un borde, cambiar el espaciado e incluso crear una animación de entrada.

Siéntete libre de explorar estas configuraciones avanzadas para ver todos los diferentes efectos que puedes crear. Por ejemplo, puedes agregar un borde para que tu deslizador resalte o usar animaciones para captar la atención de tus visitantes. ✨

4. Publica tu página de destino

Cuando estés satisfecho con la apariencia del slider, puedes continuar trabajando en el resto de la página. Simplemente arrastra bloques a tu diseño y luego personalízalos usando la configuración en el menú de la izquierda.

Si quieres eliminar un bloque, simplemente pasa el cursor sobre él y haz clic en el ícono del bote de basura cuando aparezca.

Cuando se te pregunte, haz clic en ‘Sí, elimínalo’.

Cuando estés satisfecho con la apariencia de la página, haz clic en el botón ‘Guardar’ para publicarla. Finalmente, selecciona ‘Publicar’ para que tu slider esté en vivo.

Método 3. Crea un carrusel usando Smash Balloon (ideal para publicaciones y reseñas sociales)

Es más probable que probemos cosas que vemos que otras personas compran, usan o recomiendan. Es por eso que es una buena idea mostrar prueba social en tu sitio web, incluyendo reseñas de clientes, testimonios o incluso comentarios positivos en redes sociales.

La forma más fácil de mostrar prueba social en tu sitio es usando Smash Balloon. Smash Balloon tiene plugins que te permiten incrustar contenido de Instagram, Facebook, Twitter y YouTube.

También tiene un plugin de Feed de Reseñas que puedes usar para mostrar reseñas de Facebook, Tripadvisor, Yelp, Trustpilot, WordPress.org y Google.

Sin embargo, mostrar muchos comentarios y reseñas positivas en tu tienda en línea o sitio web puede ocupar mucho espacio.

Es por eso que Smash Balloon viene con diseños y plantillas de carrusel integrados que puedes usar para crear deslizadores responsivos. Esto te permite crear presentaciones de redes sociales y reseñas con solo unos pocos clics.

Aún mejor, Smash Balloon obtendrá contenido nuevo automáticamente, por lo que el deslizador siempre mostrará las últimas publicaciones.

Otra opción es mostrar el contenido de tus propias cuentas de redes sociales.

Si a los visitantes les gusta lo que ven, podrían decidir seguirte en las redes sociales.

Para ayudarte a conseguir más seguidores, Smash Balloon viene con botones de llamada a la acción listos para usar que puedes agregar a tus deslizadores.

Para obtener instrucciones detalladas paso a paso, consulta nuestras guías sobre cómo agregar feeds de redes sociales a WordPress y cómo mostrar reseñas de Google, Facebook y Yelp en WordPress.

Preguntas frecuentes sobre carruseles adaptables

Nuestro equipo recibe muchas preguntas sobre el uso de deslizadores en WordPress. A continuación, se presentan respuestas a algunas de las más comunes que escuchamos de nuestros lectores.

¿Qué es un deslizador responsivo de WordPress?

Un slider responsivo es un componente de presentación de diapositivas que ajusta automáticamente su tamaño y diseño para adaptarse a cualquier pantalla. Esto asegura que se vea bien y sea fácil de usar en computadoras de escritorio, tabletas y teléfonos inteligentes.

¿Son malos los sliders para el SEO?

Si bien los sliders mal codificados pueden ralentizar tu sitio y perjudicar el SEO, los plugins modernos están diseñados pensando en el rendimiento. Por ejemplo, un plugin como Soliloquy utiliza carga diferida y una estructura HTML adecuada para ser amigable con el SEO.

También es importante agregar texto alternativo descriptivo a las imágenes de tus diapositivas. Esto ayuda a los motores de búsqueda a comprender tu contenido.

¿Los sliders ralentizan tu sitio web?

Los sliders pueden afectar los tiempos de carga de la página si contienen archivos de imagen grandes y no optimizados. Sin embargo, los mejores plugins de slider para WordPress son ligeros y están optimizados para la velocidad.

Para asegurarte de que tu slider no ralentice tu sitio, te recomendamos comprimir tus imágenes antes de subirlas a WordPress. Esto reduce su tamaño de archivo sin sacrificar la calidad.

¿Cuál es el mejor plugin de slider responsivo para WordPress?

El mejor plugin depende de tus necesidades específicas. Recomendamos Soliloquy como la mejor opción general por su facilidad de uso y rendimiento rápido.

Si deseas crear diseños de página personalizados, el bloque Carrusel de imágenes de SeedProd ofrece mayor flexibilidad de diseño. Para mostrar feeds de redes sociales o reseñas de clientes en un carrusel, Smash Balloon es la herramienta perfecta.

Recursos adicionales

Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente un slider responsivo en WordPress. También te puede interesar consultar estas otras guías en nuestro sitio:

• Cómo crear un slider de video e imágenes para WordPress (La forma fácil)
• Los mejores plugins de PDF para WordPress (Visor, Incrustar y Descargas)

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.