المنزلق

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

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

ما يفعله حقل المنزلق #

• يعرض شريط تمرير مع مربع أرقام وقائمة وحدة في لوحة Elementor.
• قمت بتعيين الحد الأدنى والحد الأقصى والخطوة، بالإضافة إلى قيمة البداية.
• القيمة هي رقم ووحدة معًا، مثل 24 وpx.
• يمكنك توصيله بـ CSS الخاص بك باستخدام صف محددات CSS، أو طباعته في علامة التبويب HTML أو CSS باستخدام رمزين مميزين.

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• أداة مفتوحة في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Team Grid” مع شريطي تمرير: Card Gap للمسافة بين البطاقات وAvatar Size للأحرف الأولى من اسم الجولة.

كيفية إضافة حقل المنزلق #

1. اذهب الى الإضافات الرئيسية > منشئ القطعة وافتح القطعة الخاصة بك.
2. انقر فوق أسلوب قم بعلامة التبويب وإضافة قسم، على سبيل المثال “Grid Layout”.
3. يكتب slider في مربع البحث الميداني على اليسار.
4. يجر المنزلق في القسم. فتح إعداداته في الشريط الجانبي الأيسر.

شرح خيارات حقل المنزلق #

• ملصق هو النص الموجود أعلى شريط التمرير في Elementor، على سبيل المثال “Card Gap”.
• اسم هل المعرف الفريد للحقل وبداية الرموز المميزة الخاصة به، إذن card_gap يعطي {{ card_gap.size }}. الحروف والأرقام والتسطير فقط.
• وصف يظهر أسفل شريط التمرير في Elementor.
• الحد الأدنى من القيمة, القيمة القصوى و خطوة اضبط النطاق ومدى انتقال كل حركة للمقبض. تستخدم Card Gap من 0 إلى 80 في خطوات من 2.
• القيمة الافتراضية هو رقم البداية والوحدة، ويتم ضبطهما باستخدام شريط التمرير الصغير وقائمة الوحدة الخاصة بهما.

اكتب قيم Min وMax وStep حتى لو كانت المربعات تظهر بالفعل 0 و100 و1. لا يتم حفظ المربعات التي لم تلمسها أبدًا، ويعود شريط التمرير الذي لم يتم حفظ أي منها إلى نطاقات Elementor: من 0 إلى 1000 لـ px، من 0 إلى 100 لـ %، ومن 0 إلى 10 لـ em وrem. عند ضبطها، يتم استخدام نفس النطاق لكل وحدة، لذلك ينطبق من 0 إلى 80 على em وكذلك px.

لا يوجد إعداد تظهر الوحدات له. يمكن للمحررين اختيار px و% وem وrem. مزيد من أسفل، التحكم المستجيب يضيف رمز الجهاز حتى يكون لسطح المكتب والكمبيوتر اللوحي والهاتف المحمول قيم مختلفة.

قم بتوصيل شريط التمرير بمحددات CSS #

انتقل إلى محددات CSS وانقر إضافة عنصر. الصف الجديد يأتي مليئا بمثال (.text-1, .text-2 و color: {{VALUE}};)، لذا استبدل كلا المربعين:

CSS Selector:   .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};

{{SIZE}} يتم استبداله بالرقم و {{UNIT}} مع الوحدة المختارة، يصبح 24 بكسل gap: 24px;. لا تحتاج {{WRAPPER}} في المحدد لأن المنشئ يضيفه لك. أضف المزيد من الصفوف لاستخدام نفس القيمة على العناصر الأخرى.

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

استخدم القيمة الموجودة في القالب الخاص بك بدلاً من ذلك #

يمكنك أيضًا طباعة القيمة في علامة التبويب HTML أو CSS. اكتب الحجم والوحدة كرمزين بجانب بعضهما البعض. يقوم شريط تمرير حجم الصورة الرمزية بتعيين عرض الصورة الرمزية وارتفاعها بهذه الطريقة

.team-avatar {
  width: {{ avatar_size.size }}{{ avatar_size.unit }};
  height: {{ avatar_size.size }}{{ avatar_size.unit }};
}

عارية {{ avatar_size }} لا يطبع شيئا. يمكنك أيضًا مقارنة الرقم في حالة ما، على سبيل المثال {% if card_gap.size >= 40 %}. عند تشغيل التحكم المستجيب، استخدم صف محددات CSS، حيث يقوم Elementor بعد ذلك بكتابة قاعدة منفصلة لكل جهاز.

انقر حفظ الإعدادات عندما تنتهي.

استخدم عنصر التحكم Slider في Elementor #

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

اسحب المقبض أو اكتب رقمًا، وسيتم تحديث الأداة على الفور. انقر فوق تسمية الوحدة للتبديل بين px و% وem وrem.

هنا يتم رفع الفجوة إلى 48px والصور الرمزية إلى 96px

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

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

نصائح للعمل مع حقل المنزلق #

• اكتب دائمًا Min وMax وStep حتى يكون لشريط التمرير نطاق معقول.
• اختر نطاقًا يناسب كل وحدة قد يختارها المحررون. من 0 إلى 80 مناسب لـ px ولكنه كبير جدًا بالنسبة لـ em.
• احتفظ بقيمة أساسية للخاصية في علامة التبويب CSS، مثل gap: 24px;، لذلك تبدو الأداة مباشرة قبل أن يلمس أي شخص شريط التمرير.
• استبدل نص المثال في صف محددات CSS جديد. إذا ترك الأمر كما هو، فإن الصف يستهدف الفئات التي لا تحتوي عليها عنصر واجهة المستخدم الخاص بك.
• بالنسبة للقيم ذات الجوانب الأربعة، مثل الحشو أو الهامش، استخدم مجال الأبعاد.

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

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

أضف حقل Slider، واكتب Min وMax وStep، وقم بتعيين الإعداد الافتراضي، وقم بتوصيله بصف محددات CSS مثل gap: {{SIZE}}{{UNIT}};. استخدم .size و .unit الرموز المميزة عندما تنتمي القيمة إلى علامة التبويب HTML أو CSS. بالنسبة لعناصر التحكم الأخرى في الحجم، راجع أبعاد و الطباعة الحقول، والتحقق التسعير لما تتضمنه كل خطة.