كيفية إضافة شريط تمرير كامل العرض في Elementor: دليل كامل مع أمثلة

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

الخطوة 1: تثبيت ملحق Elementor وتفعيله

إذا لم يكن Elementor غير مثبت، اتبع الخطوات التالية:

1. سجِّل الدخول إلى لوحة تحكم ووردبريس.
2. انتقل إلى المكونات الإضافية > إضافة جديد المكونات الإضافية.

3. في شريط البحث، اكتب إيليمنتورثم انقر فوق التثبيت.

4. بمجرد التثبيت، انقر فوق تفعيل.

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

الخطوة 2: إنشاء صفحة جديدة أو تحرير صفحة موجودة

لإضافة شريط التمرير، إما إنشاء صفحة جديدة أو تعديل واحدة موجودة:

1. انتقل إلى الصفحات > إضافة جديد الصفحة لصفحة جديدة، أو حدد صفحة موجودة لتعديلها.

2. انقر فوق تحرير باستخدام Elementor لفتح محرر Elementor.

الخطوة 3: إضافة أداة التمرير الجانبية

داخل Elementor، استخدم أداة المنزلق:

1. انقر فوق إضافة حاوية جديدة واختر زر تخطيط العمود الواحد.

2. في اللوحة اليسرى، يرجى البحث عن شريط التمرير الأداة وسحبها إلى القسم.

الخطوة 4: تكوين إعدادات شريط التمرير

تخصيص محتوى شريط التمرير:

1. إضافة محتوى الشريحة: انقر فوق كل شريحة، وقم بتحميل الصور وإضافة العنوان, الوصفو دعوة لاتخاذ إجراء الزر.

2. مثال على ذلك: يمكن لمدونة السفر أن تعرض الوجهات الشهيرة مع "اعرف المزيد" أو "استكشف" زر.

3. تعيين صور الخلفية: استخدم صورًا عالية الدقة (بعرض 1920 بكسل على الأقل) للحفاظ على الوضوح.
   • أفضل الممارسات: تحسين الصور بين 100 كيلوبايت و300 كيلوبايت للتحميل بشكل أسرع.
4. روابط الأزرار: اربط زر كل شريحة بالصفحات ذات الصلة، مثل صفحات المنتجات أو منشورات المدونة.

الخطوة 5: تعيين تخطيط العرض الكامل

لعرض شريط التمرير بالعرض الكامل:

1. حدد القسم الذي يحتوي على أداة شريط التمرير وانقر فوق تحرير الحاوية.

2. في التصميم علامة التبويب، اضبط عرض المحتوى إلى العرض الكامل.

3. مجموعة فجوة العمود إلى لا توجد فجوة بحيث يغطي شريط التمرير عرض الشاشة بالكامل.

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

5. يمكن لملف الصور الفوتوغرافية استخدام أشرطة تمرير كاملة العرض للصور الأفقية، بحيث تغطي الشاشة دون هوامش.

الخطوة 6: تخصيص مظهر شريط التمرير

لضبط نمط شريط التمرير:

1. إعدادات الارتفاع: في المحتوى علامة التبويب، اضبط الارتفاع ليناسب التصميم. خيارات مثل ملائم للشاشة أو إعدادات الارتفاع المخصصة (على سبيل المثال، 600 بكسل) متاحة.

2. تراكب الخلفية: في علامة التبويب "النمط"، أضف تراكب خلفية شبه شفافة لتحسين إمكانية قراءة النص.
   • استخدم تراكبًا داكنًا على الصور الساطعة أو تراكبًا فاتحًا على الصور الداكنة.

3. الطباعة: يمكنك ضبط الخطوط والأنماط والألوان لتتناسب مع العلامة التجارية للموقع. يتيح لك Elementor تخصيص الطباعة للعناوين، والأوصاف، والأزرار.

4. مؤثرات الرسوم المتحركة: إضافة رسوم متحركة للمدخل أو تأثيرات التحويم في متقدم علامة تبويب للتفاعل.

الخطوة 7: الحفظ والمعاينة

بعد الانتهاء من إعدادات شريط التمرير:

1. انقر فوق النشر أو تحديث.
2. استخدم معاينة زر (أيقونة العين) لترى كيف سيبدو شريط التمرير مباشرةً.

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

الخاتمة

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

الأسئلة المتداولة

1. لماذا لا يتم عرض شريط التمرير بالعرض الكامل؟

تحقق من أن القسم و العمود تم تعيين التخطيطات على العرض الكامل وأن الهامش و الحشو إلى صفر.

2. كيف يمكنني تسريع أوقات تحميل شريط التمرير؟

قم بتحسين الصور عن طريق حفظها بتنسيقات مثل JPEG أو WebP. يجب أن تتراوح أحجام الملفات بشكل مثالي بين 100 كيلوبايت و300 كيلوبايت.

3. كيف يمكنني جعل شريط التمرير أكثر تفاعلية؟

استخدام رسوم متحركة للمدخل و تأثيرات التحويم في Elementor's متقدم يمكن لعلامة التبويب إضافة لمسة ديناميكية.

يتيح اتباع هذه الخطوات والأمثلة إنشاء شريط تمرير كامل العرض يعزز تخطيط الموقع ويحسن تجربة المستخدم.