كيفية إعادة إنشاء فيديو انقر فوق تجول ET الخاص بـ Divi

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

دعنا نذهب اليها.

معاينة

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

سطح المكتب

متحرك

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

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

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

تنزيل مجاني

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

تحميل

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

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

لنبدأ في إعادة التكوين!

إضافة قسم عادي جديد

ابدأ بإضافة قسم عادي جديد إلى الصفحة التي تعمل عليها.

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتطبيق إعدادات التحجيم التالية:

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 85vw (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)
• العرض الأقصى: 100٪

إعدادات العمود 1

افتح إعدادات العمود 1 بعد ذلك.

تباعد

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

• الحشوة العلوية: 5vw (سطح المكتب) ، 0vw (الكمبيوتر اللوحي والهاتف)

فئة CSS

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

• فئة CSS: شبكة مستجيبة للعناصر

أضف الوحدة النمطية للدعاية إلى العمود 1

أضف عنوانا

لنبدأ في إضافة وحدات! لكل عنصر قابل للنقر عليه ، سنستخدم وحدة Blurb Module. سنبدأ بالأول ونعيد استخدامه لعناصر النقر المتبقية. أضف وحدة Blurb Module جديدة إلى العمود 1 وأدخل عنوانًا من اختيارك.

حدد أيقونة

حدد رمزًا بعد ذلك.

إعدادات الرمز الافتراضية

انتقل إلى التصميم وقم بتغيير إعدادات الرمز وفقًا لذلك:

• لون الأيقونة: # e8e9ea
• وضع الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 2vw (سطح المكتب) ، 4.5vw (الجهاز اللوحي) ، 7vw (الهاتف)

إعدادات رمز التمرير

قم بتعديل لون الرمز عند التمرير.

• لون الأيقونة: # b0c8ff

إعدادات نص العنوان

انتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات هناك أيضًا.

• خط العنوان: Lato
• وزن خط العنوان: غامق
• نمط خط العنوان: أحرف كبيرة
• حجم نص العنوان: 0.8vw (سطح المكتب) ، 1.7vw (جهاز لوحي) ، 2.5vw (هاتف)
• ارتفاع خط العنوان: 2vw (سطح المكتب) ، 4.5vw (كمبيوتر لوحي) ، 7vw (هاتف)

التباعد الافتراضي

سنقوم بتشكيل وحدة Blurb النمطية باستخدام بعض قيم الحشو المخصصة عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 0.5vw (سطح المكتب) ، 1.5vw (الكمبيوتر اللوحي والهاتف)
• الحشوة اليسرى: 1.2vw (سطح المكتب والكمبيوتر اللوحي) ، 5vw (الهاتف)
• الحشو الأيمن: 1.2vw (سطح المكتب والكمبيوتر اللوحي) ، 5vw (الهاتف)

تحوم التباعد

قم بإنشاء تأثير التمرير عن طريق تعديل قيم هامش التمرير.

• الهامش الأيسر: -0.5vw
• الهامش الأيمن: -0.5vw

الحدود

أضف بعض الزوايا الدائرية أيضًا.

ظل المربع الافتراضي

جنبا إلى جنب مع الظل مربع خفية.

• مربع الظل الرأسي: 10 بكسل
• مربع قوة طمس الظل: 70 بكسل
• لون الظل: rgba (0،0،0،0.11)

تحوم مربع الظل

قم بتغيير لون ظل الصندوق عند التمرير.

• لون الظل: rgba (103،151،255،0.22)

معرف CSS والفئة

أخيرًا وليس آخرًا ، انتقل إلى علامة التبويب المتقدمة في Blurb Module وأضف معرف CSS وفئة.

• معرف CSS: video-walkthrough-item-1
• فئة CSS: مؤشر عنصر الفيديو

استنساخ وحدة Blurb ثلاث مرات

بمجرد الانتهاء من أول وحدة Blurb Module ، يمكنك استنساخها ثلاث مرات.

تغيير المحتوى

قم بتغيير محتوى كل وحدة Blurb Module مكررة.

تغيير كل معرّفات CSS لوحدة Blurb المكررة

جنبًا إلى جنب مع معرفات CSS.

• 1) البناء بصريًا: مقطع فيديو تجول عنصر 1
• 2) التأثيرات: فيديو-تجول-البند -2
• 3) فواصل الشكل: فيديو-تجول-بند -3
• 4) التحرير الجماعي: فيديو-تجول-بند -4

أعد استخدام العمود 1

قم بإزالة العمود 3

بمجرد الانتهاء من العمود الأول ، يمكنك فتح إعدادات الصف وإزالة العمود الثالث.

عمود الاستنساخ 1 ووضعه في الأسفل

انسخ العمود الأول (الذي يحتوي على وحدات Blurb Modules) وضع العمود المكرر في الأسفل.

تغيير هيكل العمود الخلفي

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

تغيير محتوى الوحدة النمطية للدعاية في العمود 3

قم بتغيير عنوان Blurb Module لكل نسخة مكررة في العمود 3.

تغيير معرفات CSS للوحدة النمطية للعمود 3 في العمود 3

جنبًا إلى جنب مع معرفات CSS.

• 5) مكتبة التخطيط: video-walkthrough-item-5
• 6) التحولات: فيديو-تجول-البند -6
• 7) الدول التي تحوم: فيديو-تجول-البند -7
• 8) البحث والاستبدال: video-walkthrough-item-8

أضف وحدة نصية إلى العمود 2

اترك مربع المحتوى فارغًا

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

خلفية الفيديو

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

• إيقاف الفيديو مؤقتًا أثناء عدم مشاهدته: نعم

تحجيم

انتقل إلى علامة تبويب التصميم وأضف "100٪" إلى العرض.

• العرض: 100٪

تباعد

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

• الحشوة العلوية: 15vw (سطح المكتب) ، 24vw (Tablet) ، 26vw (Phone)
• الحشوة السفلية: 15vw (سطح المكتب) ، 24vw (كمبيوتر لوحي) ، 26vw (هاتف)

الحدود

استمر بإضافة "10 بكسل" إلى كل زاوية.

مربع الظل

جنبا إلى جنب مع الظل مربع خفية.

• مربع قوة طمس الظل: 30 بكسل
• قوة انتشار الظل المربع: -5 بكسل
• لون الظل: rgba (0،0،0،0.11)

معرف CSS

أخيرًا وليس آخرًا ، أضف معرف CSS.

• معرف CSS: video-walkthrough-1

وحدة استنساخ النص 7 مرات

بمجرد الانتهاء من وحدة النص ، يمكنك استنساخها سبع مرات (مرة لكل وحدة Blurb Module).

قم بتغيير كافة الخلفيات المكررة لوحدة النص

قم بتحميل خلفية فيديو مختلفة لكل تكرار.

قم بتغيير كل معرفات CSS لوحدة النص المكررة وأضف فئة CSS إلى جميع وحدات النص المكررة

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

• وحدة النص 1: مقطع فيديو تجول 1
• وحدة النص 2: فيديو-تجول -2
• وحدة النص 3: مقطع فيديو 3
• وحدة النص 4: مقطع فيديو 4
• وحدة النص 5: مقطع فيديو 5
• وحدة النص 6: مقطع فيديو 6
• وحدة النص 7: فيديو تجول 7
• وحدة النص 8: فيديو-تجول -8
• فئة CSS: فيديو ليس أولًا

أضف وحدة التعليمات البرمجية رقم 1 إلى العمود 1

بمجرد الانتهاء من الصف الثاني ، حان الوقت لبدء إضافة الرمز. لجعل وظيفة النقر تعمل ، سنستخدم بعض أكواد CSS و JQuery. سنضع الكود في وحدتي كود منفصلتين. ابدأ بإضافة وحدة التعليمات البرمجية الأولى إلى العمود 1.

أدخل رمز CSS للصفحة

أضف الأسطر التالية من كود CSS:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

أضف وحدة التعليمات البرمجية رقم 2 إلى العمود 3

تابع عن طريق إضافة وحدة كود أخرى إلى العمود الثالث.

أدخل رمز JQuery للدالة

أدخل الأسطر التالية من كود JQuery:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

بمجرد الانتهاء من هذه الخطوة ، يمكنك حفظ صفحتك والخروج من Visual Builder!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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