Comment créer une superbe visite guidée du produit avec SlideDeck 2 dans WordPress

Les curseurs de contenu sont courants dans WordPress de nos jours, mais ils ne sont généralement utilisés que dans un ensemble de circonstances très limitées : ils se trouvent généralement sur les pages d'accueil, pour présenter des publications récentes ou des galeries d'images. Une nouvelle tendance se développe, dans laquelle 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 présentation de produits WordPress peut vous aider à mieux vendre vos 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 plutôt revenir en arrière ou en avant vers des points spécifiques et définis. d'avoir à deviner un timecode. De plus, utiliser un curseur de contenu de cette manière tire parti de toutes sortes 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 guidées de produits de curseur de contenu les plus simples, mais nous utilisons un plugin de curseur génial appelé SlideDeck 2 qui change tout cela.

Ce plugin puissant permet de créer très simplement de superbes curseurs en quelques minutes, sans qu'une seule ligne de code ne soit 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 élaboré ce guide rapide pour vous montrer comment créer une présentation intéressante des produits pour votre site WordPress à l'aide de 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 les acheter pour les utiliser sur votre site. Nous vous recommandons d'aller sur le site Web SlideDeck et d'acheter le plugin - pour la puissance qu'il contient, il est assez bon marché et vous pouvez facilement 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 Professionnel ou Développeur, puis installer le plugin ainsi qu'un « module complémentaire » 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 devons expliquer :

  • 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 - dans ce cas, une visite guidée du produit. Si vous souhaitez créer des curseurs à l'aide de sources de contenu externes telles que Flickr ou YouTube, nous avons créé un guide pratique distinct spécifiquement pour les SlideDecks de source dynamique.

    • Type de diapositive - Il existe 4 types différents de diapositives, chacune conçue pour accueillir un type particulier de contenu : image, vidéo, texte et HTML.

    • 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, 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 présentation de produits qui mélange quatre types de contenu différents, à l'aide de la fonctionnalité 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 un SlideDeck ». Vous serez redirigé vers l’écran de l’éditeur de contenu personnalisé pour créer votre première diapositive. Une fois que vous arrivez sur l'éditeur de contenu personnalisé, commencez par nommer votre SlideDeck. Vous remarquerez que votre première diapositive a été créée et 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 WPBeginner). Ici, vous voyez votre curseur se mettre à jour 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 s’apprêtent à faire. Cliquez sur le type de diapositive « Diapositive d'image ». Le menu déroulant s'actualisera pour vous montrer toutes les options pertinentes à la création d'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 | Aucun - Indiquez à SlideDeck si vous souhaitez qu'une légende de texte se superpose à l'image ou qu'un bref corps de texte l'accompagne. Alternativement, vous pouvez simplement afficher l'image entière, sans texte associé.
    Lien de la diapositive : spécifiez une URL à visiter si l'utilisateur clique n'importe où sur la diapositive.
    Titre : attribuez à la diapositive un titre à afficher dans la zone de légende ou dans le corps du texte.
    Description : saisissez la copie de la description de la diapositive. Vous pouvez saisir 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 vers la diapositive.

    Voilà donc notre première diapositive de contenu personnalisé créée - facile, n’est-ce pas ? Maintenant, nous allons en 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 de 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 extraira 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 présentation du produit.

    Comme auparavant, appuyez sur Appliquer et cliquez rapidement sur le curseur - vous pourrez désormais basculer entre vos diapositives image et vidéo.

    Créer 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 issue d'une critique élogieuse du produit. Dans des cas comme celui-ci, nous pouvons utiliser le type de diapositive de texte.

    Il s'agit d'un type de diapositive très simple, avec seulement quelques options à prendre en compte :

    Mise en page - La mise en page de base place simplement le titre en haut de la diapositive, avec le texte en dessous. Le mode multicolonne offre davantage un format semblable à celui d'un journal, en encapsulant automatiquement le texte dans deux colonnes. Block Quote vous permet de mettre en évidence un court extrait de texte avec une typographie large et grasse. Comme auparavant, appuyez sur Appliquer pour ajouter la diapositive dans votre SlideDeck.

    Réorganiser les diapositives

    À ce stade, vous pensez peut-être que vous préféreriez diriger votre diapositive vidéo au lieu de l'image, afin de pouvoir inciter vos utilisateurs à 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, puis 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 de saisir 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 puissant appel à l'action, s'il en est !

    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 code automatiquement les différentes balises par couleur pour vous aider à vous assurer qu’elles sont correctement structurées. Quelques points importants à noter :

    • Vous pouvez inclure des règles de style CSS pour le contenu des diapositives 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 transparent avec votre site en configurant votre Lens. SlideDeck contient une énorme quantité d'options pour contrôler l'apparence de votre nouvelle présentation de produits en personnalisant l'objectif.

    Enregistrement et publication de votre SlideDeck

    Un contenu génial ? Vérifier. Thème doux choisi et personnalisé ? Vérifier. On dirait que vous êtes 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 le contenu d'une page ou d'une publication existante, en créant une nouvelle page ou une nouvelle publication avec le curseur intégré et enfin en l'insérant dans votre modèle de page, ce qui est probablement votre meilleur choix. si vous souhaitez ajouter la présentation 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 la fidélité de vos visiteurs. Chez WPBeginner, nous vous recommandons vivement d'y jeter un œil ! 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 d’interface tactile sont l’avenir de la conception Web. Obtenez SlideDeck maintenant. Utilisez le code promo : WPB-SD2 pour obtenir 20 % de réduction.