بــیــگ تــم
مرجع قالب وردپرس ، افزونه وردپرس ، آموزش وردپرس ، هاست وردپرس

جستجو
فقط جستجو من
جستجو در عنوان
جستجو در محتوا
جستجو در دیدگاه ها
جستجو در خلاصه ها
Filter by Custom Post Type
برگه‌ها
پیش نمایش فرم
اسلایدر دلخواه

خانه / آموزش وردپرس / راهنمایی طراحی دکمه های بهتر برای وردپرس
button-bigtheme

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

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

سه توصیه جهت طراحی دکمه های بهتر برای وردپرس

اگر میخواهید دکمه های مناسبی برای سایت وردپرس خود ایجاد کنید باید توصیه های زیر پیروی کنید.

اول: دکمه ها باید خوب به نظر برسند

دکمه ها باید زیبا و از سایر عناصر سایت شما باید مجزا باشند، دکمه هایی را که در تصویر زیر مشاهده میکنید، بدون اشکال هستند، دکمه ها باید قابل فشار دهی باشند، مانند یک دکمه واقعی، در غیر این صورت دکمه نخواهند بود.

google-analytics-buttons-bigtheme

دوم: اکشن دکمه ها باید مشخص باشد

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

همیشه نیاز به استفاده از متن نخواهد بود، آیکون ها نیز میتوانند به تنهایی تاثیر گذار باشند. برا مثال به تصویر پایین نگاه کنید، دکمه سمت راست را مشاهده کنید:

ga-icon-button-bigtheme

آیکون موجود بر روی این دکمه یک چیزی مانند این جمله را میگوید: ” چیز های بیشتری در این بخش وجود دارد” این دکمه به ما میگوید که آپشن های بیشتری وجود خواهند داشت اگر بر روی آن کلیک کنیم.

سوم: دکمه ها باید سازگار یاشند

هنگام طراحی دکمه ها، باید دکمه هایی را که یک اکشن انجام میدهند هم شکل طراحی کنید.

به تصور توجه کنید:

ga-three-buttons-bigtheme

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

در این صفحه این سازگاری ها نیز رعایت شده اند:

  • دکمه های دارای آیکون گرد در همین صفحه عمل خواهند داشت.
  • دکمه های “learn more”  آبی شکل هستند و شامل یک فلش هستند
  • دکمه هایی که در صفحه ی دیگری اکشن انجام میدهند، مربعی شکل هستند و رنگ سبز دارند.

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

چگونه دکمه های فراخوانی دستورات را ایجاد کنیم؟

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

inbound-bigtheme

دکمه های فراخوان را کاملا با محیط اطرافش متمایز کنید، و به آنها نسبت به دکمه های دیگر سایز بیشتری بدهید  و مقداری فضای سفید رنگ در اطراف این دکمه ها قرار دهید.

kissmetrics-bigtheme

ایجاد دکمه ها با استفاده از کدنویسی

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

ایجاد دکمه های مستطیل شکل

text-button-bigtheme

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

<div class=”text-button”> <a class=”text-container” href=”#”> Buy Now <span class=”details”>Get 25% Off!</span> </a> </div>

متن داخل دکمه را خواهید توانست با تغییر متن “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;
}

چگونه آیکون های زیبا با استفاده از کدنویسی ایجاد کنیم

icon-buttons-bigtheme

شما این کار را میتوانید با استفاده از روش های مختلف انجام دهید، اگر میخواهید از آیکون های Font awesome استفاده کنید باید این کد را به بخش head موجود در فایل html اضافه کنید:

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 برای استفاده از آیکون های font awesome باید افزونه  Enqueue Font Awesome CDN را نصب و فعالسازی کنید.
کد پایین مثال استفاده از Font awesome می باشد:

<div class=”icon-button”> <a class=”icon-container” href=”#”> <i class=”fa fa-facebook”></i> </a> </div>

سپس میتوانید با استفاده از یک افزونه css و یا با استفاده از بخش Global theme css قالب خودتان، استایل دکمه ها را وارد کنید.

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

موفق باشید…

Coding buttons for your WordPress site is pretty simple and give you the opportunity to try out different colors, button copy, icons, and designs to maximize the effectiveness of UI elements and calls-to-action.

باکس دانلود

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظر سنجی قالب وردپرس کــــانی شـــاپ همراه با 53 جایــــــزه بزن بریم نظر بدیم

دنبال کردن