كيفية إضافة تأثير التمرير إلى صورك في WordPress

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

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

عندما تحوم فوق صورة بتراكب لوني مختلف ، يمكنك استخدام التراكب المعين في هذه التطبيقات. يعد المكون الإضافي Image Hover Effects مثالاً على كيفية استخدام التسميات التوضيحية لإنشاء تأثيرات أثناء التمرير. قم بإعداد فئة بها صور متعددة (فئات) ثم ضعها جميعًا على موقع الويب الخاص بك. سيتم تجاهل الميزات الاحترافية للمكون الإضافي لأننا نستخدم الإصدار المجاني. يتيح لك تحديد Hover Effects الاختيار من بين 20 تأثيرًا مختلفًا لاستخدامها في Image Hover Effects. يمكنك أيضًا إضافة صورة إلى الزر "إضافة صورة" بهذه الطريقة. يمكنك ضبط عدد الصور المعروضة في صف واحد باستخدام "صور لكل صف".

املأ حقل الرمز القصير بصورتك ، ثم انقر فوق الزر Get Shortcode وانسخه. عند النقر فوق علامة الجمع لإضافة كتلة ، ستظهر كتلة الرمز القصير ؛ خلاف ذلك ، ابحث عن كتلة الرمز القصير عن طريق النقر فوق علامة الجمع. تتيح تأثيرات التكبير / التصغير ، خاصة تلك المستخدمة من قبل المتاجر عبر الإنترنت ، للزائرين البحث بسرعة عن تفاصيل حول منتجاتك. من الممكن تحقيق ذلك باستخدام ملحق WP Image Zoom.

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

كيف تحوم فوق صورة؟

هناك عدة طرق لتحوم فوق صورة. إحدى الطرق هي استخدام موضع خاصية CSS. يمكنك تعيين موضع الكائن باستخدام الخصائص العلوية والسفلية واليسرى واليمنى. هناك طريقة أخرى وهي استخدام خاصية z-index. تحدد خاصية الفهرس z ترتيب الكائن. كلما زاد رقم الفهرس z ، زاد ارتفاع الكائن على الصفحة.

كيف تحوم فوق صورة؟

املأ: التمرير فوق الفئة الزائفة بخاصية صورة خلفية CSS لاستبدال أو تغيير صورة تمرير الماوس.

تحوم فوق الرئيس

حلق مستشارو الرئيس فوق كتفه في انتظار أو أمل.

تأثير تحوم الصور Css

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

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

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

ابتكرت Laura Montgomery Shaking Shapes مع الرسوم المتحركة CSS وبعض اهتزازات العلامات التجارية. عندما ابتكر Kyle Foster لعبة Rumble on Hover ، قام بإدخال أنواع لونية وعناصر زائفة. يجب عليك تضمين بعض سطور ترميز HTML كجزء من المكتبة لاستخدام التأثيرات. في Hover.css ، يمكنك استخدام أكثر من 40 مؤثرًا لتمرير صور CSS في مكتبة واحدة بحجم ملف واحد يبلغ 19 كيلوبايت فقط. يمكنك استخدام هذه التأثيرات لإضافة الأزرار والروابط وتصميمات الشعار والصور وعناصر أخرى إلى موقع الويب الخاص بك. كلاهما يضيف عمقًا إلى التصميم ويشجعان التفاعل بين المستخدمين.

يمكن تطبيق الأنماط على أي عنصر ، وليس الروابط فقط ، باستخدام: محدد التمرير . إذا كنت تريد نمط كل الفقرات باستخدام: محدد التمرير ، على سبيل المثال ، يمكنك استخدام هذه الطريقة. إذا أضفت p: مرر مؤشر الماوس إلى إجابتك ، فستحصل على p: hover. في النص ، يتم استخدام التسطير. هذا هو الحرف *. لاستخدام هذه الصورة ، يجب عليك أولاً تحميلها لتحوم فوقها. إنه حد أسود خالص قيمته 2 × 2. أقحم: 0 1 rgba (0.0 ، 0 ، 0 ، و 2) ؛ 2px وبالمثل ، يمكن استخدام محدد hover لتحديد نمط كل العناصر بسمة ارتباط. يجب أن تكون جميع الروابط ، على سبيل المثال ، بأسلوب وفقًا للإرشادات التالية. هذه عبارة عبرية. زخرفة النص مسطر. لا يمكن القيام بذلك إلا بموافقة الشخص. إذا كنت تريد نمط الروابط باستخدام السمة hover ، فاستخدم ما يلي: بعد: hover. من خلال النقر فوق هذا الارتباط ، يمكنك معرفة كيفية عمله. يمكنك نمط أي عنصر باستخدام السمة النشطة باستخدام: محدد التمرير. نمط الروابط النشطة بالطريقة التالية: بعد: نشط الرابط نشط والمحتوى مرتبط. يمكن أيضًا استخدام محدد التمرير لتحديد نمط أي عنصر يحتوي على السمة: focus. صمم العنصر باستخدام سمة التركيز باستخدام ما يلي: هذه هي طريقة التركيز بعد الرقم *. هناك تركيز واحد على هذا المحتوى. يمكن أيضًا استخدام محدد hover لتحديد نمط جميع العناصر التي تحتوي على السمة: target. عند تصميم عنصر له السمة: target ، يجب استخدام ما يلي: A: target Fff هو رمز #fff. * A: hover هي كلمة عبرية. التسطير هو تقنية تسطير النص. ما فائدة وجود *؟ يجب أن تكون نشطًا: بعد *. المحتوى له ارتباط نشط. ستعمل التعليمة البرمجية التالية على تنسيق الروابط باستخدام سمة التركيز بشكل افتراضي. بعد ذلك ، ركز على العمل. يحتوي على عنصر.

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

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

تأثيرات تحوم الصور عبارة عن مجموعة من الصور المذهلة التي هي عبارة عن تأثيرات CSS3 نقية مع رسوم متحركة مذهلة. إنه مثالي لعرض المحافظ وأعضاء الفريق والعناصر الأخرى في معرض عبر الإنترنت. إنه سهل الإعداد وسريع وسهل الفهم لأي مستخدم. ستحصل على 40 تأثير تمرير مختلف في هذه الحزمة ، اثنان منها بنمطين مختلفين ، ويمكنك التحكم في بقية عملية الإدارة. باستخدام المكون الإضافي ، تم زيادة وقت تحميل موقع الويب بشكل كبير. لم يعد المكون الإضافي Image Hover Effects Pro مكونًا بشكل صحيح بعد آخر تحديث لأن صفحة تكوين لوحة معلومات WordPress لم تعد تعمل كوجهة لتكوين المكون الإضافي. يتم تحميل صفحاتي ببطء نتيجة لهذا المكون الإضافي ، وكثيرًا ما لا تعرض الأجهزة اللوحية الخاصة بي صفحاتي عند تمكينها.

WordPress تحوم فوق الصورة بدون البرنامج المساعد

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

لسوء الحظ ، لا يمكنني مساعدتك في الحصول على مكون إضافي من مستودع WordPress.org. إذا كنت مبرمجًا ضعيفًا أو متوسطًا ، فيمكنني مساعدتك في ترميز هذا بنفسك بنسبة 100٪. من ناحية أخرى ، تتوفر المكونات الإضافية الجاهزة عند الحاجة إليها. إذا كنت تريد إدخال هذا في الرمز القصير الخاص بك ، يرجى القيام بذلك. إنه أمر بسيط مثل هذا الرمز لإضافة HTML إلى وظيفتنا. بعد ذلك ، يتم إرجاع HTML إلى WordPress في شكل ob_get_clean () (إرجاع ob_get_clean () كما نعيده). في الوقت الحالي ، يتم استخدام العناصر النائبة في HTML.

نتيجة لذلك ، يجب استخدام البيانات من الرمز القصير بدلاً من ذلك. من المهم أيضًا التأكد من تعيين القيم بشكل صحيح في HTML الخاص بنا. إذا نظرت إلى عنوان URL للصورة ، ستجد هذا: Code. نستبدل "العناصر النائبة" بقيم حقيقية في النص. لتنفيذ المفاهيم الواردة في هذه المقالة بالكامل ، يجب علينا أولاً تطبيق القليل من CSS. توضح الصورة أدناه كيف ستبدو عند عرضها لأول مرة. يمكننا أيضًا التمرير فوق الصورة لنقول ، "أنا أحب الرئيس".

إذا تسبب كل هذا الرمز في نزيف عينيك ، فيمكنك تنزيل المكون الإضافي النهائي. إنه هنا ، ويسعدني جدًا الإبلاغ. ما عليك سوى إرسال بريد إلكتروني لتأكيد اشتراكك وبعد ذلك ستنتهي من تثبيت المكون الإضافي.