استایل دهی زیبا و جذاب به چک باکس ها و دکمه های رادیویی
یکی دیگر از مواردی که می تواند باعث زیباسازی رابط کاربری سایت شما شود، استفاده از چک باکس ها و دکمه های رادیویی جذاب در سایت می باشد. در این آموزش قصد داریم به معرفی یکی از کتابخانه های مفید در این زمینه بپردازیم.
استایل دهی زیبا و جذاب به چک باکس ها و دکمه های رادیویی
همانطور که پیش از این و در مقاله های دیگری نیز ذکر شده است، رعایت نکات مهم در طراحی UX و UI، از جمله مواردی هستند که بر روی رضایت کاربران و در نتیجه افزایش ترافیک سایت تاثیر مستقیمی می گذارند. هنگامی که تجربه های خوب و مفیدی از مشاهده سایت شما در ذهن بازدیدکنندگان به ثبت برسد، باعث تبدیل شدن آن ها به کاربران همیشگی سایت شده و از آن جایی که هر مشتری راضی، یک تبلیغ برای محصول و یا خدمات شما به حساب می آید، می توانید انتظار کاربران بیشتری را در درازمدت برای سایت خود داشته باشید.
می دانیم که افزایش بازدید نیز در نهایت منجر به بهبود رتبه الکسا سایت شده و یکی از موارد مهم در سئو و بهینه سازی سایت می باشد. پس رعایت همین نکات ساده در طراحی، می تواند باعث تحول کسب و کار اینترنتی شما باشد. یکی از مواردی که می تواند بر روی زیبایی سایت شما موثر باشد، استایل دهی زیبا و جذاب به چک باکس ها و دکمه های رادیویی است. یک فرم زیبا می تواند باعث تعامل بهتر کاربران با سایت شده و درصد موفقیت سایت شما را افزایش دهد.
کتابخانه Pretty checkbox
در این مطلب قصد داریم به یکی از کتابخانه های جذاب برای زیبا سازی چک باکس ها و دکمه های رادیویی، یعنی Pretty Checkbox بپردازیم.
هنگامی که وارد این صفحه از سایت گیت هاب می شوید، مشاهده میکنید که در ابتدا نحوه دانلود فایل برای شما نمایش داده می شود. البته می توانید با استفاده از نسخه CDN موجود در اینترنت، بدون نیاز به نصب نیز از آن استفاده کنید. کافیست قطعه کد زیر را در قسمت head سایت خود قرار دهید:
|
1 |
https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css |
حال می توانید طبق باکس های موجود و با اضافه کردن کلاس های گفته شده به تگ HTML، چک باکس ها و دکمه های رادیویی جذابی را به سایت خود بیافزایید. به همین سادگی!
|
1 2 3 4 5 6 |
<div class="pretty p-default"> <input type="checkbox"> <div class="state"> <label>Check</label> </div> </div> |
