يقوم جدار شعارات العملاء بدفع بقية صفحتك إلى الأسفل ولا يزال يعرض سوى عدد قليل من العلامات التجارية. يقوم شريط تمرير الشعار بتركيب القائمة بأكملها في شريط واحد مدمج يدور من تلقاء نفسه. ال شريط تمرير الشعار القطعة في الإضافات الرئيسية للعنصر يبني هذا الشريط من أي مجموعة من صور الشعار، ثم يضيف تأثيرات التمرير وتلميحات الأدوات والتشغيل التلقائي وأسهم التنقل بدون مكون إضافي منفصل لشريط التمرير.
يمكن ربط كل شعار بموقع العميل، أو التبديل إلى صورة ثانية عند التمرير، أو الكشف عن اسم العلامة التجارية ووصف قصير. يمر هذا الدليل عبر الأداة من السحب الأول على اللوحة القماشية إلى الرف الدائري النهائي على الصفحة المباشرة.
ما تفعله أداة Logo Slider #
تأخذ الأداة قائمة بصور الشعار وتحولها إلى دائري سريع الاستجابة يتم تشغيله تلقائيًا. يمكنك التحكم في عدد الشعارات التي تظهر في وقت واحد، ومدى سرعة دورانها، وما يحدث عندما يحوم الزائر فوق واحدة. يعمل على محرك Swiper، لذا فإن شريط التمرير سهل اللمس على الهواتف والأجهزة اللوحية منذ البداية.
إنه موجود في مجموعة Slider Widgets من Master Addons، بجوار صورة دائري و معرض المنزلق الحاجيات. تم تصميم هذين الاثنين للصور والمعارض. تم تصميم شريط تمرير الشعار لعلامات العلامة التجارية: تظل الشعارات صغيرة ومتباعدة بشكل متساوٍ ومحاذية في صف واحد.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- شعارات العميل أو الشريك الخاصة بك جاهزة كملفات صور. تبدو الشعارات ذات الأبعاد نفسها أفضل؛ يعمل شيء حوالي 300 في 150 بكسل بخلفية شفافة أو بيضاء بشكل جيد.
كيفية إضافة عنصر واجهة المستخدم Logo Slider #
في محرر Elementor، افتح عناصر لوحة والبحث عن شريط تمرير الشعار، أو قم بالتمرير إلى قسم الإضافات الرئيسية. اسحب عنصر واجهة المستخدم إلى صفحتك. يتم تحميله بستة عناصر نائبة تسمى اسم العلامة التجارية، بحيث ترى شكل شريط التمرير على الفور وتستبدل العناصر النائبة واحدًا تلو الآخر.
أضف شعاراتك في قسم عناصر الشعار #
في ال محتوى علامة التبويب، فتح عناصر الشعار. كل إدخال في القائمة عبارة عن شعار واحد. انقر فوق عنصر لتوسيعه، أو استخدم أيقونات النسخ والحذف الموجودة على يمين كل صف. ال إضافة عنصر يقوم الزر الموجود في الأسفل بتوسيع القائمة لتشمل أكبر عدد ممكن من الشعارات.
ضمن قائمة العناصر، توجد ثلاثة إعدادات تنطبق على شريط التمرير بأكمله
- دقة الصورة: الحجم الذي يخدمه WordPress لكل شعار، بدءًا من الصورة المصغرة وحتى Full. الشعارات عبارة عن ملفات صغيرة، لذا عادةً ما يكون Full جيدًا.
- عنوان علامة HTML: علامة العنوان ملفوفة حول اسم العلامة التجارية عند التمرير، H5 افتراضيًا. اختر علامة تناسب بنية عنوان صفحتك.
- حدد الحدث: ما الذي يؤدي إلى تأثير التحويم. كما لاحظت اللوحة، يتم تشغيل هذا فقط عند تمكين نوع التحويم على شعار العميل.
داخل كل عنصر، انقر فوق شعار العميل حقل لفتح مكتبة الوسائط WordPress. قم بتحميل ملفات الشعار الخاصة بك أو اختر الملفات الموجودة بالفعل. تعرض لوحة المرفقات أبعاد الملف، وهي مفيدة للتحقق من أن جميع الشعارات تشترك في نفس الحجم.
قم بتعيين الرابط وتأثير التمرير لكل شعار #
كل عنصر شعار يحمل خاصته وصلة حقل. الصق عنوان URL الخاص بالعميل ويصبح الشعار قابلاً للنقر عليه في الصفحة المباشرة. يفتح رمز الترس خيارات رابط Elementor المعتادة، مثل الفتح في علامة تبويب جديدة.
ال يحوم؟ يقرر Dropdown ما يحدث عندما يقوم الزائر بتحريك الماوس فوق الشعار. لديها ثلاثة أوضاع:
- لا أحد: الشعار موجود هناك. نظيفة وبسيطة.
- نص: الشعار يتلاشى و اسم العلامة التجارية زائد قصير وصف تظهر في مكانها.
- صورة: يتم تبديل الشعار إلى الصورة الثانية التي تختارها.
مع نص المحدد، يظهر حقلان. اكتب اسم العلامة التجارية ووصفًا من سطر واحد، وتظهرهما الأداة فوق الشعار عند التمرير. وهذا يناسب الوكالات التي تريد أن تقول ما فعلته لكل عميل دون مغادرة شريط التمرير.
مع صورة مختارة، أ تحوم صورة الشعار يظهر الحقل بدلاً من ذلك. خدعة شائعة: استخدم شعارًا بتدرج رمادي كصورة رئيسية ونسخة كاملة الألوان كصورة تحوم، بحيث تضيء الشعارات أثناء تحرك الزوار عبر الشريط.
أضف تلميح أداة إلى الشعار #
كل عنصر لديه أيضا تلميح الأدوات تبديل. قم بتشغيله وستظهر فقاعة صغيرة عندما يحوم الزوار فوق هذا الشعار. ال إعدادات علامة التبويب تتحكم في السلوك:
- محتوى: النص الموجود داخل تلميح الأداة.
- التنسيب: حيث توجد الفقاعة، قم بالتدوين بشكل افتراضي.
- اتبع المؤشر: دع تلميح الأداة يتتبع الماوس بدلاً من البقاء ثابتًا.
- الرسوم المتحركة والمشغل: كيفية ظهور تلميح الأداة، قم بالتمرير على Hover افتراضيًا.
ال أسلوب تقوم علامة التبويب بجانب الإعدادات بتصميم الفقاعة نفسها: الألوان والطباعة والتباعد. تعمل تلميحات الأدوات بشكل جيد مع التسميات القصيرة مثل “Partner منذ عام 2019” والتي لا تحتاج إلى وضع تمرير النص الكامل.
قم بإعداد أسهم الملاحة #
افتح ال ملاحة قسم للتحكم في كيفية تحريك الزوار لشريط التمرير يدويًا. ال ملاحة يقوم Dropdown بتعيين نوع التحكم، مع الأسهم كخيار قياسي.
- إظهار شريط التمرير؟: يضيف شريطًا قابلاً للسحب أسفل شريط التمرير.
- موضع الأسهم: يضع المركز سهمًا واحدًا على كل جانب من شريط التمرير. يقوم المركز العلوي أو المركز السفلي بتجميع السهمين الموجود أعلى أو أسفله.
- التنسيب: يحتفظ بالأسهم داخل صندوق التمرير أو يحركها خارجه.
- إخفاء السهم على الجوال؟: قم بإسقاط الأسهم على شاشات صغيرة، حيث يقوم التمرير بالمهمة.
- الأيقونة التالية والأيقونة السابقة: قم بتبديل الشارات الافتراضية بأي رمز في مكتبة Elementor.
ضبط سلوك دائري #
ال إعدادات دائري يقوم القسم بتحريك حركة شريط التمرير. هذا هو المكان الذي يصبح فيه صف ثابت من الشعارات هو الشريط الدوار الذي يتوقعه الزوار.
- الشرائح لكل عمود: كم عدد الشعارات التي تظهر في وقت واحد، من 1 إلى 6. أربعة أو خمسة تناسب معظم تخطيطات سطح المكتب، ويتيح لك الرمز سريع الاستجابة تعيين عدد أصغر لكل جهاز.
- تخطيط: الكاروسيل هو شريط التمرير المسطح القياسي.
- الارتفاع التلقائي: يتيح لارتفاع شريط التمرير متابعة صف الشعار.
- سرعة التشغيل التلقائي والتشغيل التلقائي: قم بتدوير الشعارات تلقائيًا. السرعة هي التأخير بالمللي ثانية، لذا فإن 5000 تعني مجموعة جديدة كل خمس ثوانٍ.
- وقفة على تحوم: يوقف الدوران أثناء وجود المؤشر فوق شريط التمرير، والذي يقترن جيدًا بتأثيرات التمرير وتلميحات الأدوات.
- الشرائح للتمرير: كم عدد الشعارات التي تتقدم في كل خطوة.
- الشريحة المركزية، مؤشر الإمساك، وضع السحب الحر: قم بتوسيط الشعار النشط، أو إظهار مؤشر الإمساك، أو السماح للزوار برمي الشريط بحرية.
- حلقة: يقوم بتشغيل شريط التمرير إلى ما لا نهاية، وهو ما يريده شريط الشعار دائمًا تقريبًا. شيء واحد يجب مشاهدته: تحتاج الحلقة إلى شعارات أكثر من عدد الشرائح لكل عمود. مع خمسة أعمدة وخمسة شعارات فقط، لا يوجد شيء إضافي يمكن تدويره.
قم بتصميم شريط تمرير الشعار #
التبديل إلى أسلوب علامة التبويب. تغطي أربعة أقسام مظهر شريط التمرير: عناصر الكاروسيل، وعناصر الكاروسيل، والتحليق، والأيقونة، والملاحة.
عناصر دائري #
يقوم هذا القسم بتأطير كل خلية شعار، بالحالات العادية والتحويمية والنشطة.
- الخلفية، نوع الحدود، نصف قطر الحدود، ظل الصندوق: امنح كل شعار إطارًا على شكل بطاقة، أو اترك كل شيء فارغًا للحصول على شريط نظيف.
- الحشو وفجوة العنصر: المساحة داخل كل خلية والمسافة بين الشعارات. الفجوة هي أسرع طريقة لجعل شريط التنفس مزدحمًا.
- وضع الظل والعتامة: ظلال حافة ناعمة وشفافية للشعارات.
تحوم عناصر الكاروسيل #
يقوم هذا القسم بتصميم حالة التمرير التي اخترتها في علامة التبويب "المحتوى"، بما في ذلك تراكب النص.
- الخلفية، الحدود، الظل الصندوقي، الحشو، الهامش: الإطار حول شعار يحوم.
- لون الاسم، طباعة الاسم، التباعد: نص اسم العلامة التجارية الذي يظهر في وضع تمرير النص.
أيقونة #
يقوم قسم الأيقونة بتصميم الأيقونة الصغيرة الموضحة بمحتوى التمرير: لونها وخلفيتها وحدودها وحشوها وهامشها وحجم الخط.
سهام الملاحة #
يقوم قسم التنقل بتصميم أزرار الأسهم، مع حالتين عاديتين وحوامة منفصلتين.
- اللون والخلفية: الصورة الرمزية للسهم والزر الموجود خلفه.
- نوع الحدود، نصف قطر الحدود، الحشو، الحجم: تشكيل الأزرار؛ نصف القطر الكامل يجعل الأزرار المستديرة التي تراها في معظم المواقع الحديثة.
- المسافة بين الأسهم: الفجوة بين الزرين عندما يجلسان معًا أعلى شريط التمرير أو أسفله.
النتيجة على الصفحة #
قم بالمعاينة أو النشر، وسيتم تشغيل شريط التمرير مباشرة: تدور الشعارات على مؤقت التشغيل التلقائي، وتستجيب للأسهم، وتطلق تأثيرات التمرير وتلميحات الأدوات الخاصة بها. هنا الشريط النهائي الذي يحتوي على خمسة شعارات لكل عرض وسهم على كل جانب.
حالات الاستخدام الشائعة #
- شرائط شعار العميل على الصفحات الرئيسية للوكالة والمستقلين، مع ربط كل شعار بدراسة حالة.
- دوارات الشريك والراعي للأحداث والمنظمات غير الربحية وصفحات تكامل SaaS.
- ظهرت R“As في أشرطة الصحافة” مع شعارات النشر المرتبطة بالتغطية.
- يعرض العلامة التجارية على مواقع الموزعين وتجار التجزئة التي تدرج الملصقات التي تحملها.
- مكدسات التكنولوجيا على مواقع المحفظة، استخدام تلميحات الأدوات لتسمية كل أداة.
نصائح للحصول على شريط تمرير شعار أفضل #
- احتفظ بكل شعار بنفس الحجم. الأبعاد المختلطة تجعل الصف يقفز أثناء انزلاقه. يؤدي تصدير جميع الشعارات على لوحات قماشية متطابقة، مثل 300 في 150، إلى الحفاظ على ثبات الشريط.
- استخدم التمرير الرمادي إلى اللون. قم بتعيين صورة رئيسية ذات تدرج رمادي ونسخة ملونة كصورة شعار Hover. يبقى الشريط هادئا حتى يتفاعل معه الزوار.
- قم بتشغيل إيقاف مؤقت عند التمرير باستخدام التشغيل التلقائي. لا أحد يستطيع قراءة تلميح أداة على هدف متحرك.
- إخفاء الأسهم على الهاتف المحمول. يحل الضرب محلهم، ويظل الشريط نظيفًا على الشاشات الصغيرة.
- قم بمطابقة الشرائح لكل عمود بعرض الشعار. تحتاج شعارات العلامات النصية العريضة إلى أعمدة أقل من علامات الأيقونات المدمجة. إذا بدا الشعار مضغوطًا، فقم بإسقاط العدد بمقدار واحد قبل لمس ملفات الصور.
الأسئلة المتداولة #
كيف يمكنني إضافة شريط تمرير الشعار في Elementor؟
قم بتثبيت الإضافات الرئيسية لـ Elementor، ثم اسحب عنصر واجهة مستخدم Logo Slider إلى صفحتك. افتح عناصر الشعار في علامة التبويب "المحتوى"، وأضف عنصرًا واحدًا لكل شعار، وقم بتحميل كل صورة من مكتبة الوسائط. يتم تكوين أسهم التشغيل التلقائي والحلقة والتنقل في نفس اللوحة.
هل يمكن ربط كل شعار بموقع ويب مختلف؟
نعم. كل عنصر شعار له حقل الارتباط الخاص به. الصق عنوان URL الخاص بالعميل أو الشريك هناك ويصبح الشعار قابلاً للنقر عليه. يضيف رمز الترس الموجود بجانب الحقل خيارات رابط Elementor القياسية، بما في ذلك فتح الرابط في علامة تبويب جديدة.
هل يمكن تغيير الشعار عند التمرير؟
نعم. ضبط التحويم؟ خيار داخل عنصر الشعار للصورة واختيار صورة ثانية، وهو خيار شائع لتأثيرات التدرج الرمادي إلى اللون. اختر نصًا بدلاً من ذلك لإظهار اسم العلامة التجارية ووصفًا قصيرًا فوق الشعار عند التحويم.
هل يتم التشغيل التلقائي لشعار التمرير والتكرار؟
نعم. في إعدادات الكاروسيل، قم بتشغيل التشغيل التلقائي واضبط سرعة التشغيل التلقائي بالمللي ثانية، حيث يعني 5000 خمس ثوانٍ لكل خطوة. قم بتمكين الحلقة بحيث يدور الشريط إلى ما لا نهاية، وأضف إيقافًا مؤقتًا عند التمرير حتى يتوقف أثناء نظر الزوار.
هل أداة Logo Slider مجانية؟
يأتي Logo Slider مزودًا بـ Master Addons ويظهر في مجموعة Slider Widgets بلوحة الخيارات. قم بتثبيت البرنامج المساعد، وتأكد من تمكين عنصر واجهة المستخدم هناك، وسيظهر في لوحة Elementor Elements ضمن Master Addons.
إلتحاق بالركب #
تغطي أداة Logo Slider المهمة الكاملة لشعار العميل الدائري في Elementor: مكرر للشعارات، وروابط لكل شعار وتأثيرات التمرير، وتلميحات الأدوات، والتشغيل التلقائي مع الحلقة، والتصميم وصولاً إلى أزرار الأسهم. للحصول على أشرطة تمرير الصور والمعرض، انظر إلى صورة دائري و معرض المنزلق الحاجيات. تصفح المجموعة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما يضيفه Pro في الأعلى.
