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

 يتيح لك ملحق Floating Effect Elementor من Master Addons إضافة رسوم متحركة سلسة وتفاعلية إلى أي عنصر على موقع الويب الخاص بك. باستخدام التخصيصات البسيطة مثل الترجمة والتدوير والقياس، يمكنك إنشاء رسوم دقيقة الحركات العائمة أو التأثيرات الديناميكية ثلاثية الأبعاد.

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

كيفية استخدام ملحق عنصر التأثير العائم

قبل الدخول في خيارات التأثيرات العائمة، يجب عليك التأكد من تمكين الامتداد.

ما عليك سوى الانتقال إلى Master Addons على لوحة المعلومات الخاصة بك. انتقل إلى علامة التبويب "الامتدادات" وقم بتبديل ملحق "التأثيرات العائمة". بسيط!

بعد تمكينه، يمكنك الانتقال إلى علامة التبويب المتقدمة لأي عنصر على موقعك والتمرير لأسفل للعثور على ملحق “floating Effects”. تبديله وسترى خيارات التخصيص التالية.

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

2. تدوير
باستخدام هذا الخيار، يمكنك تدوير العناصر على طول المحاور X وY وZ. وهذا يمنح عناصرك تأثيرًا دوارًا أكثر ديناميكية.
يمكنك أيضًا ضبط مدة وتأخير التدوير، مما يسمح بانتقالات أكثر سلاسة أو دراماتيكية.

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

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

ننصحك بالتحقق ميزات outElementor Pro أيضاً. يمكنك الجمع بين Elementor pro و الإضافات الرئيسية لإنشاء أي نوع من مواقع الويب التي تريدها.

الجمع بين التأثيرات

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

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

الجمع بين الترجمة والمقياس: يسمح استخدام كل من الترجمة والقياس للعنصر بالتحرك وتغيير الحجم في نفس الوقت. يمكن أن يؤدي ذلك إلى إنشاء تأثير عائم متوسع أو متقلص أثناء انجراف العنصر عبر الشاشة.

الجمع بين الثلاثة: للحصول على التأثير العائم النهائي، اجمع بين الترجمة والتدوير والتوسع. وهذا يسمح برسوم متحركة معقدة حيث يتحرك العنصر ويدور وينمو/ينكمش مرة واحدة، مما يمنحه مظهرًا جذابًا ومتعدد الأبعاد.

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

إنشاء تأثير عائم على الصورة

نأمل أن تعرف الآن كيفية تعديل الإعدادات المختلفة لامتداد Floating Effects.

كمكافأة، سنوضح لك كيفية إنشاء قسم رائع يحتوي على بعض الصور التأثيرات العائمة و ملحقات تحديد المواقع:

يمكنك متابعة الفيديو أدناه حيث نعرض لك العملية الكاملة.

أولاً، اختر، فلنختار بعض الصور التي سنستخدمها لإنشاء قسمنا.

بعد ذلك، نقوم بإضافة Flexbox أو شبكة كاملة العرض لثلاثة أعمدة وصفين ونرتب جميع الصور مثل لقطة الشاشة التالية داخل المربعات المناسبة.

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

لقد استخدمنا ملحق تحديد المواقع Master Addons لتحديد موضع الصور بدقة. للبدء، حدد "النسبي" داخل امتداد الموضع. ثم تابع محاذاة صورك أو أي عناصر أخرى حسب الحاجة.

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

وأخيرا، دعونا نطبق التأثير العائم على الصور المطلوبة. لقد قمنا بتطبيق تأثيرات الترجمة X وY على الصور الموجودة في العمودين الأول والثالث. تم تطبيق تأثير Rotate Z حصريًا على صورة الملف الشخصي. يرجى الرجوع إلى ملف GIF التالي لرؤية النتيجة المرئية الحالية.

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

لا تخف من تجربة إعدادات ومجموعات مختلفة للعثور على التأثير العائم المثالي لموقعك. مع القليل من الإبداع، يمكنك رفع مستوى تصميم الويب الخاص بك وإنشاء تجربة مستخدم أكثر تفاعلية.

إذا كنت تواجه أي مشكلة مع هذا الامتداد، فلا تتردد في التعليق هنا أو الاتصال بنا عبر موقعنا نموذج الاتصال بالموقع.