هل تريد معرفة كيفية إضافة تأثيرات تمرير الصور في ووردبريس؟
يمكن أن تجعل تأثيرات تمرير الصور موقعك أكثر تفاعلية وجاذبية. هذا يخلق انطباعًا أوليًا أفضل ويحسن الوقت الذي تقضيه على موقعك.
في هذه المقالة ، سنوضح لك كيفية إضافة تأثيرات تمرير الصور في ووردبريس ، خطوة بخطوة.
كيفية إضافة تأثيرات تمرير الصور في ووردبريس
تتيح لك تأثيرات تمرير الصور إضافة عناصر تفاعلية إلى صورك الثابتة مثل الرسوم المتحركة وتأثير التكبير / التصغير والنوافذ المنبثقة والمزيد.
على سبيل المثال ، يمكن أن يكون لديك صور تنقلب لتكشف عن أسعارك أو روابط إلى محفظتك.
تمنحك تحركات الصور أيضًا طريقة إبداعية لعرض الصور والمعارض والصور المصغرة.
يمكن أن تساعد الصور التفاعلية وعناصر التمرير في إخراج موقعك بعدة طرق:
تحسين الوقت الذي يقضيه زوار موقعك على موقعك
تمنحك طرقًا إبداعية لتقديم المحتوى للزائرين
دع المستخدمين يعرفون أن عنصر الموقع قابل للنقر
أفضل طريقة لإضافة تأثيرات تمرير الصور إلى موقع ووردبريس الخاص بك هي باستخدام مكون ووردبريس الإضافي.
باستخدام مكون إضافي ، لا يتعين عليك قضاء الوقت في التحرير والتنسيق وإضافة CSS لإنشاء تأثيرات الصورة. إنه يعمل فقط.
هناك جميع أنواع المكونات الإضافية التي يمكنك استخدامها لإنشاء تأثيرات تحوم الصور والرسوم المتحركة الفريدة.
في هذا البرنامج التعليمي ، سنعرض لك أربع طرق مختلفة لإضافة تأثيرات التمرير التي تحتاجها.
إضافة تأثيرات انعكاس الصور في ووردبريس
إضافة تكبير الصورة والتأثيرات المكبرة في ووردبريس
إضافة تأثيرات تحريك الصور في ووردبريس
إضافة تأثيرات منبثقة تحوم الصور في ووردبريس
الصندوق القلاب هو صندوق ينقلب عندما يحوم الماوس فوقه.
يمكنك إضافة هذه الرسوم المتحركة إلى صورك لكشف النص أو حتى تغيير الصورة عند التمرير.
صورة تحوم flipbox
يمكنك التحكم في كيفية قلب الصورة ، جنبًا إلى جنب مع تصميم الصورة على كلا الجانبين.
إذا كنت مصورًا ، فيمكنك استخدام هذا لعرض عملك وفصل محافظك.
أسهل طريقة لإضافة تأثيرات flipbox للصور هي باستخدام مكون ووردبريس الإضافي. يتيح لك المكون الإضافي إنشاء هذه التأثيرات وتخصيصها بسرعة.
نوصي باستخدام البرنامج الإضافي Flipbox – Awesomes Flip Boxes Image Overlay . إنه أفضل ملحق flipbox و image hover لـ ووردبريس.
يتيح لك هذا البرنامج المساعد ببساطة إضافة تأثيرات flipbox المخصصة إلى صور ووردبريس الخاصة بك.
إعدادات البرنامج المساعد فليب بوكس تحوم الصورة
يأتي مع العشرات من تأثيرات الرسوم المتحركة المختلفة والقوالب المعدة مسبقًا. يمكنك حتى التحكم في الألوان وإضافة CSS المخصص الخاص بك.
لمزيد من التفاصيل ، راجع دليلنا حول كيفية إنشاء تراكبات flipbox وتحوم في ووردبريس .
تتيح تأثيرات تكبير الصورة للمستخدمين رؤية التفاصيل التي لن يتمكنوا من رؤيتها في صورة الحجم العادي.
يعد هذا تأثيرًا رائعًا للدروس التعليمية للمنتج والصور ذات المستويات العالية من التفاصيل.
يمكنك أيضًا استخدامه في متجرك عبر الإنترنت لإضافة تأثير تكبير مثل Amazon.
تكبير الصورة للتكبير
أسهل طريقة لإضافة تأثيرات تكبير / تصغير الصورة إلى صورك هي باستخدام مكون ووردبريس الإضافي.
نوصي باستخدام ملحق WP Image Zoom . يتيح لك هذا البرنامج المساعد ببساطة إضافة تأثيرات التكبير / التصغير والتكبير إلى صورك.
إعدادات البرنامج المساعد WP Image Zoom
كما أنها مزودة بميزات تتيح لك اختيار شكل عدسة الزوم ومستوى التكبير وغير ذلك الكثير.
لمزيد من التفاصيل ، راجع دليلنا حول كيفية إضافة التكبير المكبر للصور في ووردبريس .
هناك جميع أنواع تأثيرات التمرير الإضافية التي يمكنك إضافتها إلى ووردبريس.
على سبيل المثال ، لديك معارض صور متحركة وصور Lightbox وصور مقارنة وتراكبات نصية والمزيد.
تحوم تأثير الرسوم المتحركة للصور
لإضافة تأثيرات التمرير مثل هذه ، نوصي باستخدام المكون الإضافي Image Hover Effects Ultimate .
هذا المكون الإضافي خفيف للغاية ، لذلك لن يؤثر على أداء موقع الويب الخاص بك وسرعات التحميل . كما أنه سهل الاستخدام للغاية. يمكنك إضافة تأثيرات صور فريدة ببضع نقرات.
أول شيء عليك القيام به هو تثبيت وتفعيل المكون الإضافي Image Hover Effects Ultimate . لمزيد من التفاصيل ، راجع دليلنا خطوة بخطوة حول كيفية تثبيت مكون ووردبريس الإضافي .
بمجرد تثبيت البرنامج المساعد وتنشيطه ، ستحتاج إلى النقر فوق “Image Hover” في مسؤول ووردبريس الخاص بك. سيؤدي ذلك إلى إظهار ثمانية تأثيرات مختلفة لتحويم الصور يمكنك الاختيار من بينها.
اختر تأثير تمرير الصورة
في هذا البرنامج التعليمي ، سنستخدم تأثير “تأثيرات التسمية التوضيحية”. هذا يضيف نصًا متحركًا فوق صورتك عند تمرير الماوس.
أولاً ، انقر فوق مربع “تأثيرات التسمية التوضيحية”. يؤدي هذا إلى إظهار قائمة بخيارات الرسوم المتحركة المختلفة للاختيار من بينها.
الرسوم المتحركة لتمرير الصورة تخلق نمطًا
بمجرد العثور على تأثير الصورة الذي تريده ، انقر فوق “إنشاء نمط”.
في المربع المنبثق ، قم بتسمية تأثير التمرير الخاص بك واختر التخطيط. رقم التخطيط الذي تحدده يطابق التسلسل المرتبة للصور.
تذكر أن تنقر على “حفظ”.
اسم الصورة الجديدة تحوم
في الشاشة التالية ، سيكون لديك مجموعة متنوعة من الخيارات لتخصيص تأثير التمرير.
ومع ذلك ، سنترك خيارات الرسوم المتحركة الافتراضية.
تحوم على إعدادات الرسوم المتحركة
إذا قمت بإجراء تغييرات ، فستظهر في مربع “معاينة”.
لتغيير الصورة الافتراضية ، مرر الماوس فوق الصورة وانقر فوق الخيار “تحرير”.
تحرير الرسوم المتحركة تحوم
في هذه النافذة المنبثقة ، يمكنك تغيير العنوان والوصف اللذين سيظهران عند التمرير.
لتحميل صورتك ، انقر فوق المربع الموجود أسفل عنوان “الصورة” وقم بتحميل أو حدد صورة من مكتبة الوسائط الخاصة بك.
تغيير صورة تحوم الصورة
يمكنك أيضًا إضافة رابط ونص زر إذا كنت تريد أن تنقل صورتك المستخدمين إلى صفحة أخرى على موقع الويب الخاص بك.
بمجرد الانتهاء ، انقر فوق “إرسال”.
الرمز المختصر لتحريك الصورة
لإضافة الصورة إلى موقع الويب الخاص بك ، انسخ الرمز المختصر في مربع “الرمز المختصر”.
بعد ذلك ، افتح أي صفحة أو منشور أو عنصر واجهة مستخدم حيث تريد أن تظهر صورتك والصق الرمز القصير.
لصق الرمز القصير للرسوم المتحركة مع التمرير
تأكد من النقر فوق “نشر” أو “تحديث” لحفظ التغييرات وجعل تأثير التمرير على صورتك نشطًا.
ستساعدك المكونات الإضافية المذكورة أعلاه على إضافة ميزات مثل المربعات المتقلبة وتأثيرات التمرير والرسوم المتحركة والمزيد.
ماذا لو كنت تريد إضافة تأثير تمرير صورة مختلف لا تغطيه المكونات الإضافية أعلاه؟
أفضل طريقة للقيام بذلك هي باستخدام مكون CSS مخصص لـ ووردبريس . يتيح لك هذا إجراء تغييرات مرئية على صورك دون الحاجة إلى تعديل أي رمز.
يمكنك تحرير ملفات CSS يدويًا أو إضافة CSS عبر أداة تخصيص ووردبريس ، ومع ذلك ، فإن استخدام مكون إضافي هو الخيار الأسهل.
نوصي باستخدام البرنامج المساعد CSS Hero . يتيح لك هذا المكون الإضافي تحرير كل نمط CSS تقريبًا على موقع ووردبريس الخاص بك دون كتابة سطر من التعليمات البرمجية.
تأثيرات تحوم CSS
هناك جميع أنواع تأثيرات CSS المضمنة خصيصًا للصور.
لمزيد من التفاصيل حول تثبيت مكون إضافي ، راجع دليلنا حول كيفية تثبيت مكون ووردبريس الإضافي .
بمجرد تثبيت المكون الإضافي ، ستحتاج إلى النقر فوق الزر “المتابعة إلى تنشيط المنتج”.
تنشيط CSS Hero
سيرشدك هذا خلال عملية تنشيط البرنامج المساعد.
بعد تنشيط المكون الإضافي ، يمكنك البدء في تخصيص صورك.
افتح صفحة أو منشورًا به الصورة أو الصور التي تريد تحريكها وانقر على ” CSS Hero ” أعلى الصفحة.
سيؤدي هذا إلى فتح قائمة المحرر حيث يمكنك إضافة جميع أنواع تأثيرات CSS المختلفة.
سنقوم بإضافة صورة منبثقة على تأثير التمرير. أولاً ، ستحتاج إلى النقر فوق الصورة التي تريد تحريرها ، ثم النقر فوق “المقتطفات”.
بعد ذلك ، انقر فوق “تأثيرات التحويم”.
تأثيرات تحوم CSS Hero
سيؤدي ذلك إلى إظهار قائمة بتأثيرات CSS المختلفة. بعد ذلك ، حدد تأثير “.hvr-pop” وانقر فوق “تطبيق”.
انقر فوق “حفظ ونشر” وسيتم تطبيق تأثير CSS تلقائيًا على صورك.
حفظ التغييرات تحوم الصورة
نأمل أن تساعدك هذه المقالة في تعلم كيفية إضافة تأثيرات تمرير الصور في ووردبريس. قد ترغب أيضًا في الاطلاع على دليلنا حول كيفية تحسين الصور للويب ودليل المبتدئين لدينا لتحسين محركات البحث على الصور .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
