بعض الخلفيات ثابتة، وبعضها ينجرف. النقاط العائمة المتصلة بخطوط رفيعة، أو تساقط الثلوج خلف العنوان الرئيسي: تأثيرات الجسيمات تعطي مقطعًا حركة هادئة دون وجود ملف فيديو في الأفق. مجاني تمديد الجسيمات في الإضافات الرئيسية للعنصر يعرض ذلك بالضبط خلف المحتوى الخاص بك، مدعومًا بمكتبة الجسيمات المعروفة.js وتم تكوينه بحقل JSON واحد.
فيما يلي القسم التجريبي الذي يقوم بتشغيل إعداد Snow المسبق على الصفحة المنشورة
ما يفعله امتداد الجسيمات #
بمجرد التمكين، تحصل الأقسام والأعمدة والحاويات على الجسيمات لوحة في أسلوب علامة التبويب. الوجه تمكين خلفية الجسيمات إلى نعم وتصبح خلفية القسم عبارة عن لوحة قماشية حية. اللوحة تبقيها في حدها الأدنى:
- تمكين خلفية الجسيمات: مفتاح التشغيل/الإيقاف للتأثير.
- مؤشر Z: حيث توجد طبقة الجسيمات في المكدس، بحيث تبقى خلف المحتوى.
- الجسيمات JSON: يوجد هنا حقل كود يحتوي على تكوين الجسيمات.js: عدد الجسيمات، واللون، والشكل، والحجم، وخطوط الربط، وسرعة الحركة، وتفاعل التحويم.
يأتي التكوين الافتراضي في الصندوق، ونقاط بيضاء متصلة بشبكة خطوط دقيقة، وترتبط اللوحة مباشرة بمولد الجسيمات.js لبناء جهازك الخاص.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- الجسيمات هي امتداد مجاني، لذلك لا يلزم الحصول على ترخيص Pro.
- لا حاجة للتشفير: يأتي JSON من مولد الإشارة والنقر.
كيفية تمكين تمديد الجسيمات #
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. الجسيمات موجودة في الحاجيات الرسوم المتحركة مجموعة تحمل شارة شعبية، بجوار التأثيرات العائمة و الرسوم المتحركة التدرج BG. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني، ثم اضغط حفظ التغييرات وانتظر حتى يتم حفظ إعدادات “ الخضراء بنجاح في إشعار”.
ابحث عن لوحة الجسيمات في القسم #
حدد الحاوية أو القسم في محرر Elementor وافتح أسلوب علامة التبويب. ال الجسيمات يوجد القسم الذي يحمل شارة MA الأرجوانية مع أدوات الخلفية الرئيسية الأخرى: خلفية متدرجة متحركة، منزلق الخلفيةوالأنماط.
قم بتشغيله وتلبية التأثير الافتراضي #
توسيع الجسيمات والتبديل تمكين خلفية الجسيمات إلى نعم. تقوم اللوحة القماشية على الفور بتشغيل التكوين الافتراضي: نقاط بيضاء تنجرف عبر القسم، متصلة بخطوط رفيعة بشبكة متحركة. ال الجسيمات JSON يحتوي الحقل أدناه على التكوين الذي يحركه، و مؤشر Z يحتفظ بالطبقة خلف النص الخاص بك.
احصل على إعداد مسبق من مولد الجسيمات.js #
ال انقر هنا يفتح الرابط الموجود أعلى حقل JSON الموقع التجريبي للجسيمات.js، وهو مولد مباشر بتكوينات محددة مسبقًا الافتراضي، ناسا، فقاعة، سنو، ونيان كات. اختر واحدًا، وقم بضبط أشرطة التمرير إذا أردت، ثم اضغط تنزيل التكوين الحالي (json).
افتح الملف الذي تم تنزيله، وانسخ JSON، والصقه في حقل Particle JSON. يتماشى العرض التوضيحي مع إعداد Snow المسبق، وتتحول اللوحة القماشية من شبكة الخط إلى رقائق بيضاء ناعمة تسقط فوق القسم لحظة هبوط التكوين.
النتيجة على الصفحة #
النشر والقسم يتساقط من تلقاء نفسه، كما هو الحال في ملف GIF الموجود أعلى هذه الصفحة. يتم عرض الجزيئات على لوحة قماشية خلف المحتوى، بحيث يظل كل شيء في الأعلى واضحًا بينما تستمر الخلفية في التحرك. تتفاعل التكوينات الافتراضية أيضًا مع المؤشر؛ تأثير الشبكة القياسي ينفر الجزيئات عند التحويم.
ملاحظة عملية واحدة: عدد الجسيمات يحرك الأداء. يعمل إعداد Snow المسبق على تشغيل 400 جسيم ويظل سلسًا، ولكن إذا كانت الصفحة تحتوي على عدة أقسام من الجسيمات، فاحتفظ بالأعداد متواضعة وتحقق منها على هاتف متوسط المدى.
حيث تناسب خلفيات الجسيمات #
- أقسام البطل. تقرأ شبكة النقاط المتصلة التكنولوجيا والحديثة خلف عنوان جريء.
- الحملات الموسمية. يقوم إعداد Snow المسبق بتحويل أي قسم ترويجي شتويًا إلى عجينة واحدة.
- SaaS وصفحات بدء التشغيل. تضيف الجسيمات بطيئة الانجراف عمقًا دون تشتيت انتباهها عن درجة الصوت.
- أقسام مظلمة. تكوينات Star-Field مثل NASA تجعل الخلفيات الداكنة تبدو متعمدة.
- صفحات الحدث والإطلاق. الحركة خلف العد التنازلي تحافظ على صفحة متفرقة حية.
فيديو تعليمي #
شاهد الإعداد بأكمله، بدءًا من تمكين الامتداد وحتى تساقط الثلوج على الصفحة المنشورة.
الأسئلة المتداولة #
كيف يمكنني إضافة خلفية جسيمية في Elementor؟
قم بتمكين ملحق الجسيمات في علامة التبويب "ملحقات الإضافات الرئيسية"، وحدد قسمًا، وافتح الجسيمات في علامة التبويب "النمط". قم بتبديل تمكين خلفية الجسيمات إلى نعم وستظهر الشبكة المتحركة الافتراضية على الفور، دون الحاجة إلى تكوين.
من أين أحصل على تأثيرات الجسيمات المختلفة؟
يفتح رابط النقر هنا الموجود في اللوحة مولد الجسيمات.js مع الإعدادات المسبقة مثل NASA وBubble وSnow وNyan Cat. اضبط الإعدادات مباشرة، وقم بتنزيل التكوين كـ JSON، والصقه في حقل Particle JSON.
هل تعمل الجزيئات على إبطاء الصفحة؟
يتم تشغيل التأثير على قماش خفيف الوزن ويظل سلسًا عند الأعداد النموذجية؛ يقوم العرض التوضيحي Snow بتشغيل 400 جسيم دون تلعثم. حافظ على الأعداد معقولة وتجنب تكديس العديد من أقسام الجسيمات في صفحة واحدة، خاصة للزوار المتنقلين.
هل يمكن للجزيئات أن تتفاعل مع الفأر؟
نعم. يتضمن تكوين الجسيمات.js إعدادات التفاعل، ويقوم التكوين الافتراضي بطرد الجسيمات عندما يتحرك المؤشر فوق القسم. يمكن تكوين سلوكيات التمرير والنقر في JSON.
هل تمديد الجسيمات مجاني؟
نعم. تأتي الجسيمات مع الإصدار المجاني من Master Addons for Elementor، في مجموعة Animation Widgets في علامة التبويب Extensions. تغطي صفحة التسعير ما تضيفه خطط Pro.
إلتحاق بالركب #
يضع ملحق الجسيمات لوحة قماشية حية للجسيمات خلف أي قسم من أقسام Elementor: تبديل واحد للشبكة الافتراضية، وواحد JSON ملصق لأي شيء يمكن لمولد الجسيمات.js أن يحلم به. حافظ على الأعداد سليمة، ودع مؤشر Z يحتفظ بالطبقة خلف المحتوى، ويتحرك القسم دون تحميل أصل واحد. يقع بشكل طبيعي بجانب خلفية التدرج المتحركة و منزلق الخلفية الملحقات في نفس علامة التبويب "النمط"، والمجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية على بعد صفحة واحدة. لمقارنتها بإضافة الجسيمات.js يدويًا، راجع صفحة تمديد الجسيمات.
