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

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

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

ما تحتاجه

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

الخطوة 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. نفس المجموعة لديها قاعدة البطل المنزلقشريط تمرير بطل كامل النزيف مع روابط لكل شريحة، وهو أيضًا مجاني للاستيراد. عشرين تصميما مسماة في المجموع، ثمانية منهم أحرار.

تصميم السهم

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

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

النتيجة

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

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

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

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

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

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