كيفية إنشاء شريط تمرير فيديو مثبت باستخدام Divi

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

دعنا نتعمق!

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

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

إنشاء شريط تمرير فيديو مثبت باستخدام Divi

قم بإنشاء صفحة جديدة باستخدام تخطيط مسبق الصنع

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

هيريس كيفية القيام بذلك:

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

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

تعديل تخطيط شريط التمرير Sticky Video Slider

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

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

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

في العمود الأيسر الفارغ للصف نفسه ، أضف وحدة شريط تمرير فيديو جديدة.

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

ثم حدد الإجراء "إدراج من URL". الصق عنوان URL الجديد داخل مربع الإدخال وانقر فوق الزر "إدراج في المنشور".

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

ضمن علامة تبويب التصميم ، قم بتحديث لون تراكب الصورة المصغرة لمطابقة التخطيط.

• لون تراكب الصورة المصغرة: rgba (53،55،82،0.55)

جعل شريط تمرير الفيديو "ثابتًا"

لجعل شريط التمرير "ثابتًا" ، انتقل أسفل علامة التبويب خيارات متقدمة وقم بتحديث ما يلي:

• الوضع اللاصق: التمسك بالأعلى (سطح المكتب) ، لا تلتصق (الجهاز اللوحي والهاتف)
• الإزاحة العلوية اللاصقة: 30 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)
• حد الالتصاق السفلي: صف

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

نتيجة

مشكلة مع مقاطع فيديو YouTube / التضمينات باستخدام تراكبات الصور على الفيديو الرئيسي

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

ليس هذا هو الحال بالنسبة لمقاطع الفيديو المستضافة ذاتيًا بتنسيق ملف mp4 أو webm. يمكنك إظهار تراكبات الصور على الفيديو الرئيسي لمقاطع الفيديو المستضافة ذاتيًا. لذلك إذا كنت ترغب في استخدام صورة تراكب Divi وأيقونة التشغيل مع Divi Video Module ، فيجب عليك إضافة ملفات / عناوين URL لملفات الفيديو MP4 و Webm بدلاً من ذلك.

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

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

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

مثال تراكب الصورة

فيما يلي مثال لما سيبدو عليه ذلك في شريط التمرير.

استخدام مقاطع الفيديو ذاتية الاستضافة في شريط التمرير

إذا كنت تريد استخدام مقاطع الفيديو ذاتية الاستضافة في شريط التمرير ، فافتح إعدادات الفيديو.

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

اختر الملف من مكتبتك أو أضف عنوان URL لاستضافة جهة خارجية إلى الفيديو.

من الجيد دائمًا إضافة ملف MP4 و Webm لكل مقطع فيديو. معًا ، يقدم هذان العنصران دعمًا لمعظم متصفحات الويب بما في ذلك الجوال.

لا تنس ، يمكنك إضافة تراكب صورة ليكون بمثابة صورة مصغرة جميلة لمقطع الفيديو الخاص بك.

ضمن خيار التراكب ، يمكنك حتى اختيار إظهار تراكبات الصور على الفيديو الرئيسي.

النتائج النهائية

إليك نظرة أخرى على أشرطة تمرير الفيديو الثابتة أثناء العمل.

افكار اخيرة

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

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

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

هتافات!