Cómo crear un control deslizante de WordPress de video e imagen con SlideDeck

Seamos realistas, los controles deslizantes de contenido son increíbles: cuando se hacen correctamente, conservan un valioso espacio en la pantalla, su interactividad ayuda a mantener a sus visitantes interesados ​​y, especialmente para los bloggers, pueden ayudar a mantener sus publicaciones más valiosas frente a los nuevos visitantes de su sitio. Hay toneladas de complementos deslizantes para WordPress, pero el problema es que muchos de ellos son difíciles de usar, y aún más difíciles de lograr que se vean bien en el diseño de su sitio.

Todo eso cambió cuando probamos SlideDeck 2, un nuevo complemento de control deslizante de contenido de WordPress. Este poderoso complemento creado por telepatía digital hace que sea súper simple crear increíbles controles deslizantes en minutos, sin necesidad de una sola línea de código. SlideDeck 2 se distingue de la multitud al permitirle mezclar contenido de diferentes lugares de la web (como Flickr, YouTube, etc.) y presentarlo en la página como un magnífico control deslizante de contenido. Además del complemento de WordPress, también hay un kit para desarrolladores de JavaScript: lo usamos en nuestra página de configuración gratuita del blog de WordPress. Hemos estado divirtiéndonos con el complemento, por lo que decidimos armar esta guía rápida para mostrarle cómo hacer un control deslizante de contenido dinámico de WordPress usando SlideDeck 2. Aquí hay un resumen rápido de los temas que cubriremos:

  1. Compra e instalación del complemento
  2. Terminología
  3. Creación de un SlideDeck de origen dinámico
  4. Configuración de la lente
  5. Guardar y publicar su SlideDeck
  6. Terminando

Compra e instalación del complemento

Lo primero es lo primero: SlideDeck es un complemento premium, por lo que, por el momento, deberá comprarlo para usarlo en su sitio. Si no está seguro, puede probar su demostración en vivo gratuita. Vaya al sitio web de SlideDeck y compre el complemento. En nuestra opinión, por la potencia que contiene, es un buen negocio. Usa el cupón de SlideDeck – WPB-SD2 para obtener un 20% de descuento.

Hay tres paquetes disponibles, y los mejores incluyen más funciones y capacidades (complementos). Si compra uno de los paquetes de nivel superior, deberá instalar el complemento, así como un “Complemento” que desbloquea las funciones adicionales para ese paquete. Tu compra viene con soporte por un año, así que no dudes en contactarlos si tienes problemas en algún momento. Conocemos personalmente a la gente de SlideDeck, y son excelentes personas que valoran el servicio al cliente al máximo.

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:

  • Fuente de contenido – Una fuente de contenido es cualquier lugar donde publique su contenido, como YouTube, Instagram o Twitter. SlideDeck puede conectarse automáticamente a más de una docena de fuentes diferentes y dicen que están trabajando para agregar más.
  • SlideDecks de fuente dinámica – Hay dos tipos de SlideDecks que puede crear: fuente dinámica y contenido personalizado. SlideDecks de fuente dinámica le permite conectarse con su contenido en diferentes fuentes de contenido en toda la Web y generar automáticamente un control deslizante a partir de él. Por ejemplo, puede crear una galería de imágenes geniales utilizando imágenes de su feed de Instagram. Los SlideDecks de fuentes dinámicas se crean rápidamente y, como beneficio adicional, ¡se actualizan automáticamente en sincronización con sus fuentes de contenido!
  • SlideDecks de contenido personalizado – SlideDecks de contenido personalizado le permite construir sus controles deslizantes una diapositiva a la vez. Son más adecuados para la narración visual, o si tiene una acción específica que desea que los usuarios realicen, como un recorrido por el producto, por ejemplo. Este artículo habla sobre SlideDecks de fuente dinámica. Estamos trabajando en la creación de una guía práctica separada específicamente para SlideDecks de contenido personalizado (próximamente).
  • 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, adelante, active SlideDeck 2, ¡para que podamos comenzar!

Creación de un SlideDeck de origen dinámico

Le mostraremos cómo crear un SlideDeck de fuente dinámica que mezcle videos e imágenes de una cuenta de YouTube y Flickr. Comience haciendo clic en “Administrar” para ir al panel principal. Esta pantalla le permite crear nuevos SlideDecks, así como ordenar/previsualizar sus SlideDecks existentes.

En la sección Fuente dinámica, haga clic en el botón azul “Crear presentación de diapositivas”. Aparecerá una ventana de menú que le pedirá que elija su primera Fuente de contenido; podrá seleccionar fuentes adicionales en la siguiente pantalla, así que elija una y accederá al Editor de fuentes dinámicas. Vamos a elegir YouTube, para tener una linda galería de videos.

Fuente dinámica SlideDeck - Youtube

Una vez que llegue al Editor de fuentes dinámicas, verá que YouTube ha sido seleccionado como nuestra primera fuente de contenido. Comience por nombrar su SlideDeck, luego haga clic en el icono de YouTube y obtendrá una bonita pestaña de menú que muestra todas las opciones de configuración disponibles para esta fuente. Ingrese un nombre de usuario (puede ser suyo o de otra persona) y presione ‘Aplicar’ para obtener los videos más recientes del canal de ese usuario; si el usuario al que hizo referencia tiene otras listas de reproducción, puede especificar que desea obtener videos de ese canal. lista en el menú desplegable.

Menú desplegable de SlideDeck en Youtube

SlideDeck Youtube Flyout con menú desplegable

Ahora puede ver una de las mejores características de SlideDeck 2: la ventana de vista previa en vivo. Esta área de la pantalla le permite ver su control deslizante en tiempo real a medida que realiza cambios en él, en lugar de tener que actualizar su publicación en una ventana separada del navegador. Verás que el control deslizante aquí se actualiza ante tus propios ojos para mostrar los últimos videos en la lista de reproducción. Incluso puede interactuar con el control deslizante en el área de vista previa. ¡Continúe, pruébelo!

Carga de vista previa de SlideDeck

Vista previa de SlideDeck Carga completa

Así que esa fue nuestra primera fuente de contenido, fácil, ¿verdad? Ahora, agregaremos un segundo para darle algo de variedad al control deslizante. Haga clic en el botón Agregar fuente en el área de encabezado de la pantalla Editor y verá la misma ventana modal Fuentes de contenido. Esta vez, seleccione Flickr como fuente.

Fuente de contenido dinámico SlideDeck - Flickr

De manera similar a YouTube, puede hacer clic en el ícono de Flickr en el encabezado para configurar la fuente de contenido. Dado que Flickr requiere un número de identificación de los usuarios (nuevamente, el suyo o el de otra persona) para obtener imágenes, deberá obtener ese número; pequeña herramienta práctica.

Obtenga su identificación de Flickr

Tome el número de ID del usuario y péguelo en el campo “ID de usuario/grupo”, y elija si desea filtrar las imágenes que muestra usando cualquier etiqueta asociada con sus fotos. Haga clic en “Aplicar” para agregar imágenes y subtítulos de la cuenta de Flickr en su control deslizante y eche un vistazo rápido.

Configuración del menú desplegable de SlideDeck Flickr

¿Ves videos e imágenes allí todavía? De lo contrario, es posible que esté fusionando contenido de una fuente que no se ha actualizado durante un tiempo, lo que hace que las fuentes actualizadas más recientemente lo “desplacen”. En este caso, es posible que desee intentar aleatorizar el orden de las diapositivas, ya que esto a veces ayudará, o puede comenzar a publicar con más frecuencia en sus otras fuentes. ;)

SlideDeck - Aleatorizar diapositivas

Configuración de la lente

¡Felicitaciones, ha creado su primer SlideDeck! Ahora tu pudo simplemente continúe y guarde este SlideDeck, luego publíquelo en su página, pero considerando todas las opciones de personalización disponibles para usted, probablemente sea mejor utilizarlas. SlideDeck ofrece un montón de opciones para personalizar la lente, para que su control deslizante se vea bien en la página. Desplácese hacia abajo justo debajo del área de vista previa en vivo para ver el panel de opciones y ver qué hay allí.

Si no lo ha notado, hay muchas opciones disponibles, por lo que no las revisaremos todas. Sin embargo, los hemos agrupado en seis categorías simples:

Lentes: este panel le permite elegir la lente general que utiliza su SlideDeck. La aplicación de una lente diferente puede cambiar por completo la apariencia de su contenido en la página, así que elija la que se parezca más a su sitio en general.

Lentes opcionales SlideDeck

Configuración: este grupo contiene configuraciones generales, como las dimensiones de su SlideDeck, la cantidad de diapositivas, etc.

Configuración de las opciones de SlideDeck

Apariencia: le permite ajustar cosas como fuentes y colores

Aspecto de las opciones de SlideDeck

Contenido: use este panel para controlar cómo aparece el contenido en su SlideDeck: opciones como la longitud del título, mostrar/ocultar extractos y otras se encuentran aquí.

Contenido de las opciones de SlideDeck

Navegación: ajuste y configure los elementos de navegación de SlideDecks, como el estilo de flecha, el tipo de navegación y más

Opciones de SlideDeck Navegación

Reproducción: controla cómo se comporta su SlideDeck

Reproducción de opciones de SlideDeck

Guardar y publicar su SlideDeck

Ahora que creó su SlideDeck, agregó sus fuentes de contenido y configuró su lente, solo queda un paso: ¡mostrarla al mundo! Presione el botón “Guardar SlideDeck” en la parte inferior de la pantalla del editor para guardar su nuevo SlideDeck. La página se actualizará y se le presentarán algunas opciones.

Publicar presentación de diapositivas

A partir de aquí, hay tres métodos para compartir sus SlideDecks con los visitantes de su sitio web:

  1. Incrustarlo en una página o publicación existente
  2. Incrustarlo en una nueva página o publicación
  3. Usar un shortcode para incrustarlo en las plantillas de su página

Estos tres métodos utilizan el código corto de SlideDeck, una pequeña etiqueta simple que representa el SlideDeck que creaste. Se parece a esto:

[slidedeck=Your SlideDeck’s ID number]

¡Eso es todo al respecto! Mientras escribe el contenido de su publicación o página, simplemente haga clic en el pequeño icono morado de SlideDeck junto al icono “Insertar medios” encima de la ventana de edición de contenido de WordPress.

Insertar presentación de diapositivas

Al hacer clic en este ícono, aparecerá el menú selector de SlideDeck; desde aquí, puede especificar fácilmente qué SlideDeck(s) desea incrustar en su contenido. Haga clic en “Insertar” y el código abreviado de su SlideDeck aparecerá en su publicación.

Terminando

Nos encanta SlideDeck, porque pone controles deslizantes de gran contenido al alcance de prácticamente cualquier persona. Es por eso que lo tenemos en nuestra lista de complementos imprescindibles de WordPress, y lo estamos usando en nuestros sitios. Es bastante fácil ser creativo e ir más allá del encabezado de la página de inicio. Puede colocar un SlideDeck en muchos lugares de su sitio, incluso en su barra lateral, pie de página, en sus publicaciones, ¡en cualquier lugar! Diablos, incluso puedes ser creativo y usarlo en páginas personalizadas como lo hicimos en la página de configuración de blog de WordPress gratis.

Podemos decir fácilmente que SlideDeck es, con mucho, el MEJOR y más fácil de usar WordPress Slider plugin que existe. Si tuviéramos que calificarlo, le daríamos un perfecto 5 fuera de 5 estrella.

¿Está pensando en agregar un control deslizante en sus sitios de WordPress? Bueno, entonces obtén SlideDeck ahora. Utilice el código de cupón: WPB-SD2 para obtener un 20% de descuento.

Deja un comentario