جستجو برای:
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
 
کنترل وب
دسترسی سریع
  • طراحی سایت
  • المنتور
  • وردپرس
  • ووکامرس
0

ورود و ثبت نام

  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

بلاگ

کنترل وببلاگویدئوتغییر نشانگر موس در سایت

تغییر نشانگر موس در سایت

https://ctrlweb.ir/wp-content/uploads/2022/05/تغییر-نشانگر-موس-در-سایت.mp4

تغییر نشانگر موس در سایت، گاهی اوقات با تغییر نشانگر موس در سایت می تونیم کاری کنیم که وقتی کاربری وارد سایت ما میشه، با دیدن اینکه نشانگر یا آیکون موس در صفحه تغییر کرده، به نوعی با تغییر بصری ایجاد شده به کمک تغییر نشانگر موس در سایت، لحظاتی با حس تنوعی که توی ظاهر سایت  ایجاد شده به مشاهده و گشت و گذار بیشتری توی سایت ما ادامه بده و به نوعی با ترغیب حس کنجکاوی کاربر در نتیجه تغییر نشانگر موس در سایت، میتونیم شانس دیده شدن محتوامون رو افزایش بدیم.

توی این مطلب از سایت کنترل وب، با استفاده از صفحه ساز المنتور و سیستم مدیریت محتوا وردپرس و به کمک کتابخانه kursor.js جاوا اسکریپت میتونیم با چند خط کد ساده تغییر نشانگر موس در سایت رو به راحتی برای صفحات دلخواه سایت انجام بدیم

اولین قدیمی که باید در تغییر نشاگر موس در سایت انجام بدیم، رفتن به پیشخوان سایت وردپرسیمون و رفتن به منوی المنتور و انتخاب قسمت کد سفارشی(custom code) برای نوشتن قظعه کد موردنظر هست. توجه کنین که این قابلیت فقط در نسخه های پرمیم المنتور(المنتو پرو) وجود داره و در نسخه رایگان باید از روش های دیگری این کار رو انجام بدین.

1 1

بعد از اینکه روی گزینه کد سفارشی کلیک کردیم به صفحه ای منتقل میشیم که توی اون میتونیم قطعه کد های سفارشی رو به صفحات سایتمون اضافه کنیم. توی این صفحه میتونین کد های سفارشی که می نویسین رو به طور کامل مدیریت کنین، مثلا عنوانی برای هر کدوم بزارین تا متوجه بشین که قطعه کدی که ساختین قراره چی کار بکنه و یا هر وقت خواستین اونها رو حذف و ویرایش کنین.

2 1

 

همونطور که در تصویر بالا می بینید، می تونیم با زدن روی گزینه add new، یک قطعه کد جدید بسازیم و در صفحه اون قطعه کدمون رو قرار میدیم. همینظور مثل تصویر زیر عنوانی رو برای کدتون بزارین که گمش نکنین.

 

3 1

توی کادر مربوط به کد سفارشی، کد این قسمت که در ادامه براتون قرار می دیم رو قرار بدین.بعد از این کار، توی نوار بالای کد زیر قسمت عنوان، قسمت هایی وجود داره که هر کدوم از اون تنظیماتی رو برای کدمون در نظر میگیرن. با تنطیم قسمت location میتونیم مشخص کنیم که اسکریپت ما در کدوم قسمت از ساختار html صفحه قرار بگیره. برای اینکه این کد جاوااسکریپت روی سرعت تاثیری نذاره، این قسمت رو روی body – End قررار میدیم تا اسکریپت در اخر صفحه قرار بگیره و بعد از محتویات صفحه لود بشه.

تغییر-نشانگر-موس-در-سایت-کنترل-وب

اگر روی انتشار کلیک کنین، قسمتی باز میشه که میتونین تعیین کنین که قطعه کد موردنظر به کدوم قسمت از قسمت های سابت اضافه بشه. حالا اون قسمت میتونه نوشته باشه یا یک صفحه خاص از سایت باشه که میتونین با تنظیمات مربوط به هر کدوم و فیلتر هایی که در اختیارتون المنتور قرار میده، جایگاه اسکریپتتون توی سایت رو مشخص کنین.

5 1

در قطعه کد زیر میتونین با تغییر type  بین عدد 1 تا 5 میتونین مدل های مختلفی از نشانگر موس رو به وجود بیارین. تنظیم دیگری که در قطعه کد زیر قرار داره که میتونین به کدتون اعمال کنین، اینه که نشانگر پیشفرض موس روی سایت رو غیر فعال کنین تا فقط نشانگر در این حالتی که کدشو نوشتین برای نشانگر موس سایت در نظر گرفته بشه.

برای اینکار در قطعه کد زیر مقدار removeDefaultCursor رو از مقدار false  به true  تغییر بدین.

همچنین میتونین با تغییر مقدار color به کد رنگی موردنظر خودتون، رنگ موردنظرتونو به نشانگر موس ایجاد شده بدین و به کار رنگ ببخشین!!

به همین راحتی، تونستیم که نشانگر موس کاربر رو توی قسمت های مختلف سایت تغییر بدیم و تغییر نشانگر موس در سایت رو داشته باشیم.

امیدوارم که از این آموزش لذت برده باشین و به کارتون اومده باشه.

قطعه کد:

<link rel=”stylesheet” href=”https://unpkg.com/kursor/dist/kursor.css”>
<script src=”https://unpkg.com/kursor”></script>
<script>
new kursor({
type: 1,
color: ‘#000000’,
removeDefaultCursor: false
})
</script>

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]
اشتراک گذاری:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • لیست قیمت در المنتور - کنترل وب
    لیست قیمت در المنتور

    13 بازدید

  • z ایندکس در المنتور | کنترل وب
    z ایندکس در المنتور

    15 بازدید

  • تغییر عرض سکشن در المنتور-کنترل وب
    تغییر عرض سکشن در المنتور

    23 بازدید

  • ساخت خط عمودی در المنتور-کنترل وب
    ساخت خط عمودی در المنتور

    33 بازدید

  • ماسک در المنتور-کنترل وب
    ماسک (Mask) در المنتور

    35 بازدید

  • نصب وردپرس روی لوکال هاست (زمپ) - کنترل وب
    نصب وردپرس روی لوکال هاست (زمپ)

    48 بازدید

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • آموزش المنتور
  • آموزش وردپرس
  • مقالات
  • ویدئو
نوشته‌های تازه
  • لیست قیمت در المنتور
  • z ایندکس در المنتور
  • تغییر عرض سکشن در المنتور
  • ساخت خط عمودی در المنتور
  • ماسک (Mask) در المنتور
لوگو کنترل وب

کنترل وب

مرجع آموزش هنر طراحی سایت

کنترل وب

مرجع آموزش هنر طراحی سایت

ما از سال 1398 در زمینه برنامه نویسی و طراحی سایت شروع به کار کردیم و امروز هدف ما این است تا مخاطبین ما بتوانند از زمان تصمیم به شروع یک کسب و کار اینترنتی تا رسیدن به فروش هر آن چیزی را که در این مسیر لذت بخش نیاز دارند به کمک ما در اختیار داشته باشند.

Telegram Instagram

دسترسی سریع

  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css
  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css

لینک های پر بازدید

  • ترفند المنتور
  • آموزش رایگان المنتور
  • دوره جامع وردپرس
  • آموزش html-css
  • مینی دوره آموزش وردپرس

جدید ترین آموزشها

لیست قیمت در المنتور

z ایندکس در المنتور

تغییر عرض سکشن در المنتور

ساخت خط عمودی در المنتور

ماسک (Mask) در المنتور

Telegram Instagram

کنترل وب روی سرورهای قدرتمند ایران سرور پشتیبانی میشود.

لوگو کنترل وب
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت