خلفية جزيئات العنصر الحر (particles.js)
الجسيمات عبارة عن امتداد Master Addons مجاني يقوم بتشغيل الرسوم المتحركة للجسيمات.js خلف أي قسم أو عمود أو حاوية عنصر. قم بتشغيله وستحصل على التأثير الافتراضي على الفور: تنجرف النقاط البيضاء عبر القسم، وتنضم إليها خطوط رفيعة ويدفعها المؤشر بعيدًا. لأي شيء آخر، مثل تساقط الثلوج أو ارتفاع الفقاعات أو مجال النجوم، قم ببناء تكوين في مولد الجسيمات.js والصق JSON الخاص به في اللوحة.
خلفية متحركة بدون ملف فيديو
يتم رسم الجسيمات على لوحة قماشية بواسطة برنامج نصي الجسيمات.js، لذلك لا يوجد فيديو أو صورة للتنزيل. يحدد إعداد مؤشر Z مكان طبقة الجسيمات، حتى تتمكن من الاحتفاظ بها خلف العناوين والأزرار الخاصة بك. إذا كنت تستخدم الجسيمات في أكثر من قسم، فاحتفظ بعدد الجسيمات متواضعًا وتحقق من الصفحة على الهاتف.
- لا توجد ملفات فيديو أو صور: يتم رسم الرسوم المتحركة في المتصفح.
- إعداد مؤشر Z للحفاظ على طبقة الجسيمات خلف المحتوى الخاص بك.
- يعمل على الأقسام والأعمدة والحاويات، ولكل منها تكوينها الخاص.
أي تأثير جسيمات.js من حقل JSON واحد
يتحكم حقل Particle JSON في كل ما يمكن أن تفعله الجسيمات.js: عدد الجسيمات، واللون، والشكل، والحجم، والعتامة، وخطوط الربط، والسرعة والاتجاه، بالإضافة إلى تفاعلات التمرير والنقر. الرابط الموجود أعلى الحقل يفتح مولد الجسيمات.js. اختر إعدادًا مسبقًا مثل NASA أو Bubble أو Snow، وقم بضبطه باستخدام أشرطة التمرير وتنزيل التكوين. لصقه وتحديثات القسم في المحرر.
- الإعدادات المسبقة للمولد: الافتراضي، ناسا، بابل، سنو ونيان كات.
- الأشكال: دائرة، حافة، مثلث، مضلع، نجمة أو صورتك الخاصة.
- أوضاع التمرير والنقر مثل الصد والإمساك والفقاعة والدفع.
كيفية إضافة خلفية الجسيمات في Elementor
تحتاج الجزيئات البيضاء الافتراضية إلى خلفية داكنة أو ملونة لتظهر، لذا قم بضبط ذلك أولاً.
- قم بتشغيل الجسيمات في علامة التبويب "الامتدادات" بلوحة معلومات Master Addons.
- حدد قسمًا أو عمودًا أو حاوية وأعطه لون خلفية داكنًا.
- افتح علامة التبويب "النمط"، وقم بتوسيع الجسيمات وتشغيل تمكين خلفية الجسيمات.
- للحصول على تأثير مختلف، انقر فوق الرابط الموجود أعلى Particle JSON، واختر إعدادًا مسبقًا في المولد، وقم بتنزيل JSON والصقه في الحقل.
- قم بتعيين مؤشر Z بحيث تظل طبقة الجسيمات خلف المحتوى الخاص بك، ثم قم بالنشر.
لدينا دروس خلفية الجسيمات يمشي خلال كل خطوة مع لقطات الشاشة.
Particles.js في WordPress: يدويًا أو بالامتداد
partclements.js هي مكتبة JavaScript مجانية، ويمكنك إضافتها إلى WordPress بنفسك. إليك ما يتطلبه الأمر مقارنة بالامتداد.
| إضافة جزيئات.js باليد | تمديد الجسيمات | |
|---|---|---|
| تحميل البرنامج النصي | قم بإدراج المكتبة في موضوعك | محملة فقط على الصفحات التي تحتوي على قسم الجسيمات |
| طبقة الجسيمات | أضف div وضعه خلف المحتوى باستخدام CSS | تمت الإضافة إلى القسم الخاص بك |
| التكوين | اتصل بـparticlesJS() باستخدام JSON الخاص بك في برنامج نصي | لصق JSON في اللوحة |
| معاينة | على الواجهة الأمامية | الحق في محرر العنصر |
| طبقات | اكتب قواعد مؤشر z الخاصة بك | حقل مؤشر Z |
أزواج الجسيمات بشكل جيد مع التشكل الزجاجي البطاقات في الأعلى. للحصول على خلفيات متحركة أخرى، حاول منزلق الخلفية أو خلفية التدرج المتحركة (برو).
الأسئلة المتداولة للجسيمات
أنا لست مطور. هل أشياء JSON صعبة للغاية بالنسبة لي؟
رقم يمنحك تشغيل التأثير المظهر الافتراضي بدون JSON على الإطلاق. بالنسبة للمظهرات الأخرى، يعمل مولد الجسيمات.js مع أشرطة التمرير ومنتقي الألوان. قم بتنزيل التكوين الذي ينشئه ولصقه في حقل Particle JSON.
هل يمكنني استخدام صورتي الخاصة (مثل الشعار) كجسيم؟
نعم. في مولد الجسيمات.js، قم بتعيين نوع الشكل على الصورة وأدخل عنوان URL لصورتك، مثل شعار صغير. قم بتنزيل التكوين ولصقه في حقل Particle JSON.
هل سينجح هذا على الهواتف المحمولة؟
نعم، الرسوم المتحركة تعمل على الهواتف والأجهزة اللوحية. يمكن أن يؤدي ارتفاع عدد الجسيمات إلى إبطاء الهواتف القديمة، لذا حافظ على تواضع العدد للأقسام التي سيراها زوار الهاتف المحمول.
هل يمكنني الحصول على تأثيرات جسيمية مختلفة على أقسام مختلفة من نفس الصفحة؟
نعم. يحتوي كل قسم وعمود وحاوية على حقل Particle JSON الخاص به، حتى يتمكن بطلك من إظهار حقل نجمي بينما يستخدم قسم آخر الثلج.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
