Divi Tutorial: كيفية إضافة وحدة فيديو إلى Divi

من قبل بلير Jersyer | Divi

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

كيفية إضافة وحدة فيديو إلى صفحتك

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

ديفي البناء

بمجرد دخولك إلى Visual Builder ، يمكنك النقر فوق زر علامة الجمع الرمادي لإضافة وحدة نمطية جديدة إلى صفحتك. لا يمكن إضافة الوحدات النمطية الجديدة إلا داخل الصفوف. إذا كنت تبدأ صفحة جديدة ، فتذكر إضافة صف إلى صفحتك أولاً.

وحدة الفيديو divi.png

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

مثال حالة الاستخدام: إضافة مقطع فيديو إلى صفحتك المقصودة

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

إنشاء فيديو على divi exemple.jpg

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

استخدام عرض مخصص divi.png

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

إضافة فيديو على divi.png

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

إضافة تراكب divi video.jpg

ضمن علامة التبويب "التصميم" ، أقوم بتغيير لون رمز التشغيل ليلائم صفحتي المقصودة.

تحرير لاعب أيقونة divi video.jpg

لدي الآن مقطع فيديو لصفحتي المقصودة يبدو نظيفًا ويتوافق مع تصميمي.

التصميم النهائي مع محتوى الفيديو

الآن بعد أن رأيت تعديل الفيديو قيد التشغيل ، تعمق في جميع إعداداته في الأقسام أدناه. لقد قدمنا ​​نظرة مفصلة على ما ستجده في كل علامة تبويب من إعدادات الوحدة وشرحًا لما يفعله كل منها.

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

وحدة المعلمة divi.png

عنوان URL للفيديو

تتيح لك وحدة Divi Video إضافة فيديو باستخدام طريقتين مختلفتين. يمكنك تنزيل ملف الفيديو الخاص بك من جهاز الكمبيوتر الخاص بك عن طريق النقر فوق الزر "تنزيل الفيديو" وتحديد الملف المطلوب ، أو يمكنك إدخال أي رابط فيديو من مصدر فيديو تابع لجهة خارجية مثل Youtube أو Vimeo. ما عليك سوى نسخ عنوان URL ولصقه من متصفحك ولصقه في حقل عنوان URL للفيديو وستتولى Divi الباقي!

صورة URL تراكب

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

علامة المسؤول

بشكل افتراضي ، ستظهر وحدة الفيديو الخاصة بك مع تسمية "فيديو" في المولد. تسمح لك علامة المسؤول بتغيير هذه العلامة لتسهيل التعرف عليها.

خيارات التصميم

تغيير لون الرمز

تصميم قسم divi.png التصميم

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

خيارات avancées

وحدة الفيديو المتقدمة section.png

معرف وفئات CSS

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

عرف المغلق

هنا يمكنك إضافة CSS مخصص إلى وحدة الفيديو الخاصة بك.

رؤية

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

[vc_row center_row = "نعم"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = ”# 18b69d” custom_hover_background = ”# 118d7a” custom_color = ”# ffffff” custom_hover_color = ”# ffffff” icon_right = ”fa fa-download”] DOWNLOAD DIVI THEME [/ vcex_button] [/ width_column] [= vc_column] / 1 ″] [vcex_button url = ”https://www.elegantthemes.com/affiliates/idevaffiliate.php؟id=2&url=23065&tid40632=tutorials” target = ”blank” layout = ”توسيع” align = ”center” font_family = ”Raleway” font_weight = ”1 ″ style =” flat ”custom_background =” # c700e ”custom_hover_background =” # 4226d8f ”custom_color =” # ffffff ”custom_hover_color =” # ffffff ”icon_right =” fa fa-download ”] تنزيل TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

دروس ديفي أخرى

إرسال مراجعة

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

هذا الموقع يستخدم Akismet للحد من غير المرغوب فيها. تعرف على المزيد حول كيفية استخدام بيانات التعليقات الخاصة بك.