Comment créer un slider WordPress vidéo et image avec SlideDeck

Soyons réalistes, les curseurs de contenu sont géniaux : lorsqu'ils sont bien utilisés, ils conservent un espace précieux sur l'écran, leur interactivité aide à maintenir l'engagement de vos visiteurs et, en particulier pour les blogueurs, ils peuvent vous aider à conserver vos articles les plus précieux devant les nouveaux visiteurs de votre site. Il existe des tonnes de plugins de curseur pour WordPress, mais le problème est que beaucoup d'entre eux sont difficiles à utiliser, et encore plus difficiles à mettre en valeur dans la conception de votre site.

Tout a changé lorsque nous avons essayé SlideDeck 2, un nouveau plugin de curseur de contenu WordPress. Ce puissant plugin créé par télépathie numérique permet de créer très simplement de superbes curseurs en quelques minutes, sans qu'une seule ligne de code ne soit requise. SlideDeck 2 se distingue de la foule en vous permettant de mélanger du contenu provenant de différents endroits du Web (comme Flickr, YouTube, etc.) et de le présenter sur la page sous la forme d'un magnifique curseur de contenu. En plus du plugin WordPress, il existe également un kit de développement JavaScript - nous l’utilisons dans notre page de configuration gratuite du blog WordPress. Nous nous sommes bien amusés avec le plugin, nous avons donc décidé de créer ce guide rapide pour vous montrer comment créer un curseur de contenu WordPress dynamique à l'aide de SlideDeck 2. Voici un aperçu rapide des sujets que nous aborderons :

  1. Achat et installation du plugin

  2. Terminologie

  3. Création d'un SlideDeck source dynamique

  4. Configuration de l'objectif

  5. Enregistrer et publier votre SlideDeck

  6. Emballer

Achat et installation du plugin

Tout d’abord : SlideDeck est un plugin premium, vous devrez donc pour le moment l’acheter pour l’utiliser sur votre site. Si vous n’en êtes pas sûr, vous pouvez essayer leur démo en direct gratuite. Accédez au site Web de SlideDeck et achetez le plugin. À notre avis, pour la puissance qu’il contient, c’est une plutôt bonne affaire. Utilisez le coupon SlideDeck - WPB-SD2 pour obtenir 20 % de réduction.

Trois packages sont disponibles, les meilleurs incluant plus de fonctionnalités et de capacités (modules complémentaires). Si vous achetez l'un des packages de niveau supérieur, vous devrez installer le plugin, ainsi qu'un « module complémentaire » qui déverrouille les fonctionnalités supplémentaires de ce package. Votre achat est accompagné d’une assistance d’un an, alors n’hésitez pas à les contacter si vous rencontrez des problèmes à tout moment. Nous connaissons personnellement les gens de SlideDeck, et ce sont des gens formidables qui accordent la plus grande importance au service client.

Pour installer le plugin, vous pouvez suivre notre guide pratique étape par étape pour installer un plugin WordPress.

Terminologie

Avant de commencer, il y a quelques termes que nous devons expliquer :

  • Source de contenu - Une source de contenu se trouve partout où vous publiez votre contenu, comme YouTube, Instagram ou Twitter. SlideDeck peut se connecter automatiquement à plus d’une douzaine de sources différentes, et ils disent qu’ils travaillent à en ajouter davantage.

  • SlideDecks source dynamique - Vous pouvez créer deux types de SlideDecks : source dynamique et contenu personnalisé. Les Dynamic Source SlideDecks vous permettent de vous connecter à votre contenu sur différentes sources de contenu sur tout le Web et de générer automatiquement un curseur à partir de celui-ci. Par exemple, vous pouvez créer une galerie d'images sympa en utilisant des images de votre flux Instagram. Les SlideDecks Dynamic Source sont rapides à créer et, en prime, se mettent automatiquement à jour en synchronisation avec vos sources de contenu !

  • SlideDecks de contenu personnalisé - Les SlideDecks de contenu personnalisés vous permettent de créer vos sliders une diapositive à la fois. Ils sont plus adaptés à la narration visuelle ou si vous souhaitez que les utilisateurs entreprennent une action spécifique, comme une visite guidée d'un produit, par exemple. Cet article parle des SlideDecks source dynamique. Nous travaillons sur la création d'un guide pratique distinct spécifiquement pour les SlideDecks de contenu personnalisé (à venir).

  • Lens - Les objectifs sont comme des thèmes pour votre curseur de contenu. Ils contrôlent l'apparence et le comportement de votre curseur, ainsi que la façon dont le contenu est présenté sur la page. Tout comme avec les thèmes WordPress, appliquer un Lens différent à votre contenu ne prend que quelques secondes et peut donner une apparence très différente à votre slider.

Ok, maintenant que le jargon est éliminé, allez-y et activez SlideDeck 2, pour que nous puissions commencer !

Création d'un SlideDeck source dynamique

Nous allons vous montrer comment créer un SlideDeck Dynamic Source qui mélange des vidéos et des images d'un compte YouTube et Flickr. Commencez par cliquer sur « Gérer » pour accéder au tableau de bord principal. Cet écran vous permet de créer de nouveaux SlideDecks ainsi que de trier/prévisualiser vos SlideDecks existants.

Dans la section Dynamic Source, cliquez sur le bouton bleu « Créer un SlideDeck ». Une fenêtre de menu apparaîtra, vous demandant de choisir votre première source de contenu - vous pourrez sélectionner des sources supplémentaires sur l'écran suivant, alors choisissez-en une et vous serez redirigé vers l'éditeur de source dynamique. Nous allons choisir YouTube, pour créer une jolie galerie de vidéos

Une fois que vous arrivez sur Dynamic Source Editor, vous verrez que YouTube a été sélectionné comme notre première source de contenu. Commencez par nommer votre SlideDeck, puis cliquez sur l'icône YouTube et vous obtiendrez un joli onglet de menu affichant toutes les options de configuration disponibles pour cette source. Entrez un nom d'utilisateur (il peut s'agir du vôtre ou de celui de quelqu'un d'autre) et cliquez sur « Appliquer » pour extraire les vidéos les plus récentes de la chaîne de cet utilisateur. Si l'utilisateur que vous avez référencé a d'autres listes de lecture, vous pouvez spécifier que vous souhaitez extraire les vidéos de cette chaîne. liste dans le menu déroulant.

Vous pouvez maintenant voir l’une des fonctionnalités les plus intéressantes de SlideDeck 2 : la fenêtre d’aperçu en direct. Cette zone de l'écran vous permet de voir votre curseur en temps réel lorsque vous y apportez des modifications, au lieu d'avoir à actualiser votre message dans une fenêtre de navigateur distincte. Vous verrez le curseur ici se mettre à jour sous vos yeux pour afficher les dernières vidéos de la playlist. Vous pouvez même interagir avec le curseur dans la zone d’aperçu - allez-y, essayez-le !

C'était donc notre première source de contenu - facile, n'est-ce pas ? Maintenant, nous allons en ajouter une seconde pour donner un peu de variété au curseur. Cliquez sur le bouton Ajouter une source dans la zone d'en-tête de l'écran de l'éditeur et vous verrez la même fenêtre modale Sources de contenu. Cette fois, sélectionnez Flickr comme source.

Comme pour YouTube, vous pouvez cliquer sur l'icône Flickr dans l'en-tête pour configurer la source de contenu. Étant donné que Flickr nécessite un numéro d’identification d’utilisateur (encore une fois, le vôtre ou celui de quelqu’un d’autre) pour extraire des images, vous devrez obtenir ce numéro - SlideDeck 2 facilite cependant la compréhension en créant un lien vers ce petit outil pratique.

Saisissez le numéro d'identification de l'utilisateur et collez-le dans le champ « ID utilisateur/groupe », et choisissez si vous souhaitez filtrer les images que vous affichez à l'aide des balises associées à vos photos. Cliquez sur « Appliquer » pour ajouter des images et des légendes du compte Flickr dans votre curseur et jetez-y un coup d'œil rapide.

Voyez-vous déjà à la fois des vidéos et des images ? Dans le cas contraire, vous fusionnerez peut-être le contenu d’une source qui n’a pas été mise à jour depuis un certain temps, ce qui entraînera son « encombrement » par vos sources les plus récemment mises à jour. Dans ce cas, vous souhaiterez peut-être essayer de randomiser l’ordre des diapositives, car cela peut parfois aider - ou vous pouvez commencer à publier plus fréquemment sur vos autres sources.

Configuration de l'objectif

Félicitations, vous avez créé votre premier SlideDeck ! Maintenant, vous pourriez simplement enregistrer ce SlideDeck, puis le publier sur votre page - mais compte tenu de toutes les options de personnalisation à votre disposition, il est probablement préférable de les utiliser. SlideDeck offre une tonne d'options pour personnaliser l'objectif, afin que votre curseur soit joli sur la page. Faites défiler vers le bas juste en dessous de la zone d’aperçu en direct pour afficher le panneau Options et voir ce qu’il y a.

Si vous ne l’avez pas remarqué, de nombreuses options sont disponibles, nous ne les passerons donc pas toutes en revue. Cependant, nous les avons regroupés en six catégories simples :

Objectifs - Ce panneau vous permet de choisir l’objectif global utilisé par votre SlideDeck. L'application d'un Lens différent peut complètement changer l'apparence de votre contenu sur la page, alors choisissez celui qui se rapproche le plus de l'ensemble de votre site.

Configuration - Ce groupe contient des paramètres généraux, comme les dimensions de votre SlideDeck, le nombre de diapositives, etc.

Apparence - Vous permet d'ajuster des éléments tels que les polices et les couleurs

Contenu - Utilisez ce panneau pour contrôler la façon dont le contenu apparaît dans votre SlideDeck - des options telles que la longueur du titre, afficher/masquer des extraits et d'autres sont disponibles ici.

Navigation - Ajustez et configurez les éléments de navigation des SlideDecks, comme le style de flèche, le type de navigation, etc.

Lecture - Contrôle le comportement de votre SlideDeck

Enregistrement et publication de votre SlideDeck

Maintenant que vous avez créé votre SlideDeck, ajouté vos sources de contenu et configuré votre Lens, il ne reste plus qu'une étape : le montrer au monde ! Appuyez sur le bouton « Enregistrer le SlideDeck » en bas de l'écran de l'éditeur pour enregistrer votre nouveau SlideDeck. La page sera actualisée et quelques options vous seront présentées.

À partir de là, il existe trois méthodes pour partager vos SlideDecks avec les visiteurs de votre site Web :

  1. L'intégrer dans une page ou une publication existante

  2. L'intégrer dans une nouvelle page ou une nouvelle publication

  3. Utiliser un shortcode pour l'intégrer dans vos modèles de page

Ces trois méthodes utilisent le shortcode SlideDeck - une simple petite balise qui représente le SlideDeck que vous avez créé. Cela ressemble à ceci :

C'est tout ce qu'on peut en dire! Lors de la rédaction du contenu de votre article ou de votre page, cliquez simplement sur la petite icône violette SlideDeck à côté de l'icône « Insérer un média » au-dessus de la fenêtre d'édition de contenu WordPress.

En cliquant sur cette icône, le menu de sélection SlideDeck apparaîtra - à partir de là, vous pouvez facilement spécifier le(s) SlideDeck(s) que vous souhaitez intégrer dans votre contenu. Cliquez sur « Insérer » et le shortcode de votre SlideDeck apparaîtra dans votre message !

Emballer

Nous aimons SlideDeck, car il met d'excellents curseurs de contenu à la portée de presque tout le monde. C’est pourquoi nous l’avons dans notre liste de plugins WordPress indispensables, et nous l’utilisons sur nos sites. Il est assez facile de faire preuve de créativité et d'aller au-delà de l'en-tête de la page d'accueil. Vous pouvez placer un SlideDeck à de nombreux endroits de votre site, y compris dans votre barre latérale, votre pied de page, dans vos publications - n'importe où ! Bon sang, vous pouvez même faire preuve de créativité et l'utiliser sur des pages personnalisées, comme nous l'avons fait sur la page de configuration gratuite du blog WordPress.

Nous pouvons facilement dire que SlideDeck est de loin le MEILLEUR et le plus convivial plugin WordPress Slider qui existe. Si nous devions le noter, nous lui donnerions une note parfaite de 5 sur 5 étoiles.

Vous envisagez d'ajouter un slider dans vos sites WordPress ? Eh bien, procurez-vous SlideDeck maintenant. Utilisez le code promo : WPB-SD2 pour obtenir 20 % de réduction.