آموزش ویجت دکمه و سرچ باتن در المنتور

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

دکمه در افزونه المنتور چیست؟

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

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

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

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

برای استفاده از ویجت دکمه در افزونه المنتور باید ابتدا این افزونه را نصب داشته باشید به همین دلیل پس از نصب افزونه المنتور، صفحه مورد نظرتان را ویرایش کنید.

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

تنظیمات محتوا

• متن دکمه: در تب «محتوا»، متن دکمه (مثلاً «اکنون خرید کنید») را وارد کنید.
• لینک دکمه: آدرس URL مقصد (مثل یک صفحه محصول یا فرم تماس) را در بخش لینک وارد کنید.
• آیکون: برای جذاب‌تر شدن دکمه، یک آیکون از کتابخانه المنتور انتخاب کنید و موقعیت آن (قبل یا بعد از متن) را مشخص کنید.

بخش استایل

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

تنظیمات پیشرفته

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

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

• رنگ‌شناسی: از رنگ‌هایی استفاده کنید که با پالت رنگی وب‌سایت هماهنگ باشد و توجه کاربران را جلب کند.
• متن واضح: متن دکمه باید کوتاه، واضح و مرتبط با اقدام مورد نظر باشد (مثلاً «دانلود رایگان» به جای «کلیک کنید»).
• اندازه مناسب: دکمه نباید خیلی کوچک یا خیلی بزرگ باشد؛ اندازه‌ای انتخاب کنید که در همه دستگاه‌ها به‌خوبی دیده شود.
• تست پاسخگویی: دکمه را در حالت‌های دسکتاپ، تبلت و موبایل بررسی کنید تا از نمایش صحیح آن مطمئن شوید.
• استفاده از افکت‌ها با دقت: افکت‌های بیش از حد ممکن است حواس کاربران را پرت کند؛ تعادل را رعایت کنید.

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

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

آموزش ساخت دکمه جستجو در المنتور

برای استفاده از ویجت جستجو المنتور باید طبق آموزش زیر پیش بروید:

• ابتدا پس از نصب المنتور وارد پیشخوان وردپرس شده و صفحه یا پستی که می‌خواهید فرم جستجو را به آن اضافه کنید را باز کرده و سپس روی دکمه «ویرایش با المنتور» کلیک کنید.
• سپس به بخش ویجت‌ها رفته و عبارت «جستجو» (Search) را جستجو کنید یا از دسته‌ بندی عمومی آن را پیدا کنید و ویجت را به ناحیه موردنظر در صفحه بکشید و رها کنید.

• سپس می‌توانید دکمه جست و جوی مورد نظر را که در مانند تصویر زیر است را ببینید،

• تب محتوا: در تب محتوا می‌توانید نوع محتوای جستجو (مثل پست‌، صفحات یا محصولات) رو انتخاب کنید. همچنین می‌توانید متن دکمه (مثل «جستجو»)، آیکون دکمه و متن پیش‌فرض فیلد ورودی (مثل «جستجو کنید…») رو تنظیم کنید.

• تب استایل: تب استایل به شما این امکان را می‌دهد ظاهر فرم، رنگ متن و پس‌زمینه، حاشیه‌ها، فونت و اندازه دکمه و فیلد ورودی رو تغییر بدید. می‌توانید فرم رو برای دسکتاپ، تبلت و موبایل جداگانه تراز و استایل کنید.

• تب پیشرفته: در تب پیشرفته می‌توانید ID یا کلاس CSS برای سفارشی‌سازی اضافه کنید، انیمیشن ورود فرم رو تنظیم کنید یا نمایش ویجت رو برای دستگاه‌های خاص فعال/غیرفعال کنید.

و در پایان

ویجت دکمه در المنتور یکی از ساده‌ترین و در عین حال قدرتمندترین ابزارها برای بهبود تجربه کاربری و افزایش تعامل در وب‌سایت شماست. با استفاده از آموزش ارائه‌شده در این مقاله، می‌توانید دکمه‌هایی جذاب و حرفه‌ای طراحی کنید که نه تنها ظاهر وب‌سایت شما را ارتقا می‌دهند، بلکه نرخ تبدیل را نیز افزایش می‌دهند.

کافی است خلاقیت خود را به کار بگیرید و با رعایت نکات ذکرشده، دکمه‌هایی بسازید که کاربران نتوانند در برابر کلیک کردن روی آن‌ها مقاومت کنند، از این که تا اینجا همراه ما بودید ممنونیم پیشنهاد میکنم سری به مقاله اضافه کردن CSS سفارشی به المنتور نیز بزنید تا بتوانید css سفارش‌سازی به دکمه‌ خود در المنتور بدهید.

سوالات متداول (FAQ)

• آیا برای استفاده از ویجت دکمه نیاز به نسخه پرو المنتور دارم؟

خیر، ویجت دکمه در نسخه رایگان المنتور نیز در دسترس است، اما نسخه پرو امکانات پیشرفته‌تری مانند افکت‌های هاور پیچیده و آیکون‌های بیشتر ارائه می‌دهد.

• چطور می‌توانم انیمیشن به دکمه اضافه کنم؟

در تب «پیشرفته» یا «سبک»، گزینه‌های انیمیشن یا افکت‌های هاور را انتخاب کنید و نوع انیمیشن (مثل بزرگ شدن یا تغییر رنگ) را تنظیم کنید.