فهرست مطالب
در این بخش از دوره آموزش طراحی فروشگاه اینترنتی با المنتور، قصد داریم نحوه ساخت دکمه کپی لینک محصول و اضافه کردن قابلیت اشتراکگذاری در شبکههای اجتماعی را به شما آموزش دهیم. این قابلیت دقیقاً مشابه چیزی است که در فروشگاههای بزرگی مانند دیجیکالا مشاهده میکنید و باعث میشود کاربران بتوانند تنها با یک کلیک، لینک صفحه محصول را در کلیپبورد خود ذخیره کرده و به راحتی آن را در پیامرسانها یا شبکههای اجتماعی به اشتراک بگذارند.
در این آموزش، با استفاده از المنتور (Elementor) و پاپآپ آفکانواس (Off-Canvas Popup)، یک بخش اشتراکگذاری حرفهای طراحی میکنیم که شامل دکمههای اشتراکگذاری در واتساپ، تلگرام، اینستاگرام و دکمه کپی لینک خواهد بود.
کاربرد ساخت دکمه کپی لینک و اشتراک گذاری محصول
ساخت دکمه کپی لینک و اشتراکگذاری محصول با المنتور نقش بسیار مهمی در افزایش تجربه کاربری (UX) و تعامل کاربران دارد. با استفاده از این دکمه، کاربر میتواند بدون نیاز به انتخاب دستی لینک صفحه محصول، آدرس را بهطور مستقیم در کلیپبورد خود ذخیره کند و در پیامرسانها یا شبکههای اجتماعی به اشتراک بگذارد.
این قابلیت باعث میشود:
- کاربران راحتتر لینک محصولات را با دوستان یا همکاران خود به اشتراک بگذارند.
- فرآیند انتشار و تبلیغ محصولات در شبکههای اجتماعی سریعتر و کارآمدتر شود.
- تجربه خرید در سایت حرفهایتر و مدرنتر به نظر برسد، مشابه فروشگاههای بزرگ مانند دیجیکالا.
- تعامل کاربران با سایت افزایش پیدا کند و احتمال بازگشت آنها به صفحات محصول بالاتر رود.
به عبارت دیگر، دکمه کپی لینک و اشتراکگذاری یک ابزار ساده اما قدرتمند برای افزایش بازدید، اشتراکگذاری و در نهایت فروش محصول است و جزو قابلیتهای ضروری هر فروشگاه اینترنتی حرفهای محسوب میشود.
آموزش گام به گام ساخت دکمه کپی لینک با المنتور
در این قسمت از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور ، یاد میگیریم چگونه یک دکمه کپی لینک محصول حرفهای با المنتور بسازیم که مشابه سایتهای بزرگی مثل دیجیکالا عمل کند. این دکمه به کاربران امکان میدهد لینک صفحه محصول را بهطور مستقیم کپی کنند و در پیامرسانها یا شبکههای اجتماعی به اشتراک بگذارند.
گام ۱: آمادهسازی پاپآپ اشتراکگذاری
- وارد ویرایشگر المنتور شوید و قالب پاپآپ آفکانواس خود را باز کنید.
- بخشی که آیکنهای شبکههای اجتماعی قرار دارند را بررسی کنید.
- یک ردیف جدید برای دکمه کپی لینک ایجاد کنید تا دکمه به صورت مستقل و قابل مشاهده باشد.
گام ۲: اضافه کردن دکمه در المنتور
- از ویجت Button المنتور استفاده کنید و آن را در ردیف ایجاد شده قرار دهید.
- متن دکمه را روی «کپی کردن لینک» یا «Copy Link» تنظیم کنید.
- یک آیکن مناسب اضافه کنید، مثل آیکن لینک یا کپی، تا کاربرد دکمه برای کاربر مشخص باشد.
- در بخش Advanced → CSS Classes یک کلاس اختصاصی مثل
copy-link-btnتعریف کنید تا بتوانیم آن را در اسکریپت جاوااسکریپت شناسایی کنیم.
گام ۳: اتصال دکمه به قابلیت کپی لینک
- عملکرد دکمه به گونهای است که:
- آدرس صفحه محصول را شناسایی میکند.
- آن را در کلیپبورد ذخیره میکند.
- متن دکمه به «کپی شد» تغییر میکند و پس از چند ثانیه دوباره به حالت اولیه برمیگردد.
- برای اجرای این عملکرد، کد جاوااسکریپت کوچک در سایت قرار میگیرد. این کار را میتوان از طریق کدهای سفارشی افزونه المنتور پرو یا افزونه Code Snippets انجام داد.
گام ۴: بهینهسازی تجربه کاربری (UX)
- پس از کلیک موفق، میتوانید پیام تأیید مثل «کپی شد» نمایش دهید یا رنگ دکمه را تغییر دهید.
- استفاده از انیمیشن کوتاه هنگام تغییر متن، تجربه کاربری را جذابتر میکند.
- مطمئن شوید دکمه در موقعیت مناسب پاپآپ قرار دارد تا به راحتی دیده شود.
گام ۵: تست عملکرد بعد از ساخت دکمه کپی لینک
- دکمه را در مرورگر دسکتاپ تست کنید و لینک را Paste کنید تا از صحت آن مطمئن شوید.
- عملکرد را در مرورگر موبایل نیز بررسی کنید تا کلیپبورد موبایل پشتیبانی شود.
- اگر دکمه کار نکرد، بررسی کنید کلاس CSS درست وارد شده باشد و جاوااسکریپت در صفحه فعال باشد.
نتیجهگیری
در این جلسه از دوره آموزش طراحی صفحه محصول با المنتور، یاد گرفتیم چگونه یک دکمه کپی لینک محصول بسازیم و آن را به بخش اشتراکگذاری در پاپآپ آف کنواس متصل کنیم. این دکمه به کاربران امکان میدهد لینک صفحه محصول را تنها با یک کلیک در کلیپبورد خود ذخیره کرده و در شبکههای اجتماعی یا پیامرسانها به اشتراک بگذارند.
استفاده از این قابلیت باعث میشود:
- تجربه کاربری (UX) صفحه محصول بهبود یابد.
- کاربران راحتتر و سریعتر محصولات را به اشتراک بگذارند.
- تعامل و بازدید صفحات محصول افزایش پیدا کند.
- سایت شما حرفهای و مشابه فروشگاههای مطرح مانند دیجیکالا به نظر برسد.
با پیادهسازی این دکمه، علاوه بر افزایش رضایت کاربران، میتوانید اشتراکگذاری محصولات و در نتیجه فروش را افزایش دهید. در جلسات بعدی، میتوانیم قابلیتهای دیگری مثل پیشنهادات خرید، دکمههای علاقهمندی و گالری محصول را به صفحه محصول اضافه کنیم تا نرخ تبدیل و تعامل کاربران بیشتر شود.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
