Divi ile Öğrenim Yönetimi (LMS) Web Sitesi Oluşturma

Yayınlanan: 2017-10-30

İnternetten ders almayı seviyorum. Bazı harika içeriklerle iyi tasarlanmış, iyi organize edilmiş bir e-kurs başlatmakla ilgili bir şey var. İyi yapılırsa, bu e-kurslar sizi bir başarı duygusu ile motive edebilir. Ancak harika bir e-kurstan öğrenmek ve bir tane oluşturmak tamamen farklı iki deneyimdir. Ve deneyimlerime göre, bir Öğrenme Yönetimi veya E-Kurs web sitesi oluşturmak çok zor bir süreç olabilir.

Bu yazıda, tamamen işlevsel bir e-kurs web sitesi oluşturmak için Divi'nin önceden hazırlanmış Öğrenim Yönetimi Düzeni paketini nasıl kullanacağınızı göstererek kendi e-kursunuzu oluşturma korkusundan kurtulmayı umuyorum.

İnşa etmeye başlamadan önce, birlikte başaracaklarımızın bir dökümü:

      1. Mevcut düzenin parçalarını kullanarak bir Ders Sayfası oluşturun.
      2. Kurs için tüm dersleri gösteren her ders sayfasında görüntülenecek bir Kurs Menüsü oluşturun.
      3. Kullanıcılara her kurs için ilerlemelerini takip etme yeteneği vermek için WP Complete Plugin'i kullanın.
      4. Hem Ücretsiz hem de Ücretli üyelik seviyelerini ayarlamak için Restrict Content Pro eklentisini kullanın.
      5. Mevcut düzendeki öğeleri kullanarak üyelik sayfalarını web sitesine uyacak şekilde nasıl hızlı bir şekilde tasarlayacağınızı öğrenin.
      ve dahası…

Ve merakınızı gidermek için, kenar çubuğundaki kurs menüsünün üzerindeki tamamlama düğmesi ve ilerleme çubuğu ile oluşturacağınız ders sayfasının kısa bir özeti…

ders sayfası

Ama önce, işleri ayarlayalım.

Divi ile Öğrenim Yönetimi (LMS) Web Sitesi Oluşturma

Youtube Kanalımıza Abone Olun

Herşeyi Ayarlamak

#1 – Divi'yi yükleyin

Divi'nin en güncel sürümünün kurulu olduğundan emin olun. Ayrıca bir çocuk temasının da aktif olması her zaman iyidir.

#2 – Düzen Paketini Divi Kitaplığınıza Yükleyin

Divi's Learning Management (LMS) Layout Pack'i kullanacağız. Düzen paketini indirin, sıkıştırmasını açın ve coding-school_All.json dosyasını Divi Kitaplığınıza yükleyin. Ardından, ilgili düzenlerin her birini kullanarak dokuz yeni sayfa oluşturun.

#3 – Restrict Content Pro Eklentisini Kurun ve Etkinleştirin

Bu, e-kurs sitesinin üyelik işlevi için kullanacağımız eklentidir. Bunu, kursa ücretsiz ve premium (ücretli) bir abonelik oluşturmak için kullanacağız.

#4 – WP Complete Pro Eklentisini Kurun ve Etkinleştirin

Bu eklenti, üyelerin (veya öğrencilerin) her kursun her dersini tamamlarken ilerlemelerinden haberdar olmalarını sağlamak için kullanılacaktır. İlerlemeyi göstermek için harika daire ve çubuk grafik görsellerinin yanı sıra gezinme menüsünde tamamlanan her dersin yanında kullanışlı bir onay işareti vardır.

Her şey hazır olduğunda, e-kursunuzu oluşturmaya hazırsınız.

Başlayalım.

Kurs Sayfasını Yeniden Adlandır

Düzen paketiniz bir kurs sayfası düzeniyle birlikte gelir.

kurslar sayfası

Bu düzende listelenen derslerin her biri (tüm bu dersleri öğretmeyi planlıyorsanız), kurs sayfası düzenini kullanan belirli bir kurs sayfasına bağlantı vermelidir.

kurs sayfası

Not: Yukarıdaki kurs sayfasının başlığındaki düğmeyi bir video modülü ile değiştirdiğime dikkat edin. Bu şekilde kursun ön izlemesini göstermek için farklı bir sayfaya yönlendirmem gerekmiyor. Sadece bir fikir.

Gördüğünüz gibi, bu örnekte, kurs sayfası düzeni UX Tasarım kursunu kullanıyor, bu yüzden devam edin ve sayfayı düzenleyin ve Kurs Sayfası adını "Kurs" yerine "UX Tasarımı" olarak değiştirin. Ve kalıcı bağlantınızı da güncelleyin.

ders sayfasının adını değiştir

Ders Sayfasını Oluşturma

Artık “UX Design” olarak adlandırılan yeni kurs sayfanız, her birinin kısa bir açıklamasıyla bölümlere (bunları ders olarak da düşünebilirsiniz) ayrılmıştır. Bu bölümlerin/derslerin her birinin kendi ders sayfasına yönlendirilmesi gerekecektir. Bu ders sayfasını oluşturmak için ders sayfası düzenini kullanacağız ve bazı ayarlamalar yapacağız.

UX Design kurs sayfasında listelenen ilk bölüm/dersin adı “Bölüm 1: Temel Bilgilere Giriş”tir. Bunun için ders sayfamızı oluşturalım.

Devam edin ve yeni bir sayfa ekleyin ve başlık için “Bölüm 1: Temel Bilgilere Giriş” girin.

Bu ders, UX Tasarım kurs sayfasının bir alt sayfası olduğundan, sağ kenar çubuğundaki Sayfa Nitelikleri kutusunun içindeki üst açılır menüyü tıklayın ve üst öğe olarak UX Tasarım'ı seçin.

Ardından Divi Builder'ı kullanmak için tıklayın, Kitaplıktan Ekle'yi tıklayın ve Kurs Düzenini seçin.

yeni ders sayfası ekle

Taslağı kaydet

Başlık Düzenini Ayarlayın

Şimdi, sayfa düzeninde bazı ayarlamalar yapmak üzere Görsel Oluşturucu'yu kullanmak için tıklayın. Öncelikle üst bölümdeki başlığımızın düzenini biraz değiştirelim. Görsel oluşturucudan, sağ sütundaki görüntü modülünü ve ilk sütunun altındaki yeşil düğmeyi silin.

görüntüyü ve düğmeyi sil

Ardından, ilk sütundaki en üstteki metin modülünün ayarlarını düzenlemek için tıklayın ve h1 başlık metnini “Bölüm 1: Temel Bilgilere Giriş” olarak değiştirin.

başlığı güncelle

Ardından satırın sütun yapısını iki yerine bir sütun olarak değiştirin.

satırı değiştir

Şimdi başlığınız şöyle görünmelidir.

değiştirilen başlık

Bulanık İçeriği Değiştir

Aşağıdaki uzmanlık bölümünde, sol içerik bölümündeki ilk tanıtım yazısının ayarlarını düzenleyin ve aşağıdakileri güncelleyin:

İçerik Sekmesi

Başlık: 1. Bölüm
İçerik: [Bu, kurs içeriğiniz olacak; Şimdilik sahte içeriği orada bırakıyorum]
Simgeyi Kullan: EVET
Simge: sağ ok simgesini seçin

bulanık içeriği güncelle

Not: Simge rengi, tema özelleştiricide ayarlanan Tema Vurgu Renginden alınacaktır, bu nedenle oradaki rengi siteyle eşleşen bir renkle güncellediğinizden emin olun.

Ayarları kaydet

Artık oluşturulmuş bir tanıtım modülünüz olduğuna göre, bunu sayfadaki dersin her bir bölümünü bölmek için bir şablon olarak kullanabiliriz. Devam edin ve az önce oluşturduğunuz modülü iki kez çoğaltın (veya istediğiniz kadar parça) ve her birini farklı bir başlıkla güncelleyin (yani Kısım 2, Kısım 3, vb…).

Ardından, artık ihtiyaç duymayacağımız diğer tanıtım yazılarını silin.

Şimdi düzeniniz şöyle görünmelidir.

güncellenmiş düzen

Kenar Çubuğu Widget'ını Ekleme

Uzmanlık bölümünün sağ kenar çubuğundaki düğme modülünün altına bir Kenar Çubuğu Modülü ekleyin. Ve şimdilik, kenar çubuğu widget alanı içeriğini çeken varsayılan içerik ayarlarını bırakın. Kurs menüsünü içeren özel bir widget alanı oluşturur oluşturmaz bunu eninde sonunda değiştireceğiz.

İçerik sekmesi altında modülünüze beyaz bir arka plan ekleyin.

Kenar çubuğu modülünüzün sayfa tasarımıyla eşleşmesi için tasarım sekmesindeki ayarları aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu: -80px Üst
Özel Dolgu: 30px Üst, 40px Sağ, 30px Alt, 40px Sol
Kutu Gölgesi Yatay Konumu: 0px
Box Shadwo Dikey Konum: 0px
Kutu Gölge Bulanıklığı Gücü: 60px
Kutu Gölge Yayılma Gücü: 0px
Gölge Rengi: rgba(71,74,182,0.12)

Animasyon Stili: Yakınlaştır
Animasyon Yönü: Yukarı
Animasyon Yoğunluğu: 20%
Animasyon Opaklığı Başlatma: %100

Ayarları kaydet

Not: Gelecekteki güncellemeler için yalnızca bir modülde ayarlamalar yapmak zorunda kalmanız için bunu global bir modül yapmak iyi bir fikirdir. Bunu yapmak için kitaplığa ekle'yi seçin, "ders menüsü kenar çubuğu modülü" olarak adlandırın, Global Modül yapmak için seçin ve Kaydet'e tıklayın.

Son olarak, eğitmen ile tanıtım modülünü ve “Tam Profil” buton modülünü silin. Sayfanız şöyle görünmelidir:

kenar çubuğu modülü tasarımı

Sayfayı kaydet

Artık ders sayfalarımızdan birini oluşturduğumuza göre, diğer derslerde kullanabilmemiz için onu kitaplığımıza kaydedelim. Görsel oluşturucudan, alt menüdeki “Kitaplığa Ekle” düğmesine tıklayın, şablon adı için “Ders Sayfası Düzeni” girin ve ardından kaydedin.

Kütüphaneye ekle

Devam edin ve iki ders sayfası daha eklemek için yukarıdaki adımları tekrarlayın. Ancak bu sefer ders sayfası düzenini kullanmak yerine, oluşturduğunuz “ders sayfası düzeni” olarak adlandırdığınız yeni düzeni kullanın.

İşiniz bittiğinde, aşağıdaki başlıklarla oluşturulmuş üç ders sayfanız olmalıdır:

1. Bölüm 1: Temel Bilgilere Giriş
2. Bölüm 2: Bilgi Mimarisi
3. Bölüm 3: Duyarlı Tasarım

üç ders

Ders Menüsü Oluşturma

Artık derslerinizi oluşturduğunuza göre, ders menümüzü oluşturabiliriz. WordPress kontrol panelinden Görünüm > Menüler seçeneğine gidin.

Menüler sayfasından aşağıdaki adımları tamamlayın:

1. “Yeni Menü Oluştur”u seçin
2. “UX Tasarımı” olarak adlandırın
3. Yeni oluşturduğunuz menüden üç ders sayfasını/bölümünü seçin.
4. Menüye Ekle'ye tıklayın
5. Menüyü kaydedin

oluşturulan kurs menüsü

Özel Widget Alanı Oluşturun

Menüyü ders sayfamıza eklemek için öncelikle ona özel bir widget alanı oluşturmamız gerekiyor. WordPress Kontrol Panelinden Görünüm > Widget'lara gidin. Mevcut pencere öğesi alanlarının altında, yeni bir pencere öğesi alanı oluşturmak için kullanılan kutuyu bulun. “UX Design” adını girin ve “Oluştur”a tıklayın. Şimdi sayfayı yenileyin. Artık yeni özel “UX Design” widget alanını görmelisiniz. Özel Menü widget'ını "UX Design" widget alanının içine sürükleyin. Özel Menü widget'ında, "UX Tasarımı" menüsünü seçin. Ardından Kaydet'i tıklayın.

kurs menüsü oluştur

Yeni Widget Alanı ile Ders Sayfası Kenar Çubuğu Modülünü Güncelleyin

Widget alanınızı kurs menünüzle oluşturduğunuza göre, oluşturduğunuz kurs sayfalarına geri dönün ve "UX Design" widget alanını seçmek için kenar çubuğu modülünü güncelleyin. Şimdi menünüz kenar çubuğunda görünmelidir.

kenar çubuğu widget'ını güncelle

Not: Kenar çubuğu modülünü global yaptıysanız, bu ayarı bu modüle yalnızca bir kez yapmanız gerekecek, diğer ikisi otomatik olarak güncellenecektir.

Bu noktada, kurslarımızı ve derslerimizi oluşturmak için oldukça iyi bir temele sahibiz, bu yüzden kurs ilerleme takibini dahil ederek UX'imizi geliştirelim.

Kurs İlerleme Takibini Ekle

E-kurs web sitenize kurs ilerleme takibi eklemek, kursunuzu alırken kullanıcı deneyimini, katılımı ve motivasyonu artırmanın harika bir yoludur. Kurslarımızın her birinin ilerlemesini göstermek için WP Complete Pro eklentisini kullanacağım. Henüz eklentiyi kurduğunuzdan ve etkinleştirdiğinizden emin değilseniz.

Eklenti etkinleştirildikten sonra, WordPress Kontrol Panelinizden Ayarlar > WPComplete seçeneğine gidin. Bu sizi eklenti ayarlarına götürecektir.

Aşağıdaki ayarları güncelleyin:

Öğrenci Rol Türü: Abone
Ders İçerik Türü: Sayfa Türleri (derslerimizi yazı yerine sayfalarla oluşturduğumuz için)
“Benim için etkinleştirilmiş gönderilere ve sayfalara otomatik olarak tam düğme ekle” seçeneğinin işaretini kaldırın. (Bu düğmeleri bir kısa kodla manuel olarak ekleyeceğiz.)
Düğme Rengi Tamamlandı Olarak İşaretle: #7377fc
Grafik Ayarları Birincil Renk: #7377fc

Ardından Değişiklikleri Kaydet'e tıklayın.

wpcomplete ayarları

Ders Sayfalarına Tam Düğmeleri Etkinleştir

Artık WP Complete kurulumuna sahibiz. Ders sayfalarımıza “tamamla” butonlarımızı ekleyelim.

Oluşturduğumuz “Bölüm 1: Temel Bilgilere Giriş” başlıklı ilk ders sayfasına gidin ve sayfayı düzenlemek için tıklayın. Varsayılan sayfa düzenleyiciden, sayfanın altındaki WPComplete kutusunu bulun. Kutunun içinde, “Tamamlandı düğmesini etkinleştir” seçeneğine tıklayın. Bu, eklentiye bu sayfayı kullanıcı için izlemek istediğinizi söyleyecektir. Ardından, “This is a part of:” yazdıktan hemen sonra giriş kutusuna izlemek istediğiniz kursun adı olan “UX Design” girin. Dersleri her dersin altında bu şekilde gruplandırırsınız. Örneğin, üç dersiniz varsa ve bu ders sayfalarının her birinde ders olarak “UX Design”ı seçerseniz, bir kullanıcı tamamla düğmesine tıklayarak bir sayfayı tamamladığında eklenti, kullanıcının %33'ü tamamladığını kaydedebilir. (1 dersten 1) o kursun. Birden fazla dersiniz varsa, kutuya yeni bir kurs adı girebilirsiniz ve yeni bir kurs grubu başlatılacaktır.

etkinleştir düğmesi

Ders Sayfalarına Tam Düğmeler Ekle

Ders sayfanıza "Tamamla" düğmesini eklemek için görsel oluşturucuyu az önce düzenlediğiniz ders sayfasına dağıtın.

Sayfanın altındaki son tanıtım modülünün altına bir metin modülü ekleyin. Metin Ayarlarında, içerik kutusuna aşağıdaki kısa kodu girin:

[wpc_button text=”Tamamlamak için bana tıklayın!” Complete_text=”YAY! Tamamlanmış"]

Not: Kısa koddaki metni değiştirerek düğmede görüntülenen metni ve tamamlanmış metni değiştirebilirsiniz.

Ayarları kaydet

düğme ekle

Bu kısa kod, kullanıcının üzerine tıklamasını ve dersi tamamlanmış olarak kaydetmesini sağlayan bir düğme oluşturur.

tamamla düğmesi

Dersi tamamlamak için düğmeye tıkladığınızda, ilgili ders için kenar çubuğundaki menü öğesinin hafifçe söneceğine ve sağında bir onay işareti görüntüleneceğine dikkat edin.

düğme gif

Devam edin ve az önce oluşturduğunuz metin modülünü “Complete Button” adıyla kitaplığınıza kaydedin. Artık bu kitaplık öğesini gerektiği gibi tüm sayfalarınıza aynı modüle girmek için kullanabilirsiniz.

Not: İleride ders sayfalarını oluştururken ikincil bir öğe olarak eklemeye devam etmek zorunda kalmamak için ders sayfası düzeninizin yeni bir sürümünü kitaplığınıza eksiksiz düğmesi dahil olarak kaydetmek isteyebilirsiniz.

Kenar Çubuğunuza İlerleme Çubuğu Grafiği ekleyin

WPComplete eklentisi ayrıca, kullanıcıya belirli bir kurs için ilerlemelerini gösteren grafikleri görüntülemenize olanak tanır. UX Design kursunun ilerlemesini göstermek için derslerimizin kenar çubuğuna bir çubuk grafik ekleyeceğiz.

Ders sayfası kenar çubuğunda bir kurs menüsü görüntülemek için UX Tasarım kursumuz için nasıl özel bir widget alanı oluşturduğumuzu hatırlıyor musunuz? Şimdi kurs menümüzün hemen üstüne bir ilerleme çubuğu grafiği ekleyeceğiz. Bu şekilde kullanıcı, ilerlemelerini harika bir görsel ekranda görebilir.

Çubuk grafiği eklemek için WordPress kontrol panelinize gidin ve Görünüm > Pencere Öğeleri'ne gidin. Ardından, daha önce oluşturduğunuz "UX Design" özel widget'ını açın ve bir HTML widget'ını, o anda orada bulunan özel menü widget'ının üstündeki widget alanına sürükleyin. HTML içerik kutusuna aşağıdaki kısa kodu girin:

[wpc_progress_bar Course=”UX Tasarımı”]

çubuk grafik ekle

Bu kısa kod, belirli “UX Design” kursu için ilerleme çubuğu grafiğini görüntüler. Bu kurs adı, "Bu, şunun bir parçasıdır:" seçeneğinin yanındaki WPComplete kutusu seçeneğine koyduğunuza karşılık gelir. Gelecekte başka bir dersiniz varsa, o dersin kısa kodunu eklerken “UX Design” yerine yeni ders adını girmeniz yeterlidir.

Not: Bu eklenti için kullanılabilen kısa kodların tam listesi için kısa kodlar hile sayfasına gidin.

Şimdi nasıl göründüğünü görmek için “Bölüm 1: Temel Bilgilere Giriş”e gidin.

Sayfanın altındaki Tamamla düğmesine tıklayın. Şimdi nelerin değiştiğini görmek için kenar çubuğuna bakın. Çubuk grafik artık kursun %33'ünü tamamladığınızı gösteriyor. Ve ders sayfasının menü öğesi artık o dersin tamamlandığını göstermek için sağda bir onay işaretiyle soluk görünüyor.

Çubuk grafiği

Çok güzel ha?

Şimdiye kadar sahip olduklarımızı gözden geçirelim:

1. İleriye dönük dersler için şablon olarak hizmet verecek yeni bir ders sayfası şablonumuz var.
2. Her kurs için özel bir menü oluşturmak için bir sistemimiz var.
3. Ders sayfasında o belirli kurs için özel menüyü görüntülemek için her kurs için özel widget alanları ayarlamak için bir sistemimiz var.
4. Ders sayfalarımıza tıklandığında ilerlemeyi bir çubuk grafikte ve ilgili menü bağlantısında gösteren tam bir düğme ekleme olanağımız var.

Sitemizi işleyen bir e-kursa dönüştürmenin son aşaması, içeriğimizi ödeme yapan müşterilerle sınırlandırmak için üyelik seviyelerini entegre etmektir.

Üyelik Sayfalarını Oluşturma

Henüz yapmadıysanız, Restrict Content Pro eklentisini kurun ve etkinleştirin. Eklenti yüklendikten sonra üyelik sürecini yürütmek için otomatik olarak 5 sayfa oluşturacaktır.

5 sayfa

Varsayılan sayfa düzenleyicide her sayfaya bakarsanız, her sayfa için içeriğe eklenen tek şeyin bir kısa kod olduğunu göreceksiniz. Örneğin, Kayıt sayfasına giderseniz, içerik düzenleyicideki tek şeyin kayıt formunu gösterecek olan “[kayıt_formu]” kısa kodu olduğunu göreceksiniz.

kısa kod

Bu otomatik oluşturulan sayfaların her birinin içeriğini görüntülemek için ihtiyacınız olan tek şey kısa kodlar olduğundan, Divi Builder'ı kullanarak bu sayfalar için kolayca bir düzen oluşturabilirsiniz. Örneğin, kayıt sayfanızı özelleştirmenin hızlı ve kolay bir yolunu istiyorsanız, Kurslar Sayfanıza gidin ve görsel oluşturucuyu dağıtın. Düzenin üst bölümünü kitaplığınıza “e-ders sayfa başlığı” (veya buna benzer bir şey) adıyla kaydedin.

kurs başlığını kaydet

Ardından kursu gösteren tanıtım yazılarından birine tıklayın ve o modülü “e-kurs tanıtım yazısı içerik kutusu” (veya buna benzer bir şey) adıyla kitaplığınıza kaydedin.

bulanık içerik modülü ekle

Şimdi Kayıt sayfanıza gidin, kısa kodu panonuza kopyalayın (kısa kodu vurgulayın ve ctrl + c'ye tıklayın). Ardından Divi Builder'ı, ardından görsel oluşturucuyu dağıtın. Kitaplığınızdan “e-ders sayfa başlığı” adlı yeni kaydettiğiniz bölümü ekleyin.

bölüm ekle

Başlığı içeren metin modülünü “Kurslar” yerine “Kayıt Ol” diyecek şekilde güncelleyin.

kaydı yeniden adlandır

Ardından bölümdeki mevcut modüller altında kütüphanenizden bir modül eklemek için tıklayın. Kütüphaneye yeni kaydettiğiniz “e-kurs tanıtıcı içerik kutusu” modülünü seçin.

tanıtım yazısı ekle

Ardından ayarları aşağıdaki gibi güncelleyin:

İçerik sekmesi altında…

Başlığı Sil
İçerik: ctrl + v tuşlarına basarak panonuza kaydettiğiniz [register_form] kısa kodunu girin.
Resim url'sini sil

Ayarları kaydet

özel tanıtım yazısı

Not: Bu hızlı ve kolay yoldu. Bir tanıtım modülü kullandım çünkü bu modülün stilini ortaya çıkarmanın en hızlı yoluydu. Muhtemelen bunun yerine bir metin modülü kullanmak isteyeceksiniz.

Şimdi gizli bir tarayıcıda kayıt sayfanıza bakın.

son kayıt sayfası

Yine de formun tasarımını özelleştirmeniz gerekiyor (bunu bu eğitimde yapmayacaksınız), ancak bu, bazı inceleme ve özel CSS ile kolayca yapılabilir.

Eklenti tarafından oluşturulan 5 üyelik sayfasının tamamını güncellemek için aynı işlemi takip edebilirsiniz. Üyeliği yönetmek için hangi sayfaların kullanıldığını görmek için, WordPress panosuna gidin ve Kısıtla > Ayarlar'a gidin; Genel sekmesi altında kullanılan tüm sayfaların bir listesini göreceksiniz.

ÜCRETSİZ Abonelik Seviyesi Ekleme

E-kursunuza ÜCRETSİZ bir abonelik düzeyi eklemek, olası satışları yakalamanın, onları bir e-posta pazarlama kampanyasına eklemenin ve onlara premium üyelik üzerinden satış yapmanın harika bir yoludur. ÜCRETSİZ Abonelik düzeyi eklemek için WordPress Kontrol Paneli'ne gidin ve Kısıtla > Abonelik Düzeyleri'ne gidin. Ardından ÜCRETSİZ üyeliğinizi oluşturmak için ayarları doldurun. Ücretsiz abonelik düzeyi için ne girileceğine ilişkin bir örnek:

İsim: ÜCRETSİZ
Açıklama: Bu, Kodlama Okulu'na ÜCRETSİZ bir aboneliktir.
Kullanıcı Rolü: Abone

Diğer seçenekleri varsayılan ayarlarında bırakın.

Ardından Üyelik Düzeyi Ekle'ye tıklayın

ücretsiz ekle

Premium Abonelik Seviyesi Ekleme

Premium Üyelik, genellikle ücretsiz üyelikle erişilemeyen daha yüksek seviyeli içeriğe erişmek için para talep edebileceğiniz yerdir. ÜCRETSİZ üyelik gibi, kullanıcının kayıt formuna kaydolması gerekir. Tek fark, aboneliği satın almak için bir ödeme formuna yönlendirilecek olmalarıdır. Kullanıcı zaten ÜCRETSİZ üyeyse, mevcut kayıt bilgilerini kullanarak ve ardından yükseltme için ödeme yaparak Premium Aboneliğe yükseltebilir.

Premiumn Abonelik Düzeyi eklemek için WordPress Kontrol Paneline gidin ve Kısıtla > Abonelik Düzeyleri'ne gidin. Ardından Premium aboneliğinizi oluşturmak için ayarları doldurun. Premium abonelik Düzeyi için ne girileceğine dair bir örnek:

İsim: Premium
Açıklama: Bu, Kodlama Okulu'na premium aboneliktir
Süre: 1 yıl
Fiyat: 29
Kullanıcı Rolü: Abone

prim ekle

Dersleri Abonelik Düzeyine Göre Kısıtla

Artık Ücretsiz ve Premium Abonelik Seviyelerimizi oluşturduk. Kullanıcıların abonelik düzeyine göre sayfaları/yayınları ve hatta belirli içeriği kısıtlamayı seçebiliriz. Eklenti bu işlemi gerçekten basitleştirir. Hadi bir gidelim ve oluşturduğumuz ilk derse erişimi ÜCRETSİZ abonelikle kısıtlayalım. Bunu yapmak için, “Bölüm 1: Temel Bilgilere Giriş” başlıklı Ders Sayfasını düzenlemeye gidin. Sayfa düzenleyicinin üst kısmındaki "Bu içeriği kısıtla" kutusuna dikkat edin. Kutuda, içeriğe kimlerin erişebileceğini seçmenize olanak tanıyan bir açılır giriş kutusu bulunur. Abonelik düzeyi/düzeylerinin üyelerini seçeceksiniz. Seçildikten sonra, daha fazla seçeneğin göründüğünü göreceksiniz. “Herhangi bir abonelik seviyesinin/düzeylerinin üyeleri” yazan ilk seçeneği seçin. Bunun nedeni, premium aboneliğe sahip olacak üyelerin de bu içeriğe erişmesini istememizdir.

ücretsiz abonelik ekle

Not: Bu ayar, tüm sayfayı abone olmayan kullanıcılardan gizleyecektir. Sayfadaki belirli içerik parçalarını gizlemek ve yalnızca Ücretsiz veya Premium abonelerin kullanımına sunmak istiyorsanız, gizlemek istediğiniz içeriği sarmak için kısa kodlar kullanabilirsiniz. Divi oluşturucuyu kullandığımızdan, içeriği sarmak için kısa kodları kullanmak zor olabilir, ancak yapmayı düşünebileceğiniz bir şey, yalnızca tanıtım yazılarının gerçek içerik kutularındaki içeriği kısa kodlarla sarmak ve başlıkları görünür bırakmaktır.

“Bölüm 2: Bilgi Mimarisi” başlıklı bir sonraki ders için sayfayı yalnızca Premium abonelerle sınırlayacağız. Bunu yapmak için sayfayı düzenlemeye gidin ve sayfa düzenleyicinin üst kısmındaki "Bu içeriği kısıtla" kutusunda Abonelik düzeyi/düzeylerinin üyeleri öğesini seçin. Ardından “Belirli abonelik seviyelerinin üyeleri” seçeneğini seçin. Ardından “Premium”u seçin. Artık yalnızca Premium aboneliği olan kişiler bu sayfaya erişebilecek.

Sayfayı güncelleyerek değişikliklerinizi kaydedin.

premium abonelik ekle

Kısıtlı İçerik için Yönlendirme Sayfanızı Değiştirin

Bir kullanıcı kısıtlanmış içeriğe erişmeye çalıştığında, kullanıcıyı belirli bir sayfaya yönlendirebilirsiniz. Kullanıcının derse giriş yapabilmesi için kayıt olmasını isteyeceğimiz için kullanıcıyı kayıt sayfasına yönlendirmemiz mantıklı olacaktır. Bunu yapmak için WordPress panosuna gidin ve Kısıtla > Ayarlar'a gidin ve Çeşitli sekmesine tıklayın. Sayfayı Yönlendir seçeneğini bulun ve açılır giriş kutusundan Kayıt sayfasını seçin.

yönlendirme ekle

Seçenekleri Kaydet

Artık abone olmayan bir kullanıcı kısıtlı sayfalara erişmeye çalıştığında, otomatik olarak Kayıt sayfasına yönlendirilecekler.

Bunu çok hızlı test edebilirsiniz. Bir kullanıcının henüz kayıtlı olmadığında ne gördüğünü görmek için sayfayı kaydedin ve sayfayı gizli bir tarayıcıda açın.

Not: İsterseniz bu kullanım örneği için ek bir kayıt sayfası oluşturabilirsiniz, böylece "Üzgünüz, şu anda bu içeriğe erişiminiz yok, lütfen aşağıdan kaydolun" gibi daha spesifik bir harekete geçirici mesaj ekleyebilirsiniz. bunun altındaki kayıt formu ile.

Ödeme ağ geçidinizi ekleme

Bu noktada, ödeme ağ geçidinizin Restrict Content Pro ile entegre olduğundan emin olmak isteyeceksiniz. Bunu Kısıtla > Ayarlar'a gidip Ödemeler sekmesini tıklayarak yapabilirsiniz. Orada hangi ağ geçitlerini etkinleştirmek istediğinizi seçebilir ve ağ geçidini entegre etmek için gereken bilgileri girebilirsiniz. Stripe ve Paypal dahil olmak üzere dokuz seçeneğiniz var.

Ödeme

Bunları ayarlamakla ilgili ayrıntılara girmeyeceğim, ancak tavsiyem, çalıştıklarından emin olmak için ödeme ağ geçitlerinizi iyice test etmeniz ve emin olmanızdır. Para kaybetmek istemezsin.

E-posta Bildirimlerinizi özelleştirme

Restrict Content Pro, yeni bir üye kaydolduğunda hem yeni üye hem de yönetici için bir bildirim e-postasını özelleştirmenize olanak tanır. Kullanıcıyı ilk dersin bağlantısıyla kursa başlamaya teşvik eden e-posta gövdesine iyi bir harekete geçirici mesaj ekleyerek bu seçenekten yararlanın. E-posta ayarını Kısıtla > Ayarlar'a giderek ve E-postalar sekmesini tıklayarak bulabilirsiniz.

e-postalar

İsteğe Bağlı E-posta Pazarlama Entegrasyonu

Kayıt olduklarında üye eklemek istediğiniz bir Mailchimp veya Aweber hesabınız olabilir. Bunu, Restrict Content Pro eklentisinde bulunan birçok eklentiden biriyle yapabilirsiniz. Kısıtla > Eklentiler'e gidin ve istediğiniz e-posta platformunu bulun.

eklentiler

Şimdi ne var?

Artık e-kurs web sitenizi kurduğunuza göre, her sayfa için tüm içeriğinizi ayarlamayı, düğmelere url'leri eklemeyi ve diğer birçok ince ayarı tamamlamanız gerekecek. Ama temel atıldı. Umarım bu, kolayca üzerine inşa edebileceğiniz bir platform kurmanızı sağlar.

Son düşünceler

WordPress dünyasındaki tüm harika araçlarla, çevrimiçi bir kursu oldukça kolay bir şekilde başlatabileceğinizi söyleyebiliriz. Ama sonra tasarımın zorluğu var. Tasarım sizin yeteneğiniz değilse, bu sitelerin düzgün görünmesini sağlamak kolay değildir. Neyse ki, “Öğrenme Yönetimi Düzen Paketi” gibi önceden hazırlanmış Divi düzenleri, tasarım sorununa harika bir çözüm sunuyor. Düzen, kutudan çıkar çıkmaz işlevsel ve güzel.

Ancak, güzel düzeninizi işlevsel bir çevrimiçi kursa dönüştürmek için doğru eklentileri bulma sorunu var. Değişen derecelerde maliyet ve karmaşıklığa sahip birçok harika üyelik eklentisi ve Öğrenim Yönetim Sistemi var. Bu gönderinin amacı, sizi düşük maliyetle basit üyelik ile harika görünümlü bir e-kurs sitesi ile çalışır duruma getirmekti. Bunu ücretsiz eklentiler kullanarak oluşturmayı umanlar için, hayal kırıklığına uğrattığım için üzgünüm. Tamamen ücretsiz eklentiler hakkındayım, ancak bu eğitim için Pro sürümlerini kullanmanın en iyisi olduğunu düşündüm çünkü sonuç bence her kuruşa değer.

yorumlarda sizden haber bekliyorum

Şerefe!