Créer un site d’administration Utiliser Divi Learning (LMS)

J’aime suivre des cours en ligne. Il est logique de commencer un cours en ligne bien conçu, bien organisé et riche en contenu. Si vous vous en sortez bien, ces cours en ligne vous permettront de rester motivé et d’avoir un sentiment d’accomplissement. Mais apprendre un excellent cours en ligne et en créer un sont deux expériences complètement différentes. D’après mon expérience, la création d’un site Web sur la gestion de l’apprentissage ou d’un cours en ligne peut être un processus énorme. Dans cet article, j’espère éliminer la menace de créer mon propre cours en ligne en vous montrant comment créer un site Web de cours en ligne entièrement fonctionnel en utilisant la mise en page de gestion de l’apprentissage par défaut de Divi.
Avant de commencer la construction, voici la répartition du travail que nous accomplirons ensemble: 1. Créez une page de cours en utilisant une partie d’une mise en page existante. 2. Créez un menu de cours qui sera affiché sur chaque page de cours pour afficher tous les cours de ce cours. 3. Utilisez le plug – in WP complete pour permettre aux utilisateurs de suivre les progrès de chaque cours. 4. Utilisez le plug – in restrict content pro pour définir les niveaux d’abonnement gratuits et payants. 5. Apprenez comment utiliser les éléments de mise en page existants pour concevoir rapidement votre page de membre pour correspondre à votre site Web. Et bien plus encore… Pour satisfaire votre curiosité, voici un aperçu de la page cours que vous allez créer en utilisant le bouton Terminer au – dessus du menu cours dans la barre latérale et la barre de progression… Mais d’abord, préparons – nous. Utilisez Divi pour créer un site Web de gestion de l’apprentissage (LMS) Abonnez – vous à notre canal YouTube Prepare all # 1 – installez Divi pour vous assurer que la dernière version de Divi est installée. Il est toujours bon d’avoir un thème actif pour les enfants # 2 – téléchargez les paquets de mise en page dans votre bibliothèque Divi nous utiliserons l’apprentissage pour gérer les paquets de mise en page (LMS)
Appuyez sur Divi. Téléchargez le paquet de mise en page, décompressez et installez le fichier codage – school _ all. Json dans la librairie Divi. Ensuite, créez neuf nouvelles pages en utilisant la mise en page appropriée.
3 – Installez et activez le plug – in restrict content pro, qui est le plug – in que nous utiliserons pour la fonction d’adhésion au site Web du cours en ligne. Nous l’utiliserons pour établir un abonnement gratuit (payant) au cours # 4 – Installez et activez le plug – in WP complete pro ce plug – in est utilisé pour informer les membres (ou les étudiants) de leurs progrès à la fin de chaque session de chaque cours. Il dispose d’un merveilleux Diagramme circulaire et à barres pour montrer vos progrès et d’une coche pratique à côté de chaque cours terminé dans le menu de navigation. Une fois que vous êtes prêt, vous pouvez construire votre cours d’électronique.
On y va. Renommer la page du cours votre paquet de mise en page est livré avec la mise en page du cours. Chaque cours énuméré dans cette mise en page devrait (si vous prévoyez enseigner tous ces cours) être relié à une page de cours spécifique qui utilise la mise en page de cours. Remarque: Notez que j’ai remplacé le bouton dans le titre de la page de cours ci – dessus par un formulaire 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, dans cet exemple, la mise en page du cours utilise ux pour concevoir le cours, puis continue à éditer la page et change le nom de la page du cours de cours de cours à UX Design. Et mettre à jour vos liens permanents. Construire une page de cours votre nouvelle page de cours (maintenant appelée « conception ux ») est divisée en plusieurs chapitres (que vous pouvez également considérer comme un cours) et donne une brève description de chaque chapitre. Chacun de ces chapitres \/ cours devrait être redirigé vers sa propre page de cours. Pour créer cette page de cours, nous utiliserons la mise en page P
Nous allons apporter quelques changements. Le premier chapitre \/ cours énuméré sur la page du cours de conception ux est intitulé « Chapitre 1: introduction de base ». Construisons notre page de cours pour ça. Continuez à ajouter de nouvelles pages et entrez « Chapitre 1: introduction aux bases » comme titre.
Comme ce cours est une page enfant de la page du cours de conception ux, cliquez sur le menu déroulant parent dans la zone de propriété de la page de la barre latérale droite, puis sélectionnez conception ux comme page parent. Puis cliquez pour utiliser Divi Builder, cliquez pour ajouter et sélectionner une mise en page de cours à partir de la bibliothèque. Enregistrer le brouillon ajuster immédiatement la mise en page de l’en – tête Cliquez pour apporter des modifications à la mise en page en utilisant Visual Builder. Tout d’abord, changeons légèrement la disposition du titre dans la section supérieure. À partir de Visual Builder, supprimez le module image dans la colonne de droite et le bouton vert en bas de la première colonne. Cliquez ensuite sur modifier les paramètres du formulaire de texte en haut de la première colonne et changez le texte du titre H1 en chapitre 1: démarrer. Changez ensuite la structure de colonne de la ligne en une colonne au lieu de deux. Votre titre devrait maintenant ressembler à ceci. Changez le contenu flou dans la section spéciale suivante, changez le premier réglage flou dans la Section de contenu de gauche et mettez à jour ce qui suit: titre de l’onglet Contenu: Partie 1 contenu: [ceci deviendra votre contenu de cours; je garderai temporairement le contenu virtuel] utilisez l’icône: s icône: Sélectionnez l’Icône Flèche droite Remarque: la couleur de l’icône sera prise à partir de la couleur d’accent du thème définie dans le personnalisateur du thème, donc assurez – vous que la couleur est mise à jour là – Bas avec la couleur qui correspond au site. Enregistrer les paramètres maintenant que vous avez créé un module Blurb, nous pouvons
Chaque partie du cours est divisée sur la page comme modèle. Continuez et copiez le formulaire que vous venez de créer deux fois (ou copiez plusieurs parties au besoin) et mettez à jour chaque formulaire avec un titre différent (p. ex., partie 2, partie 3, etc.). Par conséquent, nous éliminerons toute autre propagande dont nous n’avons plus besoin. Votre mise en page devrait maintenant ressembler à ceci. Ajouter un widget de barre latérale ajouter un module de barre latérale sous le module bouton de la barre latérale droite de la section spécialisée. Il suffit maintenant de conserver les paramètres de contenu par défaut pour extraire le contenu de la zone Widget de la barre latérale. Nous pouvons modifier une zone de Widget personnalisée qui contient un menu de cours dès qu’elle est créée. Dans l’onglet contenu, ajoutez un fond blanc au formulaire. Pour faire correspondre le module de barre latérale à la conception de la page, mettez à jour les paramètres de l’onglet conception comme suit:
Marge personnalisée: – 80 Px haut remplissage personnalisé: 30 Px haut, 40 Px droite, 30 Px bas, 40 Px cadre gauche ombres position horizontale: 0px position verticale boîte ombres wo: 0px boîte ombres force de flou: 60 Px boîte ombres force de diffusion: 0px ombre couleur: rgba (7174182,0.12) style d’animation: zoom direction de l’animation: activer l’intensité de l’animation: 20% opacité initiale de l’animation: 100% enregistrer les paramètres Note: C’est une bonne idée Continuez et faites de ce module un module global afin que vous n’ayez qu’à en changer un pour les mises à jour futures. Pour ce faire, sélectionnez ajouter à la bibliothèque, appelez – la module de barre latérale du menu cours, sélectionnez en faire un module global, puis cliquez sur enregistrer. Enfin, supprimez le module Blurb avec l’instructeur et le module bouton profil complet. Votre page devrait ressembler à ceci: Enregistrer la page maintenant que nous avons créé une page de cours, s’il vous plaît enregistrer
Ou surveiller cette page pour les utilisateurs. Ensuite, dans la zone d’entrée qui suit « Ceci est une partie de: », entrez « ux Design», qui est le nom du cours que vous souhaitez surveiller. Voici comment grouper les cours dans chaque cours. Par exemple, si vous avez trois cours et que vous sélectionnez « UX Design » comme cours sur chaque page de cours, lorsque l’utilisateur termine la page en cliquant sur le bouton complet, le plug – in peut enregistrer 33% du cours que l’utilisateur a terminé (1 leçon sur 3). Si vous avez plus d’un cours, il vous suffit d’entrer un nouveau nom de cours dans la case pour commencer un nouveau Groupe de cours. Ajouter le bouton complet à la page du cours pour ajouter le bouton Terminer à la page du cours, déployez Visual Builder sur la même page du cours que vous venez d’éditer. Ajoutez un formulaire texte sous le dernier formulaire bleu au bas de la page. Sous paramètres de texte, saisissez le raccourci suivant dans la zone de contenu: [WPC \ u button Text = \
En tant qu’élément auxiliaire lors de la création de pages de cours futures. L’ajout d’un diagramme à barres de progression au plug – in wpccomplete de la barre latérale vous permet également de visualiser un graphique qui affiche les progrès d’un cours particulier à l’utilisateur. Nous ajouterons un diagramme à barres à la barre latérale du cours pour montrer l’état d’avancement du cours de conception ux. Rappelez – vous comment nous avons créé une zone de Widget personnalisée pour notre cours de conception ux afin d’afficher le menu du cours dans la barre latérale de la page du cours? Nous allons maintenant ajouter un diagramme à barres de progression directement au – dessus du menu du cours. De cette façon, les utilisateurs peuvent voir leurs progrès dans un affichage visuel fantastique. Pour ajouter un diagramme à barres, allez au tableau de bord WordPress, puis allez à apparence > widgets. Ensuite, ouvrez le Widget personnalisé UX Design que vous avez créé précédemment et faites glisser le Widget HTML dans la zone Widget au – dessus du Widget de menu personnalisé qui existe actuellement. Dans la zone de contenu HTML, saisissez le Code court suivant: [WPC _ progress bar course = \
L’un est terminé. Pas mal, hein? Examinons ce qui s’est passé jusqu’à présent: 1. Nous avons un nouveau modèle de page de cours qui peut être utilisé comme modèle de référence pour les cours futurs 2. Nous avons un système pour créer des menus personnalisés pour chaque cours. 3. Nous avons un système qui peut définir une zone de Widget personnalisée pour chaque cours afin que le menu personnalisé de ce cours particulier puisse être affiché sur la page du cours. 4. Nous pouvons ajouter un bouton complet sur la page du cours. Si vous cliquez sur ce bouton, les progrès seront affichés dans le diagramme à barres et le lien de menu correspondant. La dernière étape de la transformation de notre site Web en un cours électronique efficace consiste à intégrer les niveaux d’adhésion afin de limiter notre contenu aux clients payants. Si vous ne l’avez pas encore fait, installez et activez le plug – in restrict content pro. Une fois installé, le plug – in crée automatiquement 5 pages pour gérer le processus d’adhésion. Si vous visualisez chaque page dans l’éditeur de page par défaut, vous verrez que le seul contenu ajouté au contenu de chaque page est un code court. Par exemple, si vous allez à la page d’inscription, vous verrez le raccourci [formulaire] dans l’éditeur de contenu qui affiche uniquement le formulaire. Comme vous devez voir que le contenu de chaque page générée automatiquement est du Code court, vous pouvez facilement créer des mises en page pour ces pages en utilisant Divi Builder. Par exemple, si vous voulez personnaliser rapidement et facilement la page d’inscription, allez à la page cours et déployez Visual Builder. Enregistrer le haut d’une mise en page dans la bibliothèque sous forme d’en – tête de cours en ligne (ou similaire). Cliquez ensuite pour afficher une description du cours et enregistrez le module dans votre bibliothèque sous le nom « C »
Contenu de la description électronique du cours (ou similaire). Allez maintenant à la page d’enregistrement et copiez le Code court dans le presse – papiers (mettez en évidence le Code court et cliquez sur Ctrl + c). Divi Builder est ensuite distribué, puis Visual Builder est distribué. Ajoutez une section nouvellement sauvegardée de la Bibliothèque appelée en – tête de cours en ligne. Mettre à jour le formulaire texte avec le titre, en remplaçant le titre par « inscription » au lieu de « cours ». Cliquez ensuite pour ajouter un module dans la bibliothèque sous le module courant de la section. Sélectionnez le module contenu du profil de cours en ligne que vous venez d’enregistrer dans la bibliothèque. Ensuite, mettez à jour les paramètres comme suit: dans l’onglet Contenu… Supprimer le contenu du titre: appuyez sur Ctrl + V pour entrer le raccourci [formulaire de registre] enregistré dans le presse – papiers. Supprimer les paramètres d’enregistrement de l’URL de l’image Note: il s’agit d’une méthode rapide et facile. J’a i utilisé un module Blurb parce que c’est la façon la plus rapide de montrer le style du module. Vous voudrez peut – être utiliser un formulaire texte. Consultez maintenant votre page d’inscription dans un navigateur anonyme. Vous devez encore personnaliser la conception du module (ce que je ne ferai pas dans ce tutoriel), mais cela peut être fait facilement avec quelques vérifications et personnaliser CSS. Vous pouvez suivre la même procédure pour mettre à jour les 5 pages membres générées par le plug – in. Pour voir les pages utilisées pour gérer l’adhésion, allez dans le tableau de bord WordPress et naviguez vers restrictions > paramètres, et vous verrez une liste de toutes les pages utilisées dans l’onglet général. Ajouter un niveau d’abonnement gratuit ajouter un niveau d’abonnement gratuit à votre cours en ligne est un bon moyen de capturer des pistes, de les ajouter à une campagne de marketing par courriel et de les vendre par abonnement avancé. Pour ajouter un niveau d’abonnement gratuit, allez sur le tableau de bord WordPress et allez à l
Vous permet de choisir qui devrait avoir accès au contenu. Vous êtes sur le point de sélectionner un membre au niveau de l’abonnement. Une fois sélectionné, vous verrez plus d’options apparaître. Sélectionnez la première option, qui se lit comme suit: « Les membres de n’importe quel niveau d’abonnement parce que nous voulons que les membres qui ont des abonnements avancés aient également accès à ce contenu. Remarque: Ce paramètre cache toute la page pour les utilisateurs non abonnés. Si vous voulez cacher quelque chose sur la page et le rendre disponible uniquement pour les abonnés gratuits ou avancés, vous pouvez envelopper le contenu que vous voulez cacher avec un code court. Comme nous utilisons le générateur Divi, il peut être difficile d’envelopper le contenu avec du Code court, mais une chose que vous pouvez envisager de faire est d’envelopper le contenu avec du Code court seulement dans la boîte de contenu Blurb réelle et de rendre le titre visible. Dans la prochaine leçon intitulée « Chapitre 2: architecture de l’information », nous limiterons l’utilisation de cette page aux abonnés de haut niveau. Pour ce faire, allez à la page d’édition et, en haut de l’éditeur de page, dans la zone restreindre ce contenu, sélectionnez les membres au niveau de l’abonnement. Sélectionnez ensuite l’option membres pour un niveau d’abonnement spécifique. Sélectionnez avancé. Seuls les utilisateurs qui ont des abonnements avancés peuvent maintenant accéder à la page. Enregistrez les modifications en mettant à jour la page. Modifier la page de redirection du contenu restreint lorsqu’un utilisateur tente d’accéder au contenu restreint, il peut rediriger l’utilisateur vers une page spécifique. Puisque nous voulons que les utilisateurs s’inscrivent pour accéder au cours, il est logique de rediriger les utilisateurs vers la page d’inscription. Pour ce faire, allez sur le tableau de bord WordPress, allez aux limites > paramètres, puis cliquez sur l’onglet divers. Trouvez l’option rediriger la page et sélectionnez la page d’enregistrement dans la zone d’entrée déroulante