چگونه سایت خود را برای بازدیدکنندگان جذاب کنیم؟ این سوال تقریباً همه صاحبان منابع اینترنتی را نگران می کند: بازرگانان، وبلاگ نویسان، صاحبان مشاغل کوچک و بزرگ، مسافران و افراد خلاقی که چیزی برای گفتن به دنیا دارند.
چرا یک وب سایت باید زیبا و کاربردی باشد؟
تعداد بازدیدها به موضوع سایت و مخاطبان هدف آن، علاقه افراد به یک محصول خاص، سرمایه گذاری، تبلیغات، محتوا و بسیاری عوامل دیگر بستگی دارد. اما نمی توان انکار کرد که این سایت "به استقبال لباس" رفته است. این اولین و صفحه اصلی منبع است که چهره آن است، کارت تلفن، که توسط آن بازدید کننده باید بفهمد که آیا می خواهد وقت خود را برای مشاهده بیشتر محتوا صرف کند یا خیر.
و جایی برای خطا نیست! طبق تحقیقات یکی از دانشگاه های فنی در آمریکا، بازدید کننده اولین برداشت از سایت را در کمتر از یک ثانیه دریافت می کند. به طور متوسط، یک فرد یک سایت را در 3 ثانیه "اسکن" می کند. سرعت رعد و برق، درست است؟!
تا 70 درصد موفقیت منبع بستگی به ظاهر صفحه اصلی دارد. اولین چیزی که مردم متوجه می شوند این استلوگو، اما دومی ناوبری است. و اگر همه چیز در مورد لوگو کم و بیش واضح است، پس ارزش آن را دارد که سر خود را از ناوبری، منو و راحتی ارگونومی سایت بشکنید. یک سوال منطقی مطرح می شود: "چگونه سایت خود را تزئین کنیم، آن را تا حد امکان کاربردی و راحت و در عین حال زیبا کنیم؟" ایده‌های غیرمعمول زیادی برای ارائه وجود دارد، اما یکی از جالب‌ترین آنها نکات راهنمای ابزار است.
نکات ابزار چیست؟ راهنمای ابزار علاوه بر اینکه مکانیزمی عالی برای بهبود عملکرد سایت است، ابزاری است که به کاربر این امکان را می‌دهد تا توضیحی را برای یک تصویر خاص در هنگام قرار گرفتن روی نماد، کلمه یا تصویر مشاهده کند.
ابزار کار با راهنمای ابزار
Bootstrap بهترین ابزار برای ایجاد راهنمای ابزار است. این مجموعه ای از الگوها با یادگیری آسان برای ساخت برنامه ها و وب سایت هایی است که با HTML، CSS، Sass و JavaScript نوشته شده اند.
برای مشخص بودن، راهنمای ابزار از یکی از عناصر گرافیکی الگوی Bootstrap - Tooltip استفاده می کند.
چارچوب بوت استرپ برای «تویتر» ایجاد شد و در ابتدا «تویتر بلوپرنت» نام داشت. پس از تغییراتی در سال 2012، یک شبکه 12 ستونی دریافت کرد، تطبیقی شد و نام آشنا - Tooltip را به دست آورد. راهنمای ابزار عنصری است که وقتی ماوس را روی یک عنصر خاص در صفحه نمایشگر نگه می‌دارید ظاهر می‌شود.
ایجاد یک راهنمایی
می توانید با استفاده از ویژگی ها یک Bootstrap Tooltip ایجاد کنیدداده ها و همچنین با فعال کردن عناصر "جاوا اسکریپت". دو راه اصلی برای ایجاد یک HTML Bootstrap Tooltip وجود دارد. ماهیت اولی اعمال صفت و عنوان صفت (عنوان) است که حاوی متن اشاره است. راهنمای ابزار در بالا ظاهر می شود (تنظیمات پیش فرض). شایان ذکر است که راهنمای ابزار باید مقداردهی اولیه شود، زیرا راه‌اندازی خودکار به دلایل عملکرد در «راه‌انداز توییتر» منسوخ شده است.
به منظور مقداردهی اولیه راهنمای ابزار، جاوا اسکریپت ویژه ای استفاده می شود که در آن متد tooltip برای همه عناصری که دارای یک ویژگی هستند بازیابی می شود. ماهیت روش دوم فعال کردن یک راهنمای ابزار با استفاده از کد "جاوا اسکریپت" با مشارکت کتابخانه jQuery با نوشتن یک کلاس ابزار است که شامل یک راهنمای ابزار است. روش مشابه روش اول است، به جز روش انتخاب عنصر. شما می توانید نکات را در "جاوا اسکریپت" به روش زیر فعال کنید.
نمونه راهنمای ابزار Bootstrap
چهار گزینه اصلی برای موقعیت‌یابی نکات ابزار وجود دارد: در لبه‌های چپ و راست، و بالا و پایین عنصر.
نکته از بالا
اشاره درست
نکته در پایین
نکات چپ
استفاده از نکات ابزار
کاربردهای زیادی برای Bootstrap Tooltip وجود دارد. می توانید نکات ابزار را درج کنید تا کاربر بتواند ترجمه متن از یک زبان خارجی را در متن درک کند. راهنمای ابزار همچنین می تواند به عنوان ابزاری برای کمک به کاربر برای درک معنای دکمه های روی پانل در هنگام قرار گرفتن روی آنها استفاده شود. قالب های Bootstrap Tooltip اغلب در وب سایت های سازمان های مختلف برای ایجاد اشتراک در اخبار شرکت استفاده می شوند. این امر مشتریان را به روز نگه می دارد و همچنین به بازدیدکنندگان اجازه می دهد اطلاعات جدیدی مانند نرخ تخفیف، پیشنهادات، تغییرات درون شرکت را دریافت کنند.
مثالی را در نظر بگیرید که در آن کاربر باید آدرس ایمیل خود را وارد کند تا در یک خبرنامه مشترک شود. وظیفه حصول اطمینان از اینکه مخاطبان مشتری در اخبار مشترک می شوند با استفاده از HTML5 و ویژگی مورد نیاز به آسانی انجام می شود. راهنمایی راهنمای ابزار در این مورد برای درک توالی اقدامات توسط کاربر مورد نیاز است. به عنوان مثال، پس از وارد کردن آدرس ایمیل، کادر "من موافقت می کنم که اخبار شرکت را به آدرس ایمیل خود دریافت کنم" را علامت زدم. در زیر نمونه ای از کد فرم آمده است.
نصب این کد در HTML Bootstrap Tooltip آسان است. اما مزایای آن قابل توجه است. اکنون مصرف کنندگان تمام اخبار شرکت را می دانند. این یک نوع تبلیغات رایگان است.
اشتباهات اصلی هنگام ایجاد پنجره های بازشونکات
اگر Bootstrap Tooltip کار نمی کند چه باید کرد؟ اولین و اصلی ترین اشتباهی که در آن ویژگی tooltip کار نمی کند، فعال نبودن tooltip است. برای فعال کردن آن، باید از یک کد خاص استفاده کنید.
این روش به شما امکان می دهد کاملاً تمام نکات ابزار را در یک صفحه وب مقداردهی اولیه کنید.
دومین اشتباه رایج نداشتن jQuery در هدر است.
شرط لازم برای درست کار کردن پیوند وجود دارد - یک تابع پردازش داده مانند "Java Script" باید مشخص شود.
ویژگی های راهنمای ابزار
در هسته خود، مؤلفه Tooltip طوری طراحی شده است که وقتی نشانگر ماوس را روی یک یا قسمت دیگری از صفحه حرکت می دهید، نکات ابزار را نمایش دهد. اما، علاوه بر مکان راهنمای ابزار در سمت راست، چپ و بالا با کمک، tooltip دارای ویژگی های زیر است:
- فعال. استفاده از ویژگی true در Bootstrap Tooltip اجازه می دهد تا راهنمای ابزار نمایش داده شود، در حالی که تنظیم همان ویژگی روی false به این معنی است که هیچ نکته ابزاری قابل نمایش نیست.
- AutoPopDelay زمانی است که نکات نمایش داده می شود.
- AutoPopDelay. نشان‌دهنده مدت زمانی است که مکان‌نمای ماوس باید روی یک عنصر قرار بگیرد تا راهنمای ابزار ظاهر شود.
- IsBaloon. اگر مقدار راهنمای ابزار HTML Bootstrap درست باشد، راهنمای ابزار به یک ابر تغییر خواهد کرد.
- ToolTipIcon. نشان دهنده شخصیتی است که در پنجره نمایش داده می شودنکات.
Tooltipster
برای ایجاد راهنمای ابزار زیبا، به عنوان مثال، در سایتی که در وردپرس ایجاد شده است، لازم نیست زبان توسعه دهندگان وب را به طور کامل بدانید. کافی است از وجود چنین افزونه ای (افزونه) مانند Tooltipster اطلاع داشته باشید. از نام آن مشخص است که این افزونه مبتنی بر Tooltip است و به طرز شگفت انگیزی از نظر ویژگی ها و هدف به آن شبیه است. این افزونه برای چیست؟ این به شما امکان می دهد نشانه گذاری HTML لازم را در داخل راهنمای ابزار ایجاد کنید.
کار پلاگین بر اساس درج میانبرها در صفحه است. شامل تمام ویژگی های اصلی راهنمای HTML Bootstrap Tooltip است: محتوا (داده-توصیه ابزار-محتوا)، عنوان، موقعیت، ماشه، و غیره. این به شما امکان می دهد تم، فونت، اندازه راهنمای ابزار، رنگ، درج تصویر و موارد دیگر را تغییر دهید.
