طراحی دکمه باز گشت به بالا به ۳ روش

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

دکمه بازگشت به بالا با آیکون ثابت

برای طراحی دکمه بازگشت به بالا وارد قالب هدر خود شوید و آن را ویرایش کنید. اگر می‌خواهید از این دکمه در یک صفحه خاص استفاده کنید کافی است همان صفحه را ویرایش کنید. در مرحله اول ما باید از ویجت Menu Anchor (لنگر فهرست المنتور) استفاده و آن را در هدر خود قرار دهید و یک دکمه یا آیکون را به آن متصل کنید.

طراحی دکمه بازگشت به بالا با المنتور

اول از همه لنگر فهرست را به محل مورد نظر (هدر سایت) اضافه و بعد از آن یک شناسه با اسم دلخواه برای این ویجت تنظیم کنید مثال —> (top) و در ادامه از بخش ریسپانسیو ویجت لنگر را برای تمام نمایشگرها مخفی کنید تا فضای اضافی اشغال نشود.

در مرحله بعد یک دکمه، آیکون، متن و یا به‌طورکلی هر ویجتی که بخش پیوند دارد را اضافه کنید.برای مثال ویجت آیکن را در محل مورد نظر قرار دهید و از بخش پیوند شناسه لنگر را با علامت (#) اضافه کنید مثال —> (#top).

دکمه بازگشت به بالا متحرک (Lottie)

برای طراحی دکمه متحرک مراحل قبل را طی کنید. ولی در قسمت دوم به جای اضافه کردن آیکن از ویجت Lottie المنتور پرو استفاده کنید.

بعد از اضافه کردن ویجت Lottie باید یک فایل JSON اضافه و معرفی کنید، همچنین می‌توان به‌جای آپلود فایل از لینک استفاده کنید. برای دانلود انیمیشن های متحرک می‌توانید از طریق این لینک وارد سایت lottiefiles شوید و طرح مورد نظر را دانلود کنید. همچنین می‌توانید این انیمیشن ها را طبق نیاز خود شخصی سازی کنید. در انتها انیمیشن مورد نظر را با فرمت JSON دانلود و یا از لینک آن استفاده کنید(در آموزش ویدیویی توضیح داده شده)

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

تنظیمات ویجت Lottie

گزینه های بخش دستگیره:

Viewport: به صورت خودکار و با مشاهده شدن صفحه توسط کاربر انیمیشن پخش می شود.

کلیک: اگر این گزینه را انتخاب کنید، زمانی انیمیشن به‌صورت متحرک اجرا می‌شود که کاربر بر روی تصویر کلیک کند.

هاور: در روش هاور انمیشن مانند روش قبلی ثابت خواهد بود و هنگام عبور و ایستادن موس بر روی تصویر، انیمیشن به صورت متحرک نمایش داده می‌شود.

اسکرول: هنگامی که کاربر صفحه را اسکرول کند انیمیشن اجرا خواهد شد.

هیچ: در این روش انیمیشن به تعداد مراحلی که شما تنظیم می‌کنید اجرا خواهد شد.

تنظیمات مشترک دستگیره ها:

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

حلقه: تکرار بی‌نهایت انیمیشن

بار: می‌توانید با این گزینه تعداد حلقه را مشخص کنید (اگر بدون داده باشد حلقه به صورت بی نهایت اجرا می‌شود)

سرعت پخش: به کمک این گزینه می‌توانید سرعت اجرای انیمیشن را تغییر دهید.

نقطه شروع و نقطه پایان: می‌توانید برای انیمیشن خود یک نقطه شروع و پایان تنظیم کنید.

معکوس: با فعال کردن این گزینه انیمیشن شما به صورت برعکس اجرا می‌شود.

بارگذاری تنبل: با فعال کردن بارگذاری تنبل انیمیشن در ابتدای ورود کاربر به سایت بارگذاری نمی‌شود. یعنی بعد از اینکه که محتوای اصلی سایت بارگذاری شد نوبت به تصاویر و این انیمیشن ها می رسد.

بیشتر بخوانید:
دوره رایگان طراح شو

ثابت کردن دکمه بازگشت به بالا در صفحه

ویجت مورد نظر را انتخاب و از تب پیشرفته و زیر منوی طرح بندی، جایگاه را بر روی ثابت تنظیم کنید و دو گزینه جدید را با توجه به نیازتان تغییر دهید.

جهت افقی: می‌توانید مشخص کنید که ویجت مورد نظر در سمت راست یا چپ صفحه قرار بگیرد.

جهت عمودی: همچنین می‌توانید به کمک این گزینه ویجت مورد نظر را در بالا یا پایین صفحه قرار دهید.

آفست: فاصله ویجت را از این بخش تغییر دهید.

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

دکمه انتقال به بخش های مختلف صفحه

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