العرض الكامل المنزلقات هي عنصر تصميم شائع يجذب الانتباه ومثالي لعرض الصور المميزة والعروض الترويجية والرسائل الرئيسية. إيليمنتور يجعل من السهل إنشاء شريط تمرير كامل العرض على موقع ووردبريس. يوفر هذا الدليل خطوات مفصلة وأمثلة للمساعدة في إعداد شريط تمرير كامل العرض وتخصيصه.
الخطوة 1: تثبيت ملحق Elementor وتفعيله
If Elementor isn’t installed, follow these steps:
- سجِّل الدخول إلى لوحة تحكم ووردبريس.
- انتقل إلى المكونات الإضافية > إضافة جديد المكونات الإضافية.
- في شريط البحث، اكتب إيليمنتورثم انقر فوق التثبيت.
- بمجرد التثبيت، انقر فوق تفعيل.
يستخدم هذا الدليل إليمنتور برووالتي تتضمن شريط التمرير widget. If Elementor Pro isn’t available, a third-party plugin like الإضافات الأساسية ل Elementor يوفر أيضًا وظيفة شريط التمرير.
الخطوة 2: إنشاء صفحة جديدة أو تحرير صفحة موجودة
لإضافة شريط التمرير، إما إنشاء صفحة جديدة أو تعديل واحدة موجودة:
- انتقل إلى الصفحات > إضافة جديد الصفحة لصفحة جديدة، أو حدد صفحة موجودة لتعديلها.
- انقر فوق تحرير باستخدام Elementor لفتح محرر Elementor.
الخطوة 3: إضافة أداة التمرير الجانبية
داخل Elementor، استخدم أداة المنزلق:
- انقر فوق إضافة حاوية جديدة واختر زر تخطيط العمود الواحد.
- في اللوحة اليسرى، يرجى البحث عن شريط التمرير الأداة وسحبها إلى القسم.
الخطوة 4: تكوين إعدادات شريط التمرير
تخصيص محتوى شريط التمرير:
- إضافة محتوى الشريحة: انقر فوق كل شريحة، وقم بتحميل الصور وإضافة العنوان, الوصفو دعوة لاتخاذ إجراء الزر.
- مثال على ذلك: A travel blog could showcase popular destinations with a “اعرف المزيد" أو "استكشف” button.
- تعيين صور الخلفية: استخدم صورًا عالية الدقة (بعرض 1920 بكسل على الأقل) للحفاظ على الوضوح.
- أفضل الممارسات: تحسين الصور بين 100 كيلوبايت و300 كيلوبايت للتحميل بشكل أسرع.
- روابط الأزرار: Link each slide’s button to relevant pages, such as product pages or blog posts.
الخطوة 5: تعيين تخطيط العرض الكامل
لعرض شريط التمرير بالعرض الكامل:
- حدد القسم الذي يحتوي على أداة شريط التمرير وانقر فوق تحرير الحاوية.
- في التصميم علامة التبويب، اضبط عرض المحتوى إلى العرض الكامل.
- مجموعة فجوة العمود إلى لا توجد فجوة بحيث يغطي شريط التمرير عرض الشاشة بالكامل.
- انتقل إلى متقدم علامة التبويب وتعيين الهامش و الحشو إلى الصفر، مع ضمان محاذاة شريط التمرير مع حواف الشاشة.
- يمكن لملف الصور الفوتوغرافية استخدام أشرطة تمرير كاملة العرض للصور الأفقية، بحيث تغطي الشاشة دون هوامش.
Step 6: Customize the Slider’s Appearance
To adjust the slider’s style:
- إعدادات الارتفاع: في المحتوى علامة التبويب، اضبط الارتفاع ليناسب التصميم. خيارات مثل ملائم للشاشة أو إعدادات الارتفاع المخصصة (على سبيل المثال، 600 بكسل) متاحة.
- تراكب الخلفية: في علامة التبويب "النمط"، أضف تراكب خلفية شبه شفافة لتحسين إمكانية قراءة النص.
- استخدم تراكبًا داكنًا على الصور الساطعة أو تراكبًا فاتحًا على الصور الداكنة.
- الطباعة: You can adjust fonts, styles, and colors to match the site’s branding. Elementor allows you to customize typography for titles, descriptions, and buttons.
- مؤثرات الرسوم المتحركة: إضافة رسوم متحركة للمدخل أو تأثيرات التحويم في متقدم علامة تبويب للتفاعل.
الخطوة 7: الحفظ والمعاينة
بعد الانتهاء من إعدادات شريط التمرير:
- انقر فوق النشر أو تحديث.
- استخدم معاينة زر (أيقونة العين) لترى كيف سيبدو شريط التمرير مباشرةً.
تحقق من أن شريط التمرير يتم تحميله بشكل صحيح ويعرض بشكل جيد على مختلف الأجهزة (سطح المكتب، والكمبيوتر اللوحي، والجوال).
الخاتمة
يضيف شريط التمرير كامل العرض تأثيرًا مرئيًا، ويسلط الضوء على المحتوى المميز مثل العروض الترويجية أو الرسائل المهمة. يوفر Elementor مجموعة من خيارات التخصيص، مما يجعل إنشاء شريط تمرير متجاوب وجذاب أمرًا بسيطًا.
الأسئلة المتداولة
1. Why isn’t the slider displaying in full width?
تحقق من أن القسم و العمود تم تعيين التخطيطات على العرض الكامل وأن الهامش و الحشو إلى صفر.
2. كيف يمكنني تسريع أوقات تحميل شريط التمرير؟
قم بتحسين الصور عن طريق حفظها بتنسيقات مثل JPEG أو WebP. يجب أن تتراوح أحجام الملفات بشكل مثالي بين 100 كيلوبايت و300 كيلوبايت.
3. كيف يمكنني جعل شريط التمرير أكثر تفاعلية؟
استخدام رسوم متحركة للمدخل و تأثيرات التحويم in Elementor’s متقدم يمكن لعلامة التبويب إضافة لمسة ديناميكية.