آموزش ویجت دکمه المنتور ؛ تنظیم لینک، آیکن، رنگ و هاور

مسیر ارتباط و اقدام کاربر را با دکمه‌های واضح مشخص کنید

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

افزودن ویجت دکمه و شناخت تب‌های تنظیمات

🧩 برگه موردنظر رو با المنتور باز کنید، ابزار «دکمه» یا Button رو پیدا کنید و داخل کانتینر بکشید. با انتخاب ابزار، پنل «ویرایش دکمه» نمایش داده می‌شه. ابتدا مشخص کنید این دکمه برای چه کاری ساخته می‌شه و مقصدش کجاست. دکمه صفحه خدمات، دکمه تماس و دکمه مشاهده آموزش می‌تونن ظاهر هماهنگی داشته باشن، اما متن و مقصد هرکدوم باید متناسب با کاربردش انتخاب بشه.

📂 در تصویر اول، تب محتوا فعاله و در تصویر دوم تب استایل باز شده. تب پیشرفته هم وجود داره، اما جزئیاتش در عکس‌ها دیده نمی‌شه. فلش کنار عنوان «دکمه» فقط گروه تنظیمات رو باز و جمع می‌کنه. بسته‌شدن این گروه به معنی حذف یا غیرفعال‌شدن دکمه نیست. محل بعضی کنترل‌ها در نسخه‌های مختلف المنتور فرق می‌کنه؛ برای این آموزش، پنل داخل تصاویر مبناست.

نوع دکمه و انتخاب متن مناسب

🎛️ کنترل «نوع» در تصویر روی «پیش‌فرض» قرار گرفته. این فهرست برای انتخاب حالت‌های آماده ظاهری کاربرد داره و در ویجت کلاسیک می‌تونه گزینه‌هایی مثل اطلاعات، موفقیت، هشدار و خطر داشته باشه. تغییر نوع، عملکرد لینک رو تعیین نمی‌کنه و به‌تنهایی دکمه رو به ثبت سفارش یا ارسال فرم تبدیل نمی‌کنه. برای هماهنگی با طراحی سایت، بعد از انتخاب نوع، ظاهر واقعی دکمه رو بررسی کنید.

✍️ در فیلد «متن»، عبارت «اینجا کلیک کنید» دیده می‌شه. بهتره این متن عمومی رو با عبارت مشخصی مثل «مشاهده نمونه‌کارها»، «دریافت مشاوره طراحی سایت» یا «تماس با پشتیبانی» جایگزین کنید. متن کوتاه و روشن کمک می‌کنه کاربر مقصد رو پیش‌بینی کنه. اگر دکمه به صفحه معرفی خدمات می‌ره، عبارتی مثل «پرداخت سفارش» انتظار اشتباهی می‌سازه؛ متن باید با اقدام واقعی هماهنگ باشه.

پیوند دکمه و تنظیمات کنار کادر لینک

🔗 کادر «پیوند» مقصد دکمه رو مشخص می‌کنه. برای رفتن به صفحه‌ای دیگر، نشانی معتبر اون رو وارد کنید. در تصویر، مقدار این کادر فقط علامت # است؛ این مقدار مقصد محتوایی مشخصی تعیین نمی‌کنه و بسته به صفحه می‌تونه به ابتدای سند برگرده یا تغییر قابل‌توجهی ایجاد نکنه. قبل از انتشار، این مقدار آزمایشی رو با لینک درست جایگزین کنید. مفهوم پیوند در مطلب هایپرلینک در ویکی‌پدیا معرفی شده.

⚙️ چرخ‌دنده کنار پیوند، تنظیمات تکمیلی لینک رو باز می‌کنه. گزینه‌هایی مثل بازشدن در پنجره جدید و nofollow ممکنه اینجا نمایش داده بشن؛ در عکس فعلی این پنل بسته است. برای لینک‌های معمول داخلی، بازشدن در همان تب مسیر ساده‌ای ایجاد می‌کنه. انتخاب پنجره جدید رو براساس نیاز صفحه انجام بدید. nofollow ویژگی مرتبط با رابطه لینک برای موتور جست‌وجو است و مقصد یا قابل‌کلیک‌بودن دکمه رو عوض نمی‌کنه.

ساخت دکمه تماس تلفنی، ایمیل و حرکت به بخش صفحه

📞 برای دکمه تماس، در پیوند از ساختار tel:+989921100025 استفاده کنید و شماره رو با شماره واقعی مقصد جایگزین کنید. متن «تماس برای مشاوره» برای چنین دکمه‌ای مناسبه. روی موبایل معمولاً برنامه تماس باز می‌شه؛ در دسکتاپ نتیجه به برنامه‌های نصب‌شده و تنظیمات دستگاه بستگی داره. این لینک به‌تنهایی و بدون اقدام یا تأیید کاربر، تماس تلفنی برقرار نمی‌کنه.

✉️ برای ایمیل، نمونه mailto:info@example.com رو در کادر پیوند قرار بدید و نشانی واقعی خودتون رو وارد کنید. این لینک نوشتن پیام در برنامه یا سرویس ایمیل تنظیم‌شده کاربر رو درخواست می‌کنه و خودش پیام ارسال نمی‌کنه. اگر کاربر برنامه ایمیل پیش‌فرض نداشته باشه، تجربه متفاوتی می‌بینه. برای آشنایی با این ساختار، مطلب Mailto در ویکی‌پدیا رو ببینید.

📍 برای رفتن به فرم مشاوره در همین صفحه، به کانتینر مقصد یک CSS ID مثل consultation بدید و پیوند دکمه رو #consultation وارد کنید. در فیلد شناسه مقصد، علامت # قرار نمی‌گیره. برای مقصدی در صفحه دیگر، نشانی اون صفحه رو همراه همین بخش پایانی وارد کنید. شناسه باید دقیق و یکتا باشه؛ هدر چسبان هم ممکنه عنوان مقصد رو بپوشونه و نیاز به تنظیم فاصله داشته باشه.

انتخاب آیکن و شناخت برچسب‌های پویا

⭐ ردیف «آیکن» در تصویر اول سه کنترل برای حذف نماد، بارگذاری فایل و انتخاب از کتابخانه داره. برای تماس، نماد تلفن و برای رفتن به صفحه دیگر، یک فلش ساده می‌تونه مناسب باشه. وجود آیکن اجباری نیست؛ دکمه متنی هم می‌تونه واضح باشه. نماد باید با نوشته هماهنگ باشه و به شلوغی اضافه نکنه. فایل SVG دارای رنگ ثابت ممکنه از تغییر رنگ دکمه به شکل مورد انتظار پیروی نکنه.

↔️ بعد از انتخاب آیکن، کنترل‌های موقعیت و فاصله اون ممکنه ظاهر بشن؛ این گزینه‌ها در تصویر فعلی دیده نمی‌شن. جای نماد رو قبل یا بعد از متن انتخاب کنید و در صفحه فارسی، نتیجه واقعی راست‌چین رو ببینید. فاصله کم باعث چسبیدن نوشته و نماد می‌شه و فاصله زیاد ارتباط بصری اون‌ها رو ضعیف می‌کنه. دکمه رو با متن نهایی بررسی کنید، چون طول نوشته بر تعادل ظاهر اثر می‌ذاره.

🗂️ آیکن شبیه پایگاه داده کنار بعضی فیلدها مربوط به برچسب پویاست. این قابلیت برای دریافت مقدار از داده‌های متغیر کاربرد داره؛ مثلاً یک پیوند ثبت‌شده در فیلد سفارشی. منابع در دسترس به نسخه، مجوز و افزونه‌های سایت وابسته‌اند. برای دکمه‌ای با متن و مقصد ثابت، می‌تونید مقدار رو مستقیم وارد کنید. اگر از داده پویا استفاده کردید، نتیجه رو روی چند محتوای واقعی بررسی کنید تا دکمه بدون متن یا مقصد نمونه باقی نمونه.

شناسه دکمه چه کاربردی دارد؟

🏷️ «شناسه دکمه» در تصویر خالیه و توضیح زیرش بر یکتابودن شناسه تأکید می‌کنه. یک مقدار ساده مثل aw-consultation-btn انتخاب کنید؛ بدون فاصله و بدون #. استفاده از حروف لاتین، عدد، خط تیره یا زیرخط مطابق راهنمای پنل، انتخاب مناسبیه. این شناسه برای هدف‌گرفتن دکمه در استایل یا تنظیم رهگیری کاربرد داره و با متن نمایشی روی دکمه فرق می‌کنه.

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

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

📐 کنترل «جایگاه» در تب استایل، تراز دکمه رو در فضای در دسترس تنظیم می‌کنه. گزینه‌ها برای راست، وسط، چپ و حالت کشیده کاربرد دارند؛ حالت کشیده می‌تونه عرض دکمه رو در فضای ویجت گسترش بده. این کنترل جایگاه کل کانتینر در صفحه رو تعیین نمی‌کنه. اگر نتیجه دلخواه رو ندیدید، عرض ویجت و تنظیمات چیدمان والد رو هم بررسی کنید. آیکن دستگاه کنار این ردیف برای تنظیم واکنش‌گراست.

🔤 مداد کنار «تایپوگرافی» تنظیمات نوشته رو باز می‌کنه؛ مثل خانواده فونت، وزن و سایر ویژگی‌های قابل‌ارائه در نسخه شما. فونت رو با بقیه سایت هماهنگ کنید و از فشردگی یا کشیدگی نامناسب حروف فارسی جلوگیری کنید. آیکن کره زمین برای انتخاب تنظیمات سراسری کاربرد داره. مفهوم شکل و چیدمان حروف در مطلب تایپوگرافی در ویکی‌پدیا توضیح داده شده.

🌤️ «سایه متن» روی حروف دکمه اثر می‌ذاره و با سایه جعبه متفاوت است. با بازکردن کنترل می‌تونید تنظیمات سایه رو ببینید. برای نوشته فارسی کوتاه، سایه شدید ممکنه لبه حروف رو نامرتب یا ناخوانا کنه. ابتدا دکمه رو بدون سایه بررسی کنید و فقط اگر به وضوح یا هماهنگی طراحی کمک می‌کنه، یک اثر ملایم اضافه کنید. رنگ مناسب نوشته و زمینه معمولاً مهم‌تر از جلوه‌های تزئینیه.

حالت عادی، هاور و تنظیم رنگ پس‌زمینه

🎨 در تصویر دوم، حالت «عادی» انتخاب شده. رنگ متن، نوع پس‌زمینه و رنگ زیر اون، ظاهر اولیه دکمه رو تنظیم می‌کنن. در ردیف نوع پس‌زمینه، حالت رنگ ساده و گرادیان دیده می‌شه. اگر گرادیان رو انتخاب کنید، کنترل‌های مربوط به ترکیب رنگ‌ها ممکنه باز بشن. خط مورب قرمز در نمونه رنگ به وضعیت پاک‌شده یا تعیین‌نشده اشاره داره؛ رنگ نهایی می‌تونه از تنظیمات سراسری یا استایل‌های دیگر سایت بیاد.

👁️ متن باید روی زمینه دکمه به‌راحتی دیده بشه. رنگ‌های نزدیک به هم، حتی اگر جذاب باشن، خوانایی رو کم می‌کنن. برای دکمه اصلی صفحه، از رنگ هماهنگ با هویت سایت استفاده کنید و دکمه‌های کم‌اهمیت‌تر رو با شدت بصری کمتر نمایش بدید. رنگ سراسری به یکدستی کمک می‌کنه، اما تغییر اون می‌تونه عناصر دیگری رو هم تحت تأثیر قرار بده؛ بعد از تغییر، چند صفحه مرتبط رو ببینید.

🖱️ با انتخاب تب «هاور»، ظاهر دکمه هنگام قرارگرفتن نشانگر ماوس رو تنظیم می‌کنید. در عکس، این تب باز نشده؛ بنابراین کنترل‌های اختصاصی اون باید در نسخه نصب‌شده بررسی بشن. تغییر ملایم رنگ می‌تونه قابل‌کلیک‌بودن رو روشن‌تر کنه. ظاهر عادی باید به‌تنهایی کافی باشه، چون رفتار هاور روی دستگاه لمسی یکسان نیست. معرفی این تعامل در مطلب Mouseover در ویکی‌پدیا آمده.

سایه جعبه، نوع حاشیه و انحنای گوشه‌ها

☁️ «سایه جعبه» برای سایه اطراف کادر دکمه است. این اثر می‌تونه دکمه رو از زمینه جدا کنه، اما سایه بزرگ و تیره گاهی ظاهر صفحه رو شلوغ می‌کنه. کنترل رو باز کنید، مقادیر رو به‌آرامی تغییر بدید و نتیجه رو روی زمینه واقعی صفحه ببینید. سایه نوشته و سایه جعبه دو تنظیم مستقل‌اند؛ لازم نیست برای برجسته‌کردن دکمه هر دو رو هم‌زمان فعال کنید.

🧱 «نوع حاشیه» در تصویر روی پیش‌فرضه. با انتخاب یک نوع مثل خط پیوسته، کنترل ضخامت و رنگ حاشیه ممکنه ظاهر بشه. برای ساخت دکمه با زمینه شفاف و خط دور، علاوه بر حاشیه، وضعیت پس‌زمینه و رنگ متن رو هم تنظیم کنید. اگر فقط نوع حاشیه رو تغییر بدید، الزاماً به ظاهر موردنظر نمی‌رسید. حاشیه رو با حالت عادی و هاور و با اندازه واقعی دکمه بررسی کنید.

⭕ «انحنای حاشیه» گردی گوشه‌ها رو تعیین می‌کنه و در تصویر چهار ورودی همراه با کنترل اتصال مقادیر دیده می‌شه. برای گوشه‌های یکسان، مقادیر رو متصل نگه دارید؛ برای طراحی نامتقارن، اتصال رو باز کنید. این گزینه ضخامت خط دور رو تغییر نمی‌ده. مقدار مناسب به ابعاد دکمه و سبک سایت بستگی داره؛ دکمه خیلی گرد در کنار اجزای کاملاً زاویه‌دار ممکنه هماهنگی بصری صفحه رو کاهش بده.

فاصله داخلی و تنظیم دکمه برای موبایل

↔️ «فاصله داخلی» فضای بین محتوای دکمه و لبه‌های اون رو تنظیم می‌کنه. چهار کادر بالا، راست، پایین و چپ در تصویر وجود داره. با بازکردن اتصال می‌تونید فاصله افقی و عمودی متفاوت انتخاب کنید. این گزینه با فاصله بیرونی یا Margin فرق داره؛ فاصله بیرونی رابطه ویجت با عناصر اطراف رو تغییر می‌ده. توضیح کلی این تفاوت در مطلب مدل جعبه CSS در ویکی‌پدیا آمده.

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

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

✅ یک دکمه با متن «درخواست مشاوره» بسازید. به کانتینر فرم، شناسه consultation بدید و لینک دکمه رو #consultation قرار بدید. آیکن مرتبط انتخاب کنید، جایگاه رو متناسب با صفحه تنظیم کنید و رنگ متن و زمینه رو هماهنگ کنید. سپس فاصله داخلی، حاشیه و هاور رو بررسی کنید. تنظیمات رو ذخیره کنید و در صفحه واقعی مطمئن بشید انتخاب دکمه، فرم موردنظر رو در دسترس قرار می‌ده.

🔧 اگر دکمه کار نمی‌کنه، ابتدا مقصد رو بررسی کنید؛ برای لینک لنگر، شناسه مقصد و برای تماس، ساختار شماره رو ببینید. اگر روی دکمه کلیک نمی‌شه، ممکنه عنصر دیگری روی اون قرار گرفته باشه. اگر رنگ یا جایگاه تغییر نمی‌کنه، تنظیمات سراسری، والد و استایل‌های سفارشی رو کنترل کنید. در پایان، کش صفحه رو تازه کنید و با کلید Tab و سپس Enter هم دکمه رو آزمایش کنید تا مسیر استفاده با صفحه‌کلید روشن باشه.

جدول راهنمای تنظیمات ویجت دکمه

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

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

جمع‌بندی کار با ابزار دکمه المنتور

📝 برای ساخت دکمه مؤثر، ابتدا اقدام موردنظر و مقصد رو مشخص کنید. متن باید به کاربر بگه چه چیزی در انتظارشه و پیوند باید به همان مقصد بره. نوع دکمه ظاهر آماده رو انتخاب می‌کنه و جایگزین تنظیم لینک نیست. مقدار آزمایشی # رو پیش از انتشار بررسی کنید و برای تماس یا ایمیل، ساختار مخصوص همون کاربرد رو وارد کنید.

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

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

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