Lightbox - Webflow help
استخدم عنصر اللايت بوكس لعرض الصور أو الفيديوهات في نافذة كاملة الشاشة.
كيفية إنشاء لايت بوكس
اللايت بوكس هو صورة مصغرة قابلة للنقر مدمجة في كتلة رابط. عندما ينقر زوار الموقع داخل حدود الرابط على الموقع المباشر، يفتح اللايت بوكس لعرض الوسائط المتصلة به. يمكنك إضافة لايت بوكس من لوحة الإضافة > متقدم.
كيف تعمل الصورة المصغرة النائبة للايت بوكس
يحتوي اللايت بوكس على عنصر صورة يتصرف مثل أي عنصر صورة آخر. يمكنك تغيير حجمه، والنقر المزدوج لاستبدال الصورة المصغرة النائبة، وإضافة نص بديل. تعرف على المزيد حول عناصر الصور.
يمكنك استخدام نفس الصورة للصورة المصغرة للايت بوكس ونافذة اللايت بوكس الكبيرة. يقوم Webflow بإنشاء متغيرات متجاوبة تلقائيًا لجميع الصور المضمنة. تعرف على المزيد حول الصور المتجاوبة.
كيفية استبدال الصورة المصغرة للايت بوكس بمحتوى آخر
تستبدل عنصر الصورة النائبة وتسحب وتضع محتوى آخر (مثل عنوان، أو أي عناصر غير رابط أخرى) داخل رابط اللايت بوكس.
يمكنك أيضًا استخدام كتلة div وتطبيق صورة خلفية لإنشاء صور مصغرة متساوية الحجم.
كيفية تنسيق اللايت بوكس
يمكنك تنسيق كل من رابط صندوق العرض ومحتواه. على سبيل المثال، إذا قمت بتضمين عناصر نصية في رابط صندوق العرض الخاص بك، يمكنك تنسيق طباعة عنصر رابط صندوق العرض.
كيفية إضافة وسائط إلى صندوق العرض
لإضافة صورة وتعليق إلى نافذة المودال لصندوق العرض:
- حدد رابط صندوق العرض على اللوحة
- انتقل إلى لوحة إعدادات العنصر > إعدادات رابط صندوق العرض > الوسائط
- انقر على أيقونة “إضافة عنصر إلى القائمة”
- اختر "صورة" كـ نوع
- انقر على استبدال الصورة
- اختر صورة من لوحة الأصول
- أضف تعليقًا إذا لزم الأمر
يمكنك إضافة عدد من الصور إلى رابط صندوق العرض كما تريد. سيتم عرض هذه الصور كعرض شرائح داخل نافذة المودال لصندوق العرض.
لإضافة فيديو إلى نافذة اللايت بوكس:
- اختر رابط اللايت بوكس على اللوحة
- اذهب إلى لوحة إعدادات العنصر > إعدادات رابط اللايت بوكس > الوسائط
- انقر على أيقونة “إضافة عنصر إلى القائمة”
- اختر "فيديو" كـنوع
- أضف رابط الفيديو في حقل الرابط
- أضف عنوان إذا لزم الأمر
لايت بوكس للصور والفيديوهات - درس تصميم الويب
كيفية إنشاء لايت بوكس ديناميكي من وسائط حقل المجموعة
يمكنك إنشاء لايت بوكس ديناميكي عن طريق سحب صورة مصغرة و/أو وسائط اللايت بوكس من حقول وسائط المجموعة (مثل حقل الصورة، حقل الصور المتعددة، أو حقل الفيديو) في نظام إدارة المحتوى أو مجموعات التجارة الإلكترونية.
لربط حقل مجموعة ديناميكي بالصورة المصغرة للايت بوكس:
- أضف لايت بوكس إلى قائمة مجموعة متصلة ديناميكيًا أو صفحة مجموعة CMS
- اختر الصورة المصغرة النائبة
- اذهب إلى إعدادات العنصر > إعدادات الصورة
- انقر على أيقونة "النقطة الأرجوانية" في حقل الصورة
- اختر حقل صورة من المجموعة
ثم يمكنك ربط صندوق العرض بحقل المجموعة، بحيث تكون صور المجموعة الديناميكية متاحة في صندوق العرض. لربط حقل مجموعة ديناميكي بوسائط صندوق العرض:
- حدد رابط صندوق العرض
- انتقل إلى إعدادات العنصر > إعدادات رابط صندوق العرض
- انقر على أيقونة "النقطة الأرجوانية" في حقل الوسائط
- حدد حقل وسائط المجموعة
لربط صندوق العرض بحقل متعدد الصور:
- أضف قائمة المجموعة إلى صفحة المجموعة
- اربط قائمة المجموعة بحقل متعدد الصور بالنقر على قائمة المصدر واختيار حقل متعدد الصور
- أضف صندوق العرض إلى قائمة المجموعة
- حدد عنصر الصورة في صندوق العرض
- انتقل إلى إعدادات العنصر > إعدادات الصورة
- انقر على أيقونة "النقطة الأرجوانية" في حقل الصورة
- حدد حقل متعدد الصور
- حدد رابط صندوق العرض على اللوحة
- انتقل إلى إعدادات العنصر > إعدادات رابط صندوق العرض
- انقر على أيقونة "النقطة الأرجوانية" في حقل الوسائط
- حدد حقل متعدد الصور
يمكنك أيضًا ربط صندوق العرض بحقل متعدد الصور عندما يتم إضافة صندوق العرض إلى قوائم المجموعة أو صفحات المجموعة.
كيفية ربط صناديق العرض باستخدام مجموعات صناديق العرض
يمكنك ربط عدة صناديق عرض معًا لإنشاء معرض عرض شرائح. عندما ينقر زائر الموقع على صندوق عرض مرتبط، سيفتح صندوق العرض جميع الوسائط المرتبطة بالمجموعة المرتبطة.
كيفية إنشاء مجموعة صناديق عرض
- حدد أي عنصر في صندوق العرض
- انتقل إلى إعدادات العنصر > إعدادات صندوق العرض
- أدخل اسم مجموعة في حقل مطابقة أو إنشاء اسم مجموعة
صناديق العرض التي تستخدم نفس اسم المجموعة مرتبطة في مجموعة.
بالنسبة لصناديق العرض في قوائم المجموعة، فإن إنشاء وربط صندوق عرض واحد في عنصر مجموعة يربط تلقائيًا جميع صناديق العرض في قائمة المجموعة.
إنشاء مجموعات صناديق عرض متعددة على صفحة
إذا كان هناك عدة صناديق ضوئية في نفس الصفحة، يمكنك فصلها عن طريق تعيين اسم مجموعة مختلف لكل مجموعة صناديق ضوئية.