عنصر واجهة المستخدم الدائرية لصورة Elementor: شريط تمرير مجاني مع Lightbox وCoverflow
تعمل أداة Image Carousel في Master Addons على تحويل معرض WordPress إلى شريط تمرير قابل للتمرير، وهو مجاني. يمكنك اختيار الصور واختيار عدد العروض على سطح المكتب والكمبيوتر اللوحي والهاتف وإضافة التشغيل التلقائي وصندوق الإضاءة وتخطيط تدفق الغلاف ثلاثي الأبعاد إذا كنت تريد ذلك. يمكن تصميم كل شريحة في حالتها العادية والحاملة والنشطة، وتتبع الأسهم والنقاط والتسميات التوضيحية علامتك التجارية. إنه يعمل على المحافظ ولقطات المنتجات وجولات الفنادق والممتلكات وشعارات العملاء.
التخطيط المتقدم والتحكم في السلوك
تحكم بشكل كامل في شكل وتصرفات الكاروسيل الخاصة بك. اختر تخطيط Carousel أو Coverflow. قم بتعيين الشرائح لكل عمود لشاشات العرض الشبيهة بالشبكة وحدد عدد الشرائح التي سيتم تمريرها. تمكين ميزات مثل التشغيل التلقائي، والحلقة، والوضع المركزي، وحتى مؤشر الإمساك للسحب التفاعلي. يضمن خيار المراقب أنه يعمل بشكل مثالي داخل علامات التبويب أو الأكورديون.
- تخطيطات مرنة: قم بإنشاء شبكات متعددة الصفوف أو أشرطة تمرير أفقية كلاسيكية مع التحكم الكامل في الأعمدة والتمرير.
- التفاعلات السلسة: اضبط سرعة التشغيل التلقائي وسرعة الرسوم المتحركة وقم بتمكين الإيقاف المؤقت عند التمرير للحصول على سلوك سهل الاستخدام.
- ميزات التكيف الذكية: استخدم الارتفاع التلقائي لتجنب المساحات الفارغة غير الملائمة، والمراقب لجعله يعمل في حاويات مخفية.
نمط في كل جزء، في كل ولاية
اجعل الكاروسيل الخاص بك جزءًا مثاليًا من تصميمك. لا تقم فقط بتصميم الصور وتحديد الحاوية لكل عنصر. قم بتعيين الخلفيات والحدود والظلال والحشوة الفريدة للحالات العادية والتحويمية والنشطة. اضبط فجوة العنصر والعتامة الشاملة. يتيح لك هذا المستوى من التفاصيل إنشاء بطاقات تفاعلية وتسليط الضوء على الشريحة النشطة وتقديم تعليقات مرئية واضحة أثناء تفاعل المستخدمين.
- ردود الفعل التفاعلية: صمم تأثيرات تحويم مميزة (مثل رفع الظل أو تغيير اللون) لجذب الزوار.
- تمييز الشريحة النشطة: اجعل الشريحة المركزية الحالية بارزة بحدود أو خلفية مختلفة.
- تحكم مرئي كامل: قم بتخصيص نصف قطر الحدود وظل الصندوق والحشوة للحصول على إطار مثالي للعنصر.
الملاحة وصندوق الضوء المتكامل
قم بتوجيه زوار موقعك بشكل صحيح على دائري الصور الخاص بك. تصميم تنقل أنيق للسهم باستخدام أيقونات وألوان وخلفيات ومواضع مخصصة (الداخل والخارج). قم بإخفائها على الهاتف المحمول للحصول على مظهر أنظف. ثم قم بتمكين معرض الصور الخاص بك باستخدام Lightbox المدمج. قم بتخصيص أيقونة المعاينة والتراكب وطباعة التسميات التوضيحية. اختر بين Fancybox وElementor لفتح الصور في تجربة عرض جميلة بملء الشاشة.
- أسهم التنقل المخصصة: تعمل أسهم النمط من الصفر على تغيير لونها وحجمها وخلفيتها والإزاحة الأفقية.
- Mobile-Optimized: اختر إخفاء السهم على الهاتف المحمول واعتمد على إيماءات التمرير للحصول على إحساس أصلي.
- Premium Lightbox: قدم عرضًا مكبرًا بأيقونات وتراكبات قابلة للتخصيص، مما يحول الكاروسيل إلى معرض كامل.
Elementor Image Carousel مقابل Master Addons Image Carousel
كلا الحاجيتين مجانيتين. إصدار Elementor يكفي لشريط تمرير أساسي يحتوي على تسميات توضيحية وروابط. اختر الإضافات الرئيسية عندما تحتاج إلى تخطيط تدفق الغلاف، أو صفوف من الصور، أو مزيد من التحكم في التنقل وتصميم الشرائح.
| صورة العنصر دائري | الإضافات الرئيسية صورة دائري | |
|---|---|---|
| سعر | حر | حر |
| الشرائح لكل عرض لكل جهاز | نعم | نعم |
| التخطيطات | الانزلاق أو التلاشي | دائري أو تدفق غطاء ثلاثي الأبعاد |
| صفوف متعددة | لا | نعم، مع الشرائح لكل عمود |
| ملاحة | الأسهم والنقاط | الأسهم والنقاط والرصاص الديناميكي والكسر وشريط التقدم وشريط التمرير |
| صندوق مضيء | العنصر الخفيف | Fancybox أو Elementor، مع أيقونة معاينة مخصصة وتراكب |
| تصميم الشريحة | أساسي | الحالات الطبيعية والحوم والنشطة |
| ربط كل صورة بعنوان URL | نعم | لا، الصور مفتوحة في الصندوق الضوئي |
كيفية إضافة صورة دائرية في Elementor
للحصول على إرشادات أطول مع لقطات الشاشة، اقرأ كيفية إنشاء صورة دائرية في Elementor.
- قم بتثبيت البرنامج الإضافي Master Addons المجاني وقم بتحرير صفحتك باستخدام Elementor.
- ابحث في لوحة عناصر واجهة المستخدم عن Image Carousel واسحبها إلى الحاوية.
- انقر فوق حقل المعرض، واختر صورك واضبط دقة الصورة.
- قم بتعيين عدد الشرائح التي تظهر لكل جهاز، ثم قم بتشغيل التشغيل التلقائي والحلقة وصندوق الإضاءة إذا كنت تريدها.
- اختر Carousel أو Coverflow، وقم بتصميم الشرائح والأسهم، ثم قم بالنشر.
الدوارات ذات الصلة: شريط تمرير الشعار, فريق المنزلق, معرض المنزلق (برو) و مدونة وضع دائري القطعة.
الأسئلة المتداولة لصورة دائري
ما هي الميزة الرئيسية مقارنة بـ Image Carousel الأساسي الخاص بـ Elementor؟
يتعامل Image Carousel المجاني من Elementor مع شريط تمرير بسيط بشكل جيد: التسميات التوضيحية، وصندوق الضوء، والتشغيل التلقائي، والشرائح لكل جهاز. يضيف Master Addons تخطيط تدفق الغلاف ثلاثي الأبعاد، وشبكات متعددة الصفوف مع شرائح لكل عمود، وجزء، وشريط تقدم، وملاحة شريط التمرير، واختيار Fancybox أو Elementor lightbox مع أيقونة معاينة مخصصة، وتصميم للشرائح العادية، والشرائح المتحركة والنشطة، وخيار المراقب للدوامات داخل علامات التبويب أو الأكورديون.
إذا قمت بتمكين "الارتفاع التلقائي"، فهل سيتم تمديد صوري أو اقتصاصها؟
رقم يقوم الارتفاع التلقائي بضبط الارتفاع الإجمالي لحاوية الرف الدائري ليتناسب مع أطول شريحة مرئية حاليًا. ستحافظ صورك على نسبة العرض إلى الارتفاع بناءً على إعداداتك الأخرى (مثل “Image Size”). فهو يمنع الارتفاعات الثابتة من إنشاء مساحات فارغة كبيرة إذا كانت لديك صور ذات اتجاهات مختلفة للصورة/المناظر الطبيعية.
هل يمكنني استخدام هذا لشعار منزلق بتدرج رمادي للتلوين عند التمرير؟
قطعاً! هذه حالة استخدام مثالية. قم بتحميل صور شعارك. في علامة التبويب عناصر الكاروسيل، قم بتعيين حالة التعتيم العادية أو استخدم مرشح CSS لجعلها ذات تدرج رمادي. ثم، في حالة التمرير، قم بضبط التعتيم مرة أخرى على 1 وقم بإزالة الفلتر. يجعل تصميم التمرير المدمج هذا التأثير سهلاً بدون رمز مخصص. أو استخدم شريط تمرير الشعار القطعة، والتي تم تصميمها لشعارات العميل.
كيف يعمل إعداد "المراقب"، ومتى يجب أن أستخدمه؟
يراقب المراقب التغييرات في حاوية الرف الدائري. قم بتمكينه (ضبطه على نعم) عند وضع الرف الدائري داخل علامة تبويب أو أكورديون أو أداة تبديل، أو في أي مكان يكون مخفيًا في البداية. وهذا يضمن أن الرف الدائري يعرض ويعمل بشكل صحيح في اللحظة التي ينقر فيها المستخدم للكشف عن الحاوية الأصلية الخاصة به. إذا كان مكسورًا داخل علامة تبويب، فعادةً ما يؤدي ذلك إلى إصلاحه.
هل سيؤدي وجود دوارات متعددة مع التشغيل التلقائي في صفحة واحدة إلى حدوث مشكلات في الأداء؟
يمكن ذلك، إذا كان لديك الكثير (مثل 15+). يعد كل دائري تشغيل تلقائي عنصرًا متحركًا يجب على المتصفح تحريكه. للحصول على أفضل أداء، قم بقصر التشغيل التلقائي على دائري البطل الأكثر أهمية. بالنسبة للآخرين، فكر في السماح للمستخدمين بالتمرير يدويًا. كما أن استخدام أحجام الصور المحسنة (من خلال إعدادات دقة الصورة) أمر بالغ الأهمية للسرعة.
هل يمكنني ربط عناصر الكاروسيل بعناوين URL مختلفة بدلاً من الصندوق الضوئي فقط؟
ليس مع هذه القطعة. يفتح الصور في صندوق ضوئي. إذا كانت كل شريحة تحتاج إلى رابط خاص بها، فاستخدم شريط تمرير الشعار، أو خيار الارتباط في Image Carousel الخاص بـ Elementor.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
ناسخ البريد/الصفحة
