ساخت لایت باکس در المنتور با دو روش اصلی انجام می شود. روش اول استفاده از تنظیمات داخلی ویجت تصویر برای نمایش گالری است و روش دوم بهره گیری از پاپ آپ ساز برای طراحی یک لایت باکس کاملا سفارشی و حرفه ای می باشد.
لایت باکس یکی از کاربردی ترین عناصر بصری در طراحی وب سایت است که به کاربران اجازه می دهد تصاویر یا محتوای چند رسانه ای را در یک لایه شناور روی صفحه فعلی مشاهده کنند. این ویژگی باعث می شود کاربر از صفحه اصلی خارج نشود و تجربه کاربری روان تری را تجربه کند. در این مقاله از مجله المنتور ایران به بررسی دقیق و گام به گام نحوه پیاده سازی این قابلیت می پردازیم و تمام زوایای پنهان و آشکار آن را برای شما باز می کنیم. ما در این راهنما نه تنها به آموزش پایه می پردازیم بلکه تکنیک های پیشرفته و نکات بهینه سازی را نیز بررسی خواهیم کرد تا بتوانید یک وب سایت بی نقص و حرفه ای طراحی کنید.
مفهوم لایت باکس و اهمیت آن در تجربه کاربری
پیش از آنکه به سراغ آموزش عملی برویم باید بدانیم چرا اصلا به لایت باکس نیاز داریم و این ویژگی چه تاثیری بر روانشناسی کاربر دارد. وقتی کاربری روی یک تصویر در گالری محصولات یا نمونه کارهای شما کلیک می کند دو حالت پیش می آید. یا به صفحه جدیدی هدایت می شود که ممکن است باعث اتلاف وقت و افزایش نرخ پرش شود یا در همان صفحه یک پنجره شناور باز می شود و تصویر با کیفیت اصلی نمایش داده می شود. حالت دوم همان لایت باکس است.
استفاده از لایت باکس تمرکز کاربر را روی محتوای مورد نظر حفظ می کند. همچنین از بارگذاری مجدد صفحه جلوگیری کرده و سرعت درک مطلب را افزایش می دهد. برای پیاده سازی اصولی این ویژگی درک عمیق از ابزارها ضروری است و اینجاست که تسلط بر ساخت لایت باکس در المنتور اهمیت پیدا می کند. طراحان وب با استفاده از این تکنیک می توانند مسیر کاربر را کوتاه تر کرده و او را سریع تر به هدف نهایی برسانند. این موضوع در سایت های فروشگاهی که نیاز به زوم کردن روی جزئیات محصول دارند بسیار حیاتی است و مستقیما بر نرخ تبدیل تاثیر می گذارد.
روش اول: فعال سازی لایت باکس پیش فرض با ویجت تصویر
ساده ترین و سریع ترین راه برای ایجاد لایت باکس استفاده از قابلیت داخلی ویجت تصویر است. این روش نیازی به افزونه اضافی ندارد و در همان نسخه پایه نیز در دسترس است. مراحل انجام کار به شرح زیر است.
وارد محیط ویرایشگر صفحه شوید و ویجت تصویر را به ناحیه مورد نظر بکشید. تصویر دلخواه خود را از کتابخانه رسانه انتخاب کنید. در پنل تنظیمات سمت راست به تب محتوا بروید. در بخش پیوند گزینه لینک به را روی فایل رسانه قرار دهید. پس از انتخاب فایل رسانه یک گزینه جدید به نام لایت باکس ظاهر می شود که آن را روی حالت روشن قرار می دهید. در همین بخش می توانید تنظیمات پیشرفته تری مانند فعال کردن کنترل های ناوبری عنوان تصویر و توضیحات را نیز پیکربندی کنید.
شما می توانید تعیین کنید که آیا کاربر بتواند با استفاده از فلش های کیبورد یا دکمه های روی صفحه بین تصاویر جابجا شود یا خیر. همچنین امکان اضافه کردن عنوان و کپشن برای هر تصویر وجود دارد که به سئو تصاویر و درک بهتر کاربر کمک می کند. این روش برای گالری های ساده و نمایش سریع تصاویر عالی است اما اگر به دنبال شخصی سازی کامل رنگ ها انیمیشن ها و محتوای داخلی لایت باکس هستید باید به سراغ روش های بعدی بروید.
روش دوم: ساخت لایت باکس سفارشی با پاپ آپ ساز
اگر می خواهید یک لایت باکس کاملا اختصاصی طراحی کنید که در آن علاوه بر تصویر فرم تماس ویدیو یا دکمه های خرید قرار داشته باشد باید از پاپ آپ ساز استفاده کنید. این قابلیت یکی از قدرتمندترین ابزارهای المنتور پرو است. بسیاری از طراحان وب برای دسترسی به این امکانات بی نظیر اقدام به خرید المنتور پرو می کنند. بررسی قیمت المنتور پرو در مارکت های معتبر نشان می دهد که سرمایه گذاری روی این نسخه ارزش افزوده بالایی برای پروژه های تجاری و حرفه ای ایجاد می کند. تیم المنتور ایران نیز همواره راهنمای های کاملی برای تهیه لایسنس اورجینال و استفاده بهینه از این نسخه ارائه می دهد.
مراحل ساخت لایت باکس با پاپ آپ ساز به این صورت است که از منوی پیشخوان وردپرس به بخش قالب ها و سپس پاپ آپ ها می روید. یک پاپ آپ جدید ایجاد کنید و نام آن را مثلا لایت باکس سفارشی بگذارید. طراحی داخلی پاپ آپ را انجام دهید. می توانید هر ویجتی مانند تصویر متن دکمه و فرم را در آن قرار دهید. در تنظیمات پاپ آپ بخش شرایط نمایش را روی دستی قرار دهید تا در هر صفحه ای به صورت خودکار نمایش داده نشود.
به بخش تنظیمات پیشرفته پاپ آپ بروید و در قسمت کلاس بدنه یک کلاس اختصاصی مانند my-custom-lightbox اضافه کنید. حالا به صفحه اصلی برگردید و ویجت دکمه یا تصویری که می خواهید نقش ماشه را بازی کند انتخاب کنید. در تب پیشرفته ویجت به بخش سی اس اس سفارشی بروید و کلاس مورد نظر را فراخوانی کنید تا با کلیک روی این دکمه پاپ آپ به عنوان لایت باکس باز شود. شما می توانید انیمیشن ورود و خروج پاپ آپ را نیز به دلخواه تنظیم کنید تا تجربه کاربری بی نظیری خلق شود.
روش سوم: ویجت گالری و راهکارهای نسخه رایگان
علاوه بر ویجت تصویر ساده ویجت گالری نیز در المنتور وجود دارد که قابلیت لایت باکس را به صورت پیش فرض برای مجموعه ای از تصاویر ارائه می دهد. این ویجت برای نمایش نمونه کارها و آلبوم عکس بسیار مناسب است و چیدمان های متنوعی مانند گرید ماسونری را پشتیبانی می کند.
اما اگر از دانلود رایگان المنتور استفاده می کنید و به پاپ آپ ساز دسترسی ندارید نگران نباشید. راهکارهای متعددی برای کاربران المنتور رایگان وجود دارد. شما می توانید از افزونه های جانبی معتبر استفاده کنید. این افزونه ها ویجت های گالری و لایت باکس پیشرفته ای را در اختیار شما قرار می دهند که با نسخه پایه سازگار هستند. همچنین افزونه های مستقلی وجود دارند که صرفا برای ایجاد لایت باکس روی تصاویر و گالری ها طراحی شده اند و بار سنگینی روی دوش سرور نمی گذارند. انتخاب یک افزونه سبک و به روز تاثیر مستقیمی بر سرعت سایت شما خواهد داشت و از کند شدن داشبورد وردپرس جلوگیری می کند.
تکنیک های پیشرفته و شخصی سازی با کد
برای رسیدن به سطح المنتور حرفه ای در پیاده سازی لایت باکس گاهی اوقات نیاز است که از کدهای سی اس اس سفارشی استفاده کنید. به عنوان مثال اگر می خواهید رنگ پس زمینه لایت باکس پیش فرض را تغییر دهید یا فاصله تصاویر در گالری را تنظیم کنید باید از بخش تنظیمات سایت یا سی اس اس سفارشی ویجت استفاده کنید. همچنین می توانید انیمیشن های باز و بسته شدن لایت باکس را در بخش تنظیمات پاپ آپ ساز به صورت کامل کنترل کنید. انتخاب انیمیشن مناسب مانند محو شدن تدریجی یا بزرگنمایی نرم می تواند تجربه کاربری را به شدت ارتقا دهد.
علاوه بر این شما می توانید با استفاده از هوک های جاوا اسکریپت المنتور رویدادهای خاصی را تعریف کنید. برای مثال پس از بسته شدن لایت باکس یک فرم ثبت نام دیگر باز شود یا یک صدای خاص پخش گردد. این تکنیک ها برای پروژه های خاص و خلاقانه بسیار کاربرد دارند و نشان می دهند که محدودیت های ظاهری ابزارها با دانش فنی قابل رفع هستند.
بهینه سازی عملکرد و تاثیر بر سئو
یک طراح وب حرفه ای تنها به ساختن لایت باکس اکتفا نمی کند بلکه به عملکرد و بهینه سازی آن نیز توجه ویژه ای دارد. تصاویر حجیم باعث کند شدن بارگذاری لایت باکس و نارضایتی کاربر می شوند. قبل از آپلود تصاویر در کتابخانه رسانه حتما آن ها را فشرده کنید و از فرمت های مدرن مانند وب پی استفاده کنید. قابلیت بارگذاری تنبل را فعال کنید تا تنها تصاویری که در دید کاربر هستند بارگذاری شوند. این کار تاثیر مستقیمی بر شاخص های هسته ای وب و سئو سایت شما دارد. موتورهای جستجو به سایت هایی که تجربه کاربری روان و سرعت بالایی دارند رتبه بهتری می دهند.
همچنین توجه به واکنش گرایی لایت باکس در دستگاه های موبایل بسیار مهم است. دکمه های بستن و ناوبری باید در صفحات کوچک به راحتی با انگشت قابل لمس باشند و فضای کافی داشته باشند. تست کردن لایت باکس در سایزهای مختلف صفحه نمایش یک الزام اساسی است.
کاربردهای عملی لایت باکس در صنایع مختلف
لایت باکس کاربردهای متنوعی دارد و محدود به نمایش تصاویر نیست. در سایت های فروشگاهی برای زوم کردن روی جزئیات محصولات و مشاهده زوایای مختلف کالا استفاده می شود. در سایت های معماری و هنری برای نمایش گالری تصاویر با کیفیت بالا و حفظ تمرکز کاربر بر روی اثر هنری کاربرد دارد. در سایت های آموزشی برای پخش ویدیو بدون خروج از صفحه مقاله مورد استفاده قرار می گیرد و باعث افزایش زمان ماندگاری کاربر در صفحه می شود. در سایت های شرکتی برای نمایش نمونه کارها و پروژه های انجام شده بسیار موثر است. شناخت این کاربردها به شما کمک می کند تا استراتژی محتوایی و بصری بهتری برای پروژه های خود تدوین کنید و از تمام پتانسیل این ابزار بهره ببرید.
مقایسه روش های ایجاد لایت باکس
برای اینکه دید بهتری نسبت به انتخاب روش مناسب داشته باشید جدول زیر ویژگی های هر کدام را مقایسه می کند.
| ویژگی | لایت باکس پیش فرض تصویر | پاپ آپ ساز اختصاصی | افزونه های جانبی |
| نیاز به نسخه پرو | خیر | بله | بستگی به افزونه دارد |
| امکان شخصی سازی کامل | محدود به تنظیمات تصویر | کاملا نامحدود | متوسط |
| سرعت بارگذاری | بسیار بالا | نیاز به بهینه سازی دارد | متوسط |
| مناسب برای | گالری تصاویر ساده | فرم ها ویدیو محتوای ترکیبی | کاربران مبتدی و متوسط |
سوالات متداول
تفاوت لایت باکس و پاپ آپ چیست؟
لایت باکس معمولا برای نمایش تصاویر و ویدیو در یک لایه شناور با پس زمینه تیره استفاده می شود و تمرکز آن بر روی محتوای بصری است. در حالی که پاپ آپ مفهوم گسترده تری دارد و می تواند شامل فرم متن و دکمه های مختلف برای اهداف بازاریابی و اطلاع رسانی باشد.
آیا با نسخه رایگان می توان لایت باکس ساخت؟
بله ویجت تصویر در نسخه رایگان نیز دارای قابلیت لایت باکس پیش فرض است. همچنین با نصب افزونه های جانبی می توانید لایت باکس های پیچیده تری ایجاد کنید و نیازی به پرداخت هزینه اضافی نیست.
چگونه لایت باکس را برای گالری تصاویر فعال کنیم؟
کافی است ویجت گالری یا تصویر را انتخاب کنید لینک را روی فایل رسانه تنظیم کرده و تیک گزینه لایت باکس را فعال نمایید. سپس می توانید تنظیمات ناوبری و عنوان را نیز پیکربندی کنید.
چرا لایت باکس من در موبایل درست نمایش داده نمی شود؟
این مشکل معمولا به دلیل تنظیمات نادرست در بخش واکنش گرایی پاپ آپ ساز یا تداخل کدهای سی اس اس قالب با لایت باکس رخ می دهد. باید استایل های مزاحم را بررسی و رفع کنید و دکمه ها را برای صفحات کوچک بهینه سازی نمایید.
چگونه رنگ پس زمینه لایت باکس پیش فرض را تغییر دهیم؟
برای این کار باید از بخش تنظیمات سایت یا سی اس اس سفارشی ویجت استفاده کنید و کدهای مربوط به تغییر رنگ اورلی و پس زمینه لایت باکس را وارد نمایید تا ظاهر آن با تم سایت شما هماهنگ شود.
آیا لایت باکس روی سئو سایت تاثیر منفی می گذارد؟
خیر اگر تصاویر بهینه شده باشند و از بارگذاری تنبل استفاده کنید لایت باکس نه تنها تاثیر منفی ندارد بلکه با افزایش زمان ماندگاری کاربر در صفحه و کاهش نرخ پرش به بهبود سئو سایت شما کمک می کند.
نتیجه گیری
ساخت لایت باکس در المنتور یکی از مهارت های ضروری برای هر طراح وب است که تاثیر مستقیمی بر زیبایی بصری و تعامل کاربران دارد. همانطور که بررسی کردیم شما می توانید بسته به نیاز خود و بودجه پروژه از روش پیش فرض تصاویر استفاده کنید یا با تهیه نسخه پرو به سراغ پاپ آپ ساز بروید و لایت باکس های کاملا اختصاصی و خلاقانه طراحی کنید. فراموش نکنید که بهینه سازی تصاویر و تست واکنش گرایی در تمامی دستگاه ها کلید موفقیت شما در ارائه یک تجربه کاربری بی نقص است. مجموعه المنتور ایران همواره در کنار شماست تا با ارائه آموزش های به روز و منابع معتبر مسیر حرفه ای شدن شما را هموارتر سازد.