با Buttons Shortcode and Widget در وردپرس، دکمه های شیک و سفارشی بسازید.

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

ساخت دکمه های شیک و سفارشی با Buttons Shortcode and Widget در وردپرس


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

 

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

 

 

پنجره ی تنظیمات افزونه ی Buttons Shortcode and Widget در وردپرس
این پنجره دو قسمت دارد :Options  و Preview .
در قسمت Options  شما می توانید تنظیمات مربوط به دکمه ی مد نظرتان را اعمال کنید و ویژگی های مورد دلخواهتان را به آن اضافه کنید.همزمان با اعمال تغییرات در قسمت Options  ،شما می توانید پیش نمایش دکمه در وردپرس را در قسمت

 

Link :  در این قسمت آدرس لینکی که با کلیک روی دکمه کاربر به آن لینک انتقال می یابد را درج می کنید.

Open in a new window : در این قسمت مشخص می کنید،لینکی که در قسمت بالا وارد کرده اید در صفحه ی جدیدی باز شود یا خیر.
Size : در این قسمت سایز دکمه را از میان گزینه های زیر انتخاب کنید.

  • Tiny : بسیار کوچک
  • Small : کوچک
  • Medium : متوسط
  • Large : بزرگ

Icon Type  : در این قسمت می توانید نوع آیکونی را که در کنار متن دکمه درج خواهد شد، از بین گزینه های مختلف موجود انتخاب کنید.
Icon Position : موقعیت قرار گیری آیکون که می تواند در سمت چپ یا راست عنوان دکمه قرار بگیرد.
Shap  : انتخاب شکل دکمه از بین گزینه های موجود که شامل موارد زیر است:

  • Square  : مربعی
  • Radius :گوشه های مدور
  • Round : دایره ای

Color : در این بخش رنگ پیش فرض دکمه را از بین گزینه های موجود می توانید انتخاب کنید.بعد از انجام تنظیمات روی دکمه ی Insert کلیک کنید.

نمونه شورت کد  Button

 

بعد از انجام دادن مراحل بالا و تولید شورت کد می توانید دکمه را در محیط ابزارک ها قرار دهید.

قرار دادن دکمه در محیط ابزارک ها :

برای اینکار از منوی نمایش-> ابزارک وارد قسمت ابزارک ها شوید و ابزارک با عنوان Otw Shortcode Widget رو انتخاب کنید .

در پنجره ی زیر گزینه ی Buttons را انتخاب کرده و روی دکمه ی Add کلیک کنید تا پاپ آپ مربوط به تنظیمات دکمه ظاهر شود.

 

 

قسمت اول تنظیمات مشابه مواردی است که در بالا ذکر شد ولی قسمت دوم را در ادامه شرح می دهیم.

Custom Options

 

Back Ground Color : تعیین رنگ پس زمینه ی دکمه، دقت داشته باشید که درصورت انجام تغییر در این قسمت، این رنگ جایگزین رنگ پیش فرضی  خواهد شد که در قسمت بالا انتخاب کرده بودید.
Border Color   :تعیین رنگ مرز های دکمه ها در وردپرس
: Title Color تعیین رنگ عنوان دکمه
Icon URL  :در صورتی که مایل هستید از آیکونی به غیر از آیکون های موجود در افزونه برای دکمه ی خود استفاده کنید، می توانید نشانی URL مربوط  به آیکون دلخواهتان را در این قسمت وارد کنید.
 :CSS Class در صورتی که با CSS آشنایی دارید و مایل هستید تا این المان را به صورت جداگانه استایل دهی کنید، می توانید نامی را در این قسمت وارد کنید . کلاس CSSS ای با این نام، برای استایل دهی در دسترس شما خواهد بود.

در انتها بر روی Save کلیک کنید تا تغییرات ذخیره شده و کادر پاپ آپ بسته شود.

 

 

 

درباره علیرضا سهیلی

موارد جالب

معرفی و آموزش افزونه WP-PostRatings قسمت اول

سلام گاهی اوقات نیاز دارید که یک سیستم امتیاز دهی برای پست هاتون داشته باشید ...

پاسخ دهید

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