أبعاد

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

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

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

ماذا يفعل مجال الأبعاد #

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

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة بطاقة التسعير التي .price-card يجب أن يسمح الصندوق للمحررين بتعيين الحشو الداخلي.

كيفية إضافة حقل الأبعاد #

افتح لوحة الحقول الموجودة على يسار محرر Widget Builder وابحث عن أبعاد الحقل، مدرج مع حقول قيمة CSS الأخرى مثل Slider.

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

تم شرح خيارات مجال الأبعاد #

• ملصق: النص الموجود بجوار عنصر التحكم في Elementor، على سبيل المثال “Card Padding”.
• اسم: المعرف الفريد الذي يشير إليه CSS الخاص بك، الحروف والأرقام والتسطير فقط، على سبيل المثال pad.
• الافتراضي: قيمة البداية، مع الاحتفاظ بالجزء العلوي واليمين والأسفل واليسار والوحدة وما إذا كانت الجوانب تبدأ مرتبطة أم لا.
• وحدات الحجم: الوحدات التي يمكن للمستخدم التبديل بينها، مثل px و% وem.
• الأبعاد المسموح بها: ما هي المدخلات التي تظهر. “All” يظهر أربعة جوانب؛ يظهر “horizontal” اليسار واليمين فقط؛ “vertical” يظهر الأعلى والأسفل فقط؛ قائمة مخصصة تختار جوانب محددة.
• مستجيب: يضيف رمز الجهاز حتى يحتفظ سطح المكتب والكمبيوتر اللوحي والهاتف المحمول بقيم منفصلة.
• يعمل الوصف وإظهار الملصق والفاصل والشروط هنا كما هو الحال في أي مجال آخر.

قم بتوصيل قيمة الأبعاد بـ CSS الخاص بك #

القيمة المخزنة عبارة عن مصفوفة تحتوي على المفاتيح top, right, bottom, left, unit، و isLinked. في لوحة CSS، اشرح الجوانب الأربعة وكرر الوحدة بعد كل جانب

.price-card {
  padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}

مع تحديد 24 على كل جانب وpx، يتم عرض القاعدة كـ padding: 24px 24px 24px 24px;. قم بفك ربط الجوانب الموجودة في اللوحة وكل رمز يحمل رقمه الخاص. يغطي نفس النمط margin وجنبًا إلى جنب في كل زاوية، border-radius. إحدى ميزات CSS التي تستحق التذكر إذا كنت تقدم % كوحدة: يتم حل نسبة الحشو مقابل عرض العنصر، حتى بالنسبة للجزء العلوي والسفلي، ولن يتوقع المحررون ذلك.

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

استخدم التحكم في الأبعاد في Elementor #

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

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

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

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

نصائح للعمل مع مجال الأبعاد #

• تهجئة كل جانب والوحدة. اتصال لوحة CSS عبارة عن أربعة رموز مميزة بالإضافة إلى أربعة رموز مميزة للوحدة؛ عارية {{ pad }} لا يطبع أي شيء قابل للاستخدام.
• تخطي حقل المحدد العادي. لا ينبعث منه أي خاصية للأبعاد. لوحة CSS، أو إدخال المحددات الكاملة، هو مسار العمل.
• حدد الجوانب عندما يتطلب العقار ذلك. يحافظ التحكم الأفقي فقط على صدق حقل حشوة الزر.
• قم بتعيين الإعداد الافتراضي المرتبط. البدء بأطراف متساوية ومرتبطة يمنح المحررين خطًا أساسيًا عاقلًا ومدخلًا واحدًا للتفكير فيه.
• حافظ على التباعد الأساسي في ورقة الأنماط الخاصة بك. يجب أن تبدو الأداة مباشرة عند أول قطرة؛ ثم يتم ضبط عنصر التحكم من هناك.
• قم بتشغيل الاستجابة للحشو والهامش. نادرًا ما تنجو المسافات بين سطح المكتب من الاتصال بشاشة الهاتف.

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

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

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