آموزش ایجاد دکمه های متفاوت برای سایت

با سلام

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

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

افزونه Button نام دارد.

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

به بررسی تک تک این گزینه ها می پردازیم:

Text-متنی که می خواهید بر روی دکمه درج شود

URL-مشخص کردن لینک دکمه

Target-اگر فعال کنید وقتی دکمه کلیک شود در تب دیگر باز می شود

Padding-تعیین فاصله دکمه از متن در چهار جهت

Button-ارتفاع و عرض دکمه را می توانید مشخص کنید

Text Color-رنگ دکمه را می توانید مشخص کنید

Font-نوع فونت و ایتالیک بودن و حالت پررنگی یا همان بولد و… را می توانید مشخص کنید

Shadow offset-این بخش مربوط به تنظیمات سایه می باشد

Shadow-در قسمت Color رنگ متن و در قسمت Hover  رنگ سایه را مشخص کنید

Shadow Blur-می توانید میزارن سایه را مشخص کنید

Button Circle-این گزینه دکمه را به شکل دایره ایجاد می کند

Radius-اندازه شعاع چهار گوشه را وارد کنید

Style-استایل فاصله دکمه یا گزینه های موجود را مشخص کنید

Border-در قسمت Color می توانید رنگ مرز های دکمه و در قسمت Hover Color می توانید رنگ مرز هارا مشخص کنید

Border Shadow-در قسمت Color می توانید رنگ سایه ی مرز های و در قسمت Hover Color می توانید رنگ سایه ی مرز هارا مشخص کنید

Shadow Offset-سایه ی مرز های ایجاد دکمه

Shadow Blur– می توانید میزان تیرگی سایه را مشخص کنید

Background Color-تعیین رنگ پس زمینه را مشخص کنید

Hover Color-تعیین رنگ پس زمینه در حالت hover  را مشخص کنید

Opacity-میزان کدری پس زمینه را تعیین کنید

Hover Opacity-میزان کدری پس زمینه را در حالت hover تعیین کنید

Gradient stop– می توانید تغییر از رنگ اول به رنگ دوم را تعیین کنید

Container Use– میتوانید مشخص کنید که دکمه داخل Container  قرار گیرد

Container Center– با فعال کردن این گزینه مشخص کنید که Container  وسط باشد یا خیر

Container Width-میزان عرض Container  را مشخص می کنید

Button Align-نحوه قرار گیری Container  را تعیین می کنید

Margin-حاشیه بندی دکمه نسبت به Container

Custom Css– در این کادر می توانید کد سفارشی خود را اعمال کنید

و در پایان بر روی دکمه Save کلیک کنید.

*برای اینکه تغییرات را مشاهده کنید باید نوشته خود را منتشر کنید.*

در این بخش می خواهیم دکمه را در نوشته جای دهید.؟!

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

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

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

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