لایت باکس و پاپ آپ و روش ساختن آن به صورت حرفه ای

مدت زمان تخمینی مطالعه: 5 دقیقه

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

مفهوم جعبه نور در وب سایت

لایت باکس در برنامه نویسی تحت وب به مجموعه ای از کتابخانه های ( library ) جاوا اسکریپت گفته می شود که دربرگیرنده ی قطعاتی از برنامه است که از پیش نوشته شده و به طراح برنامه کمک می کند که گرافیک سایت را زیبا و رابط کاربری را کاربرپسندتر نماید . طراح وب با فراخوانی کتابخانه ها و نیز با بکارگیری کـــــدهای HTML & CSS پنجره های زیبایی می سازد که با بزرگنمایی محتوای زیرین خود ذهن کاربر را به خود معطوف کرده و کنجکاوی او را برای درک بهتر مطلب پاسخ می گوید. همچنین هنگامی که لایت باکس فعال می شود بخش های دیگر صفحه محو یا تیره می شوند .

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

کاربرد لایت باکس در طراحی سایت

کاربرد جعبه نور ، برجسته کردن محتوا در چشم بیننده و هدایت ذهن وی به مسیری است که طراح پیش بینی کرده است . بدین ترتیب بسته به نیاز طراح سایت و نوع پیامی که باید منتقل شود می تواند گونه های زیادی داشته باشد مانند :

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

نمونه هایی از lightbox

نمونه ای از کاربرد light box در سایت متسون با هدف هدایت کاربر به مقاله موردنظر را در زیر می بینید :

• کاربر پس از ورود به سایت ابتدا آیکون « پنل مدیریت اختصاصی » را می بیند :

• سپس با کلیک بر روی دکمه « بیشتر بخوانید » به پنجره زیر هدایت می شود :

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

انواع لایت باکس

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

• کلیک ماوس بر روی قسمتی از متن ، عکس یا دکمه و …
• باز شدن با زمان سنج ( مثلا پس از گذشت 5 ثانیه ماندن در سایت بازشود )
• باز شدن با اسکرول صفحه ( برحسب درصد یا پیکسل تنظیم می شود )

بسته شدن آن براحتی انجام می شود :

• با کلیک بر خارج از پنجره لایت باکس
• فشردن دکمه اسکیپ escape

لایت باکس چگونه ساخته می شود ؟

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

• نصب افزونه ( پلاگین )
• کدنویسی اختصاصی

افزونه های گوناگونی برای ساخت جعبه نور در وردپرس وجود دارد که با مراجعه به سایت سازمانی وردپرس به نشانی www.wordpress.org براحتی و به رایگان در دسترس هستند همچنین از فروشگاه های داخلی مانند ژاکت و راستچین نیز قابل خریداری می باشد . از بین آنها می توان به افزونه های زیر اشاره کرد :

• Lightbox Gallery
• Simple Lightbox
• Photonic Lightbox

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

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

فراموش نکنید برای استفاده از تخفیف 20% دوره های آموزشی متسون کافیه دیدگاه خودتون رو درباره مقالات و محصولات ارسال کنید تا کد تخفیف رو در ایمیلتون دریافت کنید 🙂