Creazione di un sito Web di gestione dell'apprendimento (LMS) con Divi

Pubblicato: 2017-10-30

Adoro seguire i corsi online. C'è qualcosa nell'iniziare un corso online ben progettato e ben organizzato con alcuni ottimi contenuti. Se fatti bene, questi corsi elettronici possono mantenerti motivato con un senso di realizzazione. Ma imparare da un ottimo corso elettronico e crearne uno sono due esperienze totalmente diverse. E nella mia esperienza, la creazione di un sito Web di gestione dell'apprendimento o di corsi elettronici può essere un processo travolgente.

In questo post, spero di eliminare l'intimidazione di creare il tuo corso elettronico mostrandoti come utilizzare il pacchetto di layout di gestione dell'apprendimento predefinito di Divi per creare un sito Web di corsi elettronici completamente funzionale.

Prima di iniziare a costruire, ecco una ripartizione di ciò che realizzeremo insieme:

      1. Creare una pagina della lezione utilizzando parti del layout esistente.
      2. Creare un Menu Corso da visualizzare in ogni pagina di lezione che mostri tutte le lezioni del corso.
      3. Usa il plugin WP Complete per dare agli utenti la possibilità di tenere traccia dei loro progressi per ogni corso.
      4. Utilizzare il plug-in Restrict Content Pro per impostare i livelli di abbonamento sia gratuito che a pagamento.
      5. Impara come progettare rapidamente le pagine di appartenenza in modo che corrispondano al sito Web utilizzando elementi del layout esistente.
      e altro ancora...

E, per soddisfare la tua curiosità, ecco un'anteprima della pagina della lezione che creerai con il pulsante Completa e la barra di avanzamento sopra il menu del corso nella barra laterale...

pagina della lezione

Ma prima, prepariamo le cose.

Creazione di un sito Web di gestione dell'apprendimento (LMS) con Divi

Iscriviti al nostro canale Youtube

Preparare tutto

#1 – Installa Divi

Assicurati di avere la versione più aggiornata di Divi installata. Ed è sempre bene avere anche un tema figlio attivo.

#2 – Carica il pacchetto di layout nella tua libreria Divi

Useremo il pacchetto di layout Learning Management (LMS) di Divi. Scarica il pacchetto di layout, decomprimilo e installa il file coding-school_All.json nella tua libreria Divi. Quindi crea nove nuove pagine utilizzando ciascuno dei loro layout corrispondenti.

#3 – Installa e attiva il plugin Restrict Content Pro

Questo è il plugin che utilizzeremo per la funzionalità di appartenenza del sito e-course. Lo utilizzeremo per impostare un abbonamento gratuito e premium (a pagamento) al corso.

#4 – Installa e attiva il plugin WP Complete Pro

Questo plugin verrà utilizzato per tenere i membri (o studenti) consapevoli dei loro progressi mentre completano ogni lezione di ogni corso. Ha fantastici grafici a cerchi e grafici a barre per mostrare i progressi e un comodo segno di spunta accanto a ogni lezione completata nel menu di navigazione.

Una volta che sei pronto, sei pronto per costruire il tuo e-corso.

Iniziamo.

Rinominare la pagina del corso

Il tuo pacchetto di layout viene fornito con un layout di pagina dei corsi.

pagina dei corsi

Ciascuno dei corsi elencati in quel layout dovrebbe (se prevedi di insegnare tutti quei corsi) collegarsi a una pagina del corso specifica che utilizza il layout della pagina del corso.

pagina del corso

Nota: Nota che ho sostituito il pulsante nell'intestazione della pagina del corso sopra con un modulo video. In questo modo non devo reindirizzare a una pagina diversa per mostrare l'anteprima del corso. Solo un'idea.

Come puoi vedere, per questo esempio, il layout della pagina del corso utilizza il corso UX Design, quindi vai avanti e modifica la pagina e cambia il nome della pagina del corso da "Course" a "UX Design". E aggiorna anche il tuo permalink.

cambia nome alla pagina del corso

Costruire la pagina della lezione

La tua nuova pagina del corso, ora denominata "UX Design", è suddivisa in capitoli (puoi anche considerarli come lezioni) con una breve descrizione di ciascuno. Ciascuno di questi capitoli/lezioni dovrà essere reindirizzato alla propria pagina della lezione. Per creare questa pagina della lezione, utilizzeremo il layout della pagina del corso e apporteremo alcune modifiche.

Il primo capitolo/lezione elencato nella pagina del corso di UX Design si chiama “Capitolo 1: Introduzione alle basi”. Costruiamo la nostra pagina della lezione per questo.

Vai avanti e aggiungi una nuova pagina e inserisci "Capitolo 1: Introduzione alle basi" per il titolo.

Poiché questa lezione è una pagina figlio della pagina del corso UX Design, fai clic sul menu a discesa padre all'interno della casella Attributi pagina nella barra laterale destra e seleziona UX Design come padre.

Quindi fai clic per utilizzare Divi Builder, fai clic su Aggiungi da libreria e seleziona il layout del corso.

aggiungi una nuova pagina di lezione

Salva la bozza

Regola il layout dell'intestazione

Ora fai clic per utilizzare Visual Builder per apportare alcune modifiche al layout di pagina. Per prima cosa, cambiamo un po' il layout della nostra intestazione nella sezione superiore. Dal visual builder, elimina il modulo immagine nella colonna di destra e il pulsante verde nella parte inferiore della prima colonna.

cancella immagine e pulsante

Fare quindi clic per modificare le impostazioni del modulo di testo in alto nella prima colonna e modificare il testo dell'intestazione h1 in "Capitolo 1: Introduzione alle nozioni di base".

aggiorna il titolo

Quindi cambia la struttura della colonna della riga in una colonna invece di due.

cambia riga

Ora la tua intestazione dovrebbe assomigliare a questa.

intestazione modificata

Cambia contenuto Blurb

Nella sezione speciale di seguito, modifica le impostazioni del primo blurb nella sezione dei contenuti a sinistra e aggiorna quanto segue:

Scheda Contenuto

Titolo: Parte 1
Contenuto: [Questo diventerà il tuo contenuto per il corso; Lascio il contenuto fittizio lì per ora]
Usa l'icona: S
Icona: seleziona l'icona della freccia a destra

aggiorna il contenuto del blurb

Nota: il colore dell'icona verrà preso dal colore dell'accento del tema impostato nel personalizzatore del tema, quindi assicurati di aggiornare il colore lì con un colore che corrisponda al sito.

Salva le impostazioni

Ora che hai creato un modulo blurb, possiamo usarlo come modello per suddividere ogni parte della lezione sulla pagina. Procedi e duplica il modulo che hai appena creato due volte (o tutte le parti che desideri) e aggiorna ciascuna con un titolo diverso (ad es. Parte 2, Parte 3, ecc.).

Quindi elimina gli altri blurb che non ci serviranno più.

Ora il tuo layout dovrebbe assomigliare a questo.

layout aggiornato

Aggiunta del widget della barra laterale

Aggiungi un modulo barra laterale sotto il modulo pulsanti nella barra laterale destra della sezione specialità. E, per ora, lascia semplicemente le impostazioni di contenuto predefinite che estrae il contenuto dell'area del widget della barra laterale. Eventualmente lo modificheremo non appena creeremo un'area widget personalizzata che includa il menu per il corso.

Nella scheda dei contenuti, aggiungi uno sfondo bianco al tuo modulo.

Per fare in modo che il modulo della barra laterale corrisponda al design della pagina, aggiorna le impostazioni nella scheda design come segue:

Margine personalizzato: -80 px in alto
Imbottitura personalizzata: 30 px in alto, 40 px a destra, 30 px in basso, 40 px a sinistra
Posizione orizzontale dell'ombra del riquadro: 0px
Posizione verticale Box Shadwo: 0px
Forza sfocatura ombra scatola: 60 px
Forza di diffusione dell'ombra della scatola: 0px
Colore ombra: rgba (71,74,182,0.12)

Stile di animazione: Zoom
Direzione dell'animazione: su
Intensità animazione: 20%
Opacità iniziale dell'animazione: 100%

Salva le impostazioni

Nota: è una buona idea procedere e rendere questo modulo globale in modo da dover apportare modifiche a un solo modulo per gli aggiornamenti futuri. Per fare ciò, seleziona aggiungi alla libreria, chiamalo "modulo barra laterale del menu lezione", seleziona per renderlo un modulo globale e fai clic su Salva.

Infine, elimina il modulo blurb con l'istruttore e il modulo del pulsante "Profilo completo". La tua pagina dovrebbe assomigliare a questa:

design del modulo della barra laterale

Salva la pagina

Ora che abbiamo creato una delle nostre pagine di lezione, salviamola nella nostra libreria in modo da poterla utilizzare per altre lezioni. Dal visual builder, fai clic sul pulsante "Aggiungi alla libreria" nel menu in basso, inserisci "Layout di pagina della lezione" per il nome del modello, quindi salvalo.

aggiungi alla libreria

Procedi e ripeti i passaggi precedenti per aggiungere altre due pagine di lezione. Solo che questa volta, invece di usare il layout di pagina del corso, usa il nuovo layout che hai creato chiamato "layout di pagina della lezione".

Una volta terminato, dovresti avere tre pagine di lezione create con i seguenti titoli:

1. Capitolo 1: Introduzione alle basi
2. Capitolo 2: Architettura dell'informazione
3. Capitolo 3: Design reattivo

tre lezioni

Creazione del menu del corso

Ora che hai creato le tue lezioni, possiamo creare il nostro menu del corso. Dalla dashboard di WordPress, vai su Aspetto > Menu .

Dalla pagina Menu, completare i seguenti passaggi:

1. Seleziona "Crea un nuovo menu"
2. Chiamalo "UX Design"
3. Seleziona le tre pagine/capitoli delle lezioni nel menu che hai appena creato.
4. Fare clic su Aggiungi al menu
5. Salva il menu

menu del corso creato

Crea l'area widget personalizzata

Per aggiungere il menu alla nostra pagina della lezione, dobbiamo prima creare un'area widget personalizzata per esso. Dal dashboard di WordPress, vai su Aspetto > Widget . Sotto le aree widget esistenti, individua la casella utilizzata per creare una nuova area widget. Inserisci il nome "UX Design" e fai clic su "Crea". Ora aggiorna la pagina. Ora dovresti vedere la nuova area widget personalizzata "UX Design". Trascina il widget Menu personalizzato all'interno dell'area widget "UX Design". Nel widget Menu personalizzato, seleziona il menu "UX Design". Quindi fare clic su Salva.

creare il menu del corso

Aggiorna il modulo della barra laterale della pagina della lezione con la nuova area widget

Ora che hai creato l'area del widget con il menu del corso, torna alle pagine del corso che hai creato e aggiorna il modulo della barra laterale per selezionare l'area del widget "UX Design". Ora il tuo menu dovrebbe apparire nella barra laterale.

aggiorna il widget della barra laterale

Nota: se hai reso globale il modulo della barra laterale, dovrai apportare questa regolazione solo una volta a questo modulo, gli altri due verranno aggiornati automaticamente.

A questo punto, abbiamo una base abbastanza buona per creare i nostri corsi e le nostre lezioni, quindi miglioriamo la nostra UX incorporando il monitoraggio della progressione del corso.

Aggiungi il monitoraggio della progressione del corso

L'aggiunta del monitoraggio della progressione del corso al tuo sito web del corso è un ottimo modo per aumentare l'esperienza dell'utente, il coinvolgimento e la motivazione durante la frequenza del corso. Per mostrare i progressi per ciascuno dei nostri corsi, utilizzerò il plug-in WP Complete Pro. Se non lo hai già fatto, assicurati di installare e attivare il plugin.

Una volta attivato il plugin, dalla dashboard di WordPress, vai su Impostazioni > WPComplete . Questo ti porterà alle impostazioni del plugin.

Aggiorna le seguenti impostazioni:

Tipo di ruolo dello studente: abbonato
Tipo di contenuto della lezione: tipi di pagina (poiché stiamo costruendo le nostre lezioni con pagine anziché post)
Deseleziona l'opzione "Aggiungi automaticamente il pulsante completo ai post e alle pagine abilitati per me". (aggiungeremo manualmente quei pulsanti con uno shortcode.)
Segna colore pulsante completo: #7377fc
Impostazioni grafico Colore primario: #7377fc

Quindi fare clic su Salva modifiche.

wpimpostazioni complete

Abilita i pulsanti Completa alle pagine della lezione

Ora che abbiamo la configurazione completa di WP. Aggiungiamo i nostri pulsanti "completa" alle pagine delle nostre lezioni.

Vai alla prima pagina della lezione che abbiamo creato intitolata "Capitolo 1: Introduzione alle basi" e fai clic per modificare la pagina. Dall'editor di pagina predefinito, trova la casella WPComplete nella parte inferiore della pagina. All'interno della casella, fare clic sull'opzione "Abilita pulsante Completa". Questo dirà al plugin che vuoi monitorare questa pagina per l'utente. Successivamente, nella casella di input subito dopo la scritta "This is a part of:" inserisci "UX Design" che è il nome del corso che desideri monitorare. Ecco come raggruppare le lezioni in ogni corso. Ad esempio, se hai tre lezioni e su ciascuna di quelle pagine di lezione selezioni "UX Design" come corso, quando un utente completa una pagina facendo clic sul pulsante completa, il plugin è in grado di registrare che l'utente ha completato il 33% (1 lezione su 3) di quel corso. Se hai più corsi, puoi semplicemente inserire un nuovo nome di corso nella casella e inizierà un nuovo gruppo di corsi.

pulsante di abilitazione

Aggiungi pulsanti completi alle pagine delle lezioni

Per aggiungere il pulsante "Completa" alla pagina della lezione, distribuisci il visual builder nella stessa pagina della lezione che stavi appena modificando.

Aggiungi un modulo di testo sotto l'ultimo modulo blurb in fondo alla pagina. In Impostazioni testo, inserisci il seguente shortcode nella casella del contenuto:

[wpc_button text="Fai clic su di me per completare!" complete_text=”YAY! Completato"]

Nota: è possibile modificare il testo e il testo completato visualizzato sul pulsante modificando il testo nello shortcode.

Salva le impostazioni

pulsante aggiungi

Questo shortcode crea un pulsante che consente all'utente di fare clic su di esso e registrare la lezione come completa.

pulsante completo

Nota che quando fai clic sul pulsante per completare la lezione, la voce di menu nella barra laterale per la lezione corrispondente svanirà leggermente e mostrerà un segno di spunta sulla destra.

pulsante gif

Vai avanti e salva quel modulo di testo che hai appena creato nella tua libreria con il nome "Pulsante Completa". Ora puoi usare quell'elemento della libreria per inserire lo stesso modulo su tutte le tue pagine, se necessario.

Nota: potresti voler andare avanti e salvare una nuova versione del layout della pagina della lezione nella tua libreria con il pulsante completo incluso in modo da non doverlo continuare ad aggiungere come elemento secondario durante la creazione di pagine di lezione future.

Aggiungi il grafico della barra di avanzamento alla barra laterale

Il plug-in WPComplete consente anche di visualizzare grafici che mostrano all'utente i propri progressi per un corso specifico. Aggiungeremo un grafico a barre per mostrare l'avanzamento del corso di UX Design nella barra laterale delle nostre lezioni.

Ricordi come abbiamo creato un'area widget personalizzata per il nostro corso di UX Design per visualizzare un menu del corso nella barra laterale della pagina della lezione? Bene, ora aggiungeremo un grafico a barre di avanzamento proprio sopra il menu del corso. In questo modo l'utente può vedere i propri progressi in un fantastico display visivo.

Per aggiungere il grafico a barre, vai alla dashboard di WordPress e vai su Aspetto > Widget . Quindi apri il widget personalizzato "UX Design" che hai creato in precedenza e trascina un widget HTML nell'area del widget sopra il widget del menu personalizzato che è attualmente lì. Nella casella del contenuto HTML, inserisci il seguente shortcode:

[wpc_progress_bar course=”UX Design”]

aggiungi grafico a barre

Questo shortcode visualizzerà il grafico a barre di avanzamento per il corso specifico "UX Design". Il nome di questo corso corrisponde a ciò che hai inserito nell'opzione della casella WPComplete accanto a "This is a part of:". Se hai un altro corso in futuro, inserisci il nuovo nome del corso al posto di "UX Design" quando aggiungi lo shortcode per quel corso.

Nota: per un elenco completo degli shortcode disponibili per questo plugin, vai al cheatsheet degli shortcode.

Ora vai al "Capitolo 1: Introduzione alle basi" per vedere come appare.

Fare clic sul pulsante Completa in fondo alla pagina. Ora controlla la barra laterale per vedere cosa è cambiato. Il grafico a barre ora mostra che hai completato il 33% del corso. E la voce di menu per la pagina della lezione ora appare sbiadita con un segno di spunta a destra per mostrare che quella lezione è stata completata.

istogramma

Abbastanza bello eh?

Rivediamo quello che abbiamo finora:

1. Abbiamo un nuovo modello di pagina della lezione da utilizzare come modello di riferimento per le lezioni future
2. Abbiamo un sistema per creare un menu personalizzato per ogni portata.
3. Abbiamo un sistema per impostare aree widget personalizzate per ogni corso per visualizzare un menu personalizzato per quel corso specifico nella pagina della lezione.
4. Abbiamo la possibilità di aggiungere un pulsante completo alle pagine delle nostre lezioni che, se cliccato, rappresenta l'avanzamento in un grafico a barre e nel collegamento del menu corrispondente.

La fase finale della trasformazione del nostro sito in un e-corso funzionante consiste nell'integrare i livelli di appartenenza al fine di limitare i nostri contenuti ai clienti paganti.

Costruire le pagine di appartenenza

Se non lo hai già fatto, installa e attiva il plug-in Restrict Content Pro. Una volta installato, il plugin creerà automaticamente 5 pagine per gestire il processo di adesione.

5 pagine

Se guardi ogni pagina nell'editor di pagina predefinito, vedrai che l'unica cosa aggiunta al contenuto per ogni pagina è uno shortcode. Ad esempio, se vai alla pagina Registrati, vedrai che l'unica cosa nell'editor dei contenuti è lo shortcode "[register_form]" che visualizzerà il modulo di registrazione.

codice corto

Poiché tutto ciò di cui hai bisogno per visualizzare il contenuto di ciascuna di queste pagine generate automaticamente sono gli shortcode, puoi facilmente creare un layout per queste pagine utilizzando Divi Builder. Ad esempio, se desideri un modo semplice e veloce per personalizzare la tua pagina di registrazione, vai alla pagina dei corsi e distribuisci il visual builder. Salva la sezione superiore del layout nella tua libreria con il nome "intestazione della pagina del corso elettronico" (o qualcosa del genere).

salva l'intestazione del corso

Quindi fai clic su una delle descrizioni che mostrano il corso e salva quel modulo nella tua libreria con il nome "casella del contenuto della descrizione dell'e-course" (o qualcosa del genere).

aggiungi modulo contenuto blurb

Ora vai alla tua pagina di registrazione, copia lo shortcode negli appunti (evidenzia lo shortcode e fai clic su ctrl + c). Quindi distribuire il Divi Builder, quindi il visual builder. Aggiungi la tua nuova sezione salvata chiamata "intestazione della pagina del corso elettronico" dalla tua libreria.

aggiungi sezione

Aggiorna il modulo di testo che contiene il titolo per dire "Registrati" invece di "Corsi".

rinominare registro

Quindi fai clic per aggiungere un modulo dalla tua libreria sotto i moduli correnti nella sezione. Seleziona il modulo "riquadro contenuto blurb e-course" che hai appena salvato nella libreria.

aggiungi blurb

Quindi aggiorna le impostazioni come segue:

Nella scheda dei contenuti...

Cancella titolo
Contenuto: inserisci lo shortcode [register_form] che hai salvato negli appunti premendo ctrl + v.
Cancella l'URL dell'immagine

Salva le impostazioni

blurb personalizzato

Nota: quello era il modo semplice e veloce. Ho usato un modulo blurb perché era il modo più rapido per portare lo stile del modulo. Probabilmente vorrai invece usare un modulo di testo.

Ora guarda la tua pagina di registrazione in un browser in incognito.

pagina di registrazione finale

Hai ancora bisogno di personalizzare il design del modulo (non lo farò in questo tutorial) ma questo può essere fatto facilmente con qualche ispezione e CSS personalizzato.

Puoi seguire lo stesso processo per aggiornare tutte e 5 le pagine di appartenenza generate dal plugin. Per visualizzare quali pagine vengono utilizzate per gestire l'appartenenza, vai alla dashboard di WordPress e naviga su Limita> Impostazioni e vedrai un elenco di tutte le pagine che vengono utilizzate nella scheda Generale.

Aggiungere un livello di abbonamento GRATUITO

Aggiungere un livello di abbonamento GRATUITO al tuo e-corso è un ottimo modo per acquisire lead, aggiungerli a una campagna di email marketing e venderli con un abbonamento premium. Per aggiungere un livello di abbonamento GRATUITO, vai alla dashboard di WordPress e vai a Limita > Livelli di abbonamento . Quindi compila le impostazioni per creare la tua iscrizione GRATUITA. Ecco un esempio di cosa inserire per un livello di abbonamento gratuito:

Nome: GRATIS
Descrizione: Questo è un abbonamento GRATUITO a Coding School.
Ruolo utente: abbonato

Lascia le altre opzioni alla loro impostazione predefinita.

Quindi fare clic su Aggiungi livello di iscrizione

aggiungi gratis

Aggiungere un livello di abbonamento Premium

Un abbonamento Premium è di solito dove puoi addebitare denaro per avere accesso a contenuti di livello superiore a cui non è possibile accedere con un abbonamento gratuito. Come un abbonamento GRATUITO, l'utente dovrebbe registrarsi sul modulo di registrazione. L'unica differenza è che verranno indirizzati a un modulo di pagamento per acquistare l'abbonamento. Se l'utente è già un membro GRATUITO, può passare a un abbonamento Premium utilizzando le informazioni di registrazione correnti e quindi pagando l'aggiornamento.

Per aggiungere un livello di abbonamento Premiumn, vai alla dashboard di WordPress e vai su Limita > Livelli di abbonamento. Quindi compila le impostazioni per creare il tuo abbonamento Premium. Ecco un esempio di cosa inserire per un livello di abbonamento Premium:

Nome: Premium
Descrizione: Questo è un abbonamento premium a Coding School
Durata: 1 anno
Prezzo: 29
Ruolo utente: abbonato

aggiungi premio

Limita le lezioni in base al livello di abbonamento

Ora che abbiamo creato i nostri livelli di abbonamento gratuito e Premium. Possiamo scegliere di limitare pagine/post o anche contenuti specifici in base al livello di abbonamento degli utenti. Il plugin rende questo processo davvero semplice. Andiamo avanti e limitiamo l'accesso alla prima lezione che abbiamo creato a un abbonamento GRATUITO. Per farlo, vai a modificare la pagina della lezione intitolata "Capitolo 1: Introduzione alle basi". Notare la casella "Limita questo contenuto" nella parte superiore dell'editor di pagina. Nella casella è presente una casella di input a discesa che consente di selezionare chi dovrebbe avere accesso al contenuto. Stai per selezionare Membri dei livelli di abbonamento . Una volta selezionato, vedrai apparire più opzioni. Seleziona la prima opzione che dice "Membri di qualsiasi livello di abbonamento. Questo perché vogliamo che anche i membri che avranno l'abbonamento premium abbiano accesso a questo contenuto.

aggiungi abbonamento gratuito

Nota: questa impostazione nasconderà l'intera pagina agli utenti non iscritti. Se desideri nascondere determinati contenuti della pagina e renderli disponibili solo agli abbonati Free o Premium, puoi utilizzare gli shortcode per avvolgere il contenuto che desideri nascondere. Dato che stiamo usando il generatore divi, l'uso degli shortcode per avvolgere il contenuto può essere difficile, ma una cosa che potresti considerare di fare è avvolgere solo il contenuto nelle caselle di contenuto effettivo dei blurb con gli shortcode e lasciare i titoli visibili.

Per la prossima lezione intitolata "Capitolo 2: Architettura dell'informazione", limiteremo la pagina ai soli abbonati Premium. Per farlo, vai a modificare la pagina e nella casella "Limita questo contenuto" nella parte superiore dell'editor della pagina, seleziona Membri del livello o dei livelli di abbonamento . Quindi seleziona l'opzione "Membri di livelli di abbonamento specifici. Quindi selezionare "Premium". Ora solo le persone con un abbonamento Premium potranno accedere a quella pagina.

Salva le modifiche aggiornando la pagina.

aggiungi abbonamento premium

Cambia la tua pagina di reindirizzamento per i contenuti con restrizioni

Quando un utente tenta di accedere al contenuto limitato, puoi reindirizzare l'utente a una determinata pagina. Poiché vorremmo che l'utente si registrasse per ottenere l'accesso al corso, ha senso reindirizzare l'utente alla pagina di registrazione. Per farlo, vai alla dashboard di WordPress e vai su Limita > Impostazioni e fai clic sulla scheda Varie. Trova l'opzione Reindirizza pagina e seleziona la pagina Registra dalla casella di input a discesa.

aggiungi reindirizzamento

Opzioni di salvataggio

Ora ogni volta che un utente non iscritto tenta di accedere a pagine riservate, verrà automaticamente reindirizzato alla pagina di registrazione.

Puoi testarlo molto velocemente. Salva la pagina e apri la pagina in un browser di navigazione in incognito per vedere cosa vede un utente quando non è ancora registrato.

Nota: se lo desideri, puoi creare una pagina di registrazione aggiuntiva per questo caso d'uso in modo da poter includere un invito all'azione più specifico come "Spiacenti, al momento non hai accesso a questo contenuto, registrati di seguito". con il modulo di registrazione sottostante.

Aggiungere il tuo gateway di pagamento

A questo punto vorrai assicurarti che il tuo gateway di pagamento sia integrato con Restrict Content Pro. Puoi farlo andando su Limita > Impostazioni e facendo clic sulla scheda Pagamenti . Lì puoi scegliere quali gateway vuoi abilitare e inserire le informazioni necessarie per integrare il gateway. Hai nove opzioni tra cui scegliere, tra cui Stripe e Paypal.

pagamento

Non entrerò nei dettagli coinvolti nella configurazione di questi, ma il mio consiglio è di assicurarti e testare accuratamente i tuoi gateway di pagamento per assicurarti che funzionino. Non vuoi perdere soldi.

Personalizzazione delle notifiche e-mail

Restrict Content Pro ti consente di personalizzare un'e-mail di notifica sia per il nuovo membro che per l'amministratore ogni volta che un nuovo membro si registra. Approfitta di questa opzione includendo un buon invito all'azione nel corpo dell'email che incoraggi l'utente ad iniziare il corso con un link alla prima lezione. Puoi trovare l'impostazione e-mail andando su Limita> Impostazioni e fai clic sulla scheda E- mail .

email

Integrazione dell'email marketing opzionale

Potresti avere un account Mailchimp o Aweber a cui vuoi aggiungere membri quando si registrano. Puoi farlo con uno dei tanti componenti aggiuntivi disponibili con il plug-in Restrict Content Pro. Vai su Limita > Componenti aggiuntivi e trova la piattaforma di posta elettronica che desideri.

add on

E adesso?

Ora che hai impostato il tuo sito web del corso elettronico, dovrai comunque finire di impostare tutti i tuoi contenuti per ogni pagina, aggiungendo gli URL ai pulsanti e molte altre modifiche. Ma le basi sono state poste. Speriamo che questo ti aiuti a configurare una piattaforma su cui puoi facilmente costruire.

Pensieri finali

Si potrebbe obiettare che con tutti i fantastici strumenti disponibili nel mondo di WordPress, puoi ottenere un corso online attivo e funzionante abbastanza facilmente. Ma poi c'è la sfida del design. Far sembrare questi siti decenti non è facile se il design non è il tuo forte. Fortunatamente, i layout Divi predefiniti come il "Learning Management Layout Pack" offrono un'ottima soluzione al problema di progettazione. Il layout è funzionale e bello fin da subito.

Ma poi c'è il problema di trovare i plugin giusti per trasformare il tuo bellissimo layout in un corso online funzionale. Esistono molti ottimi plug-in di appartenenza e sistemi di gestione dell'apprendimento con vari gradi di costi e complessità. L'obiettivo di questo post era di farti iniziare a lavorare con un sito di corsi elettronici di bell'aspetto con una semplice iscrizione a basso costo. Per quelli di voi che sperano di creare questo utilizzando plugin gratuiti, mi dispiace deludervi. Sono tutto per i plugin gratuiti, ma ho pensato che fosse meglio usare le versioni Pro per questo tutorial perché il risultato finale vale ogni centesimo secondo me.

Non vedo l'ora di sentirti nei commenti

Saluti!