كيفية إنشاء خلفيات Particle.js متحركة في WordPress

هل تريد إضافة تأثير خلفية متحرك للجسيمات إلى موقع WordPress الخاص بك؟

من خلال إضافة خلفية مع partle.js إلى موقعك ، يمكنك إبراز المحتوى المهم وتعزيز تفاعل موقع WordPress الخاص بك. في هذه المقالة ، سنوضح لك كيفية إضافة خلفيات جسيمات إلى أي صفحة WordPress بسهولة.

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

لماذا تضيف خلفيات Particle.js إلى WordPress؟

يمكن أن تضيف خلفيات الجسيمات طبقة إضافية من الاهتمام البصري والتفاعل إلى موقع WordPress الخاص بك ، مما يجعله أكثر جاذبية للزوار ولا يُنسى.

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

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

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

كيفية إضافة خلفيات Particle.js إلى موقع WordPress الخاص بي؟

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

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

هناك طريقة أخرى لإضافة تأثيرات الجسيمات إلى موقعك وهي استخدام سمة WordPress التي تتضمن partle.js. يكون هذا مفيدًا إذا كنت تبدأ موقعًا جديدًا وما زلت بحاجة إلى سمة WordPress.

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

في هذا الدليل ، سنلتزم بالخيار الأسهل: استخدام مكون WordPress الإضافي. دعنا نذهب اليها!

أضف خلفية الجسيمات إلى أقسام WordPress باستخدام SeedProd

أولاً ، سنستخدم مكونًا إضافيًا لمُنشئ صفحات WordPress مع مكتبة الجزيئات المضمنة في وظائفها: SeedProd.

SeedProd هو أفضل موقع ويب ومنشئ صفحات لـ WordPress ، مع أكثر من مليون مستخدم. يمكنك استخدام أداة إنشاء السحب والإفلات الخاصة بها لإنشاء سمات WordPress مخصصة وصفحات مقصودة ومواقع WooCommerce وأي تخطيط آخر دون كتابة تعليمات برمجية.

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

اتبع الخطوات أدناه لإضافة خلفيات جسيمات إلى موقعك باستخدام SeedProd.

الخطوة 1. تثبيت وتنشيط SeedProd

أولاً ، انقر هنا لبدء استخدام SeedProd وتنزيل المكون الإضافي. ثم قم بتثبيت وتفعيل المكون الإضافي على موقع WordPress الخاص بك.

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

الخطوة 2. اختر نموذجًا مُعد مسبقًا

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

باستخدام مُنشئ السمات من SeedProd ، يمكنك إنشاء سمة WordPress كاملة من البداية. ومع ذلك ، سيؤدي تحديد هذا الخيار إلى الكتابة فوق تصميم موقع الويب الحالي الخاص بك.

بدلاً من ذلك ، يتيح لك Landing Page Builder إنشاء أي صفحة دون لمس نسقك الحالي. بالنسبة لهذا الدليل ، سنذهب مع هذا الخيار.

من لوحة تحكم مسؤول WordPress ، انتقل إلى SeedProd »الصفحات المقصودة . في هذه الصفحة ، سترى أوضاع صفحة متنوعة في الجزء العلوي وخيار إنشاء صفحتك المخصصة.

انطلق وانقر على زر إضافة صفحة مقصودة جديدة .

هنا ، يمكنك الاختيار من بين مئات قوالب الصفحات المقصودة المعدة مسبقًا.

يمكنك تصفيتها عن طريق الكتابة عن طريق النقر فوق علامات التبويب الموجودة في الجزء العلوي ، بما في ذلك:

• قريباً
• نمط الصيانة
• 404 صفحة
• مبيعات
• ندوة عبر الإنترنت
• ضغط الرصاص
• شكرًا لك
• تسجيل الدخول

لاختيار تصميم نموذج ، انقر فوق رمز علامة الاختيار البرتقالية.

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

عندما تكون راضيًا عن هذه التفاصيل ، انقر فوق الزر حفظ وابدأ تحرير الصفحة .

التنقل في Page Builder

سيتم فتح القالب الخاص بك الآن في محرر السحب والإفلات المرئي الخاص بـ SeedProd. سترى لوحة على اليسار بها كتل وأقسام وإعدادات ومعاينة مباشرة على الجانب الأيمن.

يتيح لك النقر في أي مكان في المعاينة عرض إعدادات هذا العنصر وتخصيصها ومشاهدة التغييرات في الوقت الفعلي.

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

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

الخطوة 3. تمكين وتخصيص خلفيات الجسيمات

كما ذكرنا سابقًا ، يحتوي SeedProd على partle.js مضمّن في إعدادات أداة إنشاء الصفحات. حاليًا ، يمكنك استخدام هذه الميزة في أي قسم من أقسام الصفحة.

للقيام بذلك ، انقر فوق أي قسم حتى ترى حدًا أرجوانيًا ، ثم حدد علامة التبويب خيارات متقدمة .

ابحث الآن عن عنوان خلفية الجسيمات ، وقم بتوسيعه ، وقم بتبديل مفتاح تمكين خلفية الجسيمات إلى وضع التشغيل.

على الفور ، سترى تأثير حركة مضلع على خلفية القسم.

إذا قمت بالنقر فوق القائمة المنسدلة "النمط" ، يمكنك تغيير الجسيمات إلى إما:

• فضاء
• ثلج
• رقاقات الثلج
• عيد الميلاد
• عيد الرعب
• مخصص

بعد اختيار نمط الجسيمات ، يمكنك ضبط عتامة الجسيمات واتجاه التدفق واللون.

إذا كنت تريد المزيد من التحكم في تخصيص الجسيمات ، فقم بتمكين تبديل الإعدادات المتقدمة .

هنا ، يمكنك زيادة عدد الجسيمات وتغيير حجم الجسيمات واستخدام المحدد لضبط سرعة حركة الجسيمات.

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

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

إضافة خلفيات الجسيمات المخصصة

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

لحسن الحظ ، تتضمن الإرشادات رابطًا إلى vincentgarreau.com/particle.js ، وهي مكتبة JavaScript تتيح لك تعيين سمات مخصصة لخلفية الجسيمات عن طريق التأشير والنقر.

في لوحة تكوين الجسيمات json ، يمكنك اختيار الأشكال المخصصة ، والكثافات ، والأحجام ، والسرعات ، والألوان ، والمزيد. يمكنك أيضًا تعيين CSS مخصص للخلفية وتمكين تأثيرات الحركة.

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

افتح الآن وانسخ الرمز من الملف ، والصقه في المربع الفارغ في منشئ الصفحة.

ستظهر خلفية الجسيمات المخصصة الخاصة بك على الفور!

من هناك ، استمر في تخصيص صفحتك المقصودة حتى تبدو بالضبط بالطريقة التي تريدها. تذكر أن تنقر فوق حفظ لتخزين تغييراتك.

الخطوة 4. انشر التغييرات

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

للقيام بذلك ، انقر فوق سهم القائمة المنسدلة "حفظ" ، ثم انقر فوق "نشر" .

يمكنك الآن زيارة صفحتك المقصودة لمشاهدة خلفية الجسيمات أثناء العمل.

استخدم ملحق WP لخلفية الجسيمات

هناك طريقة أخرى لإضافة خلفيات جسيمات إلى موقع WordPress الخاص بك وهي استخدام المكون الإضافي Particle Background WP.

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

أولاً ، ستحتاج إلى تثبيت وتفعيل Particle Background WP على موقع WordPress الخاص بك. ثم ، انقر فوق عنصر قائمة Particle Background في لوحة إدارة WordPress الخاصة بك.

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

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

تتضمن اللوحة التالية خيارات تخصيص الجسيمات ، بما في ذلك الكثافة واللون ولون الخلفية. يمكنك أيضًا إدخال CSS مخصص.

بعد حفظ التغييرات ، يمكنك زيارة صفحة المدونة الخاصة بك ومشاهدة الشعار مع خلفية الجسيمات في مكانها.

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

المزيد من الطرق لإضافة Particle.js إلى WordPress

إذا كنت لا تزال تبحث عن طرق أخرى لإضافة partle.js إلى موقع WordPress الخاص بك ، فقد تجد الأدوات التالية مفيدة:

• Ultimate Addons for Elementor: باستخدام هذا الملحق ، يمكنك إضافة تأثيرات الجسيمات إلى الصفحات التي أنشأتها باستخدام المكون الإضافي لـ Elementor page builder.
• Ultimate Addons for Beaver Builder: أضف رسومًا متحركة للجسيمات إلى الصفحات التي تم إنشاؤها باستخدام المكون الإضافي Beaver Builder.
• يدويًا : نوصي بهذا الأسلوب فقط إذا كنت راضيًا عن HTML و PHP و JavaScript ولغات البرمجة الأخرى.

في النهاية ، أسهل طريقة لإضافة خلفيات الجسيمات إلى WordPress هي باستخدام SeedProd. إنه سهل الاستخدام ، ولا يتطلب أي ترميز ، ولديه الكثير من خيارات التخصيص التي تتطلب بضع نقرات للإعداد.

أسئلة مكررة

ها أنت ذا!

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

شكرا للقراءة. يرجى متابعتنا على YouTube و Twitter و Facebook لمزيد من المحتوى المفيد لتنمية أعمالك.