صورة دائري

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

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

تفضل المشاهدة أولا؟ يغطي هذا البرنامج التعليمي القصير Image Carousel من المعرض إلى التصميم

ما تفعله أداة Image Carousel #

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

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

قبل أن تبدأ #

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

كيفية إضافة عنصر واجهة المستخدم Image Carousel #

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

إضافة وطلب الصور الخاصة بك #

في ال محتوى علامة التبويب، افتح الصور قم بالقسم وانقر فوق حقل المعرض لتشغيل منتقي وسائط WordPress. حدد الصور التي تريدها، ثم استخدمها تحرير المعرض لسحبها بالترتيب، أضف تسميات توضيحية، أو قم بإسقاط أي منها باستخدام أيقونة X.

بالعودة إلى اللوحة، يمنحك قسم الصور ثلاثة عناصر تحكم أخرى

• دقة الصورة: اختر الحجم الذي يخدمه WordPress، بدءًا من الصورة المصغرة وحتى الحجم الكامل، أو قم بتعيين حجم مخصص. متوسط أو كبير يحافظ على إضاءة الصفحة بينما لا يزال يبدو حادًا في شريط التمرير.
• تمكين معرض Lightbox: قم بتشغيل هذا حتى يتمكن الزائرون من النقر فوق صورة لفتحها بالحجم الكامل في نافذة منبثقة. ومع إيقاف تشغيله، يتم عرض الصور فقط.
• مكتبة لايت بوكس: اختر المحرك المنبثق، إما Fancybox أو الصندوق الضوئي الخاص بـ Elementor. يقوم كلاهما بتجميع الصور الدائرية حتى يتمكن الزوار من المرور عبرها داخل النافذة المنبثقة.

إعداد الملاحة #

ال ملاحة يتحكم القسم في كيفية تحرك الأشخاص عبر الشرائح. ابدأ بـ ملاحة dropdown، الذي يحدد نمط التحكم: الأسهم والنقاط، الأسهم والكسر، الأسهم، النقاط، التقدم، أو لا شيء.

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

ضبط سلوك دائري #

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

• الشرائح لكل عمود: عدد الصفوف عند تشغيل شريط التمرير في اتجاه عمودي.
• تخطيط: اختر Carousel لشريط تمرير مسطح قياسي أو Coverflow للحصول على تأثير ثلاثي الأبعاد.
• الارتفاع التلقائي: دع ارتفاع شريط التمرير يتكيف مع الصورة الحالية.
• سرعة التشغيل التلقائي والتشغيل التلقائي: قم بتشغيل الانزلاق التلقائي واضبط التأخير بين الشرائح بالمللي ثانية (5000 يساوي خمس ثوانٍ).
• وقفة على تحوم: أوقف التشغيل التلقائي أثناء وجود المؤشر فوق شريط التمرير.
• الشرائح للتمرير: كم عدد الصور المتقدمة في كل خطوة.
• الشريحة المركزية، مؤشر الإمساك، وضع السحب الحر: خيارات لتوسيط الشريحة النشطة، وإظهار مؤشر الإمساك، وتمرير السحب المتدفق بحرية.
• حلقة: قم بتشغيل الكاروسيل كحلقة لا نهاية لها بدلاً من التوقف عند الصورة الأخيرة.

استخدم تخطيط Coverflow للحصول على تأثير ثلاثي الأبعاد #

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

نمط الكاروسيل #

ال أسلوب تنقسم علامة التبويب إلى أربعة أقسام: عناصر دائري, صندوق مضيء, ملاحة، و أنماط (خيار احترافي). يقومون معًا بتغطية مظهر الشرائح والنوافذ المنبثقة والأسهم.

عناصر دائري #

يقوم هذا القسم بتصميم شرائح الصورة. تحتوي على حالات عادية، وحوامة، ونشطة، حتى تتمكن من جعل الشريحة المركزية متميزة عن الباقي.

• الخلفية، نوع الحدود، نصف قطر الحدود، ظل الصندوق: تأطير قياسي لكل شريحة. يقوم Border Radius بتقريب زوايا الصورة.
• الحشو وفجوة العنصر: المساحة داخل كل شريحة والفجوة بين الشرائح.
• وضع الظل والعتامة: عمق إضافي وشفافية للشرائح غير النشطة.

Lightbox والتراكب والتعليقات التوضيحية #

ال صندوق مضيء يقوم القسم بتصميم أيقونة المعاينة الموجودة على كل صورة والتراكب الموجود خلفها، بالإضافة إلى نص التسمية التوضيحية.

• أيقونة المعاينة المخصصة: استبدل رمز التكبير/التصغير الافتراضي، وقم بتعيين لونه ولون التمرير وحجمه وموضعه باستخدام Icon Gap إلى اليسار والأعلى.
• تراكب: أضف لونًا خلفيًا على الصورة، مما يساعدك عندما تريد أن يظل الرمز والتعليق قابلين للقراءة.
• عنوان التسمية التوضيحية: الطباعة والخلفية واللون ولون التمرير للتسميات التوضيحية التي أضفتها في المعرض.

سهام الملاحة #

ال ملاحة يتحكم قسم النمط في مظهر الأسهم، مع الحالات العادية وحالات التمرير.

• اللون والخلفية: لون رمز السهم والزر الموجود خلفه.
• نوع الحدود، نصف قطر الحدود، الحشو، الحجم: قم بتشكيل وحجم أزرار الأسهم، بما في ذلك الأزرار المستديرة ذات نصف القطر الكامل.
• صندوق الظل والإزاحة: أضف العمق وادفع الأسهم للداخل أو للخارج مع الإزاحة الأفقية.

النتيجة على الصفحة #

النشر أو المعاينة وتشغيل الرف الدائري مباشرة: فهو يقوم بتشغيل الصور تلقائيًا، ويتكرر إذا قمت بتشغيل ذلك، ويفتح كل واحدة منها في الصندوق الضوئي عند النقر. يستمر التصميم الخاص بك من الشرائح ذات الحدود المستديرة إلى أزرار الأسهم المخصصة.

حالات الاستخدام الشائعة #

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

نصائح للعمل مع Image Carousel #

• مطابقة دقة الصورة مع حجم الشريحة. يؤدي تقديم الملفات بالحجم الكامل في شرائح صغيرة إلى إبطاء الصفحة؛ متوسطة أو كبيرة عادة ما تكون كثيرة.
• حافظ على سرعة التشغيل التلقائي مريحة. حوالي 4000 إلى 6000 مللي ثانية تمنح الأشخاص الوقت للنظر دون الشعور بالاندفاع.
• قم بتشغيل إيقاف مؤقت عند التمرير باستخدام التشغيل التلقائي. يمنع شريط التمرير من الانزلاق من أسفل شخص يقرأ تعليقًا.
• إخفاء الأسهم على الهاتف المحمول. الضرب هو الإيماءة الطبيعية على شاشات اللمس، لذلك غالبًا ما تكون الأسهم في حالة من الفوضى هناك.
• استخدم الحالة النشطة لتسليط الضوء على الشريحة المركزية. حدود دقيقة أو عتامة كاملة على الشريحة النشطة توجه العين.

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

إلتحاق بالركب #

تقوم أداة Image Carousel بإنشاء شريط تمرير صور Elementor كامل الميزات بدون مكون إضافي منفصل: تحميل معرض، وتعيين التشغيل التلقائي والحلقة، وتشغيل صندوق الإضاءة، وتصميم الشرائح والأسهم لتتناسب مع تصميمك. للحصول على طرق أخرى لعرض الصور، انظر إلى معرض المنزلق و معرض قابل للتصفية الحاجيات. تصفح كاملا عناصر واجهة المستخدم والإضافات الرئيسية لمعرفة ما تم تضمينه أيضًا، وتحقق من صفحة التسعير لميزات Pro مثل أنماط الكاروسيل.