Jamp;rsquoaime suivre des cours en ligne. Il est logique de commencer un cours en ligne bien conçu, bien organisé et riche en contenu. en sortez bien, ces cours en ligne permettront de rester motivé et damp;rsquoavoir un sentiment damp;rsquoaccomplissement. Mais apprendre un excellent cours en ligne et en créer un sont deux expériences complètement différentes. Damp;rsquoaprès mon expérience, la création damp;rsquoun site Web sur la gestion de lamp;rsquoapprentissage ou damp;rsquoun cours en ligne peut être un processus énorme. Dans jamp;rsquoespère éliminer la menace de créer mon propre cours en ligne en montrant comment créer un site Web de cours en ligne entièrement fonctionnel en utilisant la mise en page de gestion de lamp;rsquoapprentissage 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 damp;rsquoune 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 damp;rsquoabonnement 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 allez créer en utilisant le bouton Terminer au dessus du menu cours dans la barre latérale et la barre de progression
Mais damp;rsquoabord, préparons nous. Utilisez Divi pour créer un site Web de gestion de lamp;rsquoapprentissage (LMS) Abonnez à notre canal YouTube Prepare all 1 – installez Divi pour assurer que la dernière version de Divi est installée. Il est toujours bon damp;rsquoavoir un thème actif pour les enfants 2 – téléchargez les paquets de mise en page dans votre bibliothèque Divi nous utiliserons lamp;rsquoapprentissage 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 damp;rsquoadhésion au site Web du cours en ligne. Nous lamp;rsquoutiliserons 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 damp;rsquoun merveilleux Diagramme circulaire et à barres pour montrer vos progrès et damp;rsquoune coche pratique à côté de chaque cours terminé dans le menu de navigation. Une fois que êtes prêt, pouvez construire votre cours damp;rsquoé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 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 jamp;rsquoai remplacé le bouton dans le titre de la page de cours ci dessus par un formulaire vidéo. De cette façon, je namp;rsquoai pas à rediriger vers une autre page pour afficher lamp;rsquoaperçu du cours. Juste une idée. Comme 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 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 lamp;rsquoen tête Cliquez pour apporter des modifications à la mise en page en utilisant Visual Builder. Tout damp;rsquoabord, 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 lamp;rsquoonglet Contenu: Partie 1 contenu: [ceci deviendra votre contenu de cours je garderai temporairement le contenu virtuel] utilisez lamp;rsquoicône: s icône: Sélectionnez lamp;rsquoIcône Flèche droite
Remarque: la couleur de lamp;rsquoicône sera prise à partir de la couleur damp;rsquoaccent du thème définie dans le personnalisateur du thème, donc assurez que la couleur est mise à jour là Bas avec la couleur qui correspond au site. Enregistrer les paramètres maintenant que 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 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 namp;rsquoavons 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 quamp;rsquoelle est créée. Dans lamp;rsquoonglet 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 lamp;rsquoonglet 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 damp;rsquoanimation: zoom direction de lamp;rsquoanimation: activer lamp;rsquointensité de lamp;rsquoanimation: 20% opacité initiale de lamp;rsquoanimation: 100% enregistrer les paramètres Note: Camp;rsquoest une bonne idée Continuez et faites de ce module un module global afin que namp;rsquoayez quamp;rsquoà 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 lamp;rsquoinstructeur et le module bouton profil complet. Votre page devrait ressembler à ceci: Enregistrer la page maintenant que nous avons créé une page de cours, samp;rsquoil plaît enregistrer
Ou surveiller cette page pour les utilisateurs. Ensuite, dans la zone damp;rsquoentrée qui suit « Ceci est une partie de: », entrez « ux Design», qui est le nom du cours que souhaitez surveiller. Voici comment grouper les cours dans chaque cours. Par exemple, si avez trois cours et que sélectionnez « UX Design » comme cours sur chaque page de cours, lorsque lamp;rsquoutilisateur termine la page en cliquant sur le bouton complet, le plug in peut enregistrer 33% du cours que lamp;rsquoutilisateur a terminé (1 leçon sur 3). avez plus damp;rsquoun cours, il suffit damp;rsquoentrer 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 venez damp;rsquoé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 quamp;rsquoélément auxiliaire lors de la création de pages de cours futures. Lamp;rsquoajout damp;rsquoun diagramme à barres de progression au plug in wpccomplete de la barre latérale permet également de visualiser un graphique qui affiche les progrès damp;rsquoun cours particulier à lamp;rsquoutilisateur. Nous ajouterons un diagramme à barres à la barre latérale du cours pour montrer lamp;rsquoétat damp;rsquoavancement du cours de conception ux. Rappelez comment nous avons créé une zone de Widget personnalisée pour notre cours de conception ux afin damp;rsquoafficher 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 amp;gt widgets. Ensuite, ouvrez le Widget personnalisé UX Design que 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 =
Lamp;rsquoun est terminé. Pas mal, hein? Examinons ce qui samp;rsquoest passé jusquamp;rsquoà 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. 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 damp;rsquoadhésion afin de limiter notre contenu aux clients payants. ne lamp;rsquoavez 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 damp;rsquoadhésion. visualisez chaque page dans lamp;rsquoéditeur de page par défaut, verrez que le seul contenu ajouté au contenu de chaque page est un code court. Par exemple, si allez à la page damp;rsquoinscription, verrez le raccourci [formulaire] dans lamp;rsquoéditeur de contenu qui affiche uniquement le formulaire. Comme devez voir que le contenu de chaque page générée automatiquement est du Code court, pouvez facilement créer des mises en page pour ces pages en utilisant Divi Builder. Par exemple, si voulez personnaliser rapidement et facilement la page damp;rsquoinscription, allez à la page cours et déployez Visual Builder. Enregistrer le haut damp;rsquoune mise en page dans la bibliothèque sous forme damp;rsquoen 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 damp;rsquoenregistrement 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 venez damp;rsquoenregistrer dans la bibliothèque. Ensuite, mettez à jour les paramètres comme suit: dans lamp;rsquoonglet 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 damp;rsquoenregistrement de lamp;rsquoURL de lamp;rsquoimage Note: il samp;rsquoagit damp;rsquoune méthode rapide et facile. Jamp;rsquoa i utilisé un module Blurb parce que camp;rsquoest la façon la plus rapide de montrer le style du module. Vous voudrez peut être utiliser un formulaire texte. Consultez maintenant votre page damp;rsquoinscription 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 amp;gt paramètres, et verrez une liste de toutes les pages utilisées dans l’onglet général. Ajouter un niveau damp;rsquoabonnement gratuit ajouter un niveau damp;rsquoabonnement 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 lamp;rsquoabonnement. Une fois sélectionné, verrez plus damp;rsquooptions apparaître. Sélectionnez la première option, qui se lit comme suit: « Les membres de namp;rsquoimporte quel niveau damp;rsquoabonnement 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. voulez cacher quelque chose sur la page et le rendre disponible uniquement pour les abonnés gratuits ou avancés, pouvez envelopper le contenu que voulez cacher avec un code court. Comme nous utilisons le générateur Divi, il peut être difficile damp;rsquoenvelopper le contenu avec du Code court, mais une chose que pouvez envisager de faire est damp;rsquoenvelopper 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 lamp;rsquoinformation », nous limiterons lamp;rsquoutilisation de cette page aux abonnés de haut niveau. Pour ce faire, allez à la page damp;rsquoédition et, en haut de lamp;rsquoéditeur de page, dans la zone restreindre ce contenu, sélectionnez les membres au niveau de lamp;rsquoabonnement. Sélectionnez ensuite lamp;rsquooption membres pour un niveau damp;rsquoabonnement 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 lorsquamp;rsquoun utilisateur tente damp;rsquoaccéder au contenu restreint, il peut rediriger lamp;rsquoutilisateur vers une page spécifique. Puisque nous voulons que les utilisateurs samp;rsquoinscrivent pour accéder au cours, il est logique de rediriger les utilisateurs vers la page damp;rsquoinscription. Pour ce faire, allez sur le tableau de bord WordPress, allez aux limites amp;gt paramètres, puis cliquez sur l’onglet divers. Trouvez lamp;rsquooption rediriger la page et sélectionnez la page damp;rsquoenregistrement dans la zone damp;rsquoentrée déroulante
Créer un site d&rsquoadministration Utiliser Divi Learning (LMS)
