كيفية إنشاء تبديل مخصص لنصوص الفيديو في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

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

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

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

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء تبديل مخصص لنصوص الفيديو في Divi

الجزء 1: إضافة فيديو Youtube إلى الصفحة باستخدام وحدة Divi Video Module

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

لكن قبل أن نضيف الفيديو ، دعنا نضيف صفًا من عمود واحد إلى القسم.

بعد ذلك ، أضف وحدة فيديو إلى الصف.

انقر فوق رمز إضافة فيديو زائد تحت الخيار "ملف فيديو MP4 أو عنوان URL لـ Youtube.

ثم حدد الإجراء " إدراج من عنوان URL" على الشريط الجانبي الأيسر من النافذة المنبثقة.

الصق عنوان URL لفيديو YouTube في مربع الإدخال.

ثم انقر فوق الزر " إدراج في النشر" .

بمجرد إضافة الفيديو ، يمكنك إضافة صورة تراكب مخصصة إلى الفيديو.

الجزء 1: إنشاء مفتاح تبديل مخصص للنسخة

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

أولاً ، أضف وحدة تبديل مباشرة أسفل الفيديو.

في إعدادات تبديل ، أضف كلمة "نسخة" لنص العنوان. (سنعود إلى محتوى الجسم لاحقًا للصق محتوى نص فيديو youtube لاحقًا)

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• لون الأيقونة: # 42b3a9
• فتح تبديل لون الخلفية: شفاف
• مغلق تبديل لون الخلفية: شفاف
• محاذاة النص: الوسط
• خط العنوان: Roboto
• نمط خط العنوان: TT

• العرض الأقصى: 800 بكسل
• محاذاة الوحدة: المركز
• المساحة المتروكة: 0 بكسل للأعلى ، 20 بكسل للأسفل ، 0 بكسل لليسار ، 0 بكسل لليمين
• عرض الحدود: 0 بكسل

ضمن علامة التبويب المتقدمة ، نحتاج إلى إضافة بعض مقتطفات CSS لإنهاء تصميم التبديل.

أضف CSS التالي إلى Toggle Title :

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

أضف CSS التالية إلى Toggle Icon :

right: 0.75em !important;

أضف CSS التالية إلى Toggle Content :

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

الجزء 3: الحصول على النص من يوتيوب وإضافته إلى تبديل المحتوى

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

للقيام بذلك ، انتقل إلى الفيديو الخاص بك على Youtube واتبع الخطوات التالية:

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

انسخ محتوى النص بالكامل داخل المربع إلى الحافظة الخاصة بك.

الآن النص مليء بفواصل الأسطر. لإخراجها ، يمكنك الانتقال إلى textfixer.com واستخدام أداة إزالة فواصل الأسطر المجانية لإزالة فواصل الأسطر من النص.

ضمن قسم إزالة فواصل الأسطر ، حدد "إزالة فواصل الأسطر فقط".

ثم الصق نص النص داخل المربع.

وانقر فوق الزر إزالة فواصل الأسطر.

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

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

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

هذا كل شيء!

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

فيما يلي النتيجة النهائية للتبديل المخصص لدينا لنسخة فيديو في Divi.

على سطح المكتب ...

على الجهاز اللوحي ...

وعلى الهاتف ...

افكار اخيرة

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

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

هتافات!