خانه / مقالات وب / راهنمای طراحی دکمه ها و call to action بهتر در وردپرس
راهنمای طراحی دکمه ها و call to action بهتر در وردپرس

راهنمای طراحی دکمه ها و call to action بهتر در وردپرس

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

سه اصل مهم برای طراحی دکمه های موثر در سایت:

خوب اجازه دهید کار خود را با اصول پایه ای آغاز کنیم. اگر می خواهید دکمه های موثری طراحی کنید باید چند اصل ساده را دنبال نمایید.

اصل اول: دکمه هایی که طراحی می کنید باید شبیه دکمه های خوبی باشند.

برای اینکه سایت شما به خوبی کار کند و به اهدافش دست یابد باید دکمه های موجود در آن به راحتی مورد استفاده قرار گیرد.  اجازه دهید نگاهی به صفحه محصولات آنالیتیکی گوگل بیندازیم و ببینیم این شرکت بزرگ چگونه از دکمه ها استفاده کرده است.

 

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

اصل دوم: فعالیتی که از طریق دکمه ها انجام می شود باید واضح باشد

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

اصل سوم: طراحی دکمه باید استوار و پایدار باشد

زمانی که می خواهید دکمه ای را برای سایت خود طراحی کنید اطمینان حاصل نمایید که همه دکمه هایی که فعالیت یکسانی انجام می دهند طراحی یکسانی دارند.

چگونه دکمه Call to action متمایزی طراحی کنیم؟

دکمه هایی که در call to action ها گنجانده می شوند کمی از دکمه های دیگر متفاوت هستند. این موضوع بدین خاطر است که دکمه های CTA باید افراد را تشویق کنند فعالیت خاصی را انجام دهند. برای اینکه بتوانید دکمه های CTA را تا جایی که می توانید موثر طراحی کنید باید راهنما و دستورالعمل زیر را به خاطر داشته باشید:

از رنگ هایی استفاده کنید که کنتراست بالایی  نسبت به رنگ بک گراند دارند و می توانند از سایر دکمه های رابط کاربری متمایز گردند. این دکمه ها را به گونه ای طراحی کنید که دیده شدن و پیدا کردنشان راحت باشد. از زبان اضطرار و فوریت در متن CTA استفاده کنید.

ایجاد دکمه های سایت با کمک کدها:

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

 چگونه به کمک کد، دکمه های متنی مستطیلی ایجاد کنیم؟

ایجاد دکمه های متنی بسیار راحت است و اگر بتوانید کدهای مورد نیاز را خودتان بنویسید قادر خواهید بود آن را به شیوه ای که دوست دارید تغییر دهید. اجازه دهید کار خود را با HTML markup برای یک دکمه متنی ساده آغاز کنیم.

<div class=”text-button”>

  <a class=”text-container” href=”#”>

    Buy Now

    <span class=”details”>Get 25% Off!</span>

  </a>

</div>

برای اینکه بتوانید این دکمه را به صفحه ای لینک کنید؛ آدرس مورد نظر خود را به عنصر href اضافه کنید. متن  دکمه خود را از طریق تغییر عبارت Buy Now می توانید تغییر دهید. بعد از انجام مرحله بالا باید CSS هایی را به استایل دکمه خود اضافه کنیم:

div.text-button {

  display: inline-block;

  overflow: hidden;

  /* rounded corners, set to 0 for square corners */

  border-radius: 10px;

  /* control whitespace around each button */

  margin: 5px 10px;

  /* control shadow around button */

  box-shadow: 4px 4px 4px #d3d3d3;

}

div.text-button:hover {

  box-shadow: 3px 3px 3px #d3d3d3;

  -webkit-transition-property: box-shadow; /* Safari */

  -webkit-transition-duration: .3s; /* Safari */

  transition-property: box-shadow;

  transition-duration: .3s;

}

a.text-container {

  text-decoration: none;

  display: inline-block;

  text-align: center;

  /* match radius of text-button div */

  border-radius: 10px;

  /* change the size of the button */

  padding: 20px 50px;

  /* change button background color */

  background-color: #70e566;

  /* change button text appearance */

  color: #fff;

  font-weight: bold;

  text-transform: uppercase;

  font-size: 2em;

  /* change border appearance */

  border: 5px solid #999;

}

a.text-container:hover {

  /* change button text color on hover */

  color: #f8f8f8;

  font-weight: bold;

}

a.text-container .details {

  display: block;

  /* change detail text appearance */

  font-size: .5em;

  text-transform: none;

  font-weight: normal;

}

 

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

چگونه می توانیم  به کمک کدها دکمه های دایره ای ایجاد کنیم؟

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

<link rel=”stylesheet” type=”text/css” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

 

از سوی دیگر اگر قصد دارید دکمه ها را به صورت مستقیم به سایت وردپرسی خود اضافه کنید و قالب شما در برگیرنده فونت مورد نظر نیست بهتر است افزونه Enqueue Font Awesome CDN را نصب کنید. حالا می توانیم markupای را بنویسیم که بعدا از آن برای دکمه های خود استفاده خواهیم کرد.

 

برای ایجاد ۴ ایکونی که در شکل بالا مشاهده می کنید از کدهای زیر استفاده شده است:

<div class=”icon-button”>

  <a class=”icon-container” href=”#”>

    <i class=”move-left fa fa-angle-left”></i>

  </a>

</div>

<div class=”icon-button”>

  <a class=”icon-container” href=”#”>

    <i class=”move-up fa fa-angle-up”></i>

  </a>

</div>

<div class=”icon-button”>

  <a class=”icon-container” href=”#”>

    <i class=”move-down fa fa-angle-down”></i>

  </a>

</div>

<div class=”icon-button”>

  <a class=”icon-container” href=”#”>

    <i class=”move-right fa fa-angle-right”></i>

  </a>

</div>

برای ایجاد آیکون فیس بوک، از کدهای زیر استفاده کنید:

<div class=”icon-button”>

  <a class=”icon-container” href=”#”>

    <i class=”fa fa-facebook”></i>

  </a>

</div>

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

div.icon-button {

  display: inline-block;

  overflow: hidden;

  border-radius: 50%;

  /* control whitespace around each button */

  margin: 5px 10px;

  /* control shadow around button */

  box-shadow: 4px 4px 4px #e3e3e3;

}

/* control hover effect */

div.icon-button:hover {

  box-shadow: 3px 3px 3px #e3e3e3;

  -webkit-transition-property: box-shadow;

  -webkit-transition-duration: .3s;

  transition-property: box-shadow;

  transition-duration: .3s;

}

a.icon-container {

  text-decoration: none;

  display: -webkit-flex

  -webkit-align-items: center;

  display : flex;

  align-items : center;

  /* adjust button size */

  width: 50px;

  height: 50px;

  /* adjust button color */

  background-color: #fff;

}

.icon-container i {

  margin: 0 auto;

  /* adjust icon size and color */

  font-size: 30px;

  color: #999;

}

/* adjust icon alignment */

i.move-left {

  padding-right: 5px;

}

i.move-up {

  padding-bottom: 5px;

}

i.move-down {

  padding-top: 5px;

}

i.move-right {

  padding-left: 5px;

}

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

چگونه دکمه های مربعی با متن و ایکون ایجاد کنیم؟

با کمک CSS،ایجاد دکمه ای که ترکیبی از متن و آیکون باشد بسیار ساده است. تنها کاری که باید انجام دهیم اضافه کردن کدی شبیه کد زیر است:

<div class=”text-button”>

  <a class=”text-container” href=”#”>

    <i class=”move-left fa fa-shopping-cart”></i>

    Buy Now

    <span class=”details”>Get 25% Off!</span>

  </a>

</div>

اضافه کردن دکمه های ایجاد شده به سایت وردپرسی:

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

  • شما می توانید از قالب Child استفاده کنید و CSS را به فایل css قالب Child اضافه کنید.
  • شما می توانید از افزونه های سفارشی CSS استفاده کنید.
  • می توانید از  افزونهUpfront  استفاده کنید. Upfront در برگیرنده عنصر دکمه درون ساخت است که می توانید به کمک آن دکمه های متنی و ایکون های رسانه اجتماعی را به سادگی ایجاد کنید.

 نتیجه گیری:

استفاده از کدها  در سایت وردپرسی بسیار ساده و اسان است. اینکار به شما اجازه می دهد رنگ ها، متون، ایکون ها و طراحی های مختلفی را امتحان کنید تا بتوانید تاثیر عناصر رابط کاربری و Call to action را افزایش دهید.

منبع: wpmudev

جوابی بنویسید

ایمیل شما نشر نخواهد شدخانه های ضروری نشانه گذاری شده است. *

*