ال حقل المنزلق يضع عنصر تحكم في النطاق من السحب إلى الضبط في لوحة عنصر واجهة المستخدم المخصص لديك، وهو نفس العنصر الذي يستخدمه Elementor للفجوات والعروض ونصف قطر الحدود عبر عناصر واجهة المستخدم الخاصة به. داخل الإضافات الرئيسية منشئ القطعة، تقوم بتعيين الحد الأدنى والحد الأقصى والخطوة والوحدات التي يمكن للمستخدم الاختيار من بينها. من يقوم بتحرير عنصر واجهة المستخدم في Elementor، فإنه يسحب المقبض بدلاً من كتابة قيم CSS الأولية.
يدعم حقل المنزلق شروط مثل كل عنصر تحكم، وبما أن قيمته رقمية، فإن محرك قالب بناء جملة الغصين يتيح لك التفرع عليه مع مقارنات مثل {% if columns >= 3 %}. يغطي كلا الدليلين الإعداد والقيود.
القيمة التي ينتجها شريط التمرير ليست رقمًا عاديًا. إنه زوج: حجم ووحدة. تحدد هذه التفاصيل كيفية توصيل الحقل بورقة الأنماط الخاصة بك، لذلك يقضي هذا المستند معظم وقته هناك.
ما يفعله حقل المنزلق #
- يعرض شريط تمرير النطاق باستخدام مقبض قابل للسحب ومدخل رقمي بجواره، قم بمطابقة عناصر التحكم الأصلية في شريط التمرير الخاص بـ Elementor.
- يقدم محول الوحدة عندما تسمح بأكثر من وحدة واحدة، يمكن أن يعمل نفس التحكم في px أو % أو em.
- يخزن الحجم والوحدة معًا كقيمة واحدة، تقرأ لوحة CSS الخاصة بك بتدوين نقطي.
- يدعم القيم المستجيبة، السماح للمستخدمين بتعيين حجم مختلف لكل جهاز عن رمز الجهاز.
- يقبل القيم الديناميكية ويمكنه كتابة CSS من خلال آلية محددات Elementor كبديل للوحة CSS.
جديد لبناء الحاجيات؟ اقرأ نظرة عامة على منشئ القطعة أولاً؛ يفترض هذا المستند أن لديك بالفعل عنصر واجهة مستخدم مفتوحًا في المحرر.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو شبكة بطاقات الفريق التي
.team-rowتحتاج الحاوية إلى فجوة قابلة للتعديل من قبل المستخدم بين البطاقات.
كيفية إضافة حقل المنزلق #
في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد المنزلق الحقل، مدرج مع حقول قيمة CSS الأخرى مثل الأبعاد.
اسحبه إلى قسم أسفل أسلوب علامة التبويب، حيث توجد عادةً عناصر التحكم في الحجم، على الرغم من أن المحتوى والمتقدم يعملان أيضًا. بمجرد هبوطه، تفتح خيارات الحقل على اليسار.
شرح خيارات حقل المنزلق #
- ملصق: النص الموجود بجوار عنصر التحكم في Elementor، على سبيل المثال “Card Gap”.
- اسم: المعرف الفريد الذي يشير إليه CSS الخاص بك، الحروف والأرقام والتسطير فقط، على سبيل المثال
my_gap. - الافتراضي: قيمة البداية، مخزنة كحجم بالإضافة إلى وحدة.
- الحد الأدنى، الحد الأقصى، الخطوة: النطاق الذي يغطيه المقبض ومدى تحرك كل زيادة سحب. قد يتم تشغيل التحكم في الفجوة من 0 إلى 100 في خطوات من 1.
- وحدات الحجم: الوحدات التي يمكن للمستخدم التبديل بينها، مثل px و% وem. وحدة واحدة تخفي المحول؛ العديد تظهر ذلك.
- مستجيب: يضيف رمز الجهاز بحيث تحتفظ كل نقطة توقف بقيمتها الخاصة.
- ديناميكي و المحددات: دعم العلامات الديناميكية وآلية محددات Elementor المغطاة أدناه.
- الوصف، وإظهار التسمية، والفاصل، والشروط هي نفس خيارات العرض التي يحملها كل حقل.
قم بتوصيل شريط التمرير بـ CSS الخاص بك #
قيمة شريط التمرير عبارة عن مصفوفة تحتوي على مفتاحين size و unit. طباعة اسم الحقل على مخرجاته الخاصة لا شيء، لأنه لا توجد قيمة واحدة للطباعة. في لوحة CSS، اكتب دائمًا كلا الجزأين بتدوين نقطي
.team-row {
gap: {{ my_gap.size }}{{ my_gap.unit }};
}قيمة 24 مع px المحدد يتم عرضها كـ gap: 24px;. قم بتغيير محول الوحدة إلى % وتصبح نفس القاعدة gap: 24%; دون لمس القالب.
احترس: {{ my_gap }} يطبع بمفرده سلسلة فارغة. إذا تم عرض القاعدة الخاصة بك كـ gap: ; والتخطيط يتجاهل التحكم، المفقود .size و .unit هي دائما تقريبا السبب. يتبع نفس الصمت إعادة تسمية: قم بتغيير اسم الحقل لاحقًا وستستمر الرموز القديمة في العرض، فقط مع عدم وجود أي شيء فيها، لذا قم بتحديث لوحة CSS في نفس الجلسة.
بديل المحددات #
تعمل أشرطة التمرير أيضًا مع آلية محددات Elementor، التي تكتب CSS لك بدلاً من المرور عبر لوحة CSS. بالنسبة لشريط التمرير، يقوم Elementor بإدخال قيمة مجردة بدلاً من الإعلان الكامل، وبالتالي فإن حقل المحدد العادي الخاص بالمنشئ وحده لا ينتج قاعدة قابلة للاستخدام. يجب أن يحمل إدخال المحددات المخصصة الخاصية الكاملة، باستخدام العناصر النائبة الخاصة بـ Elementor
'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'بالنسبة لمعظم عناصر واجهة المستخدم، يعد رمز لوحة CSS هو المسار الأبسط؛ الوصول إلى إدخالات المحددات عندما تريد أن يقوم Elementor بإدارة الإخراج.
استخدم عنصر التحكم Slider في Elementor #
أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor. إذا كانت الصفحة مفتوحة بالفعل، فأعد تحميل المحرر أولاً، نظرًا لأن علامة التبويب القديمة تستمر في عرض اللوحة القديمة. يظهر شريط التمرير في لوحة عنصر واجهة المستخدم مع التسمية والمقبض والمدخل الرقمي ومبدل الوحدة إذا سمحت بأكثر من وحدة واحدة.
اسحب المقبض أو اكتب رقمًا وستتبع المعاينة على الفور. مع تشغيل Responsive، يقوم رمز الجهاز بتبديل التحكم بين قيم سطح المكتب والكمبيوتر اللوحي والهاتف المحمول، بحيث يمكن أن تتقلص فجوة سطح المكتب 40 بكسل إلى 16 بكسل على الهواتف من نفس الحقل.
حالات الاستخدام الشائعة #
- فجوات الشبكة والمرونة بين البطاقات أو الأعمدة أو عناصر المعرض.
- عرض العناصر وارتفاعاتها، مثل حجم الصورة أو طول المقسم، مع خيار % للتخطيطات المرنة.
- نصف قطر الحدود على البطاقات والأزرار عندما يكون نصف القطر الموحد كافيًا.
- حجم الأيقونة والخط حيث تحتفظ وحدة em بالأشياء المتعلقة بالنص المحيط.
- إزاحات التباعد مثل المسافة بين الشارة والزاوية التي تقع فيها.
نصائح للعمل مع حقل المنزلق #
- قم دائمًا بطباعة كلا الجزأين.
{{ my_gap.size }}{{ my_gap.unit }}هو الاتصال بأكمله؛ اسم الحقل العاري يعطيك سلسلة فارغة. - قم بمطابقة الحد الأدنى والحد الأقصى والخطوة إلى العقار. نطاق 0 000 في خطوات 1 يناسب الفجوة؛ قد يحتاج التحكم في نصف القطر إلى 0 بوصة 50 فقط.
- تقديم فقط الوحدات المنطقية. يكون التحكم في px فقط أكثر وضوحًا من التحكم الذي ينتج فيه % تخطيطات مكسورة.
- احتفظ بنسخة احتياطية في هيكل لوحة CSS. اكتب القاعدة بحيث تظل الأداة موضوعة بشكل معقول عند القيمة الافتراضية عند أول قطرة.
- قم بتشغيل الاستجابة لقيم التخطيط. تحتاج الفجوات والعروض دائمًا إلى إعداد هاتف محمول أكثر إحكامًا.
- تفضل رمز لوحة CSS على حقل المحدد. يقوم حقل المحدد العادي بإدخال قيمة مجردة فقط لشرائح التمرير، وهو ليس إعلانًا كاملاً.
الأسئلة المتداولة #
ما هو حقل شريط التمرير في Master Addons Widget Builder؟
فهو يضيف التحكم في شريط تمرير النطاق الخاص بـ Elementor إلى عنصر واجهة مستخدم مخصص. يمكنك تحديد الحد الأدنى والحد الأقصى والخطوة والوحدات المسموح بها، ويقوم المستخدم بسحب المقبض لتعيين قيمة. يقوم الحقل بتخزين الحجم والوحدة معًا، والتي تطبع بها أداة CSS الخاصة بك {{ name.size }}{{ name.unit }}.
لماذا لا يطبع {{my_slider }} شيئًا؟
القيمة هي مجموعة عقد size و unit، ليست سلسلة واحدة، لذا تخرج الطباعة المباشرة فارغة. استخدم تدوين النقطة لكلا المفتاحين: {{ my_slider.size }}{{ my_slider.unit }}.
كيف يمكنني استخدام قيمة Slider في علامة التبويب CSS؟
اكتب الخاصية بنفسك وقم بإسقاط كلا الرمزين حيث تذهب القيمة، على سبيل المثال gap: {{ my_gap.size }}{{ my_gap.unit }};. يتم تحديث القاعدة عندما يقوم المستخدم بتحريك المقبض أو تبديل الوحدات.
هل يمكن للمستخدمين التبديل بين px و% وem؟
نعم، عند إدراج عدة وحدات في خيار وحدات الحجم. يعرض عنصر التحكم محول الوحدة، و unit يعكس المفتاح الموجود في القيمة كل ما اختاره المستخدم، لذا فإن نفس رمز CSS يغطي كل وحدة.
هل يدعم شريط التمرير القيم المستجيبة؟
نعم. تمكين الخيار المستجيب وسيكتسب عنصر التحكم رمز الجهاز في Elementor، مما يسمح للمستخدم بتخزين قيم منفصلة لنقاط توقف سطح المكتب والكمبيوتر اللوحي والهاتف المحمول.
هل يمكنني استخدام محددات Elementor بدلاً من لوحة CSS؟
يمكنك ذلك، لكن شريط التمرير يحتاج إلى إدخال محددات يوضح الخاصية الكاملة {{SIZE}}{{UNIT}} العناصر النائبة، مثل '{{WRAPPER}} .row' => 'gap: {{SIZE}}{{UNIT}};'. يقوم حقل المحدد العادي فقط بإدخال قيمة مجردة لشرائح التمرير، وهو ما لا يكفي في حد ذاته.
إلتحاق بالركب #
يقوم حقل Widget Builder Slider بتحويل أي طول CSS واحد في عنصر واجهة المستخدم الخاص بك إلى عنصر تحكم يمكن للمحرر سحبه: تسمية الحقل، وربط النطاق، والطباعة {{ name.size }}{{ name.unit }} في لوحة CSS. يقترن بشكل طبيعي مع مجال الأبعاد عندما تحتاج الأداة إلى تباعد رباعي الجوانب إلى جانب القيم الفردية. استكشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.
