تضيف خلفيات الجسيمات أشكالًا متحركة عائمة إلى أقسام Elementor الخاصة بك والتي تتحرك وتتصل وتتفاعل مع حركة الماوس. إنها تحول الأقسام الثابتة إلى مناطق تفاعلية ملفتة للنظر تجذب الانتباه على الفور.
في هذا الدليل، ستتعلم كيفية إضافة خلفية جسيمات العنصر إلى أي قسم على موقع الويب الخاص بك باستخدام الإضافات الرئيسية للعنصر. سنغطي الإعداد الأساسي والإعدادات المسبقة المضمنة (NASA وBubble وSnow) وكيفية إنشاء تأثيرات الجسيمات المخصصة الخاصة بك باستخدام تكوين الجسيمات.js JSON.
لا حاجة للترميز. تستغرق العملية برمتها حوالي 5 دقائق.
ما هي خلفية الجسيمات؟
خلفية الجسيمات هي تأثير متحرك يعرض أشكالًا صغيرة (نقاط أو دوائر أو نجوم أو أشكال مخصصة) تطفو عبر قسم ما. تتحرك هذه الجسيمات بسرعات مختلفة، وتتصل بخطوط رفيعة عندما تكون قريبة من بعضها البعض، ويمكن أن تتفاعل مع المؤشر عند التحليق.
يتم تشغيل التأثير بواسطة الجسيمات.js، مكتبة جافا سكريبت شعبية. تقوم Master Addons بدمج الجسيمات.js مباشرة في Elementor، حتى تتمكن من تمكين التأثير وتخصيصه دون لمس أي رمز.
تتضمن الإضافات الرئيسية أربعة إعدادات مسبقة مدمجة للجسيمات:
| تعيين مسبق | تأثير | الأفضل ل |
|---|---|---|
| الافتراضي | النقاط المتصلة تطفو في اتجاهات عشوائية | مواقع التكنولوجيا، الصفحات المقصودة SaaS |
| ناسا | جسيمات عائمة تشبه الفضاء ولها تأثير عميق | أقسام البطل المظلم، الصفحات ذات الطابع الفضائي |
| فقاعة | فقاعات دائرية أكبر ترتفع للأعلى | محافظ إبداعية، وتصميمات مرحة |
| ثلج | جزيئات بيضاء صغيرة تتساقط مثل رقاقات الثلج | الصفحات الموسمية، الأقسام ذات الطابع الشتوي |
يمكنك أيضًا إنشاء تأثيرات مخصصة بالكامل عن طريق إنشاء تكوين الجسيمات الخاصة بك.js JSON.
ما سوف تحتاج
- ووردبريس مع العنصر (مجاني أو احترافي) مثبت
- الإضافات الرئيسية للعنصر تم التثبيت والتنشيط
- ال الجسيمات تم تمكين الامتداد في إعدادات الإضافات الرئيسية
تأكد من تشغيل امتداد الجسيمات: انتقل إلى الإضافات الرئيسية → الامتدادات في لوحة تحكم WordPress الخاصة بك والتبديل الجسيمات إلى على.
كيفية إضافة خلفية الجسيمات في العنصر: خطوة بخطوة
اتبع هذه الخطوات لإضافة خلفية الجسيمات إلى أي قسم أو حاوية Elementor على صفحتك.
الخطوة 1: إنشاء قسم أو تحديده
افتح صفحتك في محرر Elementor. قم بإنشاء قسم جديد أو حدد قسمًا موجودًا تريد إضافة تأثير الجسيمات إليه.
اختر بنية العمود المفضلة لديك. يعمل تأثير الجسيمات مع أي تخطيط، سواء كان عمودًا واحدًا أو عمودين أو أكثر.
الخطوة 2: إضافة محتوى إلى القسم
يحتاج القسم الخاص بك إلى عنصر واجهة مستخدم واحد على الأقل بداخله ليكون مرئيًا في المعاينة. إذا كنت تقوم بإنشاء قسم جسيمات مستقل (مثل منطقة البطل المتحركة)، فقم بإسقاط ملف فاصل أدخل في القسم وقم بتعيين الارتفاع على 400-600px.
يمكنك أيضًا إضافة عناوين أو أزرار أو صور أو أي عناصر واجهة مستخدم أخرى. ستظهر الجزيئات خلف كل المحتوى الخاص بك.
الخطوة 3: اضبط القسم على العرض الكامل (اختياري)
للحصول على أفضل تأثير مرئي، قم بتعيين تخطيط القسم على العرض الكامل. وهذا يجعل الجزيئات تمتد على كامل عرض المتصفح.
انقر فوق أيقونة تحرير القسم، وانتقل إلى تخطيط علامة التبويب، وتعيين عرض المحتوى إلى العرض الكامل.
هذه الخطوة اختيارية. تعمل الجسيمات أيضًا في أقسام ذات عرض محاصر.
الخطوة 4: أضف لون الخلفية
هذه الخطوة مهمة. تكون الجسيمات بيضاء بشكل افتراضي، لذا تحتاج إلى خلفية داكنة أو ملونة لجعلها مرئية.
انقر فوق أيقونة تحرير القسم، وانتقل إلى أسلوب علامة التبويب، وتحت خلفية، اضبط لونًا ثابتًا أو تدرجًا. يعمل اللون الأزرق الداكن والأسود والبنفسجي العميق بشكل أفضل مع الجزيئات البيضاء الافتراضية.
نصيحة: للحصول على مظهر أكثر ديناميكية، حاول استخدام امتداد خلفية التدرج المتحركة من الإضافات الرئيسية بدلاً من اللون الصلب. تخلق الخلفيات المتدرجة المدمجة مع الجزيئات تأثيرًا بصريًا مذهلاً.
الخطوة 5: تمكين تأثير الجسيمات
الآن للجزء الرئيسي. مع تحديد القسم، ابق على أسلوب علامة التبويب والتمرير لأسفل للعثور على جسيمات MA قسم. تبديله على.
سيظهر تأثير جسيم العنصر الافتراضي على الفور في القسم الخاص بك. سترى نقاطًا بيضاء صغيرة تطفو وتتصل بخطوط رفيعة.
إذا كان التأثير الافتراضي يبدو جيدًا لتصميمك، فقد انتهيت. يضرب تحديث لحفظ. ولكن إذا كنت تريد تخصيص نمط الجسيمات، استمر في القراءة.
كيفية تخصيص تأثير جزيئات العنصر الخاص بك
يتيح لك Master Addons تخصيص الجزيئات بالكامل باستخدام أداة التكوين المرئية. يمكنك تغيير عدد الجزيئات وشكلها وحجمها وسرعتها ولونها وسلوك حركتها، كل ذلك دون كتابة التعليمات البرمجية.
الخطوة 1: افتح مكون الجسيمات
أسفل تبديل الجزيئات، سترى رسالة: “انقر هنا لإنشاء JSON للحقل أدناه.” انقر فوق الرابط لفتح أداة التكوين المرئي للجسيمات.js.
في الجزء العلوي من المكوّن، انقر فوق “Default” لرؤية الإعدادات المسبقة الأربعة المضمنة: الافتراضي، وناسا، والفقاعة، والثلج. حدد أي إعداد مسبق كنقطة بداية، أو ابدأ من التكوين الافتراضي.
الخطوة 2: ضبط خصائص الجسيمات
يحتوي المكوّن على ثلاثة أقسام رئيسية. التركيز على الجسيمات قسم التخصيص المرئي:
- رقم os يتحكم في عدد الجزيئات التي تظهر. تخلق القيم الأعلى تأثيرًا أكثر كثافة، ولكنها تستخدم المزيد من موارد المتصفح.
- لون 0 قم بتعيين لون الجسيمات. استخدم اللون الأبيض للخلفيات الداكنة، أو قم بمطابقة ألوان علامتك التجارية.
- شكل اختر من بين أشكال الدائرة أو الحافة (المربع) أو المثلث أو المضلع أو النجوم.
- مقاس op ضبط حجم الجسيمات. تمكين الحجم العشوائي للحصول على مظهر أكثر طبيعية.
- التعتيم 1 التحكم في شفافية الجسيمات. العتامة الجزئية تخلق تأثيرًا دقيقًا وأنيقًا.
- الخط مرتبط 6 تمكين أو تعطيل خطوط الاتصال بين الجزيئات القريبة.
- حركة 10 ضبط سرعة واتجاه حركة الجسيمات.
الخطوة 3: قم بتنزيل التكوين الخاص بك
بمجرد أن تصبح سعيدًا بالشكل الذي تبدو عليه الجزيئات في المعاينة المباشرة، قم بالتمرير إلى أسفل أداة التهيئة وانقر فوق “تنزيل التكوين الحالي (JSON)”.
ملف اسمه particlesjs-config.json سيتم تنزيله على جهاز الكمبيوتر الخاص بك.
الخطوة 4: انسخ رمز JSON
افتح التنزيل particlesjs-config.json ملف في أي محرر نصوص (Notepad، VS Code، أو TextEdit). حدد كل التعليمات البرمجية وانسخها.
لا تقم بتحرير JSON يدويًا إلا إذا كنت تعرف ما تفعله. قام المكون المرئي بالفعل بإنشاء الإعدادات الدقيقة التي تحتاجها.
الخطوة 5: الصق في العنصر
ارجع إلى محرر Elementor الخاص بك. في القسم النمط → جسيمات MA الإعدادات، سترى منطقة نصية مُصنفة للجسيمات رمز JSON. الصق الكود الذي قمت بنسخه وانقر عليه تحديث.
تأثير الجسيمات المخصص الخاص بك موجود الآن على الصفحة. قم بمعاينته للتأكد من أن كل شيء يبدو صحيحًا.
طرق مبتكرة لاستخدام خلفيات الجسيمات
فيما يلي بعض حالات الاستخدام العملي للخلفية المتحركة للعنصر مع الجسيمات
- أقسام البطل 1 أضف جزيئات إلى بطل صفحتك الرئيسية للحصول على مظهر عصري وتقني. ادمج مع العنوان والنص الفرعي وزر CTA.
- أقسام التسعير 5 استخدم تأثيرًا دقيقًا ومنخفض الكثافة للجسيمات خلف جدول التسعير الخاص بك لجعله متميزًا عن بقية الصفحة.
- مناطق الشهادة op يضيف تأثير الثلج أو الفقاعة اللطيف خلف الشهادات اهتمامًا بصريًا دون تشتيت الانتباه عن المحتوى.
- أقسام التذييل op أضف جزيئات إلى تذييلك لإلقاء نظرة مصقولة ومنتهية على أسفل الصفحة.
- الصفحات القادمة قريبا 2. تقوم الجسيمات بإنشاء حركة على ما يمكن أن يكون تخطيطًا ثابتًا من صفحة واحدة. راجع دليلنا حول إنشاء العنصر قريبا الصفحة.
- أقسام الدعوة إلى العمل 1. لفت الانتباه إلى CTA الخاص بك عن طريق وضعه على قسم به جزيئات متحركة.
نصائح الأداء للجسيمات
تعمل تأثيرات الجسيمات على متصفح الزائر باستخدام JavaScript. للحفاظ على موقعك سريعا:
- الحد من عدد الجسيمات. عادة ما تكون 40-80 جسيمًا كافية للحصول على تأثير بصري جيد. يمكن أن يؤدي تجاوز 150 إلى إبطاء الأجهزة القديمة.
- استخدم الجزيئات في 1-2 قسم في كل صفحة. لا تضيف جزيئات إلى كل قسم. يفقد التأثير تأثيره عند الإفراط في استخدامه، ويضيف حمل المعالجة.
- اختبار على الهاتف المحمول. يمكن لتأثيرات الجسيمات استنزاف البطارية على الهواتف. فكر في تقليل عدد الجسيمات أو تعطيل التأثير على الهاتف المحمول باستخدام إعدادات الرؤية سريعة الاستجابة الخاصة بـ Elementor.
- تجنب الجزيئات الموجودة على الصفحات ذات المحتوى الثقيل. لا تحتاج منشورات المدونة الطويلة وصفحات التوثيق إلى خلفيات متحركة. حفظ الجزيئات للصفحات المقصودة والأقسام الرئيسية.
لمزيد من نصائح الأداء، اقرأ دليلنا على كيفية تسريع مواقع Elementor.
تأثيرات خلفية العنصر الأخرى
الجسيمات هي مجرد واحدة من العديد من تأثيرات خلفية Elementor المتوفرة في الإضافات الرئيسية. تحقق من هذه الامتدادات ذات الصلة:
- خلفية التدرج المتحركة us تدرجات لونية سلسة ومتغيرة تتحرك باستمرار
- منزلق الخلفية دورة عبر صور خلفية متعددة مع تأثيرات انتقالية
- ريلاكس (المناظر) op إنشاء عمق باستخدام تأثيرات التمرير المنظر
- يكشف . تأثيرات الكشف المتحركة عند تمرير الأقسام للعرض
كل هذه متضمنة في عناصر واجهة المستخدم والإضافات الخاصة بـ Master Addons 80+.
الأسئلة المتداولة
هل تأثير خلفية الجسيمات مجاني في الإضافات الرئيسية؟
يتوفر ملحق الجسيمات في الإصدار المجاني من Master Addons مع الإعدادات المسبقة الأساسية. يمنحك الإصدار Pro خيارات تخصيص إضافية والقدرة على استخدام تكوينات JSON المخصصة. تحقق من صفحة التسعير للحصول على تفاصيل الخطة.
هل تعمل الجسيمات مع حاويات Elementor؟
نعم. يعمل ملحق جسيمات الإضافات الرئيسية مع كل من أقسام Elementor الأقدم وحاويات Flexbox الأحدث. قم بتمكينه بنفس الطريقة من علامة التبويب "النمط" في أي حاوية.
هل ستبطئ الجزيئات موقع الويب الخاص بي؟
تعمل الجسيمات في المتصفح باستخدام JavaScript، لذا فهي تضيف بعض حمل المعالجة من جانب العميل. مع 40-80 جسيمًا، يكون التأثير ضئيلًا على الأجهزة الحديثة. تجنب استخدام أكثر من 150 جسيمًا أو إضافة التأثير إلى أقسام متعددة في نفس الصفحة. مكتبة الجسيمات.js خفيفة الوزن (حوالي 25 كيلو بايت)، وبالتالي فإن تأثير حجم الملف على تحميل الصفحة لا يكاد يذكر.
هل يمكنني تغيير لون الجسيمات ليتناسب مع علامتي التجارية؟
نعم. استخدم أداة التكوين المرئي promiples.js (المرتبطة من إعدادات الامتداد) لتغيير لون الجسيمات وشكلها وحجمها وسرعتها وعتامةها والمزيد. يمكنك تعيين أي قيمة لون سداسية للجسيمات وخطوط الاتصال بشكل مستقل.
كيف يمكنني تعطيل الجزيئات على الهاتف المحمول؟
يمكنك استخدام إعدادات الرؤية سريعة الاستجابة المضمنة في Elementor لإخفاء قسم الجسيمات على الأجهزة المحمولة. وبدلاً من ذلك، قم بإنشاء قسم منفصل محسّن للجوال بدون جزيئات. وهذا يوفر البطارية وقوة المعالجة على الهواتف والأجهزة اللوحية.
ابدأ بإضافة جزيئات إلى موقع العنصر الخاص بك
تستغرق إضافة خلفية جسيمات العنصر بضع نقرات فقط باستخدام الإضافات الرئيسية. اختر من بين الإعدادات المسبقة المضمنة مثل NASA أو Bubble أو Snow لإعداد سريع، أو قم بإنشاء تأثير مخصص خاص بك باستخدام مكون الجسيمات.js للتحكم الكامل.
المفتاح هو استخدام الجسيمات بشكل استراتيجي. اختر قسمًا أو قسمين عالي التأثير، واختر خلفية داكنة، وحافظ على عدد الجسيمات معقولًا. هذا كل ما يتطلبه الأمر لتحويل صفحة ثابتة إلى شيء يبدو حيًا.
على استعداد لتجربتها؟ تنزيل الإضافات الرئيسية لـ Elementor وأضف خلفية الجسيمات الأولى في أقل من 5 دقائق.
