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

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

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

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

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

🌟 نحوه ساخت دکمه شناور تماس با المنتور و بدون افزونه

برای شروع این آموزش جذاب، باید مراحل زیر رو قدم به قدم دنبال کنی:

قدم اول: برو به بخش پوسته‌ ساز المنتور (Theme Builder)

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

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

ترفند جذاب در المنتور: تغییر لوگوی سایت هنگام اسکرول صفحه

مطالعه

ترجمه متن پیام های خطا در فرم المنتور: حرفه‌ ای ها اینطور فرم‌ ها را فارسی می‌ کنند

مطالعه

ساخت گالری تصویر خفن در المنتور

مطالعه

قدم دوم: فوتر سایتت رو پیدا کن (یا یکی بساز)

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

قدم سوم: ویجت HTML رو به فوتر اضافه کن

حالا که وارد محیط ویرایش فوتر شدی، از بین ویجت‌های سمت راست، ویجت “HTML” رو پیدا کن و با درگ کردن، بندازش توی بخش مورد نظرت از فوتر. مهم نیست دقیقا کجای فوتر باشه، چون ما با CSS موقعیتش رو ثابت می‌کنیم.

قدم چهارم: کدهای HTML رو وارد کن

رسیدیم به قسمت جذاب کدها! این کدهایی که برات گذاشتم رو عیناً کپی کن و توی باکس مربوط به کد HTML در ویجت HTML که اضافه کردی، قرار بده:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

قدم پنجم: کدهای CSS سفارشی رو اضافه کن

حالا نوبت به استایل دادن به این دکمه و پنل تماس رسیده. توی همون ویجت HTML، به تب پیشرفته برو و در قسمت “CSS سفارشی”، کدهای CSS زیر رو عیناً کپی و اونجا قرار بده:

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

قدم ششم: انتشار برگه و لذت بردن! 🎉

بعد از اینکه کدها رو وارد کردی، حتماً فوتر رو ذخیره و منتشر کن. حالا برو به سایتت و ببین چه دکمه شناور خوشگلی پایین صفحه ظاهر شده! با کلیک روی اون، یه پنل جذاب با لینک‌های ارتباطی باز میشه. 😎

نکات مهم برای سفارشی‌سازی: ✏️

• تغییر متن پیش‌فرض: توی کد HTML، دنبال این قسمت بگرد:

🔒

محتوای VIP+

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

عضو ویژه شوید 🙂

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

متن داخل این تگ رو می‌تونی به هر چیزی که دوست داری تغییر بدی.

تغییر لینک‌های شبکه‌های اجتماعی: توی کد HTML، لینک‌های شبکه‌های اجتماعی به این شکل هستن:

🔒

محتوای VIP+

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

عضو ویژه شوید 🙂

 ██████╗  █████╗ ██╗   ██╗  █████╗      ██╗    ██╗██████╗ 
 ██╔══██╗██╔══██╗╚██╗ ██╔╝ ██╔══██╗     ██║    ██║██╔══██╗
 ██████╔╝███████║ ╚████╔╝  ███████║     ██║ █╗ ██║██████╔╝
 ██╔══██╗██╔══██║  ╚██╔╝   ██╔══██║     ██║███╗██║██╔══╝  
 ██║  ██║██║  ██║   ██║    ██║  ██║     ╚███╔███╔╝██║     
 ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝    ╚═╝  ╚═╝      ╚══╝╚══╝ ╚═╝     

به جای # توی قسمت href، لینک واقعی صفحه اینستاگرام، تلگرام، یوتیوب یا ایمیلت رو قرار بده.

تغییر متن لینک‌ها: متن جلوی آیکون‌های شبکه‌های اجتماعی هم توی همون تگ <a> و داخل تگ div با کلاس my-contact-text قرار داره. می‌تونی اون‌ها رو هم ویرایش کنی.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

تغییر تصویر پروفایل: اگه میخوای عکس پروفایل خودت یا لوگوی سایتت رو نشون بدی، لینک موجود در قسمت src تگ <img> رو با لینک تصویر خودت جایگزین کن:

• تغییر عنوان و وضعیت: عنوان “تماس با ما” و وضعیت “آنلاین | آماده پاسخگویی” هم توی کد HTML و داخل تگ‌هایی با کلاس‌های my-contact-profile-title و my-contact-profile-subtitle قرار دارن. می‌تونی اون‌ها رو هم تغییر بدی.
• تغییر رنگ‌ها: اگه میخوای رنگ‌های دکمه یا پنل رو تغییر بدی، باید کد CSS رو ویرایش کنی. مثلا برای تغییر رنگ پس‌زمینه دکمه، دنبال کد background: linear-gradient(135deg, #6E44FF, #FF44E3); بگرد و رنگ‌های مورد نظرت رو جایگزین کن. همینطور برای بقیه قسمت‌ها هم می‌تونی با پیدا کردن کلاس‌های مربوطه توی CSS، استایل‌ها رو تغییر بدی.
• موقعیت دکمه: توی CSS، کلاس‌های .my-contact-button.my-contact-right-side و .my-contact-button.my-contact-left-side موقعیت دکمه رو مشخص می‌کنن. در حال حاضر دکمه از سمت چپ 25 پیکسل فاصله داره. اگه میخوای از سمت راست باشه، می‌تونی کلاس my-contact-left-side رو از تگ <button> در HTML حذف کنی و کلاس my-contact-right-side رو بهش اضافه کنی.

جمع بندی نهایی ✨

بهت تبریک میگم! 🎉 الان دیگه یه دکمه شناور تماس با ما شیک و بدون نیاز به افزونه توی سایت المنتوریت داری. این دکمه نه تنها ظاهر خوبی داره، بلکه به خاطر استفاده از متن “تماس با ما” توی عنوان پنل و لینک‌های ارتباطی، به سئو سایتت هم کمک می‌کنه. امیدوارم از این آموزش لذت برده باشی و بتونی یه دکمه تماس جذاب برای سایتت بسازی. اگه سوالی داشتی، حتماً بپرس! 😉