Créer un site Web de gestion de l'apprentissage (LMS) avec Divi

J'adore suivre des cours en ligne. Il y a quelque chose à propos de commencer un cours en ligne bien conçu et bien organisé avec un excellent contenu. S'ils sont bien faits, ces cours en ligne peuvent vous garder motivé avec un sentiment d'accomplissement. Mais apprendre d'un excellent cours en ligne et en créer un sont deux expériences totalement différentes. Et d'après mon expérience, créer un site Web de gestion de l'apprentissage ou de cours en ligne peut être un processus accablant.

Dans cet article, j'espère éviter l'intimidation liée à la création de votre propre cours en ligne en vous montrant comment utiliser le pack de mise en page de gestion de l'apprentissage prédéfini de Divi pour créer un site Web de cours en ligne entièrement fonctionnel.

Avant de commencer à construire, voici un aperçu de ce que nous allons accomplir ensemble :

1. Créez une page de leçon en utilisant des éléments de la mise en page existante.
2. Créez un menu de cours à afficher sur chaque page de leçon qui montre toutes les leçons du cours.
3. Utilisez le plugin WP Complete pour donner aux utilisateurs la possibilité de suivre leurs progrès pour chaque cours.
4. Utilisez le plug-in Restrict Content Pro pour configurer les niveaux d'adhésion gratuits et payants.
5. Apprenez à concevoir rapidement les pages d'adhésion pour qu'elles correspondent au site Web en utilisant des éléments de la mise en page existante.
et plus…

Et, pour satisfaire votre curiosité, voici un aperçu de la page de la leçon que vous allez créer avec le bouton complet et la barre de progression au-dessus du menu du cours dans la barre latérale…

Mais d'abord, mettons les choses en place.

Créer un site Web de gestion de l'apprentissage (LMS) avec Divi

Abonnez-vous à notre chaîne Youtube

Tout mettre en place

#1 – Installer Divi

Assurez-vous d'avoir installé la version la plus récente de Divi. Et, il est toujours bon d'avoir un thème enfant actif également.

#2 – Téléchargez le pack de mise en page dans votre bibliothèque Divi

Nous utiliserons le pack de mise en page Learning Management (LMS) de Divi. Téléchargez le pack de mise en page, décompressez-le et installez le fichier coding-school_All.json dans votre bibliothèque Divi. Créez ensuite neuf nouvelles pages en utilisant chacune de leurs mises en page correspondantes.

#3 – Installer et activer le plugin Restrict Content Pro

C'est le plugin que nous utiliserons pour la fonctionnalité d'adhésion du site de cours en ligne. Nous l'utiliserons pour mettre en place un abonnement gratuit et premium (payant) au cours.

#4 – Installer et activer le plugin WP Complete Pro

Ce plugin sera utilisé pour tenir les membres (ou étudiants) au courant de leurs progrès à mesure qu'ils terminent chaque leçon de chaque cours. Il a des visuels de cercle et de graphique à barres pour montrer les progrès ainsi qu'une coche pratique à côté de chaque leçon terminée dans le menu de navigation.

Une fois que vous êtes prêt, vous êtes prêt à créer votre cours en ligne.

Commençons.

Renommer la page du cours

Votre pack de mise en page est livré avec une mise en page de cours.

Chacun des cours répertoriés sur cette mise en page doit (si vous prévoyez d'enseigner tous ces cours) un lien vers une page de cours spécifique qui utilise la mise en page du cours.

Remarque : Notez que j'ai remplacé le bouton dans l'en-tête de la page du cours ci-dessus par un module vidéo. De cette façon, je n'ai pas à rediriger vers une autre page pour afficher l'aperçu du cours. Juste une idée.

Comme vous pouvez le voir, pour cet exemple, la mise en page du cours utilise le cours UX Design, alors allez-y et modifiez la page et changez le nom de la page du cours de "Cours" en "UX Design". Et mettez également à jour votre permalien.

Construire la page de la leçon

Votre nouvelle page de cours, désormais nommée « UX Design », est divisée en chapitres (vous pouvez également les considérer comme des leçons) avec une brève description de chacun. Chacun de ces chapitres/leçons devra être redirigé vers sa propre page de leçon. Pour construire cette page de leçon, nous allons utiliser la mise en page du cours et faire quelques ajustements.

Le premier chapitre/leçon répertorié dans la page du cours UX Design s'appelle "Chapitre 1 : Une introduction aux bases". Construisons notre page de leçon pour celle-ci.

Allez-y et ajoutez une nouvelle page et entrez "Chapitre 1 : Une introduction aux bases" pour le titre.

Étant donné que cette leçon est une page enfant de la page du cours UX Design, cliquez sur le menu déroulant parent dans la zone Attributs de page dans la barre latérale droite et sélectionnez UX Design comme parent.

Cliquez ensuite pour utiliser Divi Builder, cliquez sur Ajouter à partir de la bibliothèque et sélectionnez la mise en page du cours.

Enregistrer le brouillon

Ajuster la disposition de l'en-tête

Cliquez maintenant pour utiliser Visual Builder afin d'apporter quelques ajustements à la mise en page. Tout d'abord, modifions un peu la disposition de notre en-tête dans la section supérieure. Depuis le visual builder, supprimez le module image dans la colonne de droite et le bouton vert en bas de la première colonne.

Cliquez ensuite pour modifier les paramètres du module de texte supérieur dans la première colonne et remplacez le texte de l'en-tête h1 par « Chapitre 1 : Une introduction aux bases ».

Modifiez ensuite la structure de colonne de la ligne en une colonne au lieu de deux.

Maintenant, votre en-tête devrait ressembler à ceci.

Modifier le contenu de la présentation

Dans la section de spécialité ci-dessous, modifiez les paramètres du premier texte de présentation dans la section de contenu de gauche et mettez à jour les éléments suivants :

Onglet Contenu

Titre : Partie 1
Contenu : [Ceci deviendra votre contenu pour le cours ; Je laisse le contenu fictif là-dedans pour l'instant]
Utiliser l'icône : OUI
Icône : sélectionnez l'icône de la flèche vers la droite

Remarque : la couleur de l'icône sera extraite de la couleur d'accent du thème définie dans le personnalisateur de thème. Assurez-vous donc de mettre à jour la couleur avec une couleur qui correspond au site.

Enregistrer les paramètres

Maintenant que vous avez créé un module de présentation, nous pouvons l'utiliser comme modèle pour diviser chaque partie de la leçon sur la page. Allez-y et dupliquez le module que vous venez de créer deux fois (ou autant de parties que vous le souhaitez) et mettez à jour chacune avec un titre différent (c'est-à-dire Partie 2, Partie 3, ect…).

Supprimez ensuite les autres textes de présentation dont nous n'aurons plus besoin.

Maintenant, votre mise en page devrait ressembler à ceci.

Ajout du widget de la barre latérale

Ajoutez un module de barre latérale sous le module de boutons dans la barre latérale droite de la section de spécialité. Et, pour l'instant, laissez simplement les paramètres de contenu par défaut qui extrait le contenu de la zone de widget de la barre latérale. Nous finirons par changer cela dès que nous aurons créé une zone de widgets personnalisée comprenant le menu du cours.

Sous l'onglet contenu, ajoutez un fond blanc à votre module.

Pour que votre module de barre latérale corresponde à la conception de la page, mettez à jour les paramètres dans l'onglet Conception comme suit :

Marge personnalisée : -80px Haut
Rembourrage personnalisé : 30 pixels en haut, 40 pixels à droite, 30 pixels en bas, 40 pixels à gauche
Position horizontale de l'ombre de la boîte : 0px
Box Shadwo Position verticale : 0px
Force du flou d'ombre de la boîte: 60px
Force de propagation de l'ombre de la boîte : 0px
Couleur de l'ombre: rgba (71,74,182,0.12)

Style d'animation : Zoom
Direction de l'animation : vers le haut
Intensité de l'animation : 20 %
Opacité de démarrage de l'animation : 100 %

Enregistrer les paramètres

Remarque : c'est une bonne idée d'aller de l'avant et d'en faire un module global afin que vous n'ayez à faire des ajustements qu'à un module pour les futures mises à jour. Pour ce faire, sélectionnez ajouter à la bibliothèque, nommez-le "module de barre latérale du menu de la leçon", sélectionnez-le pour en faire un module global, puis cliquez sur Enregistrer.

Enfin, supprimez le module de présentation avec l'instructeur et le module de bouton « Profil complet ». Votre page devrait ressembler à ceci :

Sauvegarder la page

Maintenant que nous avons construit l'une de nos pages de leçon, enregistrons-la dans notre bibliothèque afin de pouvoir l'utiliser pour d'autres leçons. À partir du générateur visuel, cliquez sur le bouton « Ajouter à la bibliothèque » dans le menu du bas, entrez « Mise en page de la leçon » pour le nom du modèle, puis enregistrez-le.

Allez-y et répétez les étapes ci-dessus pour ajouter deux autres pages de cours. Seulement cette fois, au lieu d'utiliser la mise en page du cours, utilisez la nouvelle mise en page que vous avez créée appelée « mise en page de la leçon ».

Une fois que vous avez terminé, vous devriez avoir trois pages de cours créées avec les titres suivants :

1. Chapitre 1 : Une introduction aux bases
2. Chapitre 2 : Architecture de l'information
3. Chapitre 3 : Responsive Design

Création du menu du cours

Maintenant que vous avez créé vos leçons, nous pouvons créer notre menu de cours. Depuis le tableau de bord WordPress, accédez à Apparence > Menus .

À partir de la page Menus, procédez comme suit :

1. Sélectionnez « Créer un nouveau menu »
2. Nommez-le « UX Design »
3. Sélectionnez les trois pages/chapitres de leçons dans le menu que vous venez de créer.
4. Cliquez sur Ajouter au menu
5. Enregistrer le menu

Créer la zone de widget personnalisée

Pour ajouter le menu à notre page de leçon, nous devons d'abord créer une zone de widget personnalisée pour celui-ci. Depuis le tableau de bord WordPress, accédez à Apparence > Widgets . Sous les zones de widgets existantes, localisez la case utilisée pour créer une nouvelle zone de widgets. Saisissez le nom « UX Design » et cliquez sur « Créer ». Rafraîchissez maintenant la page. Vous devriez maintenant voir la nouvelle zone de widget personnalisée « UX Design ». Faites glisser le widget Menu personnalisé à l'intérieur de la zone de widget « UX Design ». Dans le widget Menu personnalisé, sélectionnez le menu « UX Design ». Cliquez ensuite sur Enregistrer.

Mettre à jour le module de la barre latérale de la page de leçon avec une nouvelle zone de widget

Maintenant que votre zone de widgets est créée avec le menu de votre cours, revenez aux pages de cours que vous avez créées et mettez à jour le module de la barre latérale pour sélectionner la zone de widgets « UX Design ». Votre menu devrait maintenant apparaître dans la barre latérale.

Remarque : si vous avez rendu le module de la barre latérale global, vous n'aurez à faire ce réglage qu'une seule fois sur ce module, les deux autres seront automatiquement mis à jour.

À ce stade, nous avons une assez bonne base pour créer nos cours et nos leçons, alors améliorons notre UX en incorporant le suivi de la progression des cours.

Ajouter un suivi de la progression du cours

L'ajout du suivi de la progression des cours à votre site Web de cours en ligne est un excellent moyen d'améliorer l'expérience utilisateur, l'engagement et la motivation lors de la prise de votre cours. Pour montrer la progression de chacun de nos cours, je vais utiliser le plugin WP Complete Pro. Si vous ne l'avez pas déjà fait, assurez-vous d'installer et d'activer le plugin.

Une fois le plugin activé, depuis votre tableau de bord WordPress, allez dans Paramètres > WPComplete . Cela vous mènera aux paramètres du plugin.

Mettez à jour les paramètres suivants :

Type de rôle d'étudiant : Abonné
Type de contenu de la leçon : types de pages (puisque nous construisons nos leçons avec des pages au lieu de publications)
Décochez l'option "Ajouter automatiquement le bouton complet aux articles et pages activés pour moi". (nous allons ajouter manuellement ces boutons avec un shortcode.)
Marquer la couleur du bouton complet : #7377fc
Paramètres du graphique Couleur principale : #7377fc

Cliquez ensuite sur Enregistrer les modifications.

Activer les boutons Terminer sur les pages de cours

Maintenant que nous avons la configuration WP Complete. Ajoutons nos boutons « Terminer » à nos pages de cours.

Accédez à la première page de leçon que nous avons créée intitulée « Chapitre 1 : Introduction aux bases » et cliquez pour modifier la page. Dans l'éditeur de page par défaut, recherchez la case WPComplete en bas de la page. À l'intérieur de la boîte, cliquez sur l'option « Activer le bouton Terminer ». Cela indiquera au plugin que vous souhaitez suivre cette page pour l'utilisateur. Ensuite, dans la zone de saisie juste après la mention « Ceci fait partie de : », entrez « UX Design », qui est le nom du cours que vous souhaitez suivre. C'est ainsi que vous regroupez les leçons sous chaque cours. Par exemple, si vous avez trois leçons et que sur chacune de ces pages de leçons, vous sélectionnez « UX Design » comme cours, lorsqu'un utilisateur complète une page en cliquant sur le bouton Terminer, le plugin est en mesure d'enregistrer que l'utilisateur a terminé 33% (1 cours sur 3) de ce cours. Si vous avez plusieurs cours, vous pouvez simplement entrer un nouveau nom de cours dans la case et cela commencera un nouveau groupe de cours.

Ajouter des boutons complets aux pages de cours

Pour ajouter le bouton « Terminer » à votre page de cours, déployez le générateur visuel sur la même page de cours que vous venez de modifier.

Ajoutez un module de texte sous le dernier module de présentation en bas de la page. Dans les paramètres de texte, saisissez le shortcode suivant dans la zone de contenu :

[wpc_button text="Cliquez sur moi pour terminer !" complete_text="YAY ! Complété"]

Remarque : Vous pouvez changer le texte et le texte complété affichés sur le bouton en modifiant le texte dans le shortcode.

Enregistrer les paramètres

Ce shortcode crée un bouton qui permet à l'utilisateur de cliquer dessus et d'enregistrer la leçon comme terminée.

Notez que lorsque vous cliquez sur le bouton pour terminer la leçon, l'élément de menu dans la barre latérale de la leçon correspondante s'estompera légèrement et affichera une coche à sa droite.

Allez-y et enregistrez ce module de texte que vous venez de créer dans votre bibliothèque sous le nom « Complete Button ». Vous pouvez maintenant utiliser cet élément de bibliothèque pour entrer le même module sur toutes vos pages selon vos besoins.

Remarque : Vous pouvez enregistrer une nouvelle version de la mise en page de votre leçon dans votre bibliothèque avec le bouton Terminer inclus afin de ne pas avoir à l'ajouter en tant qu'élément secondaire lors de la création de futures pages de leçon.

Ajouter un graphique à barres de progression à votre barre latérale

Le plugin WPComplete vous permet également d'afficher des graphiques qui montrent à l'utilisateur sa progression pour un cours spécifique. Nous allons ajouter un graphique à barres pour montrer la progression du cours UX Design dans la barre latérale de nos leçons.

Rappelez-vous comment nous avons créé une zone de widget personnalisée pour notre cours UX Design afin d'afficher un menu de cours dans la barre latérale de la page de leçon ? Eh bien, nous allons maintenant ajouter un graphique à barres de progression juste au-dessus de notre menu de cours. De cette façon, l'utilisateur peut voir ses progrès dans un affichage visuel sympa.

Pour ajouter le graphique à barres, accédez à votre tableau de bord WordPress et accédez à Apparence > Widgets . Ouvrez ensuite le widget personnalisé « UX Design » que vous avez créé précédemment et faites glisser un widget HTML dans la zone des widgets au-dessus du widget de menu personnalisé qui s'y trouve actuellement. Dans la zone de contenu HTML, saisissez le shortcode suivant :

[cours wpc_progress_bar = "Design UX"]

Ce shortcode affichera le graphique à barres de progression pour le cours spécifique « UX Design ». Ce nom de cours correspond à ce que vous avez mis dans la case WPComplete à côté de « Ceci fait partie de : ». Si vous avez un autre cours à l'avenir, entrez simplement le nouveau nom du cours à la place de « UX Design » lors de l'ajout du shortcode pour ce cours.

Remarque : pour une liste complète des shortcodes disponibles pour ce plugin, accédez à l'aide-mémoire des shortcodes.

Allez maintenant au « Chapitre 1 : Introduction aux bases » pour voir à quoi cela ressemble.

Cliquez sur le bouton Terminer en bas de la page. Consultez maintenant la barre latérale pour voir ce qui a changé. Le graphique à barres montre maintenant que vous avez terminé 33 % du cours. Et l'élément de menu de la page de la leçon s'affiche désormais comme estompé avec une coche à droite pour indiquer que cette leçon a été terminée.

Plutôt cool hein ?

Passons en revue ce que nous avons jusqu'à présent:

1. Nous avons un nouveau modèle de page de leçon qui servira de modèle de référence pour les leçons à venir
2. Nous avons un système pour créer un menu personnalisé pour chaque cours.
3. Nous avons un système pour configurer des zones de widgets personnalisées pour chaque cours afin d'afficher un menu personnalisé pour ce cours spécifique sur la page de la leçon.
4. Nous avons la possibilité d'ajouter un bouton complet à nos pages de cours qui, lorsqu'il est cliqué, représente la progression dans un graphique à barres et dans le lien de menu correspondant.

La dernière étape de la transformation de notre site en un cours en ligne fonctionnel consiste à intégrer les niveaux d'adhésion afin de restreindre notre contenu aux clients payants.

Création des pages d'adhésion

Si vous ne l'avez pas déjà fait, installez et activez le plugin Restrict Content Pro. Une fois installé, le plugin créera automatiquement 5 pages pour gérer le processus d'adhésion.

Si vous regardez chaque page dans l'éditeur de page par défaut, vous verrez que la seule chose ajoutée au contenu de chaque page est un shortcode. Par exemple, si vous allez sur la page Inscription, vous verrez que la seule chose dans l'éditeur de contenu est le shortcode « [register_form] » qui affichera le formulaire d'inscription.

Étant donné que tout ce dont vous avez besoin pour afficher le contenu de chacune de ces pages générées automatiquement sont les codes courts, vous pouvez facilement créer une mise en page pour ces pages à l'aide de Divi Builder. Par exemple, si vous souhaitez un moyen rapide et facile de personnaliser votre page d'inscription, accédez à votre page Cours et déployez le générateur visuel. Enregistrez la section supérieure de la mise en page dans votre bibliothèque avec le nom « en-tête de page de cours en ligne » (ou quelque chose comme ça).

Cliquez ensuite sur l'un des textes de présentation qui montrent le cours et enregistrez ce module dans votre bibliothèque sous le nom « boîte de contenu du texte de présentation du cours en ligne » (ou quelque chose comme ça).

Allez maintenant sur votre page d'inscription, copiez le shortcode dans votre presse-papiers (surlignez le shortcode et cliquez sur ctrl + c). Déployez ensuite le Divi Builder, puis le visual builder. Ajoutez votre nouvelle section enregistrée appelée « en-tête de page de cours en ligne » à partir de votre bibliothèque.

Mettez à jour le module de texte qui contient le titre pour dire « Inscription » au lieu de « Cours ».

Cliquez ensuite pour ajouter un module de votre bibliothèque sous les modules actuels de la section. Sélectionnez le module « boîte de contenu de présentation de cours en ligne » que vous venez d'enregistrer dans la bibliothèque.

Ensuite, mettez à jour les paramètres comme suit :

Sous l'onglet Contenu…

Effacer le titre
Contenu : saisissez le shortcode [register_form] que vous avez enregistré dans votre presse-papiers en appuyant sur ctrl + v.
Effacer l'url de l'image

Enregistrer les paramètres

Remarque : C'était le moyen le plus rapide et le plus simple. J'ai utilisé un module de présentation parce que c'était le moyen le plus rapide d'apporter le style du module. Vous voudrez probablement utiliser un module de texte à la place.

Maintenant, regardez votre page d'inscription dans un navigateur incognito.

Vous devez toujours personnaliser la conception du formulaire (je ne le ferai pas dans ce didacticiel), mais cela peut facilement être fait avec une inspection et un CSS personnalisé.

Vous pouvez suivre le même processus pour mettre à jour les 5 pages d'adhésion générées par le plugin. Pour afficher les pages utilisées pour gérer l'adhésion, accédez au tableau de bord WordPress et accédez à Restreindre> Paramètres et vous verrez une liste de toutes les pages utilisées sous l'onglet Général.

Ajouter un niveau d'abonnement GRATUIT

L'ajout d'un niveau d'abonnement GRATUIT à votre cours en ligne est un excellent moyen de capturer des prospects, de les ajouter à une campagne de marketing par e-mail et de les vendre avec un abonnement premium. Pour ajouter un niveau d'abonnement GRATUIT, accédez au tableau de bord WordPress et accédez à Restreindre > Niveaux d'abonnement . Ensuite, remplissez les paramètres pour créer votre adhésion GRATUITE. Voici un exemple de ce qu'il faut saisir pour un niveau d'abonnement gratuit :

Nom : GRATUIT
Description : Il s'agit d'un abonnement GRATUIT à Coding School.
Rôle de l'utilisateur : Abonné

Laissez les autres options à leur valeur par défaut.

Cliquez ensuite sur Ajouter un niveau d'adhésion

Ajouter un niveau d'abonnement Premium

Un abonnement Premium est généralement l'endroit où vous pouvez facturer de l'argent pour avoir accès à un contenu de niveau supérieur auquel vous ne pouvez pas accéder avec un abonnement gratuit. Comme une adhésion GRATUITE, l'utilisateur devra s'inscrire sur le formulaire d'inscription. La seule différence est qu'ils seront dirigés vers un formulaire de paiement pour acheter l'abonnement. Si l'utilisateur est déjà un membre GRATUIT, il peut passer à un abonnement Premium en utilisant ses informations d'enregistrement actuelles, puis en payant pour la mise à niveau.

Pour ajouter un niveau d'abonnement Premiumn, accédez au tableau de bord WordPress et accédez à Restreindre > Niveaux d'abonnement. Remplissez ensuite les paramètres pour créer votre abonnement Premium. Voici un exemple de ce qu'il faut saisir pour un niveau d'abonnement Premium :

Nom : Premium
Description : Il s'agit d'un abonnement premium à Coding School
Durée : 1 an
Prix ​​: 29
Rôle de l'utilisateur : Abonné

Restreindre les leçons en fonction du niveau d'abonnement

Maintenant que nous avons créé nos niveaux d'abonnement gratuit et premium. Nous pouvons choisir de restreindre les pages/articles ou même un contenu spécifique en fonction du niveau d'abonnement des utilisateurs. Le plugin rend ce processus vraiment simple. Allons-y et restreignons l'accès à la première leçon que nous avons créée à un abonnement GRATUIT. Pour ce faire, allez modifier la page de la leçon intitulée « Chapitre 1 : Introduction aux bases ». Remarquez la case « Restreindre ce contenu » en haut de l'éditeur de page. Dans la zone, vous avez une zone de saisie déroulante qui vous permet de sélectionner qui doit avoir accès au contenu. Vous allez sélectionner Membres de niveau(x) d'abonnement . Une fois sélectionné, vous verrez plus d'options apparaître. Sélectionnez la première option qui dit « Membres de tout niveau d'abonnement. C'est parce que nous voulons que les membres qui auront l'abonnement premium aient également accès à ce contenu.

Remarque : ce paramètre masquera la page entière aux utilisateurs non abonnés. Si vous souhaitez masquer certains éléments de contenu sur la page et le rendre disponible uniquement pour les abonnés Free ou Premium, vous pouvez utiliser des codes abrégés pour envelopper le contenu que vous souhaitez masquer. Étant donné que nous utilisons le constructeur Divi, l'utilisation des codes courts pour envelopper le contenu peut être difficile, mais une chose que vous pouvez envisager de faire est d'envelopper uniquement le contenu dans les zones de contenu réelles des textes de présentation avec des codes courts et de laisser les titres visibles.

Pour la prochaine leçon intitulée « Chapitre 2 : Architecture de l'information », nous allons restreindre la page aux abonnés Premium uniquement. Pour cela, allez modifier la page et dans la case « Restreindre ce contenu » en haut de l'éditeur de page, sélectionnez Membres du ou des niveaux d'abonnement . Sélectionnez ensuite l'option « Membres de niveaux d'abonnement spécifiques. Sélectionnez ensuite « Premium ». Désormais, seules les personnes disposant d'un abonnement Premium pourront accéder à cette page.

Enregistrez vos modifications en mettant à jour la page.

Modifier votre page de redirection pour le contenu restreint

Lorsqu'un utilisateur essaie d'accéder au contenu restreint, vous pouvez rediriger l'utilisateur vers une certaine page. Puisque nous allons vouloir que l'utilisateur s'inscrive pour avoir accès au cours, il est logique que nous redirigeions l'utilisateur vers la page d'inscription. Pour ce faire, accédez au tableau de bord WordPress et accédez à Restreindre> Paramètres et cliquez sur l'onglet Divers. Recherchez l'option de redirection de la page et sélectionnez la page d'inscription dans la zone de saisie déroulante.

Enregistrer les options

Désormais, chaque fois qu'un utilisateur non abonné essaiera d'accéder à des pages restreintes, il sera automatiquement redirigé vers la page d'inscription.

Vous pouvez tester cela très rapidement. Enregistrez la page et ouvrez la page dans un navigateur de navigation privée pour voir ce qu'un utilisateur voit lorsqu'il n'est pas encore enregistré.

Remarque : Si vous le souhaitez, vous pouvez créer une page d'enregistrement supplémentaire pour ce cas d'utilisation afin d'inclure un appel à l'action plus spécifique tel que "Désolé, vous n'avez actuellement pas accès à ce contenu, veuillez vous inscrire ci-dessous". avec le formulaire d'inscription ci-dessous.

Ajouter votre passerelle de paiement

À ce stade, vous voudrez vous assurer que votre passerelle de paiement est intégrée à Restrict Content Pro. Pour ce faire, accédez à Restreindre > Paramètres et cliquez sur l' onglet Paiements . Là, vous pouvez choisir les passerelles que vous souhaitez activer ainsi que saisir les informations nécessaires pour intégrer la passerelle. Vous avez le choix entre neuf options, dont Stripe et Paypal.

Je n'entrerai pas dans les détails de leur configuration, mais mon conseil est de vérifier et de tester soigneusement vos passerelles de paiement pour vous assurer qu'elles fonctionnent. Vous ne voulez pas perdre d'argent.

Personnaliser vos notifications par e-mail

Restrict Content Pro vous permet de personnaliser un e-mail de notification à la fois pour le nouveau membre et pour l'administrateur chaque fois qu'un nouveau membre s'inscrit. Profitez de cette option en incluant un bon appel à l'action dans le corps de l'e-mail qui encourage l'utilisateur à commencer le cours avec un lien vers la première leçon. Vous pouvez trouver le paramètre d'e-mail en allant dans Restreindre > Paramètres et cliquez sur l'onglet E - mails .

Intégration optionnelle du marketing par e-mail

Vous pouvez avoir un compte Mailchimp ou Aweber auquel vous souhaitez ajouter des membres lors de leur inscription. Vous pouvez le faire avec l'un des nombreux modules complémentaires disponibles avec le plugin Restrict Content Pro. Accédez simplement à Restreindre > Modules complémentaires et recherchez la plate-forme de messagerie que vous souhaitez.

Et maintenant?

Maintenant que vous avez configuré votre site Web de cours en ligne, vous devrez encore terminer la configuration de tout votre contenu pour chaque page, en ajoutant des URL aux boutons, ainsi que de nombreux autres réglages. Mais les bases sont posées. Espérons que cela vous permette de créer une plate-forme sur laquelle vous pouvez facilement vous appuyer.

Dernières pensées

On pourrait affirmer qu'avec tous les excellents outils disponibles dans le monde de WordPress, vous pouvez obtenir un cours en ligne assez facilement. Mais alors il y a le défi de la conception. Faire en sorte que ces sites aient l'air décents n'est pas facile si le design n'est pas votre point fort. Heureusement, les mises en page Divi prédéfinies comme le « Learning Management Layout Pack » offrent une excellente solution au problème de conception. La mise en page est fonctionnelle et belle dès la sortie de la boîte.

Mais ensuite, il y a le problème de trouver les bons plugins pour transformer votre belle mise en page en un cours en ligne fonctionnel. Il existe de nombreux excellents plugins d'adhésion et systèmes de gestion de l'apprentissage avec des degrés de coût et de complexité variables. L'objectif de cet article était de vous permettre d'être opérationnel avec un site de cours en ligne attrayant avec une simple adhésion à faible coût. Pour ceux d'entre vous qui espèrent créer ceci en utilisant des plugins gratuits, désolé de vous décevoir. Je suis tout au sujet des plugins gratuits, mais j'ai pensé qu'il était préférable d'utiliser les versions Pro pour ce tutoriel car le résultat final vaut chaque centime à mon avis.

J'ai hâte de vous entendre dans les commentaires

À votre santé!