تأثيرات تمرير الصور في محرر الالمينتور

إضافة تأثيرات تمرير الصور في الووردبريس

  إن الإضافة 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 ) .
و في النهاية يمكن ربط هذا الخيار بالشكل المجاور و بهذه الطريقة يمكنك تحويل صورتك إلى رابط لصفحة أو لموقع ويب آخر .
فذلك أمر رائع بالنسبة لصفحة المبيعات أو رابط الشركاء التابعين للموقع .
و يمكن أيضاً تركه فارغاً عند عدم رغبتنا بإضافة رابط لموقع آخر
و بذلك قمنا بعمل جميع الإعدادت فنقوم بحفظ أو التحديث و يمكننا مشاهدته الموقع .
تأثيرات تمرير
بعد كل تلك الخطوات أصبحت هذه الإضافة جازة للعمل و بجميع إعداداتها

لا تحتاج كل صورة إلى تأثيرات التمرير

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

الاتساق مع استخدام التأثير

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

 

السابق
كيفية تجربة WordPress مجانًا بدون مجال أو استضافة
التالي
9 أفضل إضافات ترجمة WordPress للمواقع متعددة اللغات