أبعاد

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

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

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

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

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Pricing Card” مع price-card صندوق و price-btn حقول الزر وثلاثة أبعاد: حشو البطاقة، ونصف قطر البطاقة، وحشو الزر.

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

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

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

هنا حقل حشو البطاقة:

• ملصق هو النص الموجود أعلى المربعات في Elementor، على سبيل المثال “Card Padding”.
• اسم هو المعرف الفريد للحقل. الحروف والأرقام والشرطات السفلية فقط.
• وصف يظهر تحت السيطرة في Elementor.
• الأبعاد المسموح بها يحتوي على أربعة أزرار أسهم للأعلى واليمين والأسفل واليسار. انقر فوق سهم لإيقاف تشغيل هذا الجانب. في Elementor، يظهر الجانب الذي تم إيقاف تشغيله كمربع رمادي لا يمكن تحريره.
• نوع العقار يقدم مخصصًا وهامشًا وحشوًا وعرض الحدود ونصف قطر الحدود. اختر واحدًا ويقوم المنشئ بملء صف محددات CSS لتلك الخاصية (المزيد حول هذا أدناه). يضيف عرض الحدود أيضًا border-style: solid.
• وحدات الحجم يسرد الوحدات التي يمكن للمحررين اختيارها. حقل جديد يسمح بـ px و% وem وrem وvh وvw. قم بإزالة تلك التي لا معنى لها بالنسبة لتصميمك.
• القيمة الافتراضية يحتوي على أربعة مربعات لقيم البداية العلوية واليمنى والسفلى واليسرى.

يحتاج حقل حشو الأزرار إلى اليسار واليمين فقط، لذلك يتم إيقاف تشغيل الأسهم العلوية والسفلية

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

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

كل محددات CSS الصف لديه محدد CSS (أي عنصر للأسلوب) و خصائص CSS (قاعدة الكتابة). عند اختيار الحشو كنوع الخاصية، يبدأ الصف على النحو التالي

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} في حد ذاته يعني القطعة بأكملها. قم بتغييره إلى العنصر الذي تريده، مثل .price-card. يمكنك المغادرة {{WRAPPER}} out، لأن المنشئ يضيفها أمام المحدد الخاص بك بحيث تظل القاعدة داخل عنصر واجهة المستخدم هذا.

في خصائص CSS، {{TOP}}, {{RIGHT}}, {{BOTTOM}} و {{LEFT}} يتم استبدالها بالأرقام من المربعات الأربعة، و {{UNIT}} مع الوحدة المختارة. مع ضبط نوع الخاصية على مخصص، يمكنك كتابة القاعدة بنفسك. يستخدم حقل حشو الأزرار جانبين فقط

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

انقر إضافة عنصر لتطبيق نفس القيمة على عنصر آخر مع الصف الثاني.

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

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

يمكنك أيضًا طباعة القيم مباشرةً في علامة التبويب HTML أو CSS. الحقل يحمل top, right, bottom, left و unit، لذا اكتب كل جانب متبوعًا بالوحدة:

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

عارية {{ card_padding }} لا يطبع شيئا. بالنسبة لمعظم عناصر واجهة المستخدم، تعد صفوف محددات CSS هي الخيار الأفضل، حيث يكتب Elementor قاعدة منفصلة لكل جهاز عند تشغيل التحكم المستجيب.

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

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

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

اكتب رقمًا وتحديثات البطاقة على الفور. انقر فوق أيقونة الرابط لإلغاء ربط الجوانب وإعطاء كل جانب قيمته الخاصة، كما تفعل Card Padding هنا مع 64 في الأعلى والأسفل و56 على الجانبين. استخدم قائمة الوحدة للتبديل بين الوحدات المسموح بها.

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

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

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

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

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

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

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