إنشاء موقع ويب لإدارة التعلم (LMS) مع Divi

أنا أحب أخذ الدورات عبر الإنترنت. هناك شيء ما يتعلق ببدء دورة إلكترونية جيدة التصميم وجيدة التنظيم مع بعض المحتوى الرائع. إذا تم إجراؤها بشكل جيد ، يمكن لهذه الدورات الإلكترونية أن تبقيك متحمسًا بشعور بالإنجاز. لكن التعلم من دورة إلكترونية رائعة وإنشاء واحدة هما تجربتان مختلفتان تمامًا. وفي تجربتي ، يمكن أن يكون إنشاء موقع ويب لإدارة التعلم أو الدورة التدريبية الإلكترونية عملية مرهقة.

في هذا المنشور ، آمل أن أتخلص من التخويف الناتج عن إنشاء الدورة التدريبية الإلكترونية الخاصة بك من خلال توضيح كيفية استخدام حزمة تخطيط إدارة التعلم الأولية من Divi لإنشاء موقع ويب للدورة التدريبية الإلكترونية يعمل بكامل طاقته.

قبل أن نبدأ في البناء ، إليك تفصيل لما سنحققه معًا:

1. قم بإنشاء صفحة درس باستخدام أجزاء من التخطيط الحالي.
2. قم بإنشاء قائمة الدورة التدريبية ليتم عرضها في كل صفحة درس تعرض جميع الدروس الخاصة بالدورة التدريبية.
3. استخدم WP Complete Plugin لمنح المستخدمين القدرة على تتبع تقدمهم في كل دورة.
4. استخدم المكون الإضافي Restrict Content Pro لإعداد مستويات العضوية المجانية والمدفوعة.
5. تعرف على كيفية تصميم صفحات العضوية بسرعة لمطابقة موقع الويب باستخدام عناصر من التخطيط الحالي.
و اكثر…

ولإرضاء فضولك ، إليك لمحة سريعة عن صفحة الدرس التي ستنشئها باستخدام الزر الكامل وشريط التقدم أعلى قائمة الدورة التدريبية في الشريط الجانبي ...

لكن أولاً ، دعنا نجهز الأمور.

إنشاء موقع ويب لإدارة التعلم (LMS) مع Divi

اشترك في قناتنا على اليوتيوب

إعداد كل شيء

# 1 - تثبيت Divi

تأكد من تثبيت أحدث إصدار من Divi. ومن الجيد دائمًا أن يكون لديك موضوع فرعي نشط أيضًا.

# 2 - قم بتحميل حزمة التخطيط إلى مكتبة Divi الخاصة بك

سنستخدم حزمة تخطيط إدارة التعلم (LMS) من Divi. قم بتنزيل حزمة التخطيط وفك ضغطها وتثبيت ملف coding-school_All.json في مكتبة Divi الخاصة بك. ثم قم بإنشاء تسع صفحات جديدة باستخدام كل من التخطيطات المقابلة لها.

# 3 - تثبيت وتفعيل المكون الإضافي Restrict Content Pro

هذا هو المكون الإضافي الذي سنستخدمه لوظيفة العضوية في موقع الدورة التدريبية الإلكترونية. سنستخدم هذا لإعداد اشتراك مجاني ومميز (مدفوع) في الدورة.

# 4 - تثبيت وتنشيط WP Complete Pro Plugin

سيتم استخدام هذا المكون الإضافي لإبقاء الأعضاء (أو الطلاب) على دراية بتقدمهم أثناء إكمال كل درس في كل دورة تدريبية. يحتوي على رسومات بيانية دائرية وشريطية رائعة لإظهار التقدم بالإضافة إلى علامة اختيار يدوية بجوار كل درس مكتمل في قائمة التنقل.

بمجرد الانتهاء من الإعداد ، تكون جاهزًا لبناء دورتك التدريبية الإلكترونية.

هيا بنا نبدأ.

أعد تسمية صفحة الدورة التدريبية

تأتي حزمة التخطيط الخاصة بك مع تخطيط صفحة الدورات التدريبية.

يجب أن ترتبط كل دورة تدريبية مدرجة في هذا التخطيط (إذا كنت تخطط لتدريس كل هذه الدورات) بصفحة دورة معينة تستخدم تخطيط صفحة الدورة التدريبية.

ملاحظة: لاحظ أنني استبدلت الزر الموجود في رأس صفحة الدورة التدريبية أعلاه بوحدة فيديو. بهذه الطريقة لا يتعين علي إعادة التوجيه إلى صفحة مختلفة لإظهار معاينة الدورة التدريبية. مجرد فكرة.

كما ترى ، في هذا المثال ، يستخدم تخطيط صفحة الدورة التدريبية دورة تصميم تجربة المستخدم ، لذا انطلق وقم بتحرير الصفحة وقم بتغيير اسم صفحة الدورة التدريبية من "الدورة التدريبية" إلى "تصميم تجربة المستخدم". وقم بتحديث الرابط الثابت أيضًا.

بناء صفحة الدرس

صفحة الدورة التدريبية الجديدة الخاصة بك ، والتي تسمى الآن "UX Design" ، مقسمة حسب الفصول (يمكنك أيضًا التفكير فيها كدروس) مع وصف موجز لكل منها. سيحتاج كل فصل من هذه الفصول / الدروس إلى إعادة التوجيه إلى صفحة الدروس الخاصة به. لإنشاء صفحة الدرس هذه ، سنستخدم تخطيط صفحة الدورة التدريبية وإجراء بعض التعديلات.

يُطلق على الفصل / الدرس الأول المدرج في صفحة دورة تصميم تجربة المستخدم "الفصل الأول: مقدمة للأساسيات". دعونا نبني صفحة الدروس الخاصة بنا لهذا.

تابع وأضف صفحة جديدة وأدخل "الفصل 1: مقدمة للأساسيات" للعنوان.

نظرًا لأن هذا الدرس عبارة عن صفحة فرعية لصفحة الدورة التدريبية لتصميم UX ، انقر فوق القائمة المنسدلة الأصلية داخل مربع سمات الصفحة في الشريط الجانبي الأيمن وحدد تصميم UX باعتباره الأصل.

انقر بعد ذلك لاستخدام Divi Builder ، وانقر فوق Add From Library ، وحدد Course Layout.

حفظ المسودة

اضبط تخطيط الرأس

انقر الآن لاستخدام Visual Builder لإجراء بعض التعديلات على تخطيط الصفحة. أولاً ، دعنا نغير تخطيط رأسنا في القسم العلوي قليلاً. من المنشئ المرئي ، احذف وحدة الصورة في العمود الأيمن والزر الأخضر أسفل العمود الأول.

انقر بعد ذلك لتحرير إعدادات وحدة النص العليا في العمود الأول وتغيير نص رأس الصفحة إلى "الفصل 1: مقدمة للأساسيات".

ثم قم بتغيير هيكل عمود الصف إلى عمود واحد بدلاً من عمودين.

الآن يجب أن يبدو رأسك هكذا.

تغيير محتوى دعاية وإعلان

في قسم التخصص أدناه ، قم بتحرير إعدادات الدعاية الدعائية الأولى في قسم المحتوى الأيسر وقم بتحديث ما يلي:

علامة تبويب المحتوى

العنوان: الجزء 1
المحتوى: [سيصبح هذا هو المحتوى الخاص بك للدورة. سأترك المحتوى الوهمي هناك في الوقت الحالي]
استخدام الأيقونة: نعم
الرمز: حدد رمز السهم الأيمن

ملاحظة: سيتم أخذ لون الرمز من مجموعة Theme Accent Color في أداة تخصيص السمة ، لذا تأكد من تحديث اللون هناك بلون يطابق الموقع.

احفظ التغييرات

الآن بعد أن تم إنشاء وحدة دعاية مغالى فيها واحدة ، يمكننا استخدام هذا كقالب لتقسيم كل جزء من الدرس على الصفحة. انطلق وكرر الوحدة التي أنشأتها للتو مرتين (أو مهما كانت الأجزاء التي تريدها) وقم بتحديث كل منها بعنوان مختلف (على سبيل المثال ، الجزء 2 ، الجزء 3 ، إلخ ...).

ثم احذف الدلالات الأخرى التي لن نحتاج إليها بعد الآن.

الآن يجب أن يبدو تخطيطك هكذا.

إضافة عنصر واجهة الشريط الجانبي

أضف وحدة شريط جانبي تحت وحدة الزر في الشريط الجانبي الأيمن لقسم التخصص. وفي الوقت الحالي ، ما عليك سوى ترك إعدادات المحتوى الافتراضية التي تسحب محتوى منطقة عنصر واجهة المستخدم للشريط الجانبي. سنقوم بتغيير ذلك في النهاية بمجرد إنشاء منطقة عنصر واجهة مستخدم مخصصة تتضمن قائمة الدورة التدريبية.

ضمن علامة تبويب المحتوى ، أضف خلفية بيضاء إلى الوحدة النمطية الخاصة بك.

لكي تتطابق وحدة الشريط الجانبي مع تصميم الصفحة ، قم بتحديث الإعدادات في علامة تبويب التصميم على النحو التالي:

الهامش المخصص: -80 بكسل للأعلى
الحشو المخصص: 30 بكسل أعلى ، 40 بكسل يمين ، 30 بكسل أسفل ، 40 بكسل يسار
مربع الظل الوضع الأفقي: 0 بكسل
مربع شادو الوضع الرأسي: 0 بكسل
مربع قوة طمس الظل: 60 بكسل
قوة انتشار الظل المربع: 0 بكسل
لون الظل: rgba (71،74،182،0.12)

نمط الرسوم المتحركة: تكبير
اتجاه الرسوم المتحركة: لأعلى
كثافة الرسوم المتحركة: 20٪
بدء تعتيم الرسوم المتحركة: 100٪

احفظ التغييرات

ملاحظة: من الجيد المضي قدمًا وجعل هذه وحدة نمطية عالمية بحيث لا يكون عليك سوى إجراء تعديلات على وحدة واحدة للتحديثات المستقبلية. للقيام بذلك ، حدد إضافة إلى المكتبة ، وأطلق عليها اسم "وحدة شريط القوائم الجانبية لقائمة الدرس" ، وحدد لجعلها وحدة نمطية عامة ، وانقر فوق "حفظ".

أخيرًا ، احذف وحدة الدعاية الدعاية مع المعلم ووحدة زر "الملف الشخصي الكامل". يجب أن تبدو صفحتك كما يلي:

احفظ الصفحة

الآن بعد أن تم بناء إحدى صفحات الدروس الخاصة بنا ، دعنا نحفظها في مكتبتنا حتى نتمكن من استخدامها في دروس أخرى. من المنشئ المرئي ، انقر فوق الزر "إضافة إلى المكتبة" في القائمة المنبثقة ، وأدخل "تخطيط صفحة الدرس" لاسم النموذج ، ثم احفظه.

امض قدمًا وكرر الخطوات أعلاه لإضافة صفحتين إضافيتين للدرس. هذه المرة فقط ، بدلاً من استخدام تخطيط صفحة الدورة التدريبية ، استخدم التخطيط الجديد الذي قمت بإنشائه باسم "تخطيط صفحة الدرس".

بمجرد الانتهاء من ذلك ، يجب أن يكون لديك ثلاث صفحات دروس تم إنشاؤها بالعناوين التالية:

1. الفصل 1: مقدمة للأساسيات
2. الفصل 2: ​​هندسة المعلومات
3. الفصل 3: التصميم سريع الاستجابة

إنشاء قائمة الدورة

الآن بعد أن تم إنشاء دروسك ، يمكننا إنشاء قائمة الدورات التدريبية الخاصة بنا. من لوحة معلومات WordPress ، انتقل إلى المظهر> القوائم .

من صفحة القوائم ، أكمل الخطوات التالية:

1. حدد "إنشاء قائمة جديدة"
2. أطلق عليها اسم "تصميم تجربة المستخدم"
3. حدد صفحات / فصول الدروس الثلاثة إلى القائمة التي أنشأتها للتو.
4. انقر فوق إضافة إلى القائمة
5. احفظ القائمة

قم بإنشاء منطقة عنصر واجهة المستخدم المخصصة

لإضافة القائمة إلى صفحة الدرس ، نحتاج أولاً إلى إنشاء منطقة عنصر واجهة مستخدم مخصصة لها. من لوحة معلومات WordPress ، انتقل إلى المظهر> الأدوات . ضمن مناطق عناصر واجهة المستخدم الحالية ، حدد المربع المستخدم لإنشاء منطقة عنصر واجهة مستخدم جديدة. أدخل اسم "تصميم تجربة المستخدم" وانقر على "إنشاء". الآن قم بتحديث الصفحة. يجب أن تشاهد الآن منطقة عنصر واجهة المستخدم "UX Design" المخصصة الجديدة. اسحب عنصر واجهة المستخدم Custom Menu داخل منطقة عنصر واجهة المستخدم "UX Design". في عنصر واجهة المستخدم Custom Menu ، حدد القائمة "UX Design". ثم انقر فوق حفظ.

تحديث وحدة الشريط الجانبي لصفحة الدرس باستخدام منطقة عنصر واجهة مستخدم جديدة

الآن بعد أن تم إنشاء منطقة عناصر واجهة المستخدم الخاصة بك باستخدام قائمة الدورة التدريبية الخاصة بك ، ارجع إلى صفحات الدورة التدريبية التي قمت بإنشائها وقم بتحديث وحدة الشريط الجانبي لتحديد منطقة عنصر واجهة المستخدم "تصميم UX". الآن يجب أن تظهر قائمتك في الشريط الجانبي.

ملاحظة: إذا جعلت وحدة الشريط الجانبي عامة ، فسيتعين عليك فقط إجراء هذا الضبط مرة واحدة على هذه الوحدة ، وسيتم تحديث الوحدتين الأخريين تلقائيًا.

في هذه المرحلة ، لدينا قاعدة جيدة جدًا لإنشاء دوراتنا ودروسنا ، لذلك دعونا نحسن تجربة المستخدم الخاصة بنا من خلال دمج تتبع تقدم الدورة.

إضافة تتبع تقدم الدورة

تعد إضافة تتبع تقدم الدورة التدريبية إلى موقع الدورة التدريبية الإلكترونية طريقة رائعة لتعزيز تجربة المستخدم والمشاركة والتحفيز عند أخذ الدورة التدريبية الخاصة بك. لإظهار التقدم في كل دورة من دوراتنا ، سأستخدم المكون الإضافي WP Complete Pro. إذا لم تكن قد تأكدت بالفعل من تثبيت وتنشيط المكون الإضافي.

بمجرد تنشيط المكون الإضافي ، من لوحة معلومات WordPress ، انتقل إلى الإعدادات> WPComplete . سينقلك هذا إلى إعدادات البرنامج المساعد.

قم بتحديث الإعدادات التالية:

نوع دور الطالب: مشترك
نوع محتوى الدرس: أنواع الصفحات (نظرًا لأننا نبني دروسنا بالصفحات بدلاً من المنشورات)
قم بإلغاء تحديد الخيار "إضافة الزر الكامل تلقائيًا إلى المشاركات والصفحات الممكّنة لي". (سنضيف هذه الأزرار يدويًا برمز قصير.)
وضع علامة كاملة على لون الزر: # 7377fc
إعدادات الرسم البياني اللون الأساسي: # 7377fc

ثم انقر فوق حفظ التغييرات.

قم بتمكين الأزرار الكاملة لصفحات الدرس

الآن بعد أن أصبح لدينا WP Complete setup. دعنا نضيف أزرارنا "كاملة" إلى صفحات الدروس لدينا.

انتقل إلى صفحة الدرس الأولى التي أنشأناها بعنوان "الفصل 1: مقدمة إلى الأساسيات" وانقر لتحرير الصفحة. من محرر الصفحة الافتراضي ، ابحث عن مربع WPComplete في أسفل الصفحة. داخل المربع ، انقر فوق خيار "تمكين زر الإكمال". سيخبر هذا المكون الإضافي أنك تريد تتبع هذه الصفحة للمستخدم. بعد ذلك ، في مربع الإدخال مباشرة بعد أن تقول "هذا جزء من:" أدخل "تصميم UX" وهو اسم الدورة التدريبية التي تريد تتبعها. هذه هي الطريقة التي تجمع بها الدروس تحت كل دورة. على سبيل المثال ، إذا كان لديك ثلاثة دروس وفي كل صفحة من صفحات الدروس هذه ، حددت "تصميم تجربة المستخدم" كدورة تدريبية ، عندما يكمل المستخدم الصفحة بالنقر فوق الزر "إكمال" ، يكون المكون الإضافي قادرًا على تسجيل أن المستخدم قد أكمل 33٪ (1 من أصل 3 دروس) من تلك الدورة. إذا كان لديك العديد من الدورات التدريبية ، فيمكنك إدخال اسم دورة تدريبية جديد في المربع وسيبدأ مجموعة مقرر دراسي جديدة.

أضف الأزرار الكاملة إلى صفحات الدرس

لإضافة زر "إكمال" إلى صفحة الدرس ، قم بنشر المنشئ المرئي في نفس صفحة الدرس التي كنت تقوم بتحريرها للتو.

أضف وحدة نصية ضمن آخر وحدة دعاية دعاية في الجزء السفلي من الصفحة. في إعدادات النص ، أدخل الرمز القصير التالي في مربع المحتوى:

[wpc_button text = "انقر فوقي للإكمال!" Complete_text = ”رائع! مكتمل"]

ملاحظة: يمكنك تغيير النص والنص المكتمل المعروض على الزر عن طريق تعديل النص في الرمز القصير.

احفظ التغييرات

ينشئ هذا الرمز المختصر زرًا يسمح للمستخدم بالنقر فوقه وتسجيل الدرس كاملاً.

لاحظ أنه عند النقر فوق الزر لإكمال الدرس ، فإن عنصر القائمة في الشريط الجانبي للدرس المقابل سوف يتلاشى قليلاً ويعرض علامة اختيار على يمينه.

انطلق واحفظ وحدة النص التي أنشأتها للتو في مكتبتك باسم "Complete Button". يمكنك الآن استخدام عنصر المكتبة هذا لإدخال نفس الوحدة في جميع صفحاتك حسب الحاجة.

ملاحظة: قد ترغب في المضي قدمًا وحفظ إصدار جديد من تخطيط صفحة الدرس في مكتبتك مع تضمين الزر الكامل بحيث لا تضطر إلى الاستمرار في إضافته كعنصر ثانوي عند إنشاء صفحات الدرس المستقبلية.

أضف الرسم البياني لشريط التقدم إلى الشريط الجانبي

يسمح لك المكون الإضافي WPComplete أيضًا بعرض الرسوم البيانية التي تُظهر للمستخدم تقدمه في دورة معينة. سنقوم بإضافة رسم بياني شريطي لإظهار التقدم المحرز في دورة تصميم تجربة المستخدم في الشريط الجانبي لدروسنا.

هل تتذكر كيف أنشأنا منطقة عناصر واجهة مستخدم مخصصة لدورة تصميم تجربة المستخدم الخاصة بنا لعرض قائمة الدورة التدريبية في الشريط الجانبي لصفحة الدرس؟ حسنًا ، سنقوم الآن بإضافة رسم بياني لشريط التقدم أعلى قائمة الدورات التدريبية مباشرةً. بهذه الطريقة يمكن للمستخدم رؤية تقدمه في عرض مرئي رائع.

لإضافة الرسم البياني الشريطي ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Appearence> Widgets . ثم قم بفتح عنصر واجهة المستخدم المخصص "UX Design" الذي قمت بإنشائه مسبقًا واسحب عنصر واجهة مستخدم HTML إلى منطقة عنصر واجهة المستخدم أعلى عنصر واجهة المستخدم المخصص الموجود حاليًا. في مربع محتوى HTML ، أدخل الرمز القصير التالي:

[دورة wpc_progress_bar = "تصميم تجربة المستخدم"]

سيعرض هذا الرمز القصير الرسم البياني لشريط التقدم للدورة التدريبية المحددة "UX Design". يتوافق اسم الدورة التدريبية هذا مع ما وضعته في خيار مربع WPComplete بجوار "هذا جزء من:". إذا كان لديك دورة أخرى في المستقبل ، فما عليك سوى إدخال اسم الدورة التدريبية الجديد في مكان "UX Design" عند إضافة الرمز القصير لتلك الدورة التدريبية.

ملاحظة: للحصول على قائمة كاملة بالرموز المختصرة المتاحة لهذا البرنامج المساعد ، انتقل إلى ورقة الغش للرموز المختصرة هناك.

انتقل الآن إلى "الفصل 1: مقدمة إلى الأساسيات" لترى كيف يبدو.

انقر فوق الزر "إكمال" في أسفل الصفحة. تحقق الآن من الشريط الجانبي لمعرفة ما تغير. يوضح الرسم البياني الشريطي الآن أنك قد أكملت 33٪ من الدورة. يظهر عنصر القائمة لصفحة الدرس الآن على أنه باهت مع علامة اختيار على اليمين لتوضيح أن هذا الدرس قد اكتمل.

رائع ، أليس كذلك؟

لنراجع ما لدينا حتى الآن:

1. لدينا قالب صفحة درس جديد ليكون بمثابة نموذج الانتقال للدروس المستقبلية
2. لدينا نظام لإنشاء قائمة مخصصة لكل دورة.
3. لدينا نظام لإعداد مناطق عناصر واجهة المستخدم المخصصة لكل دورة لعرض قائمة مخصصة لتلك الدورة التدريبية المحددة على صفحة الدرس.
4. لدينا القدرة على إضافة زر كامل إلى صفحات الدروس الخاصة بنا والذي عند النقر عليه ، يمثل التقدم في الرسم البياني الشريطي وفي ارتباط القائمة المقابل.

تتمثل المرحلة الأخيرة من تحويل موقعنا إلى دورة إلكترونية فعالة في دمج مستويات العضوية من أجل تقييد المحتوى الخاص بنا على العملاء الذين يدفعون رسومًا.

بناء صفحات العضوية

إذا لم تكن قد قمت بذلك بالفعل ، فقم بتثبيت وتفعيل المكون الإضافي Restrict Content Pro. بمجرد التثبيت ، سيقوم المكون الإضافي تلقائيًا بإنشاء 5 صفحات للتعامل مع عملية العضوية.

إذا نظرت إلى كل صفحة في محرر الصفحة الافتراضي ، فسترى أن الشيء الوحيد المضاف إلى المحتوى لكل صفحة هو رمز قصير. على سبيل المثال ، إذا انتقلت إلى صفحة التسجيل ، فسترى أن الشيء الوحيد في محرر المحتوى هو الرمز المختصر "[register_form]" الذي سيعرض نموذج التسجيل.

نظرًا لأن كل ما تحتاجه لعرض المحتوى لكل من هذه الصفحات التي تم إنشاؤها تلقائيًا هو الرموز القصيرة ، يمكنك بسهولة إنشاء تخطيط لهذه الصفحات باستخدام Divi Builder. على سبيل المثال ، إذا كنت ترغب في طريقة سريعة وسهلة لتخصيص صفحة التسجيل الخاصة بك ، فانتقل إلى صفحة الدورات التدريبية الخاصة بك وقم بنشر المنشئ المرئي. احفظ القسم العلوي من التخطيط في مكتبتك باسم "رأس صفحة الدورة التدريبية الإلكترونية" (أو شيء من هذا القبيل).

ثم انقر فوق إحدى الدلالات الدعائية التي تعرض الدورة التدريبية وقم بحفظ هذه الوحدة في مكتبتك باسم "مربع محتوى الدعاية للدورة التدريبية الإلكترونية" (أو شيء من هذا القبيل).

انتقل الآن إلى صفحة التسجيل الخاصة بك ، وانسخ الرمز القصير إلى الحافظة الخاصة بك (قم بتمييز الرمز القصير وانقر فوق ctrl + c). ثم انشر Divi Builder ، ثم المنشئ المرئي. أضف قسمك المحفوظ الجديد المسمى "عنوان صفحة الدورة التدريبية الإلكترونية" من مكتبتك.

قم بتحديث وحدة النص التي تحتوي على العنوان لتقول "تسجيل" بدلاً من "الدورات".

ثم انقر لإضافة وحدة نمطية من مكتبتك ضمن الوحدات النمطية الحالية في القسم. حدد الوحدة النمطية "مربع محتوى الدعاية للدورة التدريبية الإلكترونية" التي حفظتها للتو في المكتبة.

ثم قم بتحديث الإعدادات كما يلي:

تحت علامة تبويب المحتوى ...

محو العنوان
المحتوى: أدخل الرمز المختصر [register_form] الذي قمت بحفظه في الحافظة الخاصة بك بالضغط على ctrl + v.
امسح رابط الصورة

احفظ التغييرات

ملاحظة: كانت هذه هي الطريقة السريعة والسهلة. لقد استخدمت وحدة دعاية مغالى فيها لأنها كانت أسرع طريقة لإبراز نمط الوحدة. ربما تريد استخدام وحدة نصية بدلاً من ذلك.

انظر الآن إلى صفحة التسجيل الخاصة بك في متصفح التصفح المتخفي.

ما زلت بحاجة إلى تخصيص تصميم النموذج (لن تفعل ذلك في هذا البرنامج التعليمي) ولكن يمكن القيام بذلك بسهولة من خلال بعض الفحص و CSS المخصص.

يمكنك اتباع نفس العملية لتحديث جميع صفحات العضوية الخمس التي تم إنشاؤها بواسطة المكون الإضافي. لعرض الصفحات التي يتم استخدامها للتعامل مع العضوية ، انتقل إلى لوحة معلومات WordPress وانتقل إلى تقييد> إعدادات وسترى قائمة بجميع الصفحات التي يتم استخدامها ضمن علامة التبويب عام.

إضافة مستوى اشتراك مجاني

تعد إضافة مستوى اشتراك مجاني إلى الدورة التدريبية الإلكترونية طريقة رائعة لجذب العملاء المحتملين وإضافتهم إلى حملة تسويق عبر البريد الإلكتروني وبيعهم بعضوية متميزة. لإضافة مستوى اشتراك مجاني ، انتقل إلى لوحة تحكم WordPress وانتقل إلى تقييد> مستويات الاشتراك . ثم املأ الإعدادات لإنشاء عضويتك المجانية. فيما يلي مثال على ما يجب إدخاله للحصول على مستوى اشتراك مجاني:

الاسم: مجاني
الوصف: هذا اشتراك مجاني في Coding School.
دور المستخدم: المشترك

اترك الخيارات الأخرى لإعدادها الافتراضي.

ثم انقر فوق إضافة مستوى العضوية

إضافة مستوى اشتراك مميز

عادةً ما تكون العضوية المميزة هي المكان الذي يمكنك فيه تحصيل أموال للوصول إلى محتوى ذي مستوى أعلى لا يمكن الوصول إليه من خلال عضوية مجانية. مثل العضوية المجانية ، يجب على المستخدم التسجيل في استمارة التسجيل. الاختلاف الوحيد هو أنه سيتم توجيههم إلى نموذج الدفع لشراء الاشتراك. إذا كان المستخدم عضوًا مجانيًا بالفعل ، فيمكنه الترقية إلى اشتراك Premium باستخدام معلومات التسجيل الحالية الخاصة به ثم الدفع مقابل الترقية.

لإضافة مستوى اشتراك Premiumn ، انتقل إلى لوحة معلومات WordPress وانتقل إلى تقييد> مستويات الاشتراك. ثم املأ الإعدادات لإنشاء اشتراك Premium الخاص بك. فيما يلي مثال لما يجب إدخاله لمستوى الاشتراك المميز:

الاسم: بريميوم
الوصف: هذا اشتراك مميز في Coding School
المدة: 1 سنة
السعر: 29
دور المستخدم: المشترك

تقييد الدروس على أساس مستوى الاشتراك

الآن بعد أن تم إنشاء مستويات الاشتراك المجانية والمميزة. يمكننا اختيار تقييد الصفحات / المنشورات أو حتى محتوى معين بناءً على مستوى اشتراك المستخدمين. يجعل المكون الإضافي هذه العملية بسيطة حقًا. دعنا نتحدث ونقيد الوصول إلى الدرس الأول الذي أنشأناه للاشتراك المجاني. للقيام بذلك ، انتقل لتحرير صفحة الدرس بعنوان "الفصل 1: مقدمة إلى الأساسيات". لاحظ مربع "تقييد هذا المحتوى" أعلى محرر الصفحة. في المربع لديك مربع إدخال قائمة منسدلة يسمح لك بتحديد من يجب أن يكون لديه حق الوصول إلى المحتوى. ستختار أعضاء مستوى (مستويات) الاشتراك . بمجرد التحديد ، سترى المزيد من الخيارات تظهر. حدد الخيار الأول الذي يقول "الأعضاء في أي مستوى (مستويات) اشتراك". هذا لأننا نريد أن يكون للأعضاء الذين سيحصلون على الاشتراك المميز حق الوصول إلى هذا المحتوى أيضًا.

ملاحظة: سيخفي هذا الإعداد الصفحة بأكملها من المستخدمين غير المشتركين. إذا كنت ترغب في إخفاء أجزاء معينة من المحتوى على الصفحة وجعلها متاحة فقط للمشتركين المجاني أو المميز ، يمكنك استخدام الرموز القصيرة لالتفاف المحتوى الذي تريد إخفاءه. نظرًا لأننا نستخدم أداة divi builder ، فقد يكون استخدام الرموز القصيرة لالتفاف المحتوى أمرًا صعبًا ، ولكن هناك شيء واحد يمكنك القيام به وهو التفاف المحتوى فقط في مربعات المحتوى الفعلية للدلالات مع الرموز القصيرة وترك العناوين مرئية.

بالنسبة للدرس التالي بعنوان "الفصل 2: ​​هندسة المعلومات" ، سنقوم بقصر الصفحة على المشتركين المميزين فقط. للقيام بذلك ، انتقل إلى تحرير الصفحة وفي مربع "تقييد هذا المحتوى" أعلى محرر الصفحة ، حدد أعضاء مستوى (مستويات) الاشتراك . ثم حدد الخيار "أعضاء من مستويات اشتراك محددة. ثم حدد "Premium". الآن سيتمكن الأشخاص الذين لديهم اشتراك Premium فقط من الوصول إلى تلك الصفحة.

احفظ التغييرات بتحديث الصفحة.

قم بتغيير صفحة إعادة التوجيه الخاصة بك للمحتوى المحظور

عندما يحاول المستخدم الوصول إلى المحتوى المقيد ، يمكنك إعادة توجيه المستخدم إلى صفحة معينة. نظرًا لأننا نريد أن يقوم المستخدم بالتسجيل للوصول إلى الدورة ، فمن المنطقي أن نعيد توجيه المستخدم إلى صفحة التسجيل. للقيام بذلك ، انتقل إلى لوحة معلومات WordPress وانتقل إلى تقييد> إعدادات وانقر فوق علامة التبويب متفرقات. ابحث عن خيار صفحة إعادة التوجيه وحدد صفحة التسجيل من مربع إدخال القائمة المنسدلة.

حفظ الخيارات

الآن في كل مرة يحاول فيها مستخدم غير مشترك الوصول إلى الصفحات المقيدة ، ستتم إعادة توجيهه تلقائيًا إلى صفحة التسجيل.

يمكنك اختبار هذا بسرعة حقيقية. احفظ الصفحة وافتح الصفحة في متصفح التصفح المتخفي لترى ما يراه المستخدم عندما لا يكون مسجلاً بعد.

ملاحظة: إذا كنت تريد ، يمكنك إنشاء صفحة تسجيل إضافية لحالة الاستخدام هذه بحيث يمكنك تضمين عبارة تحث المستخدم على اتخاذ إجراء أكثر تحديدًا مثل "عذرًا ، لا يمكنك حاليًا الوصول إلى هذا المحتوى ، يرجى التسجيل أدناه." مع استمارة التسجيل أدناه.

إضافة بوابة الدفع الخاصة بك

في هذه المرحلة ، ستحتاج إلى التأكد من أن بوابة الدفع الخاصة بك متكاملة مع Restrict Content Pro. يمكنك القيام بذلك عن طريق الانتقال إلى تقييد> الإعدادات والنقر فوق علامة التبويب المدفوعات . هناك يمكنك اختيار البوابات التي تريد تمكينها وكذلك إدخال المعلومات اللازمة لدمج البوابة. لديك تسعة خيارات للاختيار من بينها بما في ذلك Stripe و Paypal.

لن أخوض في التفاصيل المتضمنة في إعدادها ، ولكن نصيحتي هي التأكد من بوابات الدفع واختبارها بدقة للتأكد من أنها تعمل. أنت لا تريد أن تخسر المال.

تخصيص إخطارات البريد الإلكتروني الخاص بك

يسمح لك تطبيق Restrict Content Pro بتخصيص إشعار بالبريد الإلكتروني لكل من العضو الجديد والمسؤول كلما قام عضو جديد بالتسجيل. استفد من هذا الخيار من خلال تضمين عبارة جيدة تحث المستخدم على اتخاذ إجراء في نص البريد الإلكتروني الذي يشجع المستخدم على بدء الدورة التدريبية برابط للدرس الأول. يمكنك العثور على إعداد البريد الإلكتروني بالانتقال إلى تقييد> الإعدادات والنقر فوق علامة التبويب رسائل البريد الإلكتروني .

تكامل اختياري للتسويق عبر البريد الإلكتروني

قد يكون لديك حساب Mailchimp أو Aweber تريد إضافة أعضاء إليه عند التسجيل. يمكنك القيام بذلك عن طريق واحدة من العديد من الوظائف الإضافية المتاحة مع المكون الإضافي Restrict Content Pro. ما عليك سوى الانتقال إلى تقييد> الوظائف الإضافية والعثور على نظام البريد الإلكتروني الذي تريده.

ماذا الان؟

الآن بعد أن قمت بإعداد موقع الدورة التدريبية الإلكترونية الخاص بك ، لا يزال يتعين عليك إنهاء إعداد كل المحتوى الخاص بك لكل صفحة ، وإضافة عناوين url إلى الأزرار ، والعديد من التعديلات الأخرى. ولكن تم وضع الأساس. نأمل أن يساعدك هذا على إعداد منصة يمكنك البناء عليها بسهولة.

افكار اخيرة

يمكن للمرء أن يجادل بأنه مع جميع الأدوات الرائعة الموجودة في عالم WordPress ، يمكنك الحصول على دورة تدريبية عبر الإنترنت وتشغيلها بسهولة تامة. ولكن بعد ذلك هناك تحدي التصميم. ليس من السهل جعل هذه المواقع تبدو لائقة إذا لم يكن التصميم هو موطن قوتك. لحسن الحظ ، فإن تخطيطات Divi المعدة مسبقًا مثل "حزمة تخطيط إدارة التعلم" تقدم حلاً رائعًا لمشكلة التصميم. التصميم عملي وجميل فور إخراجه من الصندوق.

ولكن هناك مشكلة العثور على المكونات الإضافية المناسبة لتحويل تصميمك الجميل إلى دورة تدريبية عملية عبر الإنترنت. هناك العديد من المكونات الإضافية الرائعة للعضوية وأنظمة إدارة التعلم بدرجات متفاوتة من حيث التكلفة والتعقيد. كان الهدف من هذا المنشور هو إعدادك وتشغيله باستخدام موقع دورة إلكترونية رائع المظهر مع عضوية بسيطة بتكلفة منخفضة. لأولئك منكم الذين يأملون في إنشاء هذا باستخدام المكونات الإضافية المجانية ، نأسف لخيبة الأمل. أنا كل شيء عن المكونات الإضافية المجانية ، لكنني اعتقدت أنه من الأفضل استخدام إصدارات Pro لهذا البرنامج التعليمي لأن النتيجة النهائية تستحق كل بنس في رأيي.

أتطلع إلى الاستماع منك في التعليقات

هتافات!