سلام به رفیق رایا وردپرسی خودم، حالت چطوره؟ 👋

تو این مطلب قراره با هم یک افکت دنبال کننده موس (Cursor Tracker) خوشگل و حرفه‌ای با استفاده از المنتور بسازیم. 🤩 این افکت باعث می‌شه که یک المان جذاب، حرکت موس کاربر رو توی صفحه دنبال کنه و یک تجربه کاربری خاص و به یاد موندنی ایجاد کنه. پس اگه تو هم علاقه‌مندی این افکت رو روی سایتت پیاده کنی، تا پایان این آموزش با من همراه باش! 🙂

🤔 چرا دنبال کننده موس میتونه سایتت رو خاص کنه؟

• جلب توجه کاربر: این افکت کوچیک ولی خلاقانه، فوراً توجه کاربر رو به خودش جلب می‌کنه.
• تجربه کاربری خاص: به جای اون موس ساده و همیشگی، به کاربرت یک تجربه متفاوت و تعاملی هدیه می‌دی.
• مدرن و حرفه‌ای: سایتت رو از یک سایت معمولی به یک سایت مدرن و حرفه‌ای تبدیل می‌کنه.

🔥نحوه پیاده سازی افکت دنبال کننده موس در المنتور

خبر خوب اینه که برای این کار نیاز به هیچ پلاگین اضافه‌ای نداری! فقط کافیه یک قطعه کد کوچیک رو در جای مناسبش قرار بدی. پس طبق راهنمایی زیر پیش برو و دقیقا هر کاری میگم رو انجام بده 🙂

قدم اول: ورود به بخش کدهای سفارشی المنتور

اول از همه، وارد پیشخوان وردپرس شو و از منوی سمت راست، روی المنتور و بعد کدهای سفارشی (Custom Code) کلیک کن.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

قدم دوم: افزودن کد جدید

حالا روی دکمه “افزودن جدید” (Add New) کلیک کن تا یک صفحه جدید برای وارد کردن کد باز بشه. یک عنوان برای کد خودت انتخاب کن، مثلاً “کد دنبال کننده موس”.

مهم‌ترین بخش همینجاست! باید کد زیر رو کپی کنی و در باکسی که برای وارد کردن کد هست، قرار بدی:

<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>

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

قدم سوم: تنظیمات و انتشار

بعد از اینکه کد رو قرار دادی، مطمئن شو که مکان (Location) کد روی تگ پایانی </body> تنظیم شده باشه.

در نهایت، روی دکمه انتشار (Publish) کلیک کن. ازت پرسیده می‌شه که این کد کجا نمایش داده بشه؟ گزینه “کل سایت” (Entire Site) رو انتخاب کن و تغییرات رو ذخیره کن.

تبریک می‌گم! 🎉 کارت تمومه. حالا به سایتت برو و از افکت جدید و جذاب موس لذت ببر.

به همین سادگی تونستی یک قابلیت تعاملی و فوق‌العاده جذاب به سایت المنتوری خودت اضافه کنی. امیدوارم از این آموزش لذت برده باشی و ازش برای خاص‌تر کردن پروژه‌هات استفاده کنی. موفق باشی! 😉

با این کد CSS، به فرم‌ های المنتور خود ظاهر و استایل مدرن تری بدهید

مطالعه

ساخت هاور افکت ترسیم خطوط حاشیه دکمه یا باکس در المنتور

مطالعه

ساخت لندینگ‌ پیج حرفه ای در المنتور بدون کدنویسی

مطالعه