عنصر واجهة المستخدم الدائرية لصورة Elementor: شريط تمرير مجاني مع Lightbox وCoverflow
أداة Image Carousel في Master Addons تحول معرض WordPress إلى شريط تمرير قابل للتمرير. يمكنك اختيار الصور واختيار عدد العروض على سطح المكتب والجهاز اللوحي والهاتف وإضافة التشغيل التلقائي وحلقة لا نهائية وصندوق مبسط وتخطيط تغطية ثلاثي الأبعاد إذا كنت تريد واحدة. يمكن تصميم كل شريحة في حالتها العادية ، والمحومة والنشطة ، وتتبع الأسهم والنقاط وشريط التقدم علامتك التجارية. إنه يعمل مع المحافظ ، ولقطات المنتجات ، وجولات الفنادق والممتلكات ، وشعارات العملاء.
تخطيطات CoverFlow و Carousel
اختر تخطيطًا دائريًا أو تخطيط Coverflow في إعدادات Carousel. تحدد الشرائح لكل عمود عدد الشرائح التي تظهر في وقت واحد ، من 1 إلى 6 ، مع قيم منفصلة لسطح المكتب والجهاز اللوحي والهاتف المحمول ، وبالتالي فإن الرف الدائري يستجيب بدون CSS إضافي. الشرائح إلى التمرير يضبط المسافة التي تتحرك فيها كل خطوة. تجعل الحلقة الدوارة اللانهائية ، والتشغيل التلقائي ، والشريحة المركزية ، ومؤشر الإمساك والسحب المجاني يغيران طريقة تحركه. قم بتشغيل المراقب عندما يجلس الرف الدائري داخل علامة تبويب أو أكورديون.
- سريع الاستجابة: عدد شرائح مختلف على سطح المكتب والكمبيوتر اللوحي والهاتف المحمول.
- الحركة: سرعة التشغيل التلقائي وسرعة الرسوم المتحركة والتوقف عند التمرير وحلقة لا نهائية.
- الارتفاع: يتبع الارتفاع التلقائي أطول شريحة مرئية ، أو قم بتعيين ارتفاع مخصص للدورة.
شرائح نمط في الحالات العادية، تحوم ونشطة
يصمم قسم العناصر الدائرية المربع حول كل صورة في ثلاث حالات. قم بتعيين خلفية وحدود وظل وحشو للعادية ، قم بالتمرير والنشط ، بالإضافة إلى فجوة العناصر بين الشرائح والعتامة. استخدم الحالة النشطة لجعل الشريحة المركزية تبرز عن جيرانها.
- تحوم: رافعة ظل أو تغيير لون عندما يكون المؤشر فوق شريحة.
- نشط: حد أو خلفية مختلفة على الشريحة الحالية.
- الإطار: نصف قطر الحدود وظل الصندوق والحشو على كل عنصر.
صورة دائرية مع صندوق مبسط وأسهم ونقاط وشريط تقدم
يمكن أن يكون التنقل أسهمًا ونقاطًا وأسهم ونقاطًا وأسهمًا وكسرًا أو شريط تقدم ، ويمكنك إضافة شريط تمرير قابل للسحب إلى أي منها. تأخذ الأسهم رموزًا مخصصة وتجلس داخل أو خارج الرف الدائري. يتم تشغيل Lightbox افتراضيًا ويفتح كل صورة بالحجم الكامل باستخدام FancyBox أو Elementor Lightbox. يظهر عنوان الصورة والتسمية التوضيحية الخاصة بمكتبة الوسائط الخاصة به في Lightbox ، ويمكنك تصميم كليهما ، جنبًا إلى جنب مع رمز المعاينة والتراكب.
- الأسهم: اللون والحجم والخلفية والإزاحة الأفقية، مع خيار إخفاءها على الهاتف المحمول.
- العدادات: كسر مثل 1/8 أو شريط تقدم في الأعلى أو الأسفل.
- Lightbox: Fancybox أو Elementor ، مع رمز معاينة مخصص وتراكب.
رفاهية صورة CoverFlow بدون Elementor Pro
في Elementor ، ينتمي تأثير Coverflow إلى أداة الوسائط الدوارة ، والتي تعد جزءًا من Elementor Pro. تحتوي الصورة الرئيسية للصورة الإضافات الرئيسية على كخيار تخطيط. اضبط التخطيط على Coverflow ووجه الشريحة المركزية للأمام بينما يبتعد جيرانه. يحتوي تأثير Coverflow على أربعة أشرطة منزلقة: التدوير والتمدد والمعدل والعمق. الرف الدائري أدناه مباشر ، لذا اسحبه أو استخدم النقاط.
للتعرف على أنماط الوجه والقوس والمدار ، راجع دليلنا إلى عنصر دائري 3D.
Elementor Image Carousel مقابل Master Addons Image Carousel
إن دائرية الصور الخاصة بـ Elementor كافية لمنزلق أساسي مع تسميات توضيحية على الشرائح. اختر الإضافات الرئيسية عندما تحتاج إلى تخطيط CoverFlow أو شريط تقدم أو عداد كسر أو Fancybox أو تصميم منفصل للشريحة النشطة.
| صورة العنصر دائري | الإضافات الرئيسية صورة دائري | |
|---|---|---|
| سعر | حر | حر |
| الشرائح لكل عرض لكل جهاز | نعم | نعم |
| التخطيطات | الانزلاق أو التلاشي | دائري أو تدفق غطاء ثلاثي الأبعاد |
| التسميات التوضيحية | في الشريحة: العنوان أو التسمية التوضيحية أو الوصف | في Lightbox: عنوان الصورة والتسمية التوضيحية |
| ملاحة | الأسهم والنقاط | الأسهم والنقاط والرصاص الديناميكي والكسر وشريط التقدم وشريط التمرير |
| صندوق مضيء | العنصر الخفيف | Fancybox أو Elementor، مع أيقونة معاينة مخصصة وتراكب |
| تصميم الشريحة | أساسي | الحالات الطبيعية والحوم والنشطة |
| روابط | عنوان URL مخصص واحد لجميع الشرائح | لا يوجد حقل ارتباط ، الصور تفتح في Lightbox |
ما يمكن أن تفعله أداة الكاروسيل للصور وما لا تستطيع فعله
قائمة سريعة بما هو موجود في الأداة وما هو غير ذلك.
| ميزة | صورة دائري |
|---|---|
| Lightbox (FancyBox أو Elementor) | نعم |
| تخطيط تغطية | نعم |
| الشرائح لكل جهاز، من 1 إلى 6 | نعم |
| الأسهم والنقاط والكسر وشريط التقدم وشريط التمرير | نعم |
| التشغيل التلقائي وحلقة لا نهائية | نعم |
| تمرير عادي و نشط للشرائح | نعم |
| التسمية التوضيحية في Lightbox (عنوان الصورة والتسمية التوضيحية) | نعم |
| شرح على الشريحة | لا |
| رابط لكل صورة | لا |
| صفوف متعددة | لا |
| شرائح الفيديو | لا |
| تصفح الصور المصغرة | لا انظر معرض المنزلق (برو) |
أمثلة على صورة دائرية
هذه الدوارات الثلاثة هي أدوات حية. انقر فوق أي صورة لفتح المربع المضيء. المزيد من التخطيطات في العارض التجريبي تحتها.
جولة في الفندق، ثلاثة
ثلاث شرائح على سطح المكتب ، واثنتان على جهاز لوحي وواحدة على الهاتف المحمول ، مع أسهم فوق الصور.
شريط قائمة مع شريط التقدم
التشغيل التلقائي مع وضع السحب الحر وشريط التقدم بدلاً من النقاط.
كيفية إضافة صورة دائرية في Elementor
للحصول على إرشادات أطول مع لقطات الشاشة، اقرأ كيفية إنشاء صورة دائرية في Elementor.
- قم بتثبيت البرنامج الإضافي Master Addons المجاني وقم بتحرير صفحتك باستخدام Elementor.
- ابحث في لوحة عناصر واجهة المستخدم عن Image Carousel واسحبها إلى الحاوية.
- انقر فوق حقل المعرض، واختر صورك واضبط دقة الصورة.
- قم بتعيين عدد الشرائح التي تظهر لكل جهاز، ثم قم بتشغيل التشغيل التلقائي والحلقة وصندوق الإضاءة إذا كنت تريدها.
- اختر Carousel أو Coverflow، وقم بتصميم الشرائح والأسهم، ثم قم بالنشر.
الدوارات ذات الصلة: شريط تمرير الشعار, فريق المنزلق, معرض المنزلق (برو) و مدونة وضع الرف الدائري الخاص بـ Widget. للحصول على رسوم متحركة تحوم على صورة واحدة ، انظر تأثيرات تحوم الصورة.
للحصول على شبكة صور قابلة للتصفية ، انظر معرض الصور القابلة للتصفية.
الأسئلة المتداولة لصورة دائري
ما هي الميزة الرئيسية مقارنة بـ Image Carousel الأساسي الخاص بـ Elementor؟
تتعامل دائرة الصور الخاصة بـ Elementor مع بئر منزلق بسيط: التسميات التوضيحية ، والصندوق الضوئي ، والتشغيل التلقائي ، والشرائح لكل جهاز. يضيف Master Addons تخطيطًا لتدفق الغطاء ثلاثي الأبعاد ، وكسر ، وشريط تقدم ، وتنقل في شريط التمرير ، واختيار FancyBox أو Elementor Lightbox مع رمز معاينة مخصص ، وتصميم للشرائح العادية ، والمراوغة والنشطة ، وخيار مراقب للكاروسيلات داخل علامات التبويب أو الأكورديون.
كيف أحافظ على جميع الصور الدائرية بنفس الارتفاع؟
تحميل الصور بنفس نسبة العرض إلى الارتفاع، لأن الأداة تعرض كل صورة في شكلها الخاص. إذا لم تتمكن من اقتصاصها أولاً ، فامنح الأداة فئة CSS وقم بتعيين ارتفاع ثابت مع ملاءمة الكائن: غطاء على صور الشرائح. الارتفاع المخصص يحدد ارتفاع الرف الدائري نفسه ولا يقص الصور.
هل يمكنني استخدام هذا لشعار منزلق بتدرج رمادي للتلوين عند التمرير؟
نعم. تحميل صور شعارك. في علامة التبويب عناصر Carousel ، اضبط حالة عتامة الحالة العادية أو استخدم مرشح CSS لجعلها تدرج الرمادي. ثم ، في حالة التمرير ، اضبط العتامة مرة أخرى على 1 وقم بإزالة الفلتر. أو استخدم شريط تمرير الشعار القطعة، والتي تم تصميمها لشعارات العميل.
هل يمكن للكاروسيل التمرير بشكل مستمر؟
يتحرك خطوة واحدة في كل مرة ، مع أو بدون تشغيل تلقائي. للحصول على شريط ينزلق دون توقف ، قم ببناء سرادق. خاصتنا دليل سرادق العنصر يظهر ثلاث طرق للقيام بذلك.
ما الفرق بين الرف الدائري وشريط التمرير؟
يعرض شريط التمرير شريحة واحدة في كل مرة ، وعادة ما يكون العرض الكامل. يظهر كاروسيل العديد في وقت واحد على المسار. تقوم هذه الأداة بالأمرين: تعيين الشرائح لكل عمود على 1 ويعمل كمنزلق. هناك المزيد في كاروسيل مقابل منزلق.
هل يمكن لكل صورة أن يكون لها رابط خاص بها؟
لا الصور مفتوحة في Lightbox ولا تحتوي الأداة على حقل ارتباط. تحتوي دائرة الصور الخاصة بـ Elementor على خيار عنوان URL مخصص ، ولكنه ينطبق على كل شريحة. للحصول على رابط لكل عنصر ، استخدم شريط تمرير الشعار.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
