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

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

دعنا نذهب اليها.

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

1. إنشاء صفحة جديدة / فتح واحدة موجودة

أنشئ صفحة جديدة أو افتح صفحة موجودة

ابدأ بإنشاء صفحة جديدة أو فتح صفحة موجودة.

تحميل تخطيط من اختيارك

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

إضافة قسم جديد إلى أسفل الصفحة

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

تباعد

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف وأزل عرض هامش التخصيص المخصص في إعدادات التحجيم.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بإزالة جميع الحشو الافتراضي العلوي والسفلي أيضًا.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

إضافة وحدة نصية (المؤشر)

اترك مربع المحتوى فارغًا

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

تحجيم

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

• عرض:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي: 60 بكسل
  • الهاتف: 40 بكسل
• ارتفاع:
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي: 60 بكسل
  • الهاتف: 40 بكسل

الحدود

لتحويل المؤشر إلى دائرة ، كما لاحظت في معاينة هذا المنشور ، سنستخدم الزوايا الدائرية والحد.

• جميع الزوايا: 100٪
• عرض الحدود: 3 بكسل
• لون الحدود: #ffffff

وضع المزج

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

• وضع المزج: الاختلاف

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

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

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

موقع

سنستخدم موضعًا ثابتًا للوحدة أيضًا.

• المركز: ثابت
• الموقع: أعلى اليسار
• الفهرس Z: 2

فئة CSS

وسنكمل إعدادات الوحدة النمطية عن طريق تعيين فئة CSS مخصصة في علامة التبويب المتقدمة.

• فئة CSS: المؤشر

2. إضافة وظيفة

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

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

إضافة نمط وعلامات البرنامج النصي

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

فتح كود jQuery

بعد ذلك ، انسخ والصق سطور فتح كود JQuery التالية بين علامات البرنامج النصي:

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

تغيير موضع وحدة نص المؤشر

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

$('.cursor').insertAfter('.et_builder_inner_content');

إزالة المؤشر الافتراضي للصفحة

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

body {
cursor: none;
}

قم بتعيين وحدة نص المؤشر كمؤشر

بعد ذلك ، سنسمح للمؤشر بتتبع حركات الزوار باستخدام الأسطر التالية من كود JQuery:

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

تبديل التأثير عند تحريك وحدة معينة

أضف زيادة فئة CSS

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

.increase-size {
transform: scale(5);
background-color: white;
}

جميع وحدات الزر

سنقوم بتبديل فئة CSS هذه باستخدام بعض أكواد JQuery. يستهدف الكود أدناه جميع وحدات الأزرار داخل صفحة Divi الخاصة بك واحدة تلو الأخرى.

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

وحدة زر محددة

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

• فئة CSS: زر المؤشر

بعد ذلك ، استبدل فئة CSS في الكود الذي استخدمته في الخطوة السابقة. هذا كل شيء!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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