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

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

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

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

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

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

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

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

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

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

تثبيت مكون إضافي

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

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

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

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

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

• انقر فوق القائمة لفتح إعدادات البرنامج الإضافي. 

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

عندما تجد واحدًا يعجبك، انقر على إنشاء نمط.

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

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

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

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

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

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

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

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

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

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

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

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

• ثم، انقر تخصيص وانتقل إلى CSS إضافي. أضف الشفرة التالية:

الجسم { عرض: مرن؛ ضبط المحتوى: مركز؛ محاذاة العناصر: مركز؛ ارتفاع: 100vh؛ خلفية: #0f0f0f؛ هامش: 0؛ عائلة الخط: Arial، sans-serif؛ } .التأكيد-الخط-عند-المرور { حجم الخط: 2rem؛ لون: #ffffff؛ موضع: نسبي؛ عرض: مضمن-كتلة؛ } .التأكيد-الخط-عند-المرور::بعد, .التأكيد-الخط-عند-المرور::قبل { محتوى: ''؛؛ موضع: مطلق؛ عرض: 100%؛ ارتفاع: 2px؛ خلفية: تدرج خطي(إلى اليمين، #ff0000، #00ffff)؛ أسفل: -5px؛ يسار: 0؛ تحويل: scaleX(0)؛ أصل التحويل: يمين؛ انتقال: تحويل 0.4s ease-out؛ } .التأكيد-الخط-عند-المرور::قبل { أعلى: -5px؛ أصل التحويل: يسار؛ } .التأكيد-الخط-عند-المرور:hover::بعد, .التأكيد-الخط-عند-المرور:hover::قبل { تحويل: scaleX(1)؛ }
 

• انقر نشر لحفظ الشفرة.

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

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

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

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

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

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

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

• افتح محرر Elementor من لوحة التحكم الإدارية.
• أضف صورتك.

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

• في قائمة Hover Animation المنسدلة، ستجد مجموعة متنوعة من التأثيرات الجاهزة للاستخدام.

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

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

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

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

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

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

• انقر تثبيت الآن، ثم تنشيط الإضافة.

• لإنشاء صندوق مقلوب، انتقل إلى قائمة صندوق مقلوب وانقر إنشاء جديد.
• اختر أي تأثيرات حركية تعجبك. بمجرد العثور على واحد، انقر إنشاء نمط.

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

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

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

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

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

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

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

جوتبرج هو محرر كتلة ووردبريس الافتراضي الذي يتيح لك إضافة تأثيرات التحويم مباشرة داخل المحرر.

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