إضافة تأثيرات تمرير الصور في الووردبريس
إن الإضافة Image Hover Effects هي بالضبط التي تقوم بإضافة تأثيرات تمريرية للصورة داخل الموقع .
كما هي سهلة في الاستخدام و تقدم مجموعة متنوعة من تأثيرات التمرير على العنصر للاختيار من بينها . كما يمكن أن تساعدك هذه في إضافة معلومات مهمة على الصور مثل الموقع و السعر و التوافر و غير ذلك .
و هذا يمنحك المزيد من الحرية في خيارات التخصيص فيما يتعلق بصورك و شكل موقعك الخاص .
ما هي التأثيرات التي يمكن تطبيقها على الصور في محرر الإلمنتور ؟
تأثير التمرير للصورة هو عبارة عن عنصر تفاعلي يسمح بعرض معلومات إضافية حول صورة بطريقة أنيقة و فعالة . أيضاً هناك مجموعة متنوعة من تأثيرات التمرير للاختيار من بينها . و هي لا تؤدي إلى إبطاء موقع الويب أو تشوش تصميمك .
في أغلب الحالات تسبب الرسوم المتحركة بطئ في الموقع و لكن مع ميزة CSS هذه لا توجد أية مشاكل .
بالتالي فهي مثالية لكافة الاحتياجات و هناك مجموعة متنوعة من الاستخدامات الأخرى لكل منها . فعلى سبيل المثال إذا كان لديك موقع يختص بالتصوير الفوتوغرافي ، فيمكنك إضافة تأثير التمرير لإظهار مكان التقاط الصورة أو التاريخ أو أي شيء آخر .
كما يوجد أيضاً استخدام رائع و ذهبي لإضافة تفاصيل و معلومات عن منتجات أو أي عناصر أخرى . بالتالي يمكنك إضافة صورة لمنتج و استخدام هذه التأثيرات لعرضها عندما يكون الطلب متاح أو إضافة سعر هذا المنتج أو أي شيء آخر من تفاصيله . إذ لا محدودية للإبداع في ذلك الأمر .
كيف أضيف تأثيرات عنصر التمرير ؟
أولاً : طريقة تثبيت إضافة / Image Hover Effects /
تأثيرات تمرير الصور في الإضافة ( Elementor Addon ) مذهلة بالفعل فيما تقدمه . فهي كما يوحي الاسم إضافة ملحقة للإلمنتور و أهم إضافة إن لم تكن أفضل باني مواقع في ووردبريس . و بالتالي ، يجب تثيب كلاهما بنفس الوقت .
فيما تقدم هذه الإضافة حوالي 40 مؤثر مختلف للتمرير بما في ذلك تأثيرات التلاشي و التكبير و التمويه و ما إلى ذلك من الحركات التمريرية . كما يمكنك إضافة عنوان أو وصف أو تعيين علامة عنوان أو إضافة أيقونات أو روابط بصفحات أخرى .
في واجهة المستخدم الجديدية يمكنك الاستفادة منها إذا كنت تريد رؤية التأثيرات في مناطق مثل التذييل أو الشريط الجانبي و بشكل مباشر .
و لتثبيت هذه الإضافة نقوم بالنقر على خيار الإضافات و اختيار الخيار إضف جديد كما في الشكل .
نقوم بالبحث عن الاضافة ( Image Hover Effects ) في ضمن خيار البحث المتاح فنختار الإضافة التي قد نراها مفيدة .
نقومك بالتقليب ضمن الخيارات إلى نجد الاضافة ( Image Hover Effects – Elementor Addon ) و ننقر على تثبيت و من ثم نقوم بتفعيل هذه الاضافة و تصبح جاهزة للاستخدام .
إذا لم يكن لديك الباني إلمنتور مثبتاً بالأساس سيظهر لدينا رسالة في أعلى كل صفحة يخبرنا بضرورة بتثبيته في الحال .
ثانياً : أضف أداة الويدجت
إن إضافة تأثيرات التمرير أمر سهل لكن لتوضيح الأمر لا يمكنك ببساطة إضافة تأثير تمرير إلى صورة موجودة سابقاً . و عوضاً عن ذلك سنحتاج إلى إعادة إدراج الصورة مرة أخرى باستخدام العنصر المناسب داخل محرر الالمنتور .
و كنتيجة لذلك قد نضطر إلى إجراء عمليات بحث في مكتبة الوسائط للعثور على أي صور ، و لكن لا ينبغي أن يكون الأمر بهذا السوء لذا في حال رغبنا في إضافة هذه الميزة سيتغرق ذلك المزيد من الوقت .
قم بالانتقال إلى أي منشور أو صفحة موجودة على الموقع و انقر فوق الزر تحرير باستخدام الالمنتور .
و هنا سيتم فتح محرر الالمنتور في الجانب الأيسر قم بالبحث عن تلك الاضافة و اسحب الأداة إلى الصفحة أو المنشور كما في الشكل التالي .
أصبحت الآن جاهزاً لبدء التخصيص في هذه الأداة و يمكن العثور على جميع الإعدادات على الجانب الأيسر أيضاً .
ثالثاً : إعدادت التأثير
يجب أن تستغرق عملية الاستعراض للإعدادات دقيقة أو دقيقتين فقط فهي سهلة بما يكفي لفهمها من قبل أي شخص
الخيار الأول : هو التأثيرات
كما ذكرنا سابقاً هناك حوالي 40 إضافة يمكن الاختيار من بينها و تظهر في مربع حوار منسدل نقوم بتحديد منها ما نريده .
ملاحظة : يمكننا متابعت ما يفعله التأثير من خلال التحديد و التمرير فوق هذه الأداة التي أضفناها إلى المقالة أو الصفحة .
الخيار التالي : هو إضافة الصورة الفعلية
نقوم بإضافة صورة من مكتبة الوسائط و تظهر بالأسفل منها خيارات مثل تحديد حجم الصورة و العنوان و غير ذلك الكثير .
مثل إضافة عنوان و علامة عنوان , فالعنوان هو ما سيظهر في نص الرأس ، و بينما علامة العنوان هي شكل الخط الذي سيظهر كـ (H2 ، H3 ، H4 ، إلخ) .
ثم بعد ذلك يمكن العثور على وصف الصورة . ففي هذا هو المكان يمكن إضافة الكثير من المعلومات الإضافية حول الصورة .
بالإضافة هنا يمكننا إضافة رمز إلى العنوان الخاص و سيظهر إما قبله (على يسار العنوان) أو بعده (على يمينه) .
ملاحظة: في حال إذا كنت لا ترى هذا الرمز عند التمرير فوق الصورة ، فذلك بسبب التحديث الأخير للإلمنتور . و لإصلاح هذه المشكلة ننقر فوق الخيار الإعدادت المتقدمة لمحرر الامنتور و و نمقوم بتمكين الدعم
( Load Font Awesome 4 ) .
( Load Font Awesome 4 ) .
و في النهاية يمكن ربط هذا الخيار بالشكل المجاور و بهذه الطريقة يمكنك تحويل صورتك إلى رابط لصفحة أو لموقع ويب آخر .
فذلك أمر رائع بالنسبة لصفحة المبيعات أو رابط الشركاء التابعين للموقع .
و يمكن أيضاً تركه فارغاً عند عدم رغبتنا بإضافة رابط لموقع آخر
و بذلك قمنا بعمل جميع الإعدادت فنقوم بحفظ أو التحديث و يمكننا مشاهدته الموقع .
بعد كل تلك الخطوات أصبحت هذه الإضافة جازة للعمل و بجميع إعداداتها
لا تحتاج كل صورة إلى تأثيرات التمرير
في مثل معظم التأثيرات يمكن أن يكون لديك الكثير من الخيارات التي المساعدة في تأثيرات التمرير في العديد من مناطق موقع . و لكن تجدر هنا الإشارة إلى أنها قد تكون مزعجة لبعض الزوار أحياناً .
كمثال على ذلك نجد من الشائع أن يترك المستخدم الماوس في منتصف الصفحة عند التمرير لأسفل . و من غير المقصود يتم تحريك الماوس فوق التأثيرات أثناء انتقالها إلى أسفل الصفحة , في حين أنه من السهل تحريك الماوس ، إلا أنه قد يكون مزعج بعض الشئء .
ذات الأمر ينطبق على تحويل الصور إلى روابط أيضاً عندما يعتقد الزائر أن النقر فوق هذه الصورة قد يؤدي إلى تكبيرها أو تصغيرها . و بالتالي يتم نقلك إلى موقع آخر .
الاتساق مع استخدام التأثير
بالإضافة قد يكون الأمر محيراً للزائرين الذين لا يعرفون الصور التي ستحتوي على معلومات إضافية أم لا . و في الواقع ، قد لا يعرف البعض أن لديك تأثيرات التمرير في موقعك أيضاً .
لإصلاح ذلك ، يمكنك إضافة نوع من المؤشرات قبل أو أسفل الصورة لإعلام الزائر بذلك لتحقيق أقصى استفادة من الميزة في موقعك .