إضافة تأثيرات ثلاثية الأبعاد إلى ملفات GIF ومقاطع فيديو HTML5 لعرض الرسوم المتحركة الفريدة للمنتج في Divi

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

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

هيا بنا نبدأ.

نظرة خاطفة

إليك نظرة خاطفة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي. يبدو التصميم مشابهًا عند استخدام GIF وفيديو HTML5 لإنشاء الرسوم المتحركة للمنتج.

قم بتنزيل التأثيرات ثلاثية الأبعاد لفيديو GIF و HTML5 الرسوم المتحركة للمنتج Divi Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

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

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

استخدام صور GIF للرسوم المتحركة القصيرة للمنتج

صور GIF موجودة منذ فترة طويلة. ربما يكون هذا بسبب سهولة إنشاء صور GIF ودعمها على نطاق واسع عبر المتصفحات. ويمكن أن تعمل بشكل جيد مع الرسوم المتحركة القصيرة للمنتج حقًا. نظرًا لأن GIF عبارة عن صورة ، يمكنك استخدامها في وحدة Divi Image تمامًا كما تفعل مع أي ملفات jpg أو png أخرى. يتيح لك هذا تصميم GIF باستخدام القوة الكاملة لإعدادات Divi المدمجة. ولكن كن حذرًا ، فإن صور GIF ذات المدة الأطول ومعدل الإطارات الأعلى يمكن أن تؤدي إلى أحجام ملفات كبيرة حقًا. لذلك من الأفضل الاحتفاظ بصور GIF قصيرة وصغيرة قدر الإمكان.

استخدام فيديو HTML5 كبديل لـ GIF

أصبحت مقاطع فيديو HTML5 بديلاً شائعًا لملفات GIF ، خاصةً بالنسبة للرسوم المتحركة الأطول للمنتج. ربما لاحظت استخدامهم في تصميم موقع ويب Elegant Themes الجديد. فهي أصغر حجمًا مقارنةً بصور GIF ، وبالتالي تستغرق وقتًا أقل للتحميل. وإضافة فيديو HTML5 إلى موقع Divi الخاص بك أمر بسيط. كل ما عليك فعله هو إضافة عنصر فيديو HTML5 لتضمين الفيديو في صفحتك (على غرار الطريقة التي تضيف بها رمز فيديو قصيرًا في WordPress). يمكنك أيضًا تخصيص الفيديو باستخدام عناصر التحكم المخفية والتكرار والتشغيل التلقائي مما ينتج عنه رسوم متحركة عالية الجودة تعمل تمامًا مثل GIF. بالإضافة إلى ذلك ، عند إضافة التضمين إلى وحدة Divi ، يمكنك أيضًا استخدام Divi builder لتصميم الفيديو بطرق إبداعية.

تحقق من هذا المنشور لمزيد من المعلومات حول لماذا يجب أن تفكر في استخدام فيديو HTML5 على صور GIF العادية.

الآن بعد أن فهمنا أكثر قليلاً حول استخدام ملفات GIF ومقاطع فيديو HTML5 ، نحن على استعداد لبدء استخدامها في Divi.

ما تحتاجه لهذا البرنامج التعليمي

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

1. صورة GIF
2. ملف فيديو MP4 (وعنوان URL لملف الفيديو هذا) لاستخدامه في تضمين عنصر فيديو HTML5. للحصول على أقصى دعم للمتصفح ، يمكنك أيضًا تضمين نفس الفيديو بتنسيق webm أيضًا (المزيد حول هذا لاحقًا).
3. موضوع Divi مثبت ونشط
4. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)

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

إضافة تأثير ثلاثي الأبعاد إلى صورة GIF متحركة أو فيديو HTML5

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

في الوقت الحالي ، لنبدأ بإضافة التأثير ثلاثي الأبعاد إلى GIF في Divi.

إنشاء GIF

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

إذا كنت ترغب في معرفة كيفية إنشاء ملف GIF باستخدام Snagit ، فراجع منشورنا حول كيفية تبديل صورة الخلفية باستخدام صورة Gif متحركة على Hover.

إضافة تأثير ثلاثي الأبعاد إلى GIF في Divi

حان الوقت الآن لإضافة GIF إلى Divi حتى نتمكن من تصميمه بتأثير ثلاثي الأبعاد رائع.

لبدء الأمور ، أضف قسمًا عاديًا جديدًا بصف من عمودين.

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

perspective: 1000px;

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

أضف الآن وحدة صورة إلى العمود 1.

قم بتحميل GIF إلى وحدة الصورة. بالنسبة لهذا التصميم ، يجب أن يكون حجم GIF حوالي 600 × 700 بكسل.

ثم استخدم خيارات التحويل لتوسيع نطاق GIF وتدويره وإمالته في مساحة ثلاثية الأبعاد.

تحويل تدوير المحور Y: 8deg
تحويل تدوير المحور X: 28deg

تحويل الانحراف المحور ص: 10 درجة
تحويل الانحراف المحور X: -8deg

مقياس التحويل (الكمبيوتر اللوحي): 80٪

الآن دعونا نلقي نظرة على النتيجة.

إضافة تأثير ثلاثي الأبعاد إلى فيديو HTML5 في Divi

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

إنشاء كود تضمين فيديو HTML5

يحتوي عنصر فيديو HTML5 على البنية الأساسية التالية.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

ليس عليك معرفة الكثير عن HTML لترى ما تفعله هذه الشفرة. داخل عنصر <video> ، لديك عنصرا <source> يحملان المسار / عنوان url لملفات الفيديو التي تريد عرضها. يحتوي كل عنصر مصدر على مقطع فيديو بتنسيق ملف مختلف (webm و mp4). كلاهما ضروري للحصول على أقصى دعم للمتصفح. الترتيب مهم أيضًا. يتم وضع فيديو webm فوق فيديو mp4 في الكود لأنه تنسيق فيديو عالي الجودة ولكنه أقل دعمًا بواسطة المتصفحات. لذلك إذا كان المستعرض يدعم فيديو webm ، فسيعرضه. ولكن إذا كان المستعرض لا يدعم فيديو webm ، فسيستخدم تنسيق الفيديو mp4 أدناه. ليس من الضروري تضمين كلا تنسيقي الفيديو ، ولكن من أفضل الممارسات. وإذا كنت ستستخدم تنسيقًا واحدًا فقط ، فاستخدم تنسيق mp4 لأنه مدعوم على نطاق أوسع.

في الواقع ، كلما استخدمت وحدة فيديو Divi لعرض مقاطع الفيديو ذاتية الاستضافة ، تقوم Divi بإنشاء عنصر فيديو HTML5 نفسه لعرض مقاطع الفيديو. وهذا هو السبب في أن وحدة الفيديو تسمح لك بإضافة ملف فيديو بتنسيق mp4 و webm.

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

إذا قمت بتحميل ملفات الفيديو إلى موقع WordPress الخاص بك ، فيمكنك الحصول على عناوين url من مكتبة الوسائط.

ثم الصق عناوين url للفيديو داخل الأقواس بعد السمة src .

يجب أن يبدو مثل هذا عند الانتهاء.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

بعد ذلك ، سنضيف أربع سمات للتحكم في عرض الفيديو ووظائفه. هذا النوع من التحكم هو السبب الأساسي لإدخال فيديو HTML5 يدويًا بدلاً من استخدام وحدة Divi Video Module. تتضمن هذه السمات autoplay (بحيث يبدأ الفيديو تلقائيًا) ، loop (بحيث يتكرر الفيديو) ، muted (بحيث لا يقوم الفيديو بتشغيل الصوت) ، والتشغيل playsinline (بحيث يتم تشغيل الفيديو داخل منطقة تشغيل العنصر). لتطبيق هذه السمات على الفيديو ، أضف كل سمة داخل أقواس علامة البداية <video> .

الآن سيبدو الرمز هكذا.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

ملاحظة: عادةً ما تقوم بتطبيق سمة controls لمقاطع فيديو HTML5 ، ولكن في هذه الحالة سنتركها بحيث يعمل الفيديو مثل GIF.

أنت الآن جاهز لتضمين الكود.

تضمين فيديو HTML5

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

قبل أن نستبدل وحدة صورة GIF بوحدة الشفرة الخاصة بنا ، دعنا نمضي قدمًا ونكرر القسم بأكمله حتى نتمكن من الاحتفاظ بمثال GIF الخاص بنا. في القسم المكرر ، احذف وحدة الصورة وأضف وحدة نصية في مكانها.

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

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

تحويل تدوير المحور Y: 8deg
تحويل تدوير المحور X: 28deg
تحويل الانحراف المحور ص: 10 درجة
تحويل الانحراف المحور X: -8deg
مقياس التحويل (الكمبيوتر اللوحي): 80٪

نظرًا لأنني أستخدم نفس الفيديو الذي استخدمته لإنشاء GIF ، سيبدو التصميم مشابهًا جدًا. ومع ذلك ، فإن حجم الفيديو أصغر بكثير من حجم GIF. ها هي النتيجة.

استكمال تصميم تخطيط القسم

الآن بعد أن أصبح لدينا GIF ثلاثي الأبعاد (أو فيديو HTML5) في مكانه. يمكننا الانتهاء من تصميم تخطيط القسم الخاص بنا. بالنسبة لهذا التصميم ، سأستخدم القسم مع فيديو HTML5 في العمود 1.

تخصيص القسم والصف

افتح إعدادات القسم وقم بتحديث ما يلي.

الحشو: 15٪ علوي ، 15٪ سفلي

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

لون الخلفية المتدرج الأيسر: # ba7fe8
تدرج الخلفية اللون الصحيح: # 4b84ff

أقصى ارتفاع: 300 بكسل (سطح المكتب) ، لا شيء (الجهاز اللوحي والهاتف)

المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

بعد ذلك يمكننا إعطاء الصف ظل مربع داخلي شبه شفاف لعنصر تصميم فريد.

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الأفقي: 0 بكسل
مربع الظل الوضع الرأسي: 0 بكسل
قوة انتشار الظل المربع: 40 بكسل
لون الظل: rgba (255،255،255،0.89)

وضع وحدة التعليمات البرمجية

الآن دعنا نحضر وحدة الكود مع الفيديو قليلاً عن طريق ضبط خاصية تحويل التحويل على النحو التالي:

تحويل المحور ص للترجمة: -20٪ (سطح المكتب) ، -7٪ (الهاتف)

إضافة دعوة إلى وحدة العمل

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

أضف عنوان URL لارتباط الزر لإظهار الزر.

تابع تحديث الإعدادات على النحو التالي:

لون الخلفية: #ffffff
محاذاة النص: يسار
لون النص: غامق

خط العنوان: Lato
وزن خط العنوان: غامق
لون نص العنوان: # 20292f
خط الجسم: لاتو
لون النص الأساسي: # 6d7c90
حجم النص الأساسي: 17 بكسل
ارتفاع خط الجسم: 1.8em

حجم نص الزر: 12 بكسل
لون نص الزر: #ffffff
لون خلفية الزر: # 4b84ff
عرض حد الزر: 0 بكسل
نصف قطر حدود الزر: 100 بكسل
تباعد حرف الزر: 2 بكسل
خط الزر: Lato
وزن خط الزر: ثقيل
نمط خط الزر: TT
حشوة الزر: 12 بكسل للأعلى ، 12 بكسل للأسفل ، 20 بكسل لليسار ، 20 بكسل لليمين

Box Shadow: انظر لقطة الشاشة
مربع الظل الوضع الرأسي: 0 بكسل
قوة انتشار الظل المربع: 40 بكسل
لون الظل: rgba (103151.255.0.11)

الهامش: 10٪ يمين

محور Transform Translate Y: -33٪ (سطح المكتب) ، -15٪ (هاتف)
تحويل المحور X للترجمة: -5٪

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

سطح المكتب

لوح

هاتف

افكار اخيرة

إن إضافة التأثير ثلاثي الأبعاد إلى ملفات GIF ومقاطع فيديو HTML5 يعطي حقًا عرضًا فريدًا للرسوم المتحركة للمنتج. تجعل خيارات تحويل Divi (جنبًا إلى جنب مع خاصية المنظور) من السهل إضافة التأثيرات ثلاثية الأبعاد إلى ملفات GIF ومقاطع الفيديو الخاصة بك.

ونأمل أن تكون قد تعلمت بعض الأشياء حول كيفية استخدام ملفات GIF ومقاطع فيديو HTML5 مع Divi. صور GIF سهلة الاستخدام ولكن يصعب الحفاظ على حجم الملف مناسبًا للويب. تتطلب مقاطع فيديو HTML5 استخدام كود التضمين ولكن يمكن أن تعمل بشكل جيد للغاية كبديل GIF للرسوم المتحركة الأطول.

لا تتردد في استكشاف طرق جديدة ومثيرة لاستخدام هذا التصميم لعرض الرسوم المتحركة للمنتجات والخدمات في مشروعك التالي.

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

هتافات!