دروس Elementor » كيفية إضافة مؤشر مخصص في ووردبريس باستخدام Elementor

كيفية إضافة مؤشر مخصص في ووردبريس باستخدام Elementor

آخر تعديل في 2023-09-12 بواسطة رامي محمد
إضافة مؤشر مخصص في ووردبريس

هل تبحث عن طريقة لإضافة مؤشر مخصص إلى موقع ووردبريس الخاص بك باستخدام Elementor؟

يحل المؤشر المخصص محل مؤشر الماوس الافتراضي ويساعدك على تحسين تجربة التنقل للزائرين على موقعك.

في هذه المقالة ، سنقدم برنامجًا تعليميًا مفصلاً حول إضافة مؤشر مخصص في ووردبريس مع إضافات Elementor و PowerPack.

ما هو المؤشر المخصص؟

ميزة PowerPack Custom Cursor لمنشئ صفحة Elementor

تتيح لك ميزة إضافة مؤشر مخصص تغيير تصميم مؤشر الماوس الافتراضي بحيث يتفاعل الزوار مع محتوى موقع الويب الخاص بك بطريقة ممتعة.

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

ملحق مؤشر PowerPack المخصص لـ Elementor

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

تأتي إضافات PowerPack مع ملحق إضافة مؤشر مخصص من اختيارك على موقع الويب الخاص بك.

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

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

تتيح ميزة PowerPack Custom Cursor لـ Elementor للزائرين الخضوع لتجربة تنقل رائعة عن طريق استبدال المؤشر الافتراضي الخاص بك بثلاثة أنماط مؤشر الماوس التفاعلية:

  1. عرض أيقونة مع صورة

باستخدام هذا الخيار ، يمكنك عرض مؤشر الماوس بتنسيق صورة. تدعم هذه الميزة الصور من جميع المصادر مثل الوسائط المحلية ومكتبات الوسائط وعناوين URL.

  1. اتبع مؤشر الصورة

باستخدام نمط مؤشر الماوس هذا ، ستتبع الصورة التي حددتها مؤشر الماوس أينما تحركت فوق شاشة سطح المكتب. أولاً ، قم بتخصيص الصورة التي تريد عرضها وأدخل الوسائط في هذا الخيار - تم.

  1. اتبع نص المؤشر

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

لاكتشاف المزيد حول ميزات أنماط مؤشر الماوس الثلاثة هذه بواسطة PowerPack Addons ، دعنا ننظر بشكل فردي إلى كل منها بالتفصيل.

إضافة مؤشر مخصص على موقع WordPress الخاص بك

لإضافة تصميمات مؤشر الماوس الرائعة هذه إلى موقع الويب الخاص بك على WordPress ، قم أولاً بتثبيت وتنشيط Elementor و PowerPack Elementor Addons على موقعك.

الآن ، افتح الصفحة باستخدام محرر Elementor وأضف قسمًا جديدًا.

حدد الهيكل الخاص بك في صفحة محرر Elementor

بمجرد تحديد هيكل ، انقر فوق رمز تحرير القسم .

قسم التحرير في صفحة محرر Elementor

عند النقر فوق خيار قسم التحرير ، ستظهر ثلاث علامات تبويب على جانبي شاشة سطح المكتب ، أي علامة تبويب Content وعلامة تبويب Style وعلامة التبويب Advanced.

انتقل إلى علامة التبويب Advanced ، وسترى الواجهة التالية.

قائمة ملحق PowerPack في صفحة محرر Elementor

بمجرد رؤية هذه الواجهة ، انتقل إلى القسم الفرعي PowerPack .

سيؤدي النقر فوق قسم PowerPack إلى فتح قائمة الامتدادات الكاملة التي تقدمها PowerPack Addons.

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

ميزة Custom Cursor

بعد ذلك ، يمكنك تخصيص الخيارات التي توفرها هذه الميزة:

  • Apply On: يتيح لك هذا الخيار اختيار إما القسم أو العنصر فئة / معرف العنصر حيث تريد عرض المؤشر المخصص.
  • Cursor Type: باستخدام هذا الخيار ، يمكنك تحديد نوع المؤشر كصورة ، أو متابعة الصورة ، أو Follow Text .
  • Choose Cursor Icon: يتيح لك هذا الخيار اختيار رمز المؤشر. يمكنك إدراج الصورة من مكتبة الوسائط.

دعونا نرى كل خيار نمط المؤشر على حدة.

اختيار صورة و Follow Image كنوع المؤشر

إذا اخترت الصورة ومتابعة الصورة كنوع المؤشر ، فستتمكن من تحديد صورة من مكتبة الوسائط لصورة المؤشر.

يمكنك إدراج الوسائط من مكتبة الوسائط أو تحميل الملفات محليًا. أيضا ، يمكنك إدراج صورة من URL.

تحديد Follow Text كنوع المؤشر

سيؤدي تحديد Follow Text كنوع المؤشر إلى فتح مجموعة واسعة من خيارات التخصيص لنمط المؤشر.

تمكين ميزة المؤشر المخصص لـ PowerPack

دعونا نناقش هذه الخيارات بإيجاز:

  • Cursor Text: يمكنك إضافة نص مؤشر مخصص باستخدام هذا الخيار.
  • Typography: يتيح لك هذا الخيار تخصيص أسلوب طباعة نص المؤشر.
  • Color: يمكنك اختيار لون نص المؤشر باستخدام هذا الخيار.
  • Background Type: استخدم هذا الخيار لإضافة خلفية ، صلبة أو متدرجة ، إلى نص المؤشر الذي أضفته.
  • Border Radius: سيؤدي ضبط نصف قطر الحد إلى منح خلفية نص المؤشر مظهرًا حادًا.
  • Padding : يسمح لك هذا الخيار بضبط المساحة المتروكة لنص المؤشر ، مما يسمح بالتباعد بين النص وحد الخلفية.

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

سيؤدي استخدام ميزات PowerPack إلى تحسين موقع الويب الخاص بك بذكاء للتميز عن الآخرين. عزز أداء موقع الويب الخاص بك والمظهر العام باستخدام PowerPack Elementor Addons.

نأمل أن يساعدك هذا البرنامج التعليمي في إضافة مؤشر مخصص أنيق في موقع WordPress الخاص بك باستخدام أداة إنشاء الصفحات Elementor.

لقد حاولنا تغطية جميع الخطوات الممكنة التي يمكن أن تساعدك في إضافة مؤشر مخصص إلى موقع الويب الخاص بك عبر ميزة PowerPack Custom Cursor . ومع ذلك ، يمكنك طرح استفساراتك في التعليقات إذا فاتنا شيء ما.

"لا تقرأ وترحل، ضع بصمتك.. وشاركنا برأيك ..."