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

ایجاد دکمه در وردپرس

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

ایجاد دکمه در وردپرس با افزونه Button

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

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

نصب و راه اندازی افزونه

پس از نصب و فعال سازی افزونه از مسیر Add New Button <Button وارد قسمت تنظیمات افزونه برای ایجاد یک دکمه ی جدید می شویم . در کادر ابتدایی می توانید یک عنوان برای دکمه وارد کنید که با متن درج شده بر روی دکمه متفاوت است و در حقیقت به منظور مدیریت و دسترسی بهتر به دکمه های متعددی که در آینده طراحی می کنید، در نظر گرفته شده است. هم چنین امکان مشاهده ی تغییرات اعمال شده بر روی دکمه هم برای حالت عادی و هم برای حالت hover، از طریق کادر مربوط به پیش نمایش زنده وجود دارد. می توانید این کادر را جابجا کرده و آن را در موقعیتی که به نظرتان مناسب است قرار دهید.

در ادامه بخوانید  بهینه سازی فایلهای سی‌اس‌اس و جاوا اسکریپت با minify وردپرس

افزودن دکمه در وردپرس

 Button Settings

تنظیمات دکمه برای ایجاد دکمه در وردپرس

Text: متن درج شده بر روی دکمه
URL: تعیین نشانی URL که با کلیک بر روی دکمه، کاربر به این نشانی منتقل می شود.
Target: در صورت فعال کردن گزینه ی Open in new Window، با کلیک بر روی دکمه، نشانی URL تعیین شده در برگه ی جدیدی باز خواهد شد و در غیر این صورت در همان  برگه باز می شود.
Padding: تنظیم فاصله ی متن از مرزهای چهار گانه بر حسب پیکسل
Button: در این قسمت می توانید ارتفاع( Height) و عرض ( Width) دکمه را برحسب پیکسل تنظیم کنید.
Text Color: در قسمت Color می توانید رنگ متن دکمه را در حالت عادی تعیین کنید و در قسمت Hover Color می توانید رنگ متن را در حالت hover تعیین کنید.
Font: در این قسمت می توانید ویژگی هایی نظیر اندازه ی فونت برحسب پیکسل، نوع فونت، حالت ایتالیک، حالت بولد و نحوه ی چینش متن را تعیین کنید.

Text Shadow

سایه ی متن در ایجاد دکمه در وردپرس

Shadow offset: در این قسمت می توانید تنظیمات مربوط به سایه ی متن برای ایجاد دکمه در وردپرس را انجام دهید.
Shadow: در قسمت Color می توانید رنگ سایه متن در حالت عادی و در قسمت Hover می توانید رنگ سایه ی متن در حالت hover را تعیین کنید.
Shadow Blur: تعیین میزان تیرگی سایه

Border

تنظیم خطوط برای ایجاد دکمه در وردپرس

Button Circle: در صورت فعال کردن این گزینه شکل دکمه به صورت دایره خواهد بود. البته دقت داشته باشید که برای دایره ای شکل شدن باید طول و عرض دکمه را یکسان  وارد کرده باشید.
Radius: در این قسمت می توانید شعاع چهار گوشه ی دکمه را به دلخواه برحسب پیکسل تنظیم کنید.
Style: در این قسمت می توانید استایل مرزهای دکمه را از بین گزینه های موجود و هم چنین ضخامت آن ها را برحسب پیکسل تعیین کنید.

در ادامه بخوانید  استفاده از آیکون های مختلف در وردپرس با سرویس Font Awesome

سایر تنظیمات

Border: در قسمت Color می توانید رنگ مرز های دکمه در حالت عادی و در قسمت Hover Color می توانید رنگ مرز ها در حالت hover را تعیین کنید.
Border Shadow: در قسمت Color می توانید رنگ سایه ی مرز ها را در حالت عادی و در قسمت Hover Color می توانید رنگ سایه ی مرز ها را در حالت hover تعیین کنید.
Shadow Offset: تنظیمات سایه ی مرز های ایجاد دکمه در وردپرس
Shadow Blur: میزان تیرگی سایه

Background

پس زمینه ی ایجاد دکمه در وردپرس

Background Color: تعیین رنگ پس زمینه ی دکمه در ابتدا و انتها که به این وسیله می توانید، برای زیبایی بیش تر، گرادیان رنگ ایجاد کنید.
Hover Color: تعیین رنگ پس زمینه در حالت hover در ابتدا و انتها که به این وسیله می توانید، برای زیبایی بیش تر، گرادیان رنگ ایجاد کنید.
Opacity: تعیین میزان کدری پس زمینه در ابتدا و انتها
Hover Opacity: تعیین میزان کدری پس زمینه در حالت hover در ابتدا و انتها
Gradient stop: تعیین محل تغییر از رنگ اول به رنگ دوم

Container

Container Use: با فعال کردن این گزینه، دکمه داخل یک Container قرار می گیرد.
Container Center: وسط بودن / نبودن Container
Container Width: تعیین عرض Container برحسب پیکسل
Button Align: تعیین نحوه ی قرار گیری دکمه داخل Container
Margin: تعیین حاشیه بندی دکمه نسبت به مرز های Container برحسب پیکسل

در ادامه بخوانید  تجارتی پیشرفته با گوگل آنالیز در ووکامرس با Enhanced Ecommerce for WooCommerce

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

Custom Css: محل قرار گیری کد Css دلخواه برای سفارشی سازی بیش تر دکمه. نیازی به استفاده از تگ های <style> و <style/> نیست.

در انتها بر روی انتشار کلیک می کنیم.

ابزارک برای ایجاد دکمه در وردپرس

در قسمت All Buttons امکان مشاهده و مدیریت کلیه ی موارد برای ایجاد دکمه در وردپرس وجود دارد.

قرار دادن دکمه در برگه/ نوشته

برای این کار ابتدا وارد قسمت ایجاد یک برگه/ نوشته می شویم سپس با کلیک بر روی Button Shortcode موجود در بالای ویرایشگر، کادری به صورت پاپ آپ ظاهر می شود.

افزودن ایجاد دکمه در وردپرس با کمک آیکون

دکمه ی مدنظرمان را انتخاب کرده و با کلیک بر روی Use This Button شورت کد مربوط به آن داخل متن درج می شود.

نتیجه ی ایجاد دکمه در وردپرس

نتیجه عملکرد…

دکمه ها در وردپرس

نمایش دکمه با استفاده از ابزارک ها

از مسیر نمایش> ابزارک ها وارد قسمت مربوط به ابزارک ها شده و ابزارک با عنوان Button Widget را انتخاب می کنیم و در سایدبار یا فوتر مدنظرمان قرار می دهیم. موارد زیر در کادر تنظیمات ابزارک وجود دارند.

قرار دادن دکمه ها با ایجاد دکمه در وردپرس

نام: تعیین نام ابزارک
گزینش: انتخاب دکمه ی مورد نظر
در انتها تغییرات را ذخیره می کنیم.

نتیجه عملکرد …

دکمه ها در ابزارک ها

چند دکمه ی نمونه …

نمونه ی دکمه ها

امیدوارم این آموزش برای شما دوستان عزیز مفید واقع شده باشد.

پاینده باشید!

دانلود افزونه Button

دانلود صفحه افزونه

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند:

۱۲۷,۶۶۱ نفر

پاسخ دهید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

مطالب زیر را حتما بخوانید

محبوبترین‌های آموزش آنلاین

مشاهده همه آموزش‌های آنلاین