كيفية تحويل المؤشر إلى زر عند التمرير فوق عنصر باستخدام Divi

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

دعونا نذهب.

مسح

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.

مكتب

الهاتف

قم بتنزيل التصميم مجانًا

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

1. إنشاء هيكل عنصر

إضافة قسم جديد

لون الخلفية

سنبدأ هذا البرنامج التعليمي من خلال بناء هيكل العناصر في صفحة Divi. أضف قسمًا جديدًا واستخدم لون خلفية أبيض له.

• لون الخلفية: #ffffff

مباعدة

انتقل إلى علامة التبويب تصميم القسم وقم بتغيير إعدادات التباعد كما يلي:

• الحشو العلوي: 80px
• الحشو السفلي: 0px

أضف سطرًا جديدًا

هيكل العمود

متابعة إضافة صف جديد باستخدام بنية العمود التالي:

التحجيم

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

مباعدة

ثم قم بإزالة كل الحشوة الافتراضية العلوية والسفلية.

• الحشو العلوي: 0px
• الحشو السفلي: 0px

أضف وحدة صورة إلى العمود 1

تنزيل الصورة

لنبدأ بالوحدات النمطية ، بدءًا من وحدة الصورة في العمود 1. قم بتحميل صورة من اختيارك.

إضافة رابط

ثم أضف رابطًا إلى وحدة الصورة.

مقياس الجسر

ثم انتقل إلى علامة التبويب "تصميم" وقم بتغيير إعدادات مقياس تحوم الوحدة النمطية.

فئة CSS

أكمل معلمات الوحدة بتطبيق فئة CSS التالية في علامة التبويب خيارات متقدمة:

إضافة الوحدة النمطية للنص # 1 إلى العمود 1

أضف محتوى H3

دعنا ننتقل إلى الوحدة التالية، وهي وحدة نصية تحتوي على محتوى H3 حسب اختيارك.

إعدادات النص H3

قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H3 وفقًا لذلك:

• العنوان 3 الشرطة: ممثل
• لون نص العنوان 3: # 000000
• حجم نص العنوان 3:
  • سطح المكتب: 35 بكسل
  • الجهاز اللوحي: 28 بكسل
  • الهاتف: 22 بكسل
• العنوان 3 ارتفاع الخط: 1,4em

مباعدة

ثم أضف الهامش السفلي.

إضافة الوحدة النمطية للنص # 2 إلى العمود 1

إضافة محتوى

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

إعدادات النص

قم بتغيير إعدادات نص الوحدة كما يلي:

• خط النص: ممثل
• لون النص: # 75baff
• حجم النص:
  • سطح المكتب: 22 بكسل
  • الجهاز اللوحي: 18 بكسل
  • الهاتف: 15 بكسل
• تباعد الحروف النصية: 0.5 بكسل
• ارتفاع خط الرسالة: الثاني

إضافة وحدة زر إلى عمود 1

أضف نسخة

الوحدة التالية والأخيرة التي نحتاجها في هذا العمود هي وحدة الأزرار. أضف نسخة من اختيارك.

إعدادات زر

قم بالتبديل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات الزر وفقًا لذلك:

• استخدم الأنماط المخصصة للزر: نعم
• لون نص الزر: # 000000
• عرض حد الزر: 0px
• نصف قطر حد الزر: 1px

• خط الزر: الفاعل
• إظهار رمز الزر: نعم
• موقع رمز الزر: يسار
• أظهر فقط الرمز الموجود على التمرير للزر: لا

مباعدة

أضف أيضًا قيم التباعد المخصصة.

• الهامش السفلي: 80px
• الحشو السفلي: 20px
• الحشوة اليمنى: 30 بكسل

صندوق الظل

وأكمل إعدادات الوحدة من خلال تطبيق إعدادات ظل الصندوق التالية:

• الوضع الأفقي لمربع الظل: 0 بكسل
• موضع ظل الصندوق العمودي: 2 بكسل
• لون الظل: # 000000

احذف العمود 2

بمجرد الانتهاء من العمود الأول وجميع الوحدات فيه ، قم بإزالة العمود الفارغ الثاني من الصف.

عمود الاستنساخ 1

وأعد استخدام العمود الأول باستنساخه مرة واحدة.

استنساخ الصف بأكمله

استمر باستنساخ الصف بأكمله مرة واحدة.

تحرير جميع المحتويات والصور والروابط المكررة

بعد ذلك، تأكد من تحرير كافة المحتوى والصور والروابط في كل عمود مكرر.

2. أضف مؤشرًا

أضف سطرًا جديدًا إلى القسم

هيكل العمود

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

مباعدة

افتح إعدادات الصف وقم بإزالة كل المساحة المتروكة العلوية والسفلية الافتراضية.

• الحشو العلوي: 0px
• الحشو السفلي: 0px

إضافة وحدة نص المؤشر إلى عمود الصف الجديد

إضافة محتوى

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

لون الخلفية

ثم أضف لون الخلفية.

• لون الخلفية: # 47669b

إعدادات النص

قم بالتبديل إلى علامة التبويب "تصميم" وقم بتنسيق النص وفقًا لذلك:

• خط النص: ممثل
• سمك خط النص: غامق
• نمط خط النص: أحرف كبيرة
• لون النص: #ffffff
• تباعد الحروف النصية: 2 بكسل
• محاذاة النص: المركز

التحجيم

ثم أضف قيمة العرض والارتفاع لمعلمات التحجيم.

• العرض: 150px
• الارتفاع: 150px

الحدود

نقوم بتحويل هذه الوحدة إلى دائرة عن طريق تغيير إعدادات الحدود.

صندوق الظل

سنضيف أيضًا ظل صندوق دقيق.

• قوة طمس ظل الصندوق: 0 بكسل
• قوة انتشار ظل الصندوق: 20 بكسل
• لون الظل: rgba (7,213,255,0.14،XNUMX،XNUMX،XNUMX،XNUMX)

فئة CSS

بعد ذلك ، سنمنح وحدتنا فئة CSS.

CSS العنصر الرئيسي

نضيف أيضًا سطورًا من كود CSS إلى العنصر الرئيسي للوحدة.

transition: all .1s linear;
pointer-events: none;

display: flex;
justify-content: center;
align-items: center;

موضع

وسنكمل معلمات الوحدة بتغيير الموضع في علامة التبويب "خيارات متقدمة":

• المنصب: ثابت
• الموقع: أعلى اليسار
• مؤشر Z: 2

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

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

أضف علامات النمط والنص

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

أضف كود CSS

أدخل الأسطر التالية من تعليمات CSS البرمجية بين علامات الأنماط:

.hide-cursor {
cursor: none;
}

.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;

visibility: hidden;
opacity: 0;
}

.show-cursor {
visibility: visible !important;
opacity: 1;
}

أضف كود JQuery

واستخدم الأسطر التالية من كود JQuery بين علامات البرنامج النصي:

jQuery(document).ready(function($){

var cursor = $('.cursor');

$('.image-cursor').mousemove(function(e){

cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');

});

$('.image-cursor').mouseleave(function() {

cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');

});

});

مسح

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

مكتب

الهاتف

الأفكار النهائية

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

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