افزودن دکمه شناور به سایت با المنتور: راهنمای جامع (ویدیوی آموزشی)

جلســه :

جلسه 50

مدت زمــان :

07:46 دقیقه

سطـــح :

متوسط

مـدرس :

محمد رحیمی

دانلود المنتور پرو
دانلود افزونه المنتور پرو

دانلود نسخه جدید افزونه المنتور پرو ، کاملا اورجینال و فارسی با لایسنس دائمی و قابلیت نصب و استفاده روی بی نهایت دامنه دانلود افزونه Elementor Pro

گارانتی میهن تم
نصب آسان
پشتیبانی
اورجینال و فارسی

فهرست مطالب

افزودن دکمه شناور به سایت، ابزاری قدرتمند برای افزایش تعامل کاربران با وبسایت شما و دسترسی آسان‌تر به بخش‌های مهم است. دکمه‌های شناور (Floating Button) یا دکمه‌های اقدام شناور (FAB) به صورت ثابت بر روی صفحه نمایش داده می‌شوند و کاربران به راحتی می‌توانند به آن‌ها دسترسی داشته باشند، حتی زمانی که در حال اسکرول کردن صفحه هستند.

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

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

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

دکمه شناور یک المان رابط کاربری وب است که به صورت شناور بر روی صفحات وبسایت شما ظاهر می‌شود. این دکمه معمولاً در یک گوشه یا لبه صفحه قرار می‌گیرد و در حین اسکرول کردن صفحه نیز ثابت باقی می‌ماند.

ویژگی‌های کلیدی و کاربردهای دکمه شناور:

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

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

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

کاربردهای رایج دکمه شناور:

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

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

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

مراحل گام به گام برای ایجاد دکمه شناور:

  1. ایجاد قالب دکمه شناور:
    • در پیشخوان وردپرس، به بخش “قالب‌ها > دکمه‌های شناور” بروید.
    • بر روی “افزودن دکمه شناور” کلیک کنید.
    • پنجره “ایجاد المان شناور” در سمت راست باز می‌شود. روی “افزودن المان شناور جدید” کلیک کنید.
    • کتابخانه قالب‌ها با بخش “دکمه‌های شناور” باز می‌شود. یکی از قالب‌های موجود را انتخاب کنید و بر روی “درج” کلیک کنید.
    • قالب انتخاب شده در ویرایشگر المنتور باز می‌شود.
  2. ویرایش قالب دکمه شناور:
    • در پنل المنتور، بسته به قالب انتخابی، می‌توانید تنظیمات مختلفی را ویرایش کنید.
    • در این مثال، فرض می‌کنیم که می‌خواهیم یک دکمه شناور برای چت آنلاین ایجاد کنیم.
    • در قسمت “نام کاربری”، نام کاربری فرد پاسخگو را وارد کنید.
    • در قسمت “نوار بالایی”، فیلد “نام” را باز کرده و نام شخص پاسخگو را وارد کنید.
    • در قسمت “حباب پیام”، فیلد “نام” را باز کرده و نام شخص پاسخگو را وارد کنید.
    • به تب “استایل” بروید و فیلد “جعبه چت” را باز کنید. از منوی کشویی “گوشه‌ها”، گزینه “گرد” را انتخاب کنید.
    • به تب “پیشرفته” بروید و موقعیت دکمه شناور را تغییر دهید. در اینجا، “موقعیت افقی” را به “چپ” و “موقعیت عمودی” را به “مرکز” تغییر می‌دهیم.
    • در نهایت، بر روی “انتشار” کلیک کنید.
  3. تعیین محل نمایش دکمه شناور: (فقط برای کاربران المنتور پرو)
    • در بخش “شرایط نمایش“، می‌توانید تعیین کنید که دکمه شناور در کدام قسمت‌های وبسایت شما نمایش داده شود.
    • در این مثال، دکمه شناور را برای نمایش در تمام صفحات وبسایت تنظیم می‌کنیم.
انتخاب قالب دکمه شناور از کتابخانه المنتور
افزودن دکمه شناور به سایت با المنتور: راهنمای جامع 3

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

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

جمع بندی

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

در قسمت بعدی نحوه افزودن نوار شناور به سایت با المنتور را یاد خواهید گرفت.

تصویر محمد رحیمی

محمد رحیمی

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

9 پاسخ

  1. سلام و درود
    من میخایم یه دکمه شناور توی سایتم بزارم که وقتی کاربر توی مرورگر موبایل روی اون بزنه ،آیکون شبکه های اجتماعی که روی گوشی نصب شده اند بالا بیاد و بتونه لینک سایت رو شیر کنه،درست مثل وقتی که یه عکس رو از توی گالری میخاهیم شیر کنیم.
    یه افزونه هم پیدا کردم به اسم super web share که اینکارو انجام میده ولی متاسفانه توی اپلیکیشن وب ویو سایتم کار نمیکنه
    چطور میتونم به طور دستی توی المنتور پیاده سازی کنم؟

    پاسخ

    1. سلام
      توی المنتور یه دکمه بسازید

      براش کلاس بذارید: web-share-button

      یه ویجت HTML بیارید و این کد رو توش قرار بدید:


      document.querySelector('.web-share-button')?.addEventListener('click', () => {
      if (navigator.share) {
      navigator.share({ title: document.title, url: window.location.href });
      } else {
      alert('اشتراک‌گذاری پشتیبانی نمی‌شود.');
      }
      });

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

      پاسخ

          1. خیلی متشکرم که کمک کردید از سایت های دیگه که پرسیدم یا بلد نبودن یا نمیخواستن جواب بدن.مشخصه که تو کارتون خبره هستید
            فقط یه متن کوچیک اگر بخوام قبل از لینک سایت اضافه کنم چه تغییری باید بدم؟

          2. خواهش میکنم

            document.querySelector('.web-share-button')?.addEventListener('click', () => {
            if (navigator.share) {
            navigator.share({
            title: document.title,
            text: 'سایت شما', // متن دلخواه شما
            url: window.location.href
            });
            } else {
            alert('اشتراک‌گذاری پشتیبانی نمی‌شود.');
            }
            });

          3. و سوال دیگه اینکه الان اگر المنتور پرو رو از سایت شما خریداری کنم میتونم ارسال لینک اشتراک گذاری رو مطابق آموزش خودتون ، با دکمه شناور انجام بدم؟

دیدگاهتان را بنویسید

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

Chat Icon
دستیار هوشمند
0
    0
    سبد خرید شما
    سبد خرید شما خالی استبازگشت به فروشگاه
    ادامه خرید
    دوره آموزش طراحی سایت فروشگاهی مشابه دیجی کالا
    مشاهده ویدیوهای آموزشی
    راهنمای نصب المان‌های آماده المنتور

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

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

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

    1. استفاده از المنتور و افزونه‌های مربوطه الزامی است.
      نصب تنها در صورتی امکان‌پذیر است که شما از افزونه المنتور پرو یا سایر افزونه‌های موردنیاز المان‌ها که در توضیحات محصول ذکر شده‌اند، استفاده کرده باشید.

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

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

    4. نصب شامل تغییرات سفارشی نمی‌شود.
      این سرویس صرفاً برای نصب اولیه المان‌های آماده است و شامل تنظیمات سفارشی یا تغییرات در طراحی سایت نمی‌باشد.

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

    • صفحه اصلی
    • سفارش طراحی سایت
    • آموزش وردپرس
    • همکاری با میهن تم
    • درباره میهن تم
    • ارتباط با ما
    • پروفایل کاربری
    قالب های وردپرس
    • آیتم #1 در لیست
    • آیتم #2 در لیست
    • آیتم #3 در لیست
    • آیتم #1 در لیست
    • آیتم #2 در لیست
    • آیتم #3 در لیست
    • آیتم #1 در لیست
    • آیتم #2 در لیست
    • آیتم #3 در لیست