Los controles deslizantes de contenido son comunes en WordPress hoy en día, pero generalmente solo se usan en un conjunto muy limitado de circunstancias; por lo general, se encuentran en las páginas de inicio, para mostrar publicaciones recientes o galerías de imágenes. Se está desarrollando una nueva tendencia, donde los sitios web de WordPress utilizan el potencial y la flexibilidad de los controles deslizantes de contenido para contar historias convincentes que motiven a los visitantes a tomar medidas, es decir, en forma de recorridos de productos.
El uso de un control deslizante de contenido para el recorrido de su producto de WordPress puede ayudarlo a vender mejor los productos al guiar a los usuarios a través de los puntos clave a su propio ritmo. de tener que adivinar un código de tiempo. Además, el uso de un control deslizante de contenido de esta manera aprovecha todo tipo de medios web, lo que significa que puede incluir contenido interactivo en las diapositivas, en lugar de obligar a su usuario a mirar pasivamente un video.
Hasta hace poco, necesitaba saber codificar para crear cualquier cosa, excepto los recorridos de productos de control deslizante de contenido más simples, pero hemos estado usando un increíble complemento de control deslizante llamado SlideDeck 2 que cambia todo eso.
Este poderoso complemento hace que sea súper simple crear controles deslizantes increíbles en minutos, sin necesidad de una sola línea de código. Cubrimos una de las otras características sólidas de SlideDeck 2 en una publicación anterior, pero su última actualización le permite crear controles deslizantes de contenido personalizados y adaptar el contenido de cada diapositiva para crear presentaciones atractivas que motiven a sus visitantes a tomar medidas. Hemos preparado esta guía rápida para mostrarle cómo hacer un recorrido de producto agradable para su sitio de WordPress usando SlideDeck 2.
Compra e instalación del complemento
Lo primero es lo primero: las diapositivas de contenido personalizado son una función premium en SlideDeck 2, por lo que tendrá que comprarlas para usarlas en su sitio. Te recomendamos ir a la Conjunto de diapositivas sitio web y compre el complemento: por el poder que contiene, es bastante barato y puede actualizarlo fácilmente para obtener mejores funciones y usarlo en más sitios.
Para desbloquear la función de contenido personalizado, deberá comprar el paquete Profesional o Desarrollador, luego instalar el complemento más un ‘Complemento’ que desbloquea las funciones adicionales.
Para instalar el complemento, puede seguir nuestra práctica Guía paso a paso para instalar un complemento de WordPress.
Terminología
Antes de comenzar, hay algunos términos que debemos 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 – Las lentes son como temas para su control deslizante de contenido. Controlan cómo se ve y se comporta su control deslizante, así como también cómo se presenta el contenido en la página. Al igual que con los temas de WordPress, aplicar una lente diferente a su contenido solo toma unos segundos y puede generar una apariencia significativamente diferente para su control deslizante.
Ok, ahora que la jerga está fuera del camino, continúe y active SlideDeck 2, ¡y comencemos!
Creación de un SlideDeck de contenido personalizado
Le mostraremos cómo crear un control deslizante de contenido de la gira del producto que mezcle cuatro tipos diferentes de contenido, utilizando la función de contenido personalizado de SlideDeck. Comience haciendo clic en «Administrar» para ir al panel principal. Esta pantalla le permite crear nuevos SlideDecks y ordenar sus SlideDecks existentes.
En la sección Contenido personalizado, haga clic en el botón azul «Crear SlideDeck». Accederá a la pantalla del Editor de contenido personalizado para crear su primera diapositiva. Una vez que llegue al Editor de contenido personalizado, comience por nombrar su SlideDeck. Notará que se ha creado su primera diapositiva y puede elegir entre tres o cuatro tipos de diapositivas diferentes, según el paquete de SlideDeck 2 que esté utilizando: los usuarios del paquete profesional tendrán acceso a diapositivas de imagen, video y texto. tipos; Los usuarios del paquete de desarrollador podrán elegir el tipo de diapositiva HTML además de esos tres.
Debajo de este menú flotante se encuentra una de las funciones más exclusivas de SlideDeck 2: la ventana de vista previa en vivo (es una de las razones por las que SlideDeck 2 es un complemento de WordPress recomendado en el Blueprint de AprenderWP). Aquí, ve la actualización de su control deslizante en tiempo real a medida que lo edita.
Empezar con una diapositiva de imagen
Comencemos con una diapositiva de imagen, algo que brinde a nuestros visitantes una descripción general rápida y visualmente atractiva del recorrido que están a punto de realizar. Haga clic en el tipo de diapositiva «Imagen de diapositiva». El menú flotante se actualizará para mostrarle todas las opciones pertinentes para crear una diapositiva de imagen:
Subir una imagen | Especificar una URL – Elija si desea cargar su imagen en la Galería de medios de WordPress o simplemente pegarla en una URL, si está alojada en otro lugar.
Título | Texto del cuerpo | Ninguna – Dígale a SlideDeck si desea una leyenda de texto para superponer la imagen, o tener un breve cuerpo de texto para acompañarla. Alternativamente, puede simplemente mostrar la imagen completa, sin texto asociado.
Enlace de diapositiva – Especifique una URL para visitar, si el usuario hace clic en cualquier parte de la diapositiva.
Título – Asigne un título a la diapositiva para que se muestre en el título o en las áreas de texto del cuerpo.
Descripción – Introduzca la copia de la descripción de la diapositiva. ¡Puede ingresar texto enriquecido aquí!
Posición del título – Determina la posición de la superposición de texto en la diapositiva. Los subtítulos pueden ir arriba/abajo, y el texto del cuerpo puede ir a la izquierda/derecha.
Una vez que haya configurado su diapositiva como desee, simplemente presione el botón «Aplicar» y el área de vista previa en vivo se actualizará para mostrarle su primera diapositiva. En nuestro ejemplo, creamos nuestra diapositiva especificando una URL, con un título en la parte inferior y sin enlace de diapositiva.
Así que esa es nuestra primera diapositiva de contenido personalizado creada, fácil, ¿verdad? Ahora, agregaremos un segundo para agregar un video que muestre la demostración de nuestro producto.
Creando la diapositiva de video
SlideDeck 2 admite contenido de video de tres fuentes: YouTube, Vimeo y Dailymotion, lo que significa que todo lo que tenemos que hacer es cargar el video de demostración de nuestro producto en uno de estos servicios y luego pegar la URL en la página del video y presionar «Actualizar».
Al igual que con el tipo de diapositiva de imagen, puede optar por agregar un título y una breve leyenda o párrafo de texto para dar a sus visitantes una idea de lo que verán en el video. De forma predeterminada, SlideDeck 2 extraerá el contenido de los subtítulos que tiene en su página de YouTube/Vimeo/Dailymotion, pero puede ajustarlo para que se adapte a sus necesidades para el recorrido del producto.
Como antes, presione Aplicar y haga un clic rápido a través del control deslizante; ahora podrá avanzar y retroceder entre las diapositivas de imagen y video.
Creación de una diapositiva de texto
A veces, solo necesita espacio para algún texto, para mostrar una lista de características, por ejemplo, o para compartir una cita de una revisión 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:
Disposición – El diseño básico simplemente coloca el título en la parte superior de la diapositiva, con el texto fluyendo debajo. Multi-columna proporciona más de un formato similar al de un periódico, al envolver automáticamente el texto en dos columnas. Block Quote le permite resaltar un fragmento corto de texto con tipografía grande y en negrita. Como antes, presione Aplicar para agregar la diapositiva a su SlideDeck.
Reorganización de diapositivas
En este punto, puede estar pensando que le gustaría comenzar con su diapositiva de video en lugar de la imagen, para que pueda hacer que sus usuarios interactúen y participen en el recorrido de inmediato. SlideDeck le permite hacer esto al instante: en el área del encabezado de la diapositiva, haga clic y arrastre la diapositiva de video y suéltela en el espacio brillante a la izquierda de la diapositiva de la imagen. ¡Súper simple!
Llevándolo más lejos: usando el tipo de diapositiva HTML
El tipo de diapositiva HTML es una poderosa adición al paquete Developer de SlideDeck 2, que le permite ingresar su propio código HTML en una diapositiva. Es perfecto para diseños más complejos de su contenido o para agregar interacciones más poderosas a su control deslizante de contenido. Por ejemplo, puede incrustar un formulario de registro, de modo que los clientes puedan optar por recibir un boletín informativo por correo electrónico al final del recorrido por el producto: ¡una poderosa llamada a la acción, si alguna vez hubo una!
Seleccione el tipo de diapositiva HTML para revelar el editor HTML en el menú flotante.
En el campo Insertar HTML, puede pegar su código personalizado. Notará que automáticamente codifica con colores las diferentes etiquetas para ayudarlo a asegurarse de que esté estructurado correctamente. Un par de puntos importantes a tener en cuenta:
- Puede incluir reglas de estilo CSS para el contenido de la diapositiva entre las etiquetas
, y se aplicarán a todas las diapositivas en SlideDeck.
- Dado que la Vista previa en vivo de SlideDeck no puede predecir cómo los estilos de su tema pueden interactuar con su control deslizante de contenido, para estilos complejos obtendrá una vista previa más precisa si la ve en la página en la que desea publicar su SlideDeck.
Con el código en su lugar, presione Aplicar y la diapositiva se agregará a la rotación.
Configuración de la lente
¡Ya ha creado su primer SlideDeck de contenido personalizado! Continúe y tómese unos minutos para hacer clic en las diapositivas en la vista previa en vivo y disfrute del brillo de un trabajo bien hecho.
Ahora es el momento de hacer que se vea perfecto con su sitio configurando su lente. SlideDeck contiene una gran cantidad de opciones para controlar la apariencia de la gira de su nuevo producto mediante la personalización de la lente.
Guardar y publicar su SlideDeck
¿Contenido impresionante? Cheque. ¿Dulce tema elegido y personalizado? Cheque. ¡Parece que ya está todo listo para publicar el recorrido de su nuevo producto y convertir a sus visitantes en clientes!
SlideDeck ofrece tres formas de incrustar sus controles deslizantes en su sitio de WordPress: insertarlo en una página existente o en el contenido de una publicación, crear una nueva página o publicación con el control deslizante incrustado y, finalmente, insertarlo en la plantilla de su página, que probablemente sea su mejor opción. si desea agregar el recorrido del producto a su página de inicio.
Terminando
Aunque los controles deslizantes de contenido generalmente solo se usan para galerías de imágenes o publicaciones destacadas, SlideDeck 2 le brinda mucha flexibilidad para explorar el potencial de los controles deslizantes de contenido para crear experiencias atractivas que mantengan a sus visitantes interesados y regresando. ¡En AprenderWP te recomendamos encarecidamente que lo compruebes! Se puede ver un ejemplo en vivo de cómo estamos usando un SlideDeck personalizado en nuestra página de configuración gratuita del blog de WordPress.
¿Tienes un ejemplo de SlideDeck que quieras compartir? ¡Cuéntanoslo en los comentarios! Además, consulte la primera parte de esta serie, donde le mostramos cómo crear SlideDecks de fuente dinámica.
Los controles deslizantes de la interfaz táctil son el futuro del diseño web. Obtenga SlideDeck ahora. Utilice el código de cupón: WPB-SD2 para obtener un 20% de descuento.