كيفية إضافة Lightbox في WordPress مع Elementor

من خلال دمج ميزة Lightbox في موقع الويب الخاص بك WordPress ، يمكنك تحويل الطريقة التي يتعامل بها الزوار مع المحتوى المرئي الخاص بك. هذا الحل الأنيق مثالي لعرض الصور عالية الجودة ، وإنشاء معارض آسر ، وتقديم معلومات مفصلة للمنتج ، دون تعطيل تجربة المستخدم. في الواقع ، يمكن أن يرفع تجربة المستخدم إلى آفاق جديدة.

سواء كنت مصورًا يتطلع إلى عرض محفظتك أو مالك موقع التجارة الإلكترونية الذي يرغب في عرض تفاصيل المنتج ، فقد تكون ميزة Lightbox خيارًا رائعًا. إذا تم تصميم موقعك باستخدام Elementor ، فإن إضافة Lightboxs هو مجرد خطوة على بعد.

في هذه المقالة ، سنقدم دليلًا شاملاً خطوة بخطوة حول كيفية إضافة Lightbox في WordPress مع Elementor. تأكد من القراءة حتى النهاية لتحقيق أقصى استفادة من هذه الأداة القوية!

ما هو مربع Light في WordPress؟

A Lightbox هو تراكب منبثقة. يعرض الصور ومقاطع الفيديو وغيرها من الصور الإعلامية على موقع ويب في عرض أكبر وأكثر تركيزًا. عندما ينقر المستخدمون على زر أو رابط أو Thumbnail ذوي الصلة ، تعرض ميزة Lightbox الصور المرتبطة في طريقة عرض أكبر أثناء تعتيم الخلفية.

يساعد في تسليط الضوء على المحتوى. تعتبر هذه الميزة مثالية للمعارض والمحافظ وعروض المنتجات التي يمكن عرضها بشكل أفضل من نظرة فاحصة. من خلال دمج ميزة Lightbox ، لا يمكنك فقط جعل المحتوى المرئي الخاص بك جذابًا ولكن أيضًا يجعل جماهيرك يبقون على موقع الويب لفترة طويلة.

فوائد إضافة Lightbox إلى موقع ويب

قبل القفز إلى البرنامج التعليمي ، ألق نظرة سريعة على بعض الفوائد الرئيسية لإضافة ميزة Lightbox إلى موقع ويب من النقاط التي تمت مناقشتها أدناه.

• تجربة المستخدم المحسنة

يعرض Lightbox محتوى للمستخدمين دون مقاطعة جلسة تصفح موقع الويب الخاص بهم. يمكن للزائرين التركيز على المحتوى المميز لأنه يظهر في أعلى عناصر موقع الويب الأخرى. استكشاف أسرار تحسين تجربة المستخدم.

• تحسين النداء البصري

تستخدم Lightboxes الرسوم المتحركة السلسة والتخطيطات المعاصرة التي تجعل مواقع الويب تبدو أكثر جاذبية للمستخدمين. هذا يجعل موقع الويب أكثر احترافا.

• تسهيل التنقل للصور ومقاطع الفيديو

تتيح Lightboxes للمستخدمين عرض عناصر الوسائط المتعددة على صفحة واحدة مع التنقل السلس والتحولات السهلة بينهما. إذا كنت تعاني من ملفات الوسائط الخاصة بك ، فاستخدم HappyMedia لإدارة مكتبة الوسائط والملفات.

• يزيد من المشاركة والتفاعل

تساعد Lightboxes المستخدمين على رؤية المحتوى المرئي بشكل أفضل ، مما قد يجعلهم يرغبون في استكشاف موقع الويب الخاص بك أكثر. يمكن أن تمر جلساتها المتزايدة إشارة إيجابية إلى محرك البحث.

• يتيح عرض محتوى أفضل

تساعدك Lightboxes على عرض المحتوى بشكل أفضل دون جعل صفحات الويب الخاصة بك تبدو مشغولة. هذا رائع لتقديم محتوى مثل المخططات ومجموعات الأحداث إلى جانب صور المنتج.

كيفية إضافة Lightbox في WordPress مع Elementor

نحن الآن في الجزء التعليمي. في هذا القسم ، سوف نوضح لك كيفية إضافة Lightbox في WordPress مع Elementor. للبدء في البرنامج التعليمي ، تحتاج إلى التأكد من تثبيت المكونات الإضافية التالية وتفعيلها على موقعك.

• عنصر
• Happyaddons

Happyaddons هو ملحق بارز لمكون الإضافي Elementor. إنه يأتي مع 130+ عناصر واجهة مستخدم وعشرات الميزات التي يمكن أن تساعد في تجميل موقع الويب الخاص بك. بمجرد أن تكون جاهزة على موقعك ، ابدأ باتباع البرامج التعليمية الموضحة أدناه.

الخطوة 01: اسحب وتسقط أداة Lightbox إلى القماش

افتح منشورًا أو صفحة مع Canvas Elementor. ابحث عن أداة Lightbox على لوحة Elementor. اسحبه وإسقاطه إلى القماش.

بشكل افتراضي ، تتم إضافة أداة Lightbox إلى القماش كزر.

الخطوة 02: حدد نوع Lightbox

يأتي القطعة مع نوعين من Lightbox - زر وصورة . اختر نوع Lightbox الذي تريده للعناصر واجهة المستخدم. لهذا البرنامج التعليمي ، نحن ذاهبون مع نوع الزر.

الخطوة 03: حدد نوع المحتوى الذي تريد عرضه

يتيح لك عنصر واجهة Lightbox عرض صورة أو محتوى فيديو. اختر نوع المحتوى الذي تريد عرضه من الخيار المحدد أدناه.

إذا تم تحديد خيار الفيديو ، فيمكنك إضافة محتوى فيديو من ثلاثة مصادر- YouTube و Vimeo ، واستضافته ذاتيًا .

إذا تم اختيار مصدر YouTube أو Vimeo ، فيمكنك إضافة رابط الفيديو المطلوب إلى المربع المعني الموضح في لقطة الشاشة المرفقة أدناه.

يمكنك حتى تمكين نوع الصورة لـ Lightbox وتحميل صورة لها.

الخطوة 04: أضف نسخة إلى زر Lightbox

اكتب نسخة مناسبة تجعل الزر ذا معنى حقًا ويهتم المستخدمين بالنقر فوقها.

الخطوة 05: تكوين الإعدادات لعنصر Lightbox

بالإضافة إلى الخيارات المذكورة أعلاه ، استخدم الخيارات الأخرى لتحسين عنصر واجهة المستخدم. على سبيل المثال ، قم بمحاذاة مركزيًا أو في أي مكان يبدو جميلًا.

الخطوة 06: قم بتصميم عنصر واجهة المستخدم Lightbox

الآن ، تعال إلى علامة التبويب النمط . من علامة التبويب هذه ، يمكنك تخصيص الحشو ، ونوع الحدود ، ونصف قطر الحدود ، وظل المربع ، والطباعة ، واللون ، ولون الخلفية للعناصر واجهة المستخدم. افعل هذا بنفسك حسب الضرورة.

الخطوة 07: معاينة Lightbox

فقط انقر على الزر. إذا ظهر Lightbox مثل مقطع الفيديو المرفق أدناه ، فهذا جيد. يمكنك أن ترى أن Lightbox لدينا يعمل بشكل جيد تمامًا.

الخطوة 08: اجعل أداة Lightbox Widget مستجيبة للهاتف المحمول

انقر فوق أيقونة الوضع المستجيب على تذييل لوحة Elementor. سيظهر هذا شريطًا علويًا على القماش مع خيارات للتبديل بين أحجام الشاشة المختلفة.

تحقق مما إذا كانت القطعة تبدو جيدة على جميع الأجهزة عن طريق تبديل القماش بين أحجام الشاشة المختلفة. إذا لم يكن يبدو جيدًا على حجم شاشة محدد ، فيمكنك تخصيصه لحجم الشاشة فقط.

وبالتالي ، يمكنك إنشاء مربع Light في WordPress باستخدام المكون الإضافي Elementor.

الأشياء التي يجب مراعاتها في إنشاء Lightbox في WordPress

أتمنى أن تكون قد استمتعت بهذا البرنامج التعليمي. الآن ، في هذا القسم ، سنقوم بتغطية النقاط التي يجب عليك مراعاتها عند إنشاء مربع Light في WordPress للحصول على أفضل النتائج.

• الغرض من Lightbox

حدد وظيفة Lightbox التي تحتاجها في Lightbox ، مثل عرض الصور أو مقاطع الفيديو أو النماذج أو المعارض. خطط للمحتوى الذي يساعدك على الوصول إلى أهداف موقع الويب الخاص بك وتلبية احتياجات الزوار.

• ضغط الصور

يمكن أن تؤدي إضافة صور ثقيلة إلى إبطاء سرعة الويب الخاصة بك. لذا ، تأكد من ضغط جميع صورك قبل إضافتها إلى صندوق الضوء. استخدم HappyMeida لضغط ملفات الوسائط.

• أضف تغيير النص s

يمكن أن تؤدي إضافة نصوص بديلة إلى الصور إلى زيادة درجة SEO لصور Lightbox الخاصة بك. أيضًا ، أضف نسخة جذابة إلى زر أو رابط Lightbox.

• وظيفة الخروج

وظيفة الخروج أمر بالغ الأهمية لتجربة المستخدم. امنح المستخدمين طرقًا سهلة للخروج من Lightbox عن طريق عرض زر مرئي والسماح لهم بإغلاقه.

• اختبار واستكشاف الأخطاء وإصلاحها

تحقق من كيفية أداء Lightbox على متصفحات الإنترنت والأجهزة وأحجام العرض المختلفة لتأكيد أنها تعمل على جميع الأنظمة الأساسية. لا تنشرها دون اختبار وتجربة.

خاتمة

يعزز Lightbox مشاركة المستخدم من خلال عرض الوسائط في تراكب أعلى الصفحة الرئيسية. هذا يتيح للزائرين التركيز على المحتوى دون التنقل بعيدًا. على الرغم من وجود العديد من الإضافات المتوفرة على WordPress.org لإنشاء صناديق الضوء ، فإن Elementor تبرز كواحد من أبسط الخيارات الأكثر سهولة في الاستخدام. إذا كنت من محبي بناة الصفحات ، فإن Elementor يستحق التفكير في ذلك بالتأكيد.

إلى جانب أداة Lightbox ، يمكنك أيضًا استكشاف مجموعة واسعة من الميزات والعناصر التي تقدمها المكون الإضافي HappyAddons . تتيح لك هذه الأداة القوية إضافة المزيد من الوظائف إلى موقع الويب الخاص بك وتجعلها أكثر ديناميكية وتفاعلية.

إذا وجدت هذا البرنامج التعليمي مفيدًا ، فنحن نحب أن نسمع منك! لا تتردد في مشاركة أفكارك أو أسئلتك في مربع التعليقات أدناه.