كيفية إضافة شريط تمرير المنتج في WooCommerce باستخدام Elementor (7 تخطيطات)
نشرت: 2024-10-09تُعد أشرطة تمرير المنتج طريقة ممتازة لعرض مجموعة متنوعة من المنتجات بطريقة منظمة وجذابة، خاصة عند العمل مع WooCommerce على WordPress.
من خلال استخدام Elementor، وهو منشئ الصفحات الشهير، إلى جانب Elemento Addon، يمكنك بسهولة إضافة شرائح تمرير المنتج التي تعمل على رفع مستوى تجربة التسوق.
في هذا الدليل، سنستكشف كيفية إضافة شريط تمرير المنتج مع سبعة خيارات تخطيط مختلفة باستخدام Elementor Addon.
لماذا يجب علينا إضافة شريط تمرير المنتج في WooCommerce؟
جدول المحتويات
قبل أن نواصل، دعونا نتوقف لحظة لفهم مزايا شريط تمرير المنتج:
تعمل أشرطة التمرير على تحسين المظهر البصري وتضفي على متجرك مظهرًا احترافيًا. يمكن للزوار تصفح المنتجات المختلفة بسرعة دون التمرير عبر قوائم واسعة. وتسليط الضوء على المنتجات الشائعة أو الجديدة أو المخفضة لتعزيز المبيعات.
استكشف التخطيطات المتنوعة لشرائح تمرير المنتج
يقدم Elemento Addon سبعة تخطيطات متعددة الاستخدامات لشريط تمرير المنتج لتتناسب مع جمالية تصميم متجرك. وفيما يلي نظرة على كل واحد:
1. شريط التمرير المتقدم
يعد تخطيط شريط التمرير المتقدم مثاليًا لعرض صور المنتجات عالية الجودة مع الرسوم المتحركة المضافة. يمكنك تسليط الضوء على منتجاتك الرئيسية من خلال صور وتراكبات نصية ملفتة للنظر.
سمات :
- ويقدم انتقالات سلسة
- نص قابل للتخصيص، و
- ستوجه الأزرار المستخدمين مباشرة إلى صفحات المنتج.
الاستخدام : مثالي للمنتجات المميزة أو المجموعات الجديدة.
العرض التجريبي المباشر: اكتشف شريط التمرير المتقدم
2. شريحة المنتج المتقدمة
تعد شريحة المنتج المتقدمة عبارة عن تخطيط بسيط وفعال يسمح لك بعرض منتجاتك في شريط تمرير أفقي. يمكنك إضافة صور المنتجات والعناوين والأسعار وحتى شارات البيع.
سمات
- التمرير الأفقي
- سرعة قابلة للتخصيص
- عرض معلومات المنتج الديناميكي.
الاستخدام :
- مثالي للعروض الأكثر مبيعًا أو العروض لفترة محدودة.
العرض التوضيحي المباشر: اكتشف شريحة المنتج المتقدمة
3. شريط تمرير فئة المنتج
يتيح لك شريط تمرير فئة المنتج عرض فئات المنتجات بدلاً من المنتجات الفردية.
يعمل هذا التخطيط بشكل جيد للغاية مع المتاجر ذات خطوط المنتجات المتنوعة، مما يساعد المستخدمين على التنقل عبر الفئات دون عناء.
سمات :
- صور الفئة،
- العناوين، ودعم الوصف.
الاستخدام :
- رائعة للمتاجر التي تحتوي على فئات منتجات متعددة.
العرض التوضيحي المباشر: اكتشف شريط تمرير فئة المنتج
4. شريط تمرير المنتج
يوفر شريط تمرير المنتجات الكلاسيكي طريقة بسيطة وفعالة لعرض منتجات متعددة بتنسيق شريط تمرير أفقي.
هذا التخطيط قابل للتخصيص بدرجة كبيرة، مما يسمح لك بتعديل كل شيء بدءًا من عدد المنتجات المرئية وحتى شكل شريط التمرير ومظهره.
سمات :
- عرض منتجات متعددة
- أعمدة قابلة للتخصيص
- آثار الانتقال.
الاستخدام :
- مناسبة للترويج للمجموعات والوافدين الجدد.
العرض التوضيحي المباشر: اكتشف شريط تمرير المنتج
5. قائمة شريط تمرير المنتجات
يعرض تخطيط قائمة أشرطة تمرير المنتج منتجاتك بتنسيق قائمة داخل شريط التمرير. يعد هذا الخيار رائعًا للمستخدمين الذين يفضلون رؤية معلومات أكثر تفصيلاً حول كل منتج مع الحفاظ على الواجهة المنزلقة.
سمات :
- عرض القائمة مع تفاصيل المنتج
- انتقالات شريط التمرير السلس.
الاستخدام :
- مثالية للمتاجر التي تحتوي على أوصاف ومواصفات مفصلة للمنتج.
العرض التوضيحي المباشر: استكشف قائمة شريط تمرير المنتج
6. قائمة المنتجات العمودية
تضيف قائمة المنتجات العمودية لمسة فريدة لعرض منتجك. بدلاً من شريط التمرير الأفقي التقليدي، يقدم هذا التخطيط منتجاتك بتنسيق تمرير عمودي، مما يجعله مثاليًا للأشرطة الجانبية أو الأقسام الضيقة.
سمات :
- التمرير العمودي
- عناصر القائمة القابلة للتخصيص.
الاستخدام :
- إنه مناسب بشكل أفضل للأدوات الجانبية أو المساحات الضيقة على الصفحة الرئيسية لمتجرك.
العرض التجريبي المباشر: استكشف قائمة المنتجات العمودية
7. شريط تمرير منتج الشبكة
يعد Grid Product Slider مثاليًا لعرض المنتجات في تخطيط الشبكة. يقدم هذا التصميم عرضًا تقديميًا أكثر تنظيمًا وتوحيدًا، مما يسمح بعرض منتجات متعددة مرة واحدة دون الحاجة إلى التمرير.
سمات :
- تخطيط الشبكة مع أعمدة قابلة للتعديل
- سهولة التصفح
- عرض معلومات المنتج الديناميكي.
الاستخدام :
- ممتاز للمتاجر التي تحتوي على العديد من المنتجات التي يجب عرضها في وقت واحد.
العرض التوضيحي المباشر: استكشاف شريط تمرير منتج الشبكة
كيفية إضافة شريط تمرير المنتج في WooCommerce باستخدام ملحق Elementor.
لإضافة شريط تمرير منتج باستخدام أحد هذه التخطيطات، اتبع الخطوات التالية:
- تثبيت المكونات الإضافية المطلوبة وتنشيطها : تأكد من تثبيت وتنشيط Elementor وWooCommerce وElemento Addon.
- تحرير الصفحة باستخدام Elementor : انتقل إلى الصفحة التي تريد إضافة شريط تمرير المنتجات إليها وانقر على "تحرير باستخدام Elementor".
- إضافة عنصر واجهة مستخدم شريط تمرير المنتج : في محرر Elementor، ابحث عن عنصر واجهة مستخدم شريط تمرير منتجات Elemento Addon (على سبيل المثال، شريط التمرير المتقدم، شريط تمرير منتج الشبكة، وما إلى ذلك) واسحبه إلى القسم المطلوب في الصفحة.
- تخصيص شريط التمرير : اختر التخطيط المفضل لديك، وحدد المنتجات أو الفئات المراد عرضها، واضبط الإعدادات مثل سرعة الانتقال، وأعمدة الشبكة، وعناصر التصميم.
- المعاينة والنشر : بعد تخصيص شريط التمرير حسب رغبتك، قم بمعاينة التغييرات للتأكد من أن كل شيء يبدو مثاليًا، ثم انشر الصفحة.
ارجع إلى هذا الفيديو أدناه للحصول على المساعدة في تنشيط Elemento Addon.
يمكنك العثور على الإضافات ذات الصلة هنا.
التعليمات
س: هل يمكنني تخصيص تصميم شريط تمرير المنتج؟
الإجابة: نعم! يسمح Elementor بالتخصيص الشامل، بما في ذلك ضبط إعدادات التخطيط والطباعة والألوان وتأثيرات التمرير لتتناسب مع العلامة التجارية لموقع الويب الخاص بك.
س: هل من الممكن عرض فئات منتجات معينة في شريط التمرير؟
الإجابة: نعم، تسمح لك العديد من أدوات شريط تمرير المنتج بتصفية المنتجات حسب الفئات أو العلامات أو السمات كجزء من إعدادات شريط التمرير.
س: هل يمكنني إضافة رسوم متحركة إلى شريط تمرير المنتج؟
الإجابة: نعم، يدعم Elementor خيارات الرسوم المتحركة المتنوعة التي يمكن تطبيقها على أشرطة تمرير المنتج للحصول على تجربة مستخدم أكثر جاذبية.
خاتمة
باستخدام Elemento Addon for Elementor، يمكنك بسهولة إنشاء أشرطة تمرير مذهلة للمنتج لمتجر WooCommerce الخاص بك.
اختر من بين مجموعة متنوعة من أشرطة تمرير المنتج التي تتميز بتخطيطات متنوعة وخيارات تخصيص لتتناسب مع علامتك التجارية.
ارفع مستوى تجربة التسوق لدى عميلك من خلال هذه الشاشات الجذابة.
إذا وجدت هذه المقالة مفيدة، شاركها مع أصدقائك. إذا كان لديك أي أسئلة بخصوص هذا، فلا تتردد في التعليق أدناه. ونحن سوف تساعدك على حل مشكلتك. شكرا لقراءة هذه المدونة.
نأمل أن تساعدك هذه المقالة في العثور على أفضل شريط تمرير للمنتج لعرض منتجاتك.
يرجى الاشتراك في قناتنا على YouTube ، حيث نقوم أيضًا بتحميل محتوى رائع هناك، كما يمكنك متابعتنا على Facebook و Twitter
اكتشف المزيد من المقالات:
- أفضل 6 إضافات Elementor لمواقع WooCommerce
- كيفية إنشاء صفحة عربة التسوق لصفحات WooCommerce، وصفحة المتجر، وصفحة الدفع، وصفحة حسابي
- إضافات Elemento لـ Elementor لتعزيز تجربة تصميم موقع الويب الخاص بك