كيفية إنشاء فيديو ترويجي مثبت باستخدام تبديل إظهار / إخفاء في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

هذا الفيديو اللاصق بدون تبديل.

هذا هو نفس الفيديو اللاصق باستخدام زر التبديل.

فيما يلي نظرة فاحصة على وظيفة التبديل.

وإليكم ما يبدو على الهاتف المحمول.

قم بتنزيل 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. حدد الخيار "اختيار تخطيط Premade".
   
4. قم بتحميل تخطيط صفحة خدمات التسويق الرقمي.
   

كيفية إنشاء فيديو ترويجي مثبت باستخدام تبديل إظهار / إخفاء لصفحة المبيعات الخاصة بك

إضافة صف الفيديو الثابت

للبدء ، سنقوم بحذف الوحدة النصية الثانية في صف القسم الأول / العلوي من التخطيط.

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

افتح إعدادات الصف للصف الجديد ، وضمن علامة التبويب خيارات متقدمة ، قم بتحديث فهرس Z كما يلي:

• الفهرس Z: 14

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

اضافة الفيديو

داخل عمود الصف ، أضف وحدة فيديو جديدة.

افتح إعدادات الفيديو وقم بتحميل تنسيقات mp4 و webm للفيديو الذي تختاره.

إذا كنت تريد ، أضف صورة تراكب إلى الفيديو.

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

• العرض الأقصى: 900 بكسل
• محاذاة الوحدة: مركز

• الزوايا الدائرية: 8 بكسل
• Box Shadow: انظر لقطة الشاشة

جعل العمود مثبتًا

افتح إعدادات العمود الذي يحتوي على الفيديو وأضف فئة CSS التالية ضمن علامة التبويب خيارات متقدمة:

• فئة CSS: et-sticky-video

ثم قم بتحديث موضع العصا كما يلي:

• موقف مثبت: التمسك بالأعلى
• الانتقال الافتراضي والأنماط الثابتة: NO

الآن بعد أن أصبح الموضع اللاصق ساري المفعول ، أضف CSS المخصص التالي إلى العنصر الرئيسي لـ Sticky State:

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

تحديث حجم أيقونة تشغيل الفيديو في الحالة الثابتة

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

• استخدام حجم رمز مخصص: نعم
• حجم خط أيقونة التشغيل (ثابت): 50 بكسل

النتيجة حتى الآن

إنشاء زر تبديل الفيديو الثابت

لإنشاء زر تبديل الفيديو اللاصق ، قم بإنشاء وحدة زر جديدة أسفل وحدة الفيديو.

ثم حرك الزر فوق وحدة الفيديو.

افتح إعدادات الزر وقم بتحديث نص الزر على النحو التالي:

• نص الزر: إخفاء

(ملاحظة: سيتم استبدال / تبديل هذا النص بكلمة "إظهار" عند النقر فوق الزر عندما نضيف الكود الخاص بنا لاحقًا.)

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

• استخدام الأنماط المخصصة للزر: نعم
• أنماط نص الزر: 14 بكسل
• لون نص الزر: # fa50a9
• وزن خط الزر: شبه عريض
• نمط خط الزر: TT
• رمز الزر: السهم الأيمن
• فقط إظهار الأيقونة عند التحويم للزر: لا

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

قم بتحديث تباعد الزر أيضًا:

• الحشو: 0.5 مللي متر علوي ، 0.5 مللي متر أسفل ، 1 مللي متر يسار ، 1.7 مللي متر يمين

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية إلى الزر:

• فئة CSS: et-sticky-video-toggle

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

• الموقف: مطلق
• الموقع: أسفل اليسار

الآن انقل الزر خارج العمود / الفيديو إلى اليسار عن طريق تحديث خيار ترجمة التحويل في الحالة اللاصقة على النحو التالي:

• Transform Translate X Axis (مثبت): -100٪

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

للعنصر الرئيسي على سطح المكتب ...

display:none !important;

للعنصر الرئيسي على مثبت ...

display:block !important;

إضافة الرمز المخصص لوظيفة التبديل

لجعل التبديل يعمل بالطريقة التي نحتاجها ، سنحتاج إلى إضافة وحدة رمز ضمن وحدة الفيديو.

لغة تنسيق ويب حسب الطلب

في علامة تبويب المحتوى ، تجاوز CSS المخصص التالي مع التأكد من لفه في علامات النمط .

.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}

مسج مخصص

ثم ضمن CSS مع علامات النمط ، أضف JQuery التالية ملفوفة في علامات البرنامج النصي .

(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');

$stickyVideoToggle.on('click',function(e) {
e.preventDefault();

$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');

$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);

هذا كل شيء!

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

اعرض الآن النسخة الحية من الصفحة لترى النتائج بنفسك.

هذا الفيديو اللاصق بدون تبديل.

هذا هو نفس الفيديو اللاصق باستخدام زر التبديل.

فيما يلي نظرة فاحصة على وظيفة التبديل.

وإليكم ما يبدو على الهاتف المحمول.

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

نظرًا لأنه تمت إضافة الموضع الثابت إلى العمود (وليس الفيديو) ، فلا تتردد في إضافة وحدات / محتوى إضافي لتكملة الفيديو.

على سبيل المثال ، يمكنك تضمين زر أسفل الفيديو في نفس العمود اللاصق.

ثم سيبقى أسفل الفيديو في الحالة اللاصقة للعمود.

أضف خيارات الفيديو المخصصة الخاصة بك بسهولة باستخدام تخطيط الفيديو الثابت هذا

يعد تطبيق الموضع الثابت على العمود (وليس الفيديو) مفيدًا أيضًا لإضافة تضمين فيديو مخصص أو HTML (باستخدام نص أو وحدة رمز) داخل العمود. ستظل وظيفة الفيديو الثابت تعمل.

على سبيل المثال ، يمكنك إضافة فيديو HTML5 إلى وحدة التعليمات البرمجية داخل نفس العمود.

بسهولة تغيير هياكل العمود كذلك!

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

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

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

مشكلة مع مقاطع فيديو YouTube / التضمينات باستخدام خيار Divi Overlay Image

إذا كنت تستخدم عنوان URL على YouTube لتضمين مقطع فيديو مع وحدة الفيديو كما هو الحال في هذا التصميم ، فمن الأفضل عدم استخدام خيار Divi المدمج في التراكب (مع أيقونة التشغيل). سيؤدي ذلك إلى تشغيل صوت الفيديو تلقائيًا من البداية في الحالة اللاصقة مما يؤدي إلى تكرار تشغيل الصوت على فترات زمنية مختلفة. لذلك إذا كنت تريد استخدام صورة تراكب Divi وأيقونة التشغيل مع وحدة Divi Video Module ، فيجب عليك إضافة ملفات / عناوين URL لملفات الفيديو mp4 و WebM بدلاً من ذلك.

افكار اخيرة

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

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

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

هتافات!