كيفية إنشاء صفحة قائمة تشغيل باستخدام وحدة Divi Video Slider Module

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

هيا بنا نبدأ.

معاينة صفحة قائمة التشغيل

أولاً ، إليك نظرة على ما سنبنيه.

سطح المكتب

هاتف

قم بإنشاء صفحة قائمة التشغيل

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

سيستخدم القسم الأول والصفوف التصميم الافتراضي. أنا أستخدم قوائم انتظار التصميم من Print Shop Layout Pack المجانية المتوفرة داخل Divi. لتسهيل المتابعة ، سأبني الصفحة باستخدام Wireframe View ونمطها باستخدام عرض سطح المكتب.

صف العرض الكامل

أولاً ، قم بإنشاء صفحة جديدة ، وقم بتمكين Visual Builder ، وقم بإضافة صف كامل العرض .

2/3 1/3 صف

تحت هذا الصف ، أضف 2/3 ، 1/3 صف .

أضف وحدة نص عنوان شريط تمرير الفيديو

في صف العرض الكامل ، أضف وحدة نصية .

أضف وحدة شريط تمرير الفيديو

بعد ذلك ، أضف وحدة Video Slider إلى العمود الأيسر للصف 2/3 ، 1/3.

إضافة شريط تمرير الفيديو الوصف وحدة نص العنوان

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

أضف وحدة نصوص وصف شريط تمرير الفيديو

بعد ذلك ، أضف وحدة النص التي ستحتوي على الوصف. هذا يندرج تحت وحدة عنوان الوصف.

أضف وحدة الشخص

أخيرًا ، أضف وحدة نمطية الشخص في العمود الأيمن للصف 2/3 ، 1/3.

نمط صفحة قائمة تشغيل الفيديو

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

نمط وحدة نص عنوان شريط تمرير الفيديو صفحة قائمة التشغيل

افتح إعدادات أول وحدة نصية.

قم بتغيير مستوى النص إلى العنوان 2 وأضف العنوان Pillar One: Divi Fundamentals (أو العنوان الخاص بك) إلى محتوى النص.

• مستوى النص: H2
• محتوى الجسم: الركيزة الأولى: أساسيات Divi

بعد ذلك ، انتقل إلى علامة التبويب " تصميم ". حدد نص العنوان H2 وقم بتغيير الخط إلى Oswald. عيّن النمط على TT ، والمحاذاة إلى المركز ، واللون على # 000645.

• مستوى العنوان: H2
• الخط: أوزوالد
• النمط: TT
• المحاذاة: المركز
• اللون: # 000645

بعد ذلك ، اضبط حجم الخط على 46 بكسل لسطح المكتب ، و 32 بكسل للكمبيوتر اللوحي ، و 20 بكسل للهاتف. قم بتغيير تباعد الأحرف إلى 1 بكسل وارتفاع الخط إلى 1.4em. أغلق إعدادات الوحدة.

• حجم الخط: سطح المكتب 46 بكسل ، الجهاز اللوحي 32 بكسل ، الهاتف 20 بكسل
• تباعد الأحرف: 1 بكسل
• ارتفاع الخط: 1.4em

نمط وحدة شريط فيديو صفحة قائمة التشغيل

بعد ذلك ، سنضيف المحتوى ونصمم وحدة Video Slider . مرر مؤشر الماوس فوق الوحدة وانقر فوق رمز الترس لفتح إعداداتها .

انقر فوق إضافة فيديو جديد .

أضف الفيديو الخاص بك وأغلق الوحدة الفرعية.

استمر في العملية حتى تنتهي من إضافة جميع مقاطع الفيديو الخاصة بك للقسم الأول. أنا أستخدم الإعدادات الافتراضية ، ولكن يمكنك أيضًا استخدام Dot Navigation بدلاً من Slider Track وتمكين Overlays إذا كنت لا تريد إظهار الصورة المميزة الافتراضية لمقاطع الفيديو.

نمط صفحة قائمة التشغيل شريط تمرير الفيديو الوصف وحدة نص العنوان

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

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

• مستوى النص: العنوان 3
• المحتوى: حول هذه السلسلة

بعد ذلك ، انتقل إلى علامة التبويب " تصميم ". حدد Heading Text H3 وقم بتغيير الخط إلى Oswald ، والنمط إلى TT ، والمحاذاة إلى اليسار ، واللون إلى # 000645. أغلق إعدادات الوحدة.

• نص العنوان: H3
• الخط: أوزوالد
• النمط: TT
• المحاذاة: اليسار
• اللون: # 000645

نمط صفحة قائمة التشغيل ، شريط تمرير الفيديو الوصف ، الوحدة النمطية للنص

بعد ذلك ، افتح الإعدادات الخاصة بوحدة النص التالية. سيحتوي هذا على وصف سلسلة الفيديو.

أدخل وصف السلسلة في منطقة محتوى الجسم.

• المحتوى: وصف الفيديو

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

• المحاذاة: اليسار

نمط وحدة شخص صفحة قائمة التشغيل

أخيرًا ، افتح إعدادات وحدة الشخص .

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

• الاسم: اسم الشخص
• المنصب: مدرس

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

• وصف المحتوى
• الصورة: صورة الشخص

نص العنوان

انتقل إلى علامة التبويب تصميم وانتقل إلى نص العنوان. اختر مستوى العنوان H4. عيّن الخط على أوزوالد ، والوزن إلى نصف غامق ، والنمط على TT ، واللون على # 000645. اضبط الحجم على 20 بكسل ، والتباعد على 1 بكسل ، وارتفاع الخط على 1.5em.

• H4
• أوزوالد
• شبه عريض
• TT
• # 000645
• 20 بكسل
• تباعد 1 بكسل
• ارتفاع الخط 1.5em

نص المركز

أخيرًا ، قم بالتمرير لأسفل إلى نص الموضع . اختر أوزوالد للخط واضبط الوزن على نصف عريض. عيّن النمط إلى TT واللون على # 8f9ca4 والحجم على 15 بكسل وتباعد الأسطر على 1 بكسل وارتفاع السطر على 1.5em. أغلق إعدادات الوحدة.

• الخط: أوزوالد
• الوزن: شبه عريض
• النمط: TT
• اللون: # 8f9ca4
• الحجم: 15 بكسل
• التباعد: 1 بكسل
• ارتفاع الخط: 2em

قم بتكرار قسم صفحة قائمة التشغيل

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

نمط صفحة قائمة التشغيل القسم الثاني

بالنسبة للقسم الثاني ، سنقوم بتغيير لون الخلفية ، بحيث يكون منفصلاً عن الآخرين. سنقوم أيضًا بتغيير محتوى الوحدات.

إعدادات القسم

بعد ذلك ، افتح الإعدادات للقسم الثاني .

قم بالتمرير لأسفل إلى الخلفية واضبط اللون على # f9f7f4. أغلق الإعدادات.

• لون الخلفية: # f9f7f4

وحدة نص عنوان شريط تمرير الفيديو الثاني

افتح عنوان القسم الثاني وقم بتغييره ليعكس المجموعة الثانية من مقاطع الفيديو. أسمي هذا القسم العمود الثاني: وحدات Divi. أغلق الإعدادات.

• المحتوى: الركيزة الثانية: وحدات Divi

وحدة شريط تمرير الفيديو الثانية

افتح الإعدادات الخاصة بوحدة شريط الفيديو الخاصة بالقسم الثاني. استبدل مقاطع الفيديو بتلك الخاصة بالقسم الثاني. أغلق الإعدادات.

• الوحدات الفرعية: اختر مقاطع الفيديو

شريط تمرير الفيديو الثاني الوصف وحدة نص العنوان

سيظل هذا العنوان كما هو ، لذلك لن نحتاج إلى إجراء تغييرات.

وحدة نصوص وصف شريط تمرير الفيديو الثاني

بعد ذلك ، افتح وحدة النص مع وصف الفيديو الثاني وأنشئ وصفًا للمجموعة الثانية من مقاطع الفيديو.

• محتوى الجسم: وصف الفيديو

وحدة الشخص الثاني

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

• الاسم: اسم الأستاذ

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

• محتوى الجسم: وصف الشخص
• الصورة: صورة الشخص

صمم القسم الثالث

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

وحدة نص عنوان شريط تمرير الفيديو الثالث

افتح وحدة نص العنوان وقم بتغيير العنوان ليطابق مجموعة مقاطع الفيديو هذه. أغلق إعدادات الوحدة.

• محتوى الجسم: الركيزة الثالثة: تخطيطات Divi

وحدة شريط تمرير الفيديو الثالثة

افتح وحدة Video Slider الثالثة واستبدل مقاطع الفيديو بتلك الخاصة بهذه المجموعة. قم بتغيير Amin Labels إذا كنت تريد وأغلق إعدادات الوحدة.

• إضافة فيديو جديد: استبدل كل فيديو

وحدة نصوص وصف شريط تمرير الفيديو الثالث

افتح وحدة النص لوصف الفيديو الخاص بالقسم الثالث. قم بإنشاء وصف لهذه المجموعة من مقاطع الفيديو. أغلق إعدادات وحدة النص.

• محتوى الجسم: وصف الفيديو

وحدة الشخص الثالث

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

• الاسم: اسم المعلم

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

• محتوى الجسم: وصف الشخص
• الصورة: صورة الشخص

نتائج صفحة قائمة التشغيل

إليك كيفية ظهور صفحة قائمة التشغيل الخاصة بنا على سطح المكتب والهاتف.

سطح المكتب

هاتف

خواطر ختامية

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

نريد أن نسمع منك. هل قمت ببناء صفحة قائمة تشغيل باستخدام وحدة Divi Video Slider؟ أخبرنا عن تجربتك في التعليقات.