Los deslizadores de contenido son comunes en WordPress hoy en día, pero normalmente solo se usan en un conjunto muy limitado de circunstancias; por lo general, se encuentran en las páginas de inicio, para mostrar las publicaciones recientes o galerías de imágenes. Se está desarrollando una nueva tendencia, donde los sitios web de WordPress están utilizando el potencial y la flexibilidad de los deslizadores de contenido para contar historias convincentes que motiven a los visitantes a tomar acción, es decir, en forma de recorridos por productos.
Usar un deslizador de contenido para tu recorrido de productos en WordPress puede ayudarte a vender productos mejor al guiar a los usuarios a través de los puntos clave a su propio ritmo; esto es mejor que simplemente usar un video, porque pueden saltar hacia atrás/adelante a puntos específicos y definidos, en lugar de tener que adivinar un código de tiempo. Además, usar un deslizador de contenido de esta manera aprovecha todo tipo de medios web, lo que significa que puedes incluir contenido interactivo en las diapositivas, en lugar de obligar a tu usuario a ver un video pasivamente.
Hasta hace poco, necesitabas saber programar para crear algo más que los recorridos de productos con deslizadores de contenido más simples, pero hemos estado usando un increíble plugin de deslizadores llamado SlideDeck 2 que cambia todo eso.
Este potente plugin hace que sea súper sencillo crear increíbles sliders en minutos, sin necesidad de escribir una sola línea de código. Cubrimos otra de las robustas funciones de SlideDeck 2 en una publicación anterior, pero su última actualización te permite crear sliders de contenido personalizado y adaptar el contenido de cada slide para crear presentaciones atractivas que motiven a tus visitantes a tomar acción. Hemos preparado esta guía rápida para mostrarte cómo hacer un tour de producto genial para tu sitio de WordPress usando SlideDeck 2.
Compra e instalación del plugin
Primero lo primero: los slides de contenido personalizado son una función premium en SlideDeck 2, así que tendrás que comprarlo para usarlo en tu sitio. Te recomendamos que vayas al sitio web de SlideDeck y compres el plugin; por la potencia que contiene, es bastante barato y puedes actualizar fácilmente para obtener mejores funciones y usarlo en más sitios.
Para desbloquear la función de contenido personalizado, necesitarás comprar el paquete Profesional o Desarrollador, luego instalar el plugin más un 'Addon' que desbloquea las funciones adicionales.
Para instalar el plugin, puedes seguir nuestra útil Guía paso a paso para instalar un plugin de WordPress.
Terminología
Antes de empezar, hay algunos términos que deberíamos explicar:
- Tipo de Diapositiva – Hay 4 tipos diferentes de diapositivas, cada una diseñada para acomodar un tipo particular de contenido: imagen, video, texto y HTML.
- Lente – Los Lentes son como temas para tu carrusel de contenido. Controlan cómo se ve y se comporta tu carrusel, así como cómo se presenta el contenido en la página. Al igual que con los temas de WordPress, aplicar un Lente diferente a tu contenido solo toma unos segundos y puede producir un aspecto y una sensación significativamente diferentes para tu carrusel.
Bien, ahora que hemos aclarado la jerga, procede a activar SlideDeck 2, ¡y comencemos!
Creando una Presentación de Contenido Personalizado
Te mostraremos cómo crear un carrusel de contenido de tour de producto que mezcla cuatro tipos diferentes de contenido, utilizando la función de Contenido Personalizado de SlideDeck. Comienza haciendo clic en "Administrar" para ir al panel principal. Esta pantalla te permite crear nuevas Presentaciones y ordenar tus Presentaciones existentes.
En la sección de Contenido Personalizado, haz clic en el botón azul “Crear SlideDeck”. Serás llevado a la pantalla del Editor de Contenido Personalizado para crear tu primera diapositiva. Una vez que llegues al Editor de Contenido Personalizado, comienza por nombrar tu SlideDeck. Notarás que tu primera diapositiva ha sido creada y tienes la opción entre tres o cuatro tipos de diapositivas diferentes, dependiendo del paquete de SlideDeck 2 que estés utilizando – los usuarios del paquete Profesional tendrán acceso a los tipos de diapositivas de Imagen, Video y Texto; los usuarios del paquete Desarrollador podrán elegir el tipo de diapositiva HTML además de esos tres.
Debajo de este menú desplegable se encuentra una de las características más únicas de SlideDeck 2: la ventana de vista previa en vivo (es una de las razones por las que SlideDeck 2 es un plugin recomendado de WordPress en WPBeginner's Blueprint). Aquí, ves tu slider actualizarse en tiempo real mientras lo editas.
Empezando con una diapositiva de imagen
Empecemos con una diapositiva de imagen, algo que ofrezca a nuestros visitantes una vista general rápida y visualmente atractiva del recorrido que están a punto de realizar. Haz clic en el tipo de diapositiva “Diapositiva de Imagen”. El menú desplegable se actualizará para mostrarte todas las opciones pertinentes para crear una diapositiva de imagen:
Subir una imagen | Especificar una URL – Elige si quieres subir tu imagen a la Galería de Medios de WordPress, o simplemente pegar una URL, si está alojada en otro lugar.
Pie de foto | Texto del cuerpo | Ninguno – Indica a SlideDeck si quieres que un pie de foto de texto se superponga a la imagen, o si quieres un texto breve que la acompañe. Alternativamente, puedes simplemente mostrar la imagen completa, sin texto asociado.
Enlace de la diapositiva – Especifica una URL a la que visitar, si el usuario hace clic en cualquier parte de la diapositiva.
Título – Dale un título a la diapositiva que se mostrará en las áreas de pie de foto o texto del cuerpo.
Descripción – Introduce el texto de la descripción para la diapositiva. ¡Puedes introducir texto enriquecido aquí!
Posición del pie de foto – Determina la posición del texto superpuesto en la diapositiva. Los pies de foto pueden ir arriba/abajo, y el texto del cuerpo puede ir a la izquierda/derecha.
Una vez que hayas configurado tu diapositiva como prefieras, simplemente presiona el botón “Aplicar” y el área de Vista Previa en Vivo se actualizará para mostrarte tu primera diapositiva. En nuestro ejemplo, hemos creado nuestra diapositiva especificando una URL, con un pie de foto en la parte inferior y sin enlace de diapositiva.
Así que esa es nuestra primera diapositiva de Contenido Personalizado creada – fácil, ¿verdad? Ahora, añadiremos una segunda para incluir un video que muestre la demostración de nuestro producto.
Creación de la diapositiva de video
SlideDeck 2 soporta contenido de video de tres fuentes: YouTube, Vimeo y Dailymotion – lo que significa que todo lo que tenemos que hacer es subir el video de demostración de nuestro producto a uno de estos servicios y luego pegar la URL de la página del video y presionar “Actualizar”.
Al igual que con el Tipo de Diapositiva de Imagen, puedes elegir agregar un título y una breve descripción o párrafo de texto para dar a tus visitantes una idea de lo que verán en el video. Por defecto, SlideDeck 2 extraerá el contenido de la descripción que tengas en tu página de YouTube/Vimeo/Dailymotion, pero puedes ajustarlo para satisfacer tus necesidades para el tour del producto.
Como antes, haz clic en Aplicar y recorre rápidamente el control deslizante; ahora podrás ir y venir entre tus diapositivas de imágenes y videos.
Creación de una diapositiva de texto
A veces, solo necesitas espacio para algo de texto, para mostrar una lista de características, por ejemplo, o para compartir una cita de una reseña entusiasta del producto. En casos como este, podemos usar el Tipo de Diapositiva de Texto.
Este es un Tipo de Diapositiva muy sencillo, con solo algunas opciones a considerar:
Diseño – El diseño básico simplemente coloca el título en la parte superior de la diapositiva, con el texto fluyendo debajo. Múltiples columnas proporciona más un formato similar al de un periódico, al ajustar automáticamente el texto en dos columnas. Cita en Bloque te permite resaltar un fragmento corto de texto con tipografía grande y en negrita. Como antes, haz clic en Aplicar para agregar la diapositiva a tu SlideDeck.
Reorganización de diapositivas
En este punto, podrías estar pensando que te gustaría empezar con tu diapositiva de video en lugar de la de imagen, para que tus usuarios interactúen y se involucren con el tour de inmediato. SlideDeck te permite hacer esto al instante: en el área del encabezado de la diapositiva, haz clic y arrastra la diapositiva de video, y suéltala en el espacio brillante a la izquierda de la diapositiva de imagen. ¡Súper simple!
Llevándolo más allá: uso del Tipo de Diapositiva HTML
El Tipo de Diapositiva HTML es una potente adición al paquete de Desarrollador de SlideDeck 2, que te permite ingresar tu propio código HTML en una diapositiva. Es perfecto para diseños más complejos de tu contenido, o para agregar interacciones más potentes a tu control deslizante de contenido. Por ejemplo, puedes incrustar un formulario de registro, para que los clientes puedan optar por recibir un boletín por correo electrónico al final del tour del producto, ¡una poderosa llamada a la acción, si es que alguna vez hubo una!
Selecciona el Tipo de Diapositiva HTML para revelar el editor HTML en el menú desplegable.
En el campo Insertar HTML, puedes pegar tu código personalizado. Notarás que automáticamente codifica por colores las diferentes etiquetas para ayudarte a asegurarte de que esté estructurado correctamente. Un par de puntos importantes a tener en cuenta:
- Puedes incluir reglas de estilo CSS para el contenido de la diapositiva entre las etiquetas <style></style>, y se aplicarán a todas las diapositivas en el SlideDeck.
- Dado que la Vista Previa en Vivo de SlideDeck no puede predecir cómo los estilos de tu tema podrían interactuar con tu control deslizante de contenido, para estilos complejos obtendrás una vista previa más precisa si la ves en la página donde pretendes publicar tu SlideDeck.
Con el código en su lugar, presiona Aplicar, y la diapositiva se agregará a la rotación.
Configuración de la Lente
¡Ahora has creado tu primer SlideDeck de Contenido Personalizado! Adelante, tómate unos minutos para hacer clic en las diapositivas en la Vista Previa en Vivo y disfruta del brillo de un trabajo bien hecho.
Ahora, es hora de que se vea impecable con tu sitio configurando tu Lente. SlideDeck contiene una gran cantidad de opciones para controlar la apariencia de tu nuevo tour de producto personalizando la Lente.
Guardando y Publicando tu SlideDeck
¿Contenido increíble? Listo. ¿Tema atractivo elegido y personalizado? Listo. ¡Parece que estás listo para publicar tu nuevo tour de producto y convertir a tus visitantes en clientes!
SlideDeck ofrece tres formas de incrustar tus controles deslizantes en tu sitio de WordPress: insertándolo en el contenido de una página o publicación existente, creando una nueva página o publicación con el control deslizante incrustado y, finalmente, insertándolo en la plantilla de tu página, que es probablemente tu mejor opción si deseas agregar el tour de producto a tu página de inicio.
Conclusión
Aunque los deslizadores de contenido generalmente solo se usan para galerías de imágenes o publicaciones destacadas, SlideDeck 2 te brinda una gran flexibilidad para explorar el potencial de los deslizadores de contenido para crear experiencias atractivas que mantengan a tus visitantes interesados y regresando. ¡En WPBeginner te recomendamos encarecidamente que lo pruebes! Un ejemplo en vivo de cómo estamos usando un SlideDeck personalizado se puede ver en nuestra página de Configuración gratuita de blog de WordPress.
¿Tienes un ejemplo de SlideDeck que quieras compartir? ¡Háznoslo saber en los comentarios! Además, consulta la primera parte de esta serie, donde te mostramos cómo crear SlideDecks de origen dinámico.
Los deslizadores con interfaz táctil son el futuro del diseño web. Obtén SlideDeck ahora. Usa el código de cupón: WPB-SD2 para obtener un 20% de descuento.
¿Tienes alguna pregunta o sugerencia? Por favor, deja un comentario para iniciar la discusión.