ساخت لایت‌ باکس با المنتور [آموزش کامل فعال‌ سازی و تنظیمات]

وقتی کاربر روی یک تصویر، گالری یا محتوای بصری در سایت کلیک می کند، همیشه لازم نیست او را به یک صفحه جدید منتقل کنید. لایت باکس (Lightbox) این امکان را فراهم می کند که محتوا در یک پنجره شناور روی همان صفحه نمایش داده شود؛ در نتیجه کاربر بدون ترک صفحه می تواند تصویر را بزرگ ببیند، ویدیو را مشاهده کند یا بین تصاویر یک گالری جابه جا شود.

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

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

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

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

در یک لایت باکس معمولی ممکن است امکاناتی مانند موارد زیر در اختیار کاربر قرار بگیرد:

• نمایش تصویر در اندازه بزرگ تر
• بستن پنجره و بازگشت به صفحه
• جابه جایی بین تصاویر
• مشاهده گالری
• نمایش ویدیو
• استفاده از دکمه های قبلی و بعدی
• ایجاد پس زمینه نیمه شفاف برای تمرکز بیشتر روی محتوا

به همین دلیل، لایت باکس بیشتر از اینکه صرفاً یک افکت ظاهری باشد، یک روش برای بهبود نحوه ارائه محتوای بصری است. اگر هنوز با مفهوم قالب در وردپرس آشنایی کاملی ندارید، ابتدا می توانید مطلب قالب وردپرس چیست؟ را مطالعه کنید تا تفاوت میان قالب، افزونه و ابزارهای طراحی سایت را بهتر درک کنید.

چرا استفاده از لایت باکس در طراحی سایت اهمیت دارد؟

چرا استفاده از لایت باکس در طراحی سایت اهمیت دارد؟

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

مهم ترین مزایای لایت باکس

۱. مشاهده جزئیات بدون ترک صفحه

کاربر همان صفحه ای را که در آن قرار دارد حفظ می کند و محتوای موردنظر را در لایه ای روی آن می بیند.

۲. مناسب برای تصاویر آموزشی

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

۳. نمایش حرفه ای تر نمونه کارها

در سایت های طراحی، معماری، عکاسی، فروشگاهی و شرکتی، لایت باکس می تواند برای نمایش تصاویر پروژه ها یا محصولات کاربردی باشد.

۴. مناسب برای گالری ها

وقتی چند تصویر به یک موضوع مربوط هستند، نمایش آنها در قالب گالری باعث می شود کاربر بتواند تصاویر را پشت سر هم بررسی کند.

۵. کاهش رفت وآمد بین صفحات

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

پیش نیاز ساخت لایت باکس با المنتور

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

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

آموزش ساخت لایت باکس با المنتور

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

گام اول: ورود به ویرایشگر المنتور

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

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

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

در این مرحله بهتر است قبل از فعال سازی لایت باکس، مشخص کنید کاربر قرار است روی چه محتوایی کلیک کند؛ برای مثال:

• یک تصویر محصول
• تصویر یک پروژه
• اسکرین شات آموزشی
• تصویر قبل و بعد
• گالری تصاویر
• تصویر بنر یا معرفی
• ویدیو

این تصمیم روی نوع تنظیماتی که در مراحل بعد انجام می دهید تأثیر دارد.

گام دوم: افزودن ویجت تصویر یا گالری

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

گام سوم: انتخاب تصویر و تنظیم پیوند

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

یکی از قسمت های مهم در این مرحله، تنظیم گزینه پیوند است.

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

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

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

انتخاب تصویر → تنظیم پیوند → انتخاب فایل رسانه → فعال سازی لایت باکس

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

گام چهارم: فعال کردن لایت باکس

پس از تنظیم پیوند تصویر، گزینه مربوط به لایت باکس را بررسی کنید.

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

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

در این مرحله حتماً نتیجه را در حالت پیش نمایش بررسی کنید.

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

گام پنجم: تنظیم ظاهر لایت باکس

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

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

رنگ پس زمینه

پس زمینه لایت باکس معمولاً نقش مهمی در تمرکز کاربر روی محتوای اصلی دارد.

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

انیمیشن ورود

در برخی تنظیمات می توانید افکت ورود محتوا را کنترل کنید.

افکت هایی مانند محو شدن یا بزرگ نمایی می توانند ظاهر رابط کاربری را جذاب تر کنند؛ اما بهتر است افکت ها با سرعت و شدت منطقی استفاده شوند.

افکت باید به تجربه کاربر کمک کند، نه اینکه خودش تبدیل به بخش اصلی تجربه شود.

دکمه های قبلی و بعدی

اگر چند تصویر در یک مجموعه قرار دارند، وجود دکمه های قبلی و بعدی می تواند جابه جایی بین آنها را آسان تر کند.

این ویژگی برای مواردی مانند:

• گالری پروژه ها
• تصاویر محصولات
• نمونه کارهای طراحی
• تصاویر مراحل آموزش
• مجموعه تصاویر یک رویداد

کاربرد بیشتری دارد.

اندازه نمایش محتوا

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

تصویر نباید آن قدر کوچک باشد که کاربر همچنان برای دیدن جزئیات مشکل داشته باشد و نباید به شکلی نمایش داده شود که بخش های مهم صفحه از محدوده نمایش خارج شوند.

ساخت لایت باکس برای گالری تصاویر

لایت باکس زمانی جذاب تر می شود که چند تصویر مرتبط در اختیار کاربر قرار داشته باشد.

برای مثال، تصور کنید یک صفحه معرفی پروژه دارید که شامل ۸ تصویر است. اگر هر تصویر به تنهایی باز شود، کاربر مجبور است هر بار یک تصویر را ببندد و تصویر بعدی را انتخاب کند.

اما در یک گالری مناسب، کاربر می تواند تصویر را باز کرده و سپس با دکمه های قبلی و بعدی بین تصاویر حرکت کند.

چه زمانی گالری لایت باکس انتخاب مناسبی است؟

اگر تصاویر یک رابطه موضوعی مشخص دارند، گالری انتخاب منطقی تری است.

مثلاً:

پروژه معماری

• نمای بیرونی
• نمای داخلی
• جزئیات اجرا
• نمای شب
• جزئیات متریال

یا در یک فروشگاه:

تصاویر محصول

• نمای اصلی
• نمای جانبی
• نمای پشت
• جزئیات محصول
• تصویر محصول در محیط واقعی

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

لایت باکس برای ویدیو چه تفاوتی دارد؟

لایت باکس فقط به تصویر محدود نیست. در طراحی بعضی صفحات می توان از آن برای نمایش ویدیو نیز استفاده کرد.

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

در چنین شرایطی، باید چند نکته را بررسی کنید:

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

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

تفاوت لایت باکس با باز کردن تصویر در صفحه جدید

این دو روش از نظر تجربه کاربری یکسان نیستند.

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

لایت باکس و تجربه کاربری در موبایل

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

به این موارد دقت کنید:

۱. دکمه بستن باید قابل مشاهده باشد.

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

۲. تصویر باید با اندازه صفحه سازگار باشد.

تصویر نباید از عرض صفحه بیرون بزند.

۳. کنترل های گالری باید قابل لمس باشند.

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

۴. نسبت تصویر را بررسی کنید.

تصاویر عمودی، افقی و مربعی ممکن است رفتار متفاوتی در فضای محدود موبایل داشته باشند.

۵. سرعت را فراموش نکنید.

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

برای مطالعه بیشتر درباره ارتباط قالب فروشگاهی با عملکرد سایت، مقاله سرعت و سئو قالب ووکامرس می تواند اطلاعات تکمیلی در اختیار شما قرار دهد.

جمع بندی

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

سوالات متداول درباره ساخت لایت باکس با المنتور

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

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

آیا برای ساخت لایت باکس با المنتور به کدنویسی نیاز داریم؟

برای استفاده از قابلیت های استاندارد لایت باکس، معمولاً نیازی به کدنویسی نیست و می توان از تنظیمات موجود در المنتور استفاده کرد. نوع و میزان تنظیمات قابل دسترس به ابزار و نسخه مورد استفاده بستگی دارد.

چرا باید گزینه فایل رسانه را برای تصویر انتخاب کنیم؟

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

آیا می توان برای چند تصویر یک لایت باکس ایجاد کرد؟

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

آیا لایت باکس روی موبایل هم کار می کند؟

نمایش لایت باکس به نحوه پیاده سازی و تنظیمات صفحه بستگی دارد، اما هنگام استفاده باید حتماً نمایش آن روی موبایل نیز آزمایش شود. اندازه تصویر، دکمه بستن و کنترل های گالری باید در صفحه های کوچک قابل استفاده باشند.

آیا لایت باکس باعث افزایش سرعت سایت می شود؟

خود قابلیت لایت باکس را نباید راهکاری برای افزایش سرعت در نظر گرفت. حجم و نحوه بارگذاری تصاویر اهمیت زیادی دارد و استفاده از فایل های بسیار سنگین می تواند عملکرد صفحه را تحت تأثیر قرار دهد.

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

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

آیا لایت باکس برای تصاویر محصولات فروشگاه مناسب است؟

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