خلفية

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

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

ما يفعله حقل الخلفية #

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

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Promo Banner” الذي يحتوي صندوقه الخارجي على الفئة promo-banner.

كيفية إضافة حقل الخلفية #

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

شرح خيارات حقل الخلفية #

• ملصق يقوم بتسمية الحقل في المنشئ، على سبيل المثال “Banner Background”. في Elementor، يرى المحررون عنوان القسم وعنصر تحكم يسمى نوع الخلفية.
• اسم هو المعرف الفريد للحقل. الحروف والأرقام والشرطات السفلية فقط.
• وصف هي ملاحظة لك داخل البناء.
• أنواع يضبط أنواع الخلفية التي يمكن للمحررين اختيارها: Classic وGradient وVideo وSlideshow. حقل جديد يعرض الكلاسيكية والتدرج.
• يشمل و يستبعد تهدف إلى إضافة أو إخفاء إعدادات فردية داخل عنصر التحكم. في اختباراتنا لم يغير أي منهما لوحة العنصر. لا يشمل إظهار الصورة افتراضيًا، ومع ذلك يظل إعداد الصورة موجودًا، لذا اترك كليهما كما هما.

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

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

اضبط المحدد #

يخبر المحدد Elementor بالعنصر الذي يحصل على الخلفية. بالنسبة للشعار، فهو الفئة الموجودة في المربع الخارجي:

.promo-banner

ليس عليك الكتابة {{WRAPPER}} لهذا الحقل. يضيفه المنشئ أمام المحدد الخاص بك، لذلك .promo-banner يصبح {{WRAPPER}} .promo-banner ويؤثر فقط على هذه الأداة. مع قائمة مفصولة بفواصل، يحصل كل جزء على جزء خاص به {{WRAPPER}}. إذا كان المحدد فارغًا، فستستمر الخلفية على الغلاف الخارجي لعنصر واجهة المستخدم بدلاً من العنصر الخاص بك.

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

.promo-banner {
  background-color: #1f1147;
  color: #ffffff;
}

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

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

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

انقر فوق أيقونة الفرشاة ل كلاسيكي واختيار أ لون. يتم تحديث اللافتة على الفور.

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

انقر على الأيقونة الثانية ل التدرج. تعيين الأول لون ولها موقع، ال اللون الثاني وموقعه، ثم اختر خطي مع زاوية أو شعاعي مع موقف.

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

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

نصائح للعمل مع حقل الخلفية #

• احتفظ دائمًا بالرجوع background-color في علامة التبويب CSS. ويغطي عناصر واجهة المستخدم الجديدة واللحظة التي تسبق تحميل الصورة.
• إبقاء النص قابلاً للقراءة على الصور. يضيف شعار المثال طبقة داكنة مع .promo-banner::before و isolation: isolate على الصندوق، يظل النص الأبيض مقروءًا في الصور الساطعة.
• أشر إلى المحدد في عنصر واحد. تعد العديد من حقول الخلفية في محددات مختلفة أسهل للمحررين من حقل واحد مشترك بين العديد من الأجزاء.
• التزم بالكلاسيكية والتدرج في الأنواع لعناصر واجهة المستخدم المخصصة.
• للحصول على لون مسطح واحد بدون صورة أو تدرج، فإن مجال اللون أبسط للمحررين.

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

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

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