كيفية إضافة تأثيرات تمرير المؤشر على الصور في ووردبريس (5 طرق سهلة)

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

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

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

كيفية إضافة تأثيرات تمرير المؤشر على الصور في ووردبريس

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

الطريقة الأولى: استخدام إضافة برمجية

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

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

استخدام إضافة مثل Image Hover Effects Ultimate يُسهّل هذه العملية بشكل كبير. هذه الإضافة مجانية للجميع وتُقدّم مجموعة واسعة من التأثيرات لكل عنصر. للبدء، ما عليك سوى تثبيتها باتباع الشرح أدناه: 

تثبيت إضافة

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

• اكتب " تأثيرات تمرير الصورة النهائية" في شريط البحث.

• حدد النتيجة الأولى وانقر على "التثبيت الآن" لبدء التنزيل.
• بمجرد اكتمال التثبيت، انقر فوق التنشيط لبدء استخدام الملحق.

استخدام إضافة تأثيرات تمرير المؤشر على الصور في ووردبريس

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

• انقر على القائمة لفتح إعدادات الإضافة. 

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

عندما تجد النمط الذي يعجبك، انقر فوق " إنشاء نمط" .

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

• بمجرد أن تصبح راضيًا عن الإعدادات، انقر فوق "تحرير" لتخصيص صورتك.

• ستظهر نافذة منبثقة أخرى. هنا يمكنك تخصيص موضع التكبير. 

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

• لتطبيق التأثير على موقعك، انسخ والصق الرمز المختصر في منشورك أو صفحتك. 

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

الطريقة الثانية: استخدام CSS

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

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

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

• أدخل محتواك في الغلاف . سنضيف هنا عنوانًا وزرًا.

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

• ثم انقر على "تخصيص" وانتقل إلى "CSS إضافي" . أضف الكود التالي:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• انقر على "نشر" لحفظ الكود.

• والآن ارجع إلى منشورك وحدد النص الذي تريد تطبيق تأثير التسطير عليه.
• افتح المتقدم في الشريط الجانبي للكتلة وأدخل underline-hover في فئة (فئات) CSS الإضافية .

• احفظ الصفحة وقم بمعاينتها لرؤية التأثير. 

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

الطريقة الثالثة: استخدام أدوات إنشاء الصفحات (مثل Elementor)

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

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

لإعداد التأثيرات:

• افتح Elementor من لوحة تحكم المسؤول.
• أضف صورتك.

• حدد صورتك، ثم انتقل إلى "النمط" .
• مرر لأسفل وانقر فوق " تحويم" .

• ستجد في "تأثيرات التحريك عند التمرير"

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

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

الطريقة الرابعة: استخدام إضافات Flipbox

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

يُعدّ هذا التأثير رائعًا لصور التصوير الفوتوغرافي، حيث يمكنك عرض الصورة على الجهة الأمامية وتفاصيل الكاميرا على الجهة الخلفية. لكن الاحتمالات لا حصر لها.

• من لوحة تحكم ووردبريس الخاصة بك، انقر على الإضافات . ثم اختر إضافة إضافة .
• اكتب Flipbox - Awesome Flip Boxes Image Overlay في شريط البحث.

• انقر على "التثبيت الآن" ، ثم قم بتفعيل الإضافة.

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

• ستظهر نافذة منبثقة. اختر التصميم المطلوب (الأول، الثاني، أو الثالث) وأدخل عنوانًا. 

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

• مرر لأسفل للعثور على المعاينة . انقر فوق تحرير لتخصيص المحتوى لكل من الجهة الأمامية والخلفية للعلبة القابلة للطي.

• بمجرد الانتهاء، انقر فوق "إرسال" لحفظه.

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

• وهذا كل شيء، إليكم المنتج النهائي! 

الطريقة الخامسة: استخدام قوالب غوتنبرغ

يُعد Gutenberg محرر الكتل الافتراضي في WordPress والذي يسمح لك بإضافة تأثيرات التمرير مباشرة داخل المحرر.

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

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

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

• أضف فقرة داخل الغلاف .

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

• ثم حدد الغطاء لإضافة فئة CSS مخصصة.
• افتح "متقدم" في الشريط الجانبي الأيمن.
• أدخل fade-hover-effect في حقل فئة CSS الإضافية .

• بعد ذلك، احفظ الصفحة كمسودة.

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

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• احفظ المقتطف وقم بتفعيله.
• الآن، قم بمعاينة صفحتك لرؤية تأثير التلاشي عند تمرير المؤشر عليها.

يمكنك إعادة استخدام هذا التأثير بإضافة فئة fade-hover-effect إلى أي عنصر أو صورة. ولكن إذا كنت تتعامل مع عدد كبير من الصور، ففكّر في استخدام إضافة مثل WP Media Folder لتنظيم مكتبة الوسائط الخاصة بك في مجلدات. هذا يُسهّل عليك العثور على المحتوى ذي الصلة وإعادة استخدامه.

هل يؤثر استخدام الكثير من المؤثرات على الأداء؟

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

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

ملخص

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

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