كيفية إضافة الرسوم المتحركة التمرير في موقع ووردبريس؟

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

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

في هذه المدونة، سنساعدك على تعلم كيفية إضافة Scroll Animation في WordPress بسهولة قدر الإمكان.

لذلك تابعونا واقرأوا المنشور حتى النهاية.

ولكن قبل ذلك دعونا نفهم ما هي فوائد إضافة الرسوم المتحركة للتمرير في WordPress.

فوائد إضافة الرسوم المتحركة التمرير في ووردبريس

إذا كنت لا تزال تتساءل عن سبب ضرورة إضافة الرسوم المتحركة التمريرية في WordPress، فاطلع على المزايا أو الفوائد المذكورة أدناه:

1. تعزيز مشاركة المستخدم

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

2. تحسين تجربة المستخدم (UX)

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

3. زيادة الجاذبية البصرية

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

4. فرص رواية القصص

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

5. التفاعلات الملائمة للهاتف المحمول

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

6. فوائد تحسين محركات البحث

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

7. العلامة التجارية المهنية

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

8. إرشادات دقيقة للمستخدمين

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

الآن دعونا نرى كيف يمكنك القيام بذلك.

قم بإضافة الرسوم المتحركة للتمرير في WordPress باستخدام مكون WordPress الإضافي

إحدى أسهل الطرق لإضافة الرسوم المتحركة للتمرير في WordPress هي استخدام مكون إضافي يسمى Scrollsequence .

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

لذلك، اخترنا لهذه المدونة أن نوضح لك كيفية إضافة رسوم متحركة للتمرير في WordPress.

فيما يلي طريقة خطوة بخطوة يمكنك اتباعها:

الخطوة 1: تثبيت البرنامج المساعد وتنشيطه

• انتقل إلى لوحة تحكم WordPress الخاصة بك:
  أولاً، قم بتسجيل الدخول إلى موقع WordPress الخاص بك > ابحث عن “Scrollsequence” في قسم الملحقات > قم بتثبيت الإصدار المجاني > قم بتنشيط المكون الإضافي بعد التثبيت.

الخطوة 2: الوصول إلى قائمة تسلسل التمرير

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

الخطوة 3: إعداد الرسوم المتحركة الخاصة بك

• فهم كيفية عمل تسلسل التمرير:
  يقوم Scrollsequence بإنشاء رسوم متحركة باستخدام سلسلة من الصور الثابتة، مثل كتاب الصور المتحركة، لجعلها تبدو وكأنها فيديو عندما يقوم المستخدمون بالتمرير إلى أسفل الصفحة.
• تحويل الفيديو الخاص بك إلى صور:
  لإنشاء الرسوم المتحركة الخاصة بك، تحتاج أولاً إلى مقطع فيديو قصير (حوالي 5-10 ثوانٍ). استخدم أداة مجانية مثل Ezgif لتحويل هذا الفيديو إلى إطارات صور منفصلة (تنسيق JPEG). هذا يعني أنك ستحصل على عدة صور من الفيديو الخاص بك، والتي سيستخدمها Scrollsequence لإنشاء الرسوم المتحركة.

الخطوة 4: إنشاء رسم متحرك جديد للتمرير

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

• تحميل الصور الخاصة بك:
  الآن، قم بتحميل الصور التي حصلت عليها من الفيديو الخاص بك. قد يستغرق هذا بعض الوقت، اعتمادًا على سرعة الإنترنت لديك.

الخطوة 5: تخصيص الرسوم المتحركة

• ضبط إعدادات الرسوم المتحركة:
  بمجرد تحميل جميع الصور الخاصة بك، يمكنك تغيير بعض الإعدادات. يمكنك اختيار وقت بدء الرسوم المتحركة وانتهائها أثناء التمرير.
• اختر نوع الرسوم المتحركة:
  قرر ما إذا كنت تريد أن تظل الرسوم المتحركة في مكان واحد (ثابت) أو تتحرك أثناء قيام المستخدم بالتمرير لأسفل الصفحة (ثابت).

الخطوة 6: المعاينة والحفظ

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

الخطوة 7: استخدم الرسوم المتحركة على موقع الويب الخاص بك

• احصل على الرمز القصير:
  بعد النشر، ارجع إلى قائمة Scrollsequence . ستجد رمزًا قصيرًا (رمزًا خاصًا) للرسوم المتحركة الجديدة.

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

الآن يتمتع موقع WordPress الخاص بك برسوم متحركة ممتعة وتفاعلية!

أضف الرسوم المتحركة للتمرير في WordPress باستخدام Elementor

في الطريقة المذكورة أعلاه، استخدمنا مقطع فيديو بدلاً من الصور، ولكن في طريقة Elementor هذه، سنتخذ نهجًا مختلفًا.

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

الخطوة 1: إنشاء صفحة جديدة

• ابدأ بإنشاء صفحة جديدة على موقع WordPress الخاص بك.

الخطوة 2: التحرير باستخدام Elementor

• انقر فوق تحرير باستخدام Elementor . Elementor هو منشئ الصفحات الذي يساعدك على تصميم صفحاتك بسهولة.

الخطوة 3: إدراج صورة

• بمجرد دخولك إلى محرر Elementor، ابحث عن خيار إدراج صورة في الصفحة.
• نصيحة: تعمل الرسوم المتحركة بشكل أفضل مع صورة شفافة. يمكنك استخدام ملف PNG (الذي يدعم الشفافية) أو ملف SVG (وهو أيضًا تنسيق متجه).

الخطوة 4: ضبط حجم الصورة

• اضبط حجم صورتك. تأكد من أنها كبيرة بما يكفي حتى يتمكن الأشخاص من ملاحظة الحركة عند التمرير. على سبيل المثال، يمكنك ضبطه على الحجم المتوسط ، وهو حوالي 300 × 300 بكسل .

الخطوة 5: حدد الصورة

• انقر على الصورة التي أضفتها للتو لتحديدها.

الخطوة 6: الوصول إلى الإعدادات المتقدمة

• ابحث عن علامة التبويب خيارات متقدمة في الإعدادات الموجودة على الجانب الأيسر من محرر Elementor.

الخطوة 7: تمكين تأثيرات الحركة

• قم بالتمرير لأسفل للعثور على تأثيرات الحركة .
• قم بتشغيل تأثيرات التمرير . سيسمح لك هذا بإضافة حركة إلى صورتك.

الخطوة 8: تعيين اتجاه التمرير الأفقي

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

الخطوة 9: اختبار التأثير

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

ملاحظات إضافية

• يمكنك أيضًا استخدام المكوّن الإضافي Scrollsequence لإضافة رسوم متحركة تمرير مماثلة في Elementor.
• إذا كان لديك Elementor Pro ، فهو يتضمن ميزة مضمنة لتأثيرات التمرير الثابتة، ولكن قد يكون هذا محدودًا أكثر مقارنة بالخيارات الأخرى.

أضف الرسوم المتحركة للتمرير في WordPress باستخدام Divi

إذا لم تكن من مستخدمي Elementor ولكنك تستخدم Divi بدلاً من ذلك، فلا يزال بإمكانك إنشاء تأثير مماثل.

وإليك كيف يمكنك القيام بذلك.

على سبيل المثال، نحن نفكر في موقع ويب لكرة القدم

الخطوة 1: إنشاء صفحة جديدة

أول ما عليك فعله هو إنشاء صفحة جديدة وتحديد Divi Page Builder. سيسمح لك هذا بتصميم صفحتك باستخدام ميزات Divi.

الخطوة 2: اختر تخطيطًا (اختياري)

• الآن لجعل الأمور أسرع قليلاً، اختر تخطيطات Divi المعدة مسبقًا. على سبيل المثال، حدد تخطيطًا لموقع تدريب التنس .

الخطوة 4: أضف صورتك

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

الخطوة 5: الوصول إلى إعدادات الصورة

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

الخطوة 6: تمكين تأثيرات التمرير

• في الإعدادات المتقدمة، ابحث عن قسم تأثيرات التمرير .
• سترى خيارات مختلفة لتأثيرات التمرير.

الخطوة 7: اختر تأثيراتك

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

الخطوة 8: اختبر حركة التمرير الخاصة بك

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

الخطوة 9: احفظ التغييرات

• بمجرد أن تصبح راضيًا عن شكله، تأكد من حفظ التغييرات.
• وبعد ذلك، انقر فوق "نشر" لتنشيط صفحتك باستخدام تأثير التمرير الجديد.

قم بإضافة رسوم متحركة أساسية وسلسة للتمرير في WordPress باستخدام علامات Anchor وCSS

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

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

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

وإليك كيف يمكنك القيام بذلك.

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

الخطوة 2 : إنشاء الرابط : اربط علامة الربط ببعض النص أو الزر الموجود على الصفحة. يجب كتابة الرابط باستخدام علامة تصنيف متبوعة بنص الرابط (على سبيل المثال، #section1).

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

الخطوة 4 : إصلاحه بالتمرير السلس : لجعل التمرير سلسًا، يمكنك إضافة جزء صغير من كود CSS (سلوك التمرير: سلس) إلى قسم "CSS الإضافي" في WordPress.

html{
scroll-behavior: smooth;
}

هذا الكود يجعل حركة التمرير بطيئة وممتعة بصريًا، كما لو كانت متحركة.

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

خاتمة

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

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

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

راهول

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