راهنمای طراحی دکمه ها و call to action بهتر در وردپرس
دکمه ها و call to action ها فضای زیادی را در سایت به خود اختصاص نمی دهند اما بی شک یکی از مهم ترین عناصر طراحی هر سایتی محسوب می شوند. با در نظر گرفتن چنین اهمیتی، طراحی دکمه و call to action مناسب می تواند چالش بسیار بزرگی باشد. زمانی که می خواهید چنین دکمه هایی را طراحی کنید باید فاکتورهای طراحی مختلفی همچون اندازه، رنگ، آیکون، شکل، موقعیت و متن را در نظر داشته باشید. دکمه های call to action نیز باید به درستی طراحی شوند. در این مقاله قصد داریم اصول طراحی چنین دکمه هایی را برای سایت های وردپرسی بیان کنیم. پس همراه باشید.
سه اصل مهم برای طراحی دکمه های موثر در سایت:
خوب اجازه دهید کار خود را با اصول پایه ای آغاز کنیم. اگر می خواهید دکمه های موثری طراحی کنید باید چند اصل ساده را دنبال نمایید.
اصل اول: دکمه هایی که طراحی می کنید باید شبیه دکمه های خوبی باشند.
برای اینکه سایت شما به خوبی کار کند و به اهدافش دست یابد باید دکمه های موجود در آن به راحتی مورد استفاده قرار گیرد. اجازه دهید نگاهی به صفحه محصولات آنالیتیکی گوگل بیندازیم و ببینیم این شرکت بزرگ چگونه از دکمه ها استفاده کرده است.
اگرچه همه افراد طراحی متریال گوگل را دوست ندارند اما دکمه هایی که در تصویر بالا مشاهده کردید بی عیب و نقص هستند. دکمه هایی که در سایت به کار می برید باید متمایز باشند. دکمه هایی که شبیه دکمه نیستند و ظاهر عجیب و غریبی دارند معمولا نرخ کلیک پایینی خواهند داشت.
اصل دوم: فعالیتی که از طریق دکمه ها انجام می شود باید واضح باشد
زمانی که می خواهید دکمه ای برای سایت خود طراحی کنید باید به فعالیتی که از طریق آن انجام می شود توجه داشته باشید. این فعالیت باید روشن و واضح باشد. از متون یا ایکون هایی در دکمه های خود استفاده کنید که به طور واضح و روشن توصیف شده اند و فعالیت هر دکمه به خوبی قابل درک است. لازم نیست این کار را تنها با متن انجام دهید. در برخی از موارد ایکون ها می توانند به اندازه متن موثر باشند.
اصل سوم: طراحی دکمه باید استوار و پایدار باشد
زمانی که می خواهید دکمه ای را برای سایت خود طراحی کنید اطمینان حاصل نمایید که همه دکمه هایی که فعالیت یکسانی انجام می دهند طراحی یکسانی دارند.
چگونه دکمه Call to action متمایزی طراحی کنیم؟دکمه هایی که در call to action ها گنجانده می شوند کمی از دکمه های دیگر متفاوت هستند. این موضوع بدین خاطر است که دکمه های CTA باید افراد را تشویق کنند فعالیت خاصی را انجام دهند. برای اینکه بتوانید دکمه های CTA را تا جایی که می توانید موثر طراحی کنید باید راهنما و دستورالعمل زیر را به خاطر داشته باشید:
از رنگ هایی استفاده کنید که کنتراست بالایی نسبت به رنگ بک گراند دارند و می توانند از سایر دکمه های رابط کاربری متمایز گردند. این دکمه ها را به گونه ای طراحی کنید که دیده شدن و پیدا کردنشان راحت باشد. از زبان اضطرار و فوریت در متن CTA استفاده کنید.
ایجاد دکمه های سایت با کمک کدها:شما می توانید برای ایجاد دکمه هایی که در سایت نیاز دارید از افزونه های مختلف استفاده کنید اما کدنویسی به شما اجازه می دهد کنترل بیشتری بر روی ظاهر و رفتار دکمه های خود داشته باشید. بنابراین بعد از یادگیری اصول پایه ای طراحی دکمه ها، می توانید به کمک کدها موارد دلخواه خود را در سایت ایجاد کنید.
چگونه به کمک کد، دکمه های متنی مستطیلی ایجاد کنیم؟ایجاد دکمه های متنی بسیار راحت است و اگر بتوانید کدهای مورد نیاز را خودتان بنویسید قادر خواهید بود آن را به شیوه ای که دوست دارید تغییر دهید. اجازه دهید کار خود را با HTML markup برای یک دکمه متنی ساده آغاز کنیم.
برای اینکه بتوانید این دکمه را به صفحه ای لینک کنید؛ آدرس مورد نظر خود را به عنصر href اضافه کنید. متن دکمه خود را از طریق تغییر عبارت Buy Now می توانید تغییر دهید. بعد از انجام مرحله بالا باید CSS هایی را به استایل دکمه خود اضافه کنیم:
برای تغییر ظاهر هر دکمه، کافیست CSS را در نقطه ای که با کامنت نشان داده شده است ویرایش کنید. همانطور که می بینید CSS بالا یک دکمه سبز رنگ ایجاد خواهد کرد که حاشیه خاکستری رنگ و گوشه ای گرد دارد.
چگونه می توانیم به کمک کدها دکمه های دایره ای ایجاد کنیم؟خوب اول از هر کاری باید فونت ایکون را به سایت خود اضافه کنیم. می توانیم اینکار را به شیوه های مختلفی انجام دهیم. اگر دکمه های خود را در یک سند ساده HTML ایجاد می کنید بهتر است کد زیر را در بخش هد سند خود قرار دهید تا فونت مورد نظر ایمپورت گردد.
از سوی دیگر اگر قصد دارید دکمه ها را به صورت مستقیم به سایت وردپرسی خود اضافه کنید و قالب شما در برگیرنده فونت مورد نظر نیست بهتر است افزونه Enqueue Font Awesome CDN را نصب کنید. حالا می توانیم markupای را بنویسیم که بعدا از آن برای دکمه های خود استفاده خواهیم کرد.
برای ایجاد ۴ ایکونی که در شکل بالا مشاهده می کنید از کدهای زیر استفاده شده است:
برای ایجاد آیکون فیس بوک، از کدهای زیر استفاده کنید:
در نهایت می توانید CSS را برای تبدیل markup به دکمه مورد استفاده قرار دهید:
اگر می خواهید از این کد در سایت خود استفاده کنید، کامنت هایی که در CSS بالا نوشته شده است به شما کمک می کند ظاهر دکمه ها را بر اساس نیاز خود تغییر دهید.
چگونه دکمه های مربعی با متن و ایکون ایجاد کنیم؟با کمک CSS،ایجاد دکمه ای که ترکیبی از متن و آیکون باشد بسیار ساده است. تنها کاری که باید انجام دهیم اضافه کردن کدی شبیه کد زیر است:
برای اضافه کردن دکمه ها به سایت وردپرسی به دو مرحله نیاز خواهیم داشت. اول از هر کاری باید CSS را بارگذاری کنیم. ثانیا، باید markup را در پست یا صفحه ای که می خواهیم دکمه طراحی شده ظاهر گردد اضافه نماییم. برای اینکه بتوانید CSS را به سایت خود اضافه کنید گزینه های متعددی خواهید داشت.
- شما می توانید از قالب Child استفاده کنید و CSS را به فایل css قالب Child اضافه کنید.
- شما می توانید از افزونه های سفارشی CSS استفاده کنید.
- می توانید از افزونهUpfront استفاده کنید. Upfront در برگیرنده عنصر دکمه درون ساخت است که می توانید به کمک آن دکمه های متنی و ایکون های رسانه اجتماعی را به سادگی ایجاد کنید.
استفاده از کدها در سایت وردپرسی بسیار ساده و اسان است. اینکار به شما اجازه می دهد رنگ ها، متون، ایکون ها و طراحی های مختلفی را امتحان کنید تا بتوانید تاثیر عناصر رابط کاربری و Call to action را افزایش دهید.
منبع: wpmudev
برچسب هاcall to action دکمه راهنمای طراحی دکمه ها و call to action بهتر در وردپرس طراحی دکمه کدنویسی وردپرسدسته بندی : وردپرس
مقالات مرتبط
- چگونه URL ها را به هنگام انتقال سایت وردپرسی؛ به روز رسانی کنیم؟
- چگونه از سایت وردپرسی خود درآمدزایی کنیم؟
- ۱۴ نکته ضروری برای محافظت از ناحیه ادمین وردپرس
- چگونه برای سایت وردپرسی جدید خود ترافیک رایگان جذب کنیم؟
- چگونه خطای ۴۰۳ Forbidden را در وردپرس برطرف کنیم؟
- ۵ ابزاری که به تست عملکرد و سرعت سایت وردپرسی کمک می کند
- بعد از راه اندازی اولین سایت وردپرسی خود، چه مراحلی را باید طی کنیم؟
- چگونه زمان پاسخگویی سرور در وردپرس را کاهش دهیم؟
- هر آنچه که باید در مورد وردپرس ۵٫۰ بدانید
- چگونه ابزارک شمارش معکوس را به وردپرس اضافه کنیم؟
- چگونه بهترین هاست وردپرس را برای سایت خود انتخاب کنیم؟
- چگونه آیکون های رسانه اجتماعی را به منوی وردپرس اضافه کنیم؟
- چگونه قابلیت استفاده از فایل منیجر را به داشبورد وردپرس اضافه کنیم؟
- چگونه به کمک WAMP، وردپرس را بر روی رایانه ویندوزی نصب کنیم؟
- چگونه خطای RSS XML Feed در وردپرس را برطرف کنیم؟
- ۵ مورد از آسیب پذیری های مهم وردپرس و نحوه اجتناب از آن ها
- راهنمای طراحی دکمه ها و call to action بهتر در وردپرس
- چگونه قابلیت وبلاگ را به سادگی در وردپرس غیر فعال کنیم؟
- چگونه خطای Are You Sure You Want to Do This? Please Try Again را بر روی وردپرس برطرف کنیم؟
- آموزش سئو وردپرس
منبع : وب ایده