ال مجال الحدود يمنح عنصر واجهة المستخدم المخصص مجموعة كاملة من عناصر التحكم في الحدود في قطرة واحدة: منسدلة نوع الحدود، ومدخلات عرض الحدود لكل جانب، ومنتقي ألوان الحدود. داخل الإضافات الرئيسية منشئ القطعة، تقوم بإضافة الحقل مرة واحدة، ووضع الرمز القصير الخاص به في CSS الخاص بك، ويمكن لأي شخص يقوم بتحرير عنصر واجهة المستخدم في Elementor إعادة تصميم الحدود دون لمس الرمز.
تدعم مراقبة الحدود شروط مثل كل حقل، يمكن أن يظل مخفيًا حتى يتم تشغيل تبديل الحدود، ويتم عرض إخراج الرمز المميز عبر أداة الإنشاء بواسطة محرك قالب بناء جملة الغصين. كلا الدليلين يغطيان التفاصيل.
يتم تعيين الحقل مباشرة إلى CSS border اختصار. مهما كان النوع والعرض واللون الذي يختاره المستخدم في اللوحة، فإنه يطبع في ورقة الأنماط الخاصة بك أينما وضعت الرمز المميز.
ماذا يفعل حقل الحدود #
يعرض حقل الحدود عنصر تحكم مجموعة الحدود المألوف لـ Elementor في لوحة خيارات عنصر واجهة المستخدم الخاص بك. حدد عنصر واجهة المستخدم وتظهر ثلاثة عناصر تحكم ذات صلة
- نوع الحدود: منسدلة تحتوي على الافتراضي، ولا شيء، والصلب، والمزدوج، والمنقط، والمتقطع، والأخدود.
- عرض الحدود: المدخلات العلوية واليمنى والسفلية واليسرى مع تبديل الارتباط لتعيين الأربعة جميعًا مرة واحدة، بالإضافة إلى رمز الجهاز للقيم المستجيبة.
- لون الحدود: منتقي الألوان مع إمكانية الوصول إلى الألوان العالمية الخاصة بك.
تظل عناصر التحكم في العرض واللون مخفية حتى يختار المستخدم نوع حد آخر غير الافتراضي أو لا شيء، مما يحافظ على نظافة اللوحة عندما لا تكون هناك حدود قيد الاستخدام. هذا هو نفس نمط حقل النص وحقول Widget Builder الأخرى: قم بإسقاط الحقل، وقم بتسميته، واستخدم الرمز المميز. إذا كنت جديدًا في إنشاء عناصر واجهة المستخدم، فابدأ بـ نظرة عامة على منشئ القطعة أولاً.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو عنصر واجهة مستخدم للعنوان مع
<h2 class="border-title">في HTML الخاص به.
كيفية إضافة حقل الحدود #
في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد حدود حقل. يقع بالقرب من أسفل القائمة، بين الخلفية وظل النص.
اسحب حقل الحدود إلى قسم أسفل محتوى, أسلوب، أو متقدم علامة التبويب. النمط هو الموطن الطبيعي له، على الرغم من أنه يعمل في أي مكان. بمجرد هبوطه، تفتح خيارات الحقل على اليسار ويظهر الرمز القصير الخاص به في التوثيق الشريط الجانبي بجوار محرر التعليمات البرمجية.
شرح خيارات حقل الحدود #
حدد حقل الحدود لفتح إعداداته. إنهم يتبعون نفس التخطيط مثل أي حقل Widget Builder آخر.
- ملصق: النص الموضح أعلاه عنصر التحكم في Elementor، “Border” افتراضيًا.
- اسم: المعرف الفريد للحقل. يجب أن تحتوي فقط على الحروف والأرقام والشرطات السفلية. حقل اسمه
borderيعطيك{{border}}الرمز القصير. - وصف: النص المساعد الاختياري الموضح أسفل عنصر التحكم.
- القيمة الافتراضية: الحدود التي تبدأ بها الأداة، مكتوبة كاختصار CSS، على سبيل المثال
1px solid #333. اتركه فارغًا وستأتي الأداة بدون حدود حتى يقوم المستخدم بتعيينها. - إظهار التسمية و كتلة التسمية: يتم تبديل الملصق القياسي، بالإضافة إلى أدوات التحكم المعتادة في الفاصل والشروط.
قم بتوصيل الحقل بـ CSS الخاص بك #
ينتمي الرمز المميز لحقل Border إلى ورقة الأنماط الخاصة بك، وليس إلى HTML الخاص بك. افتح CSS علامة التبويب واستخدامها كقيمة border الملكية على أي محدد يجب أن يحمل الحدود. مع مثال العنوان الخاص بنا:
- تقرأ القاعدة
border: {{border}};داخل.border-titleمحدد. - في وقت العرض، يتم توسيع الرمز المميز إلى الاختصار الكامل الذي اختاره المستخدم، مثل
5px solid #e02b20.
انقر حفظ الإعدادات عندما تكون القاعدة في مكانها الصحيح. يمكنك إسقاط نفس الرمز المميز على أي محدد في الأداة، بحيث يمكن لوحدة تحكم حدودية واحدة تحديد الخطوط العريضة للبطاقة أو صورتها أو كليهما.
استخدم مراقبة الحدود في Elementor #
أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor، أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. حدد عنصر واجهة المستخدم وسيظهر عنصر التحكم في الحدود في لوحته مع التسمية التي قمت بتعيينها.
اختر نوع الحدود #
ال نوع الحدود يسرد Dropdown الافتراضي، ولا شيء، والصلب، والمزدوج، والمنقط، والمتقطع، والأخدود. اختر أي نوع آخر غير الافتراضي أو لا شيء ويظهر تحته عنصران تحكمان آخران: عرض الحدود ولون الحدود. يتم تحديث المعاينة بمجرد اختيارك، لذا فإن اختيار Dashed يرسم مخططًا تفصيليًا متقطعًا حول عنصر واجهة المستخدم على الفور.
ضبط عرض الحدود #
ال عرض الحدود يأخذ التحكم قيمًا علوية ويمينية وسفلية ويسارية منفصلة. احتفظ برمز الارتباط لتغيير الجوانب الأربعة معًا، أو قم بإلغاء ربطه لحدود غير متساوية، مثل الجزء العلوي والسفلي السميك مع جوانب رفيعة. يتيح لك رمز الجهاز الموجود بجوار الملصق ضبط عروض مختلفة لكل نقطة توقف.
اختر لون الحدود #
ال لون الحدود يفتح التحكم منتقي الألوان الخاص بـ Elementor. استخدم أيقونة الكرة الأرضية للسحب من الألوان العامة الخاصة بك، أو اختر قيمة مخصصة باستخدام المنتقي والإدخال السداسي أو RGBA أو HSLA.
كل تغيير يهبط مباشرة في المعاينة. في مثالنا، ينتهي العنوان بحد أحمر ثابت، 5 بكسل في الأعلى والأسفل و3 بكسل على الجانبين.
حالات الاستخدام الشائعة #
- الخطوط العريضة للبطاقة والصندوق حيث يحتاج كل موقع إلى وزن ولون حدودي خاص به.
- العناوين البارزة مثل العنوان المعبأ في هذا المثال.
- إطارات الصور على عناصر واجهة المستخدم الخاصة بالفريق أو المحفظة أو المنتج.
- أنماط الأزرار حيث يحتاج متغير المخطط التفصيلي إلى حدود قابلة للتحرير من قبل المستخدم.
- صناديق النداء والإشعار هذا التبديل بين الأنماط الصلبة والمتقطعة.
نصائح للعمل مع مجال الحدود #
- ضع الرمز المميز في CSS، وليس HTML. يتوسع الرمز القصير إلى قيمة CSS، لذلك يكون منطقيًا فقط كقيمة خاصية مثل
border: {{border}};. - قم بتعيين قيمة افتراضية في شكل مختصر. شيء مثل
1px solid #333يجعل الأداة تبدو منتهية قبل أن يفتح أي شخص اللوحة. - إقرانه مع نصف القطر الحدودي. يغطي الحقل النوع والعرض واللون. أضف حقل الأبعاد أو ثابتًا
border-radiusقاعدة للزوايا المستديرة. - تذكر أن لا شيء هو خيار حقيقي. يمكن للمستخدمين إيقاف تشغيل الحد من اللوحة، لذا لا تعتمد على الحد لتثبيت التخطيط معًا.
- أعد استخدام الرمز المميز حيث يساعد. نفس الشيء
{{border}}يمكن للقيمة تصميم عدة محددات، وجميعها تتبع عنصر التحكم الواحد.
الأسئلة المتداولة #
ما هو حقل الحدود في Master Addons Widget Builder؟
يضيف حقل الحدود عنصر تحكم مجموعة الحدود الخاص بـ Elementor إلى عنصر واجهة مستخدم مخصص: منسدلة نوع الحدود، ومدخلات عرض الحدود لكل جانب، ومنتقي ألوان الحدود. يقوم الرمز القصير الخاص به بطباعة اختصار حدود CSS الناتج في ورقة أنماط عنصر واجهة المستخدم الخاص بك.
أين أضع الرمز القصير للحدود؟
في علامة التبويب CSS الخاصة بمنشئ عناصر واجهة المستخدم، كقيمة خاصية الحدود. يتم استخدام حقل يسمى الحدود كحدود: {{border}}؛ على المحدد الذي يجب أن يحمل الحدود. لا ينتمي إلى محرر HTML.
ما هي أنواع الحدود التي تدعمها المراقبة؟
يوفر المنسدلة من نوع Border Type العناصر الافتراضية، ولا شيء، والصلبة، والمزدوجة، والمنقطة، والمتقطعة، والأخدود. يؤدي اختيار أي نوع باستثناء الافتراضي أو لا شيء إلى الكشف عن عناصر التحكم في عرض الحدود ولون الحدود أسفل القائمة المنسدلة.
هل يمكن للمستخدمين تعيين عرض حدود مختلف على كل جانب؟
نعم. يحتوي التحكم في عرض الحدود على مدخلات منفصلة لأعلى ولليمين ولأسفل ولليسار. يغير تبديل الارتباط الأربعة معًا؛ قم بإلغاء ربطه لتعيين قيم غير متساوية، مثل 5 بكسل في الأعلى والأسفل مع 3 بكسل على الجانبين.
لماذا لا أرى عرض الحدود واللون في اللوحة؟
تظل عناصر التحكم هذه مخفية بينما يكون Border Type افتراضيًا أو لا شيء. اختر Solid أو Dashed أو أي نوع مرئي آخر وسيظهر كلا عنصري التحكم. إذا كان عنصر التحكم في الحدود بالكامل مفقودًا، فأعد تحميل محرر Elementor حتى يلتقط الأداة المحفوظة.
إلتحاق بالركب #
يحتوي حقل Widget Builder Border على شريط منسدل من نوع الحدود، وعروض سريعة الاستجابة لكل جانب، ومنتقي ألوان في سحب وإسقاط واحد. قم بتسمية الحقل، اضبطه border: {{border}}; في CSS الخاص بك، تنتقل القرارات الحدودية من ورقة الأنماط الخاصة بك إلى لوحة Elementor حيث يمكن للمحررين التعامل معها. ادمجها مع حقل النص و أ مقسم لإنشاء لوحة عناصر واجهة مستخدم تغطي المحتوى والأسلوب في مكان واحد. استكشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.
