Les curseurs de contenu sont monnaie courante dans WordPress de nos jours, mais ils ne sont généralement utilisés que dans un ensemble très limité de circonstances – généralement, ils sont situés sur les pages d’accueil, pour présenter des publications récentes ou des galeries d’images. Une nouvelle tendance se développe, où les sites Web WordPress utilisent le potentiel et la flexibilité des curseurs de contenu pour raconter des histoires captivantes qui motivent les visiteurs à agir, c’est-à-dire sous la forme de visites de produits.
L’utilisation d’un curseur de contenu pour votre visite de produit WordPress peut vous aider à mieux vendre des produits en guidant les utilisateurs à travers les points clés à leur propre rythme – c’est mieux que d’utiliser simplement une vidéo, car ils peuvent sauter en arrière/en avant vers des points spécifiques et définis, à la place d’avoir à deviner un code temporel. De plus, l’utilisation d’un curseur de contenu de cette manière tire parti de tous les types de médias Web, ce qui signifie que vous pouvez inclure du contenu interactif dans les diapositives, au lieu de forcer votre utilisateur à regarder passivement une vidéo.
Jusqu’à récemment, vous deviez savoir coder pour créer autre chose que les visites de produits les plus simples, mais nous avons utilisé un plugin de curseur génial appelé SlideDeck 2 qui change tout cela.
Ce plugin puissant rend super simple la création de curseurs impressionnants en quelques minutes, sans une seule ligne de code requise. Nous avons couvert l’une des autres fonctionnalités robustes de SlideDeck 2 dans un article précédent, mais leur dernière mise à jour vous permet de créer des curseurs de contenu personnalisés et d’adapter le contenu de chaque diapositive pour créer des présentations convaincantes qui motivent vos visiteurs à agir. Nous avons rassemblé ce guide rapide pour vous montrer comment faire une visite guidée du produit pour votre site WordPress en utilisant SlideDeck 2.
Achat et installation du plugin
Tout d’abord, les diapositives de contenu personnalisé sont une fonctionnalité premium de SlideDeck 2, vous devrez donc l’acheter pour l’utiliser sur votre site. Nous vous recommandons d’aller au Jeu de diapositives site Web et achetez le plugin – pour la puissance qu’il contient, il est assez bon marché et vous pouvez facilement le mettre à niveau pour obtenir de meilleures fonctionnalités et l’utiliser sur plus de sites.
Pour déverrouiller la fonctionnalité de contenu personnalisé, vous devrez acheter le package Professional ou Developer, puis installer le plug-in ainsi qu’un « Addon » qui déverrouille les fonctionnalités supplémentaires.
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 devrions expliquer :
- Type de diapositive – Il existe 4 types de diapositives différents, chacun conçu pour accueillir un type de contenu particulier : image, vidéo, texte et HTML.
- Lentille – Les lentilles sont comme des thèmes pour votre curseur de contenu. Ils contrôlent l’apparence et le comportement de votre curseur, ainsi que la manière dont le contenu est présenté sur la page. Tout comme avec les thèmes WordPress, l’application d’un objectif différent à votre contenu ne prend que quelques secondes et peut donner une apparence et une sensation très différentes à votre slider.
Ok, maintenant que le jargon est à l’écart, allez-y et activez SlideDeck 2, et commençons !
Création d’un SlideDeck de contenu personnalisé
Nous allons vous montrer comment créer un curseur de contenu de visite de produit qui mélange quatre types de contenu différents, à l’aide de la fonction de contenu personnalisé de SlideDeck. Commencez par cliquer sur « Gérer » pour accéder au tableau de bord principal. Cet écran vous permet de créer de nouveaux SlideDecks et de trier vos SlideDecks existants.
Dans la section Contenu personnalisé, cliquez sur le bouton bleu « Créer SlideDeck ». Vous serez redirigé vers l’écran de l’éditeur de contenu personnalisé pour créer votre première diapositive. Une fois que vous avez atterri sur l’éditeur de contenu personnalisé, commencez par nommer votre SlideDeck. Vous remarquerez que votre première diapositive a été créée et que vous avez le choix entre trois ou quatre types de diapositives différents, selon le package de SlideDeck 2 que vous utilisez – Les utilisateurs du package professionnel auront accès aux diapositives image, vidéo et texte. Les types; Les utilisateurs du package développeur pourront choisir le type de diapositive HTML en plus de ces trois.
Sous ce menu déroulant se trouve l’une des fonctionnalités les plus uniques de SlideDeck 2 – la fenêtre d’aperçu en direct (c’est l’une des raisons pour lesquelles SlideDeck 2 est un plugin WordPress recommandé dans le Blueprint de Themelocal). Ici, vous voyez la mise à jour de votre curseur en temps réel au fur et à mesure que vous le modifiez.
Commencer avec une diapositive d’image
Commençons par une diapositive d’image – quelque chose qui donne à nos visiteurs un aperçu rapide et visuellement attrayant de la visite qu’ils sont sur le point de faire. Cliquez sur le type de diapositive « Diapositive d’image ». Le menu déroulant s’actualisera pour vous montrer toutes les options pertinentes pour créer une diapositive d’image :
Télécharger une image | Spécifiez une URL – Choisissez si vous souhaitez télécharger votre image dans la galerie multimédia WordPress, ou simplement coller une URL, si elle est hébergée ailleurs.
Légende | Corps du texte | Rien – Dites à SlideDeck si vous souhaitez qu’une légende de texte recouvre l’image ou ayez un bref corps de texte pour l’accompagner. Alternativement, vous pouvez simplement afficher l’image entière, sans texte associé.
Diapositive Lien – Spécifiez une URL à visiter, si l’utilisateur clique n’importe où sur la diapositive.
Titre – Donnez à la diapositive un titre à afficher dans les zones de légende ou de corps de texte.
La description – Entrez la copie de la description de la diapositive. Vous pouvez entrer du texte enrichi ici !
Position de la légende – Détermine la position de la superposition de texte sur la diapositive. Les légendes peuvent aller en haut/en bas et le corps du texte peut aller à gauche/à droite.
Une fois que vous avez configuré votre diapositive comme vous le souhaitez, appuyez simplement sur le bouton « Appliquer », et la zone d’aperçu en direct s’actualisera pour vous montrer votre première diapositive. Dans notre exemple, nous avons construit notre diapositive en spécifiant une URL, avec une légende en bas et aucun lien de diapositive.
C’est donc notre première diapositive de contenu personnalisé créée – facile, n’est-ce pas ? Maintenant, nous allons ajouter une seconde pour ajouter une vidéo montrant la démo de notre produit.
Création de la diapositive vidéo
SlideDeck 2 prend en charge le contenu vidéo de trois sources – YouTube, Vimeo et Dailymotion – ce qui signifie que tout ce que nous avons à faire est de télécharger la vidéo de démonstration de notre produit sur l’un de ces services, puis de coller l’URL sur la page de la vidéo et de cliquer sur « Mettre à jour ».
Comme pour le type de diapositive d’image, vous pouvez choisir d’ajouter un titre et une brève légende ou un paragraphe de texte pour donner à vos visiteurs une idée de ce qu’ils verront dans la vidéo. Par défaut, SlideDeck 2 extrait le contenu des sous-titres que vous avez sur votre page YouTube/Vimeo/Dailymotion, mais vous pouvez l’ajuster en fonction de vos besoins pour la visite du produit.
Comme auparavant, appuyez sur Appliquer et faites un clic rapide sur le curseur – vous pourrez maintenant aller et venir entre vos diapositives d’image et de vidéo.
Création d’une diapositive de texte
Parfois, vous avez juste besoin d’espace pour du texte – pour afficher une liste de fonctionnalités, par exemple, ou pour partager une citation d’une critique élogieuse du produit. Dans de tels cas, nous pouvons utiliser le type de diapositive de texte.
Il s’agit d’un type de diapositive très simple, avec seulement quelques options à considérer :
Disposition – La mise en page de base place simplement le titre en haut de la diapositive, avec le texte coulé en dessous. Multi-colonne fournit plus d’un format de type journal, en enveloppant automatiquement le texte en deux colonnes. Block Quote vous permet de mettre en surbrillance un court extrait de texte avec une typographie large et en gras. Comme précédemment, appuyez sur Appliquer pour ajouter la diapositive dans votre SlideDeck.
Réorganiser les diapositives
À ce stade, vous pensez peut-être que vous aimeriez diriger avec votre diapositive vidéo au lieu de l’image, afin que vos utilisateurs puissent interagir et participer immédiatement à la visite. SlideDeck vous permet de le faire instantanément – dans la zone d’en-tête de la diapositive, cliquez et faites glisser la diapositive vidéo, et déposez-la dans l’espace lumineux à gauche de la diapositive d’image. Super-simple!
Aller plus loin – en utilisant le type de diapositive HTML
Le type de diapositive HTML est un ajout puissant au package Developer de SlideDeck 2, qui vous permet d’entrer votre propre code HTML dans une diapositive. Il est parfait pour les mises en page plus complexes de votre contenu ou pour ajouter des interactions plus puissantes à votre curseur de contenu. Par exemple, vous pouvez intégrer un formulaire d’inscription, afin que les clients puissent choisir de recevoir une newsletter par e-mail à la fin de la visite du produit – un appel à l’action puissant, s’il en existe un !
Sélectionnez le type de diapositive HTML pour afficher l’éditeur HTML dans le menu déroulant.
Dans le champ Insérer HTML, vous pouvez coller votre code personnalisé. Vous remarquerez qu’il attribue automatiquement un code couleur aux différentes balises pour vous aider à vous assurer qu’il est correctement structuré. Quelques points importants à noter :
- Vous pouvez inclure des règles de style CSS pour le contenu de la diapositive entre les balises
, et elles s’appliqueront à toutes les diapositives du SlideDeck
- Étant donné que l’aperçu en direct de SlideDeck n’est pas en mesure de prédire comment les styles de votre thème pourraient interagir avec votre curseur de contenu, pour un style complexe, vous obtiendrez un aperçu plus précis si vous l’affichez sur la page sur laquelle vous avez l’intention de publier votre SlideDeck.
Une fois le code en place, appuyez sur Appliquer et la diapositive sera ajoutée à la rotation.
Configuration de l’objectif
Vous avez maintenant créé votre premier SlideDeck de contenu personnalisé ! Continuez et prenez quelques minutes pour cliquer sur les diapositives dans l’aperçu en direct et profitez de l’éclat d’un travail bien fait.
Il est maintenant temps de le rendre homogène avec votre site en configurant votre Lens. SlideDeck contient une énorme quantité d’options pour contrôler l’apparence de votre nouvelle tournée de produits en personnalisant l’objectif.
Sauvegarder et publier votre SlideDeck
Contenu génial ? Vérifier. Thème doux choisi et personnalisé ? Vérifier. Il semble que vous soyez tous prêts à publier votre nouvelle présentation de produits et à convertir vos visiteurs en clients !
SlideDeck propose trois façons d’intégrer vos curseurs dans votre site WordPress – en l’insérant dans une page existante ou dans le contenu d’un article, en créant une nouvelle page ou un article avec le curseur intégré, et enfin en l’insérant dans votre modèle de page, ce qui est probablement votre meilleur pari. si vous souhaitez ajouter la visite guidée du produit à votre page d’accueil.
Emballer
Bien que les curseurs de contenu ne soient généralement utilisés que pour les galeries d’images ou les publications en vedette, SlideDeck 2 vous offre une tonne de flexibilité pour explorer le potentiel des curseurs de contenu afin de créer des expériences convaincantes qui maintiennent l’engagement et le retour de vos visiteurs. Chez Themelocal, nous vous recommandons fortement de le vérifier ! Un exemple en direct de la façon dont nous utilisons un SlideDeck personnalisé peut être vu sur notre page de configuration gratuite du blog WordPress.
Vous avez un exemple de SlideDeck que vous souhaitez partager ? Dites-le nous dans les commentaires! Consultez également la première partie de cette série, où nous vous montrons comment créer des SlideDecks source dynamique.
Les curseurs à interface tactile sont l’avenir de la conception Web. Obtenez SlideDeck maintenant. Utilisez le code promo : WPB-SD2 pour bénéficier de 20% de remise.