كيفية إنشاء صورة دائرية في Elementor

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

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

ما تحتاجه

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

الخطوة 1: إضافة القطعة

افتح الصفحة في Elementor وابحث في لوحة عناصر واجهة المستخدم عن “image carousel.” اسحبها إلى حاوية.

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

الخطوة 2: أضف صورك

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

ضمن إعدادات المحتوى، ستجد حجم الصورة ومصدر التسمية التوضيحية وسلوك الارتباط.

حجم الصورة هو المكان الذي يغادر فيه الأشخاص بالكامل ويندمون. الكامل يعني التحميل الأصلي: يتم تقديم تصدير كاميرا بدقة 4000 بكسل في شريحة بدقة 400 بكسل. قام WordPress بالفعل بإنشاء إصدارات أصغر؛ يختار medium_large أو large وسوف تقوم بخفض وزن الكاروسيل بمعظمه دون أي فرق واضح.

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

الخطوة 3: الملاحة

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

• أقل من 8 شرائح: نقاط. يمكن للناس رؤية المجموعة بأكملها في لمحة والقفز حولها.
• 8 إلى 20: السهام فقط. عشرون نقطة هي مسحة وليست تحكمًا.
• أكثر من 20: الأسهم بالإضافة إلى الكسر (“04/32”). الرقم هو الشيء الوحيد الذي يخبر الشخص بمكان وجوده.

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

الخطوة 4: سلوك الكاروسيل

هذه هي اللجنة التي تقرر ما إذا كان الكاروسيل يبدو صحيحًا.

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

الشرائح للتمرير. اضبطه على 1 لإحساس التصفح المستمر، أو قم بمطابقة الشرائح لكل عرض للترحيل على نمط الصفحة. تكون المطابقة أفضل عندما تشكل الشرائح مجموعات؛ 1 أفضل لمجموعة طويلة غير متمايزة.

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

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

سرعة. 300 إلى 500 مللي ثانية. أقل من 200 يبدو وكأنه قطع وليس انتقال؛ يبدأ أكثر من 800 شخص بالنقر مرتين.

تخطيط تدفق الغلاف

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

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

إعدادان للوصول إلى اليمين: قم بالتدوير بين 30 و40 درجة (50 الماضية وتصبح الشرائح الجانبية شرائح غير قابلة للقراءة)، ثم قم بتمركز الشرائح، أو توضع الصورة النشطة على اليسار وتنهار التركيبة.

يعد Coverflow واحدًا من أربعة أنماط تعتمد على العمق. الوجه والقوس والمدار هي الثلاثة الأخرى، و دليل دائري Elementor 3D يغطي ما هو جيد لكل واحد.

تصميم الشرائح

تتعامل علامة التبويب النمطية مع التباعد بين الشرائح ونصف قطر الحدود والظلال وحالات التحويم.

الإعداد يستحق التفكير الثاني هو فجوة. الفجوة الصفرية تجعل الرف الدائري يُقرأ كشريط صورة واحد مستمر، وهو مناسب للبانوراما وخاطئ للعناصر المميزة. 16 إلى 24px هو النطاق الذي تُقرأ فيه الشرائح كبطاقات منفصلة دون أن يبدو الصف متناثرًا.

تأثيرات التمرير (المقياس ، التراكب ، كشف التسمية التوضيحية) تنطبق على المجموعة بأكملها ، وليس لكل شريحة. حافظ على المقياس أقل من 1.05. الشريحة التي تنمو بنسبة 15٪ عند التمرير تندفع إلى جيرانها وتبدو وكأنها خطأ في التخطيط. للحصول على رسوم متحركة مختلفة في كل صورة ، ضع تأثيرات تحوم الصورة الحاجيات في شبكة.

Lightbox والتسميات التوضيحية

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

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

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

إذا كنت تريد التنقل الصورة المصغرة

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

هل تريد علامات تبويب الفئات بدلاً من الصف المنزلق؟ هذه أداة مختلفة. ال معرض الصور القابلة للتصفية يضع الصور في شبكة ويقوم بتصفيتها عندما ينقر شخص ما على علامة تبويب.

العرض المباشر

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

تصميم السهم

الحجم واللون والخلفية ونصف قطر الحدود والموضع: داخل الرف الدائري أو خارجه أو تداخل الحواف.

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

النتيجة

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

حفظ كل صورة بنفس الارتفاع

تُظهر الدوارة كل صورة بنسبتها الخاصة ، لذا فإن الصورة الشخصية بجانب المناظر الطبيعية تترك فجوة تحت الشريحة الأقصر. الإصلاح النظيف هو اقتصاص الصور إلى نسبة واحدة قبل تحميلها. إذا لم تتمكن من إضافة فئة CSS إلى الأداة، على سبيل المثال same-height، ولصق هذا في CSS المخصص الخاص بك:

.same-height .swiper-slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

يبلغ طول كل شريحة 260 بكسل ويقوم المتصفح بزراعة كل ما لا يناسبه.

إذا كنت تريد تمرير مستمر

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

إعطاء كل صورة رابطها الخاص

ال القطعة الدائرية الصورة يفتح كل صورة في Lightbox ولا يحتوي على حقل ارتباط. يحتوي Carousel الخاص بـ Elementor على إعداد عنوان URL مخصص ، ولكنه يرسل كل شريحة إلى نفس العنوان. عندما يحتاج كل عنصر إلى وجهته الخاصة ، مثل شعارات العميل أو شارات الشريك ، قم بإنشاء الصف باستخدام شريط تمرير الشعار.

خطأان يجعلان الكاروسيل بطيئًا

تقديم صور بالحجم الكامل. مغطاة أعلاه، وهي الكبيرة. يمكن أن يصل حجم الكاروسيل المكون من عشر شرائح بالحجم الكامل في موقع التصوير الفوتوغرافي إلى 20 ميجابايت. نفس الكاروسيل في large أقل من 2 ميجابايت ولا يمكن لأحد أن يقول ذلك.

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

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

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