خلفية

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

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

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

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

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

القطعة الأولى؟ ابدأ بـ نظرة عامة على منشئ القطعة قبل التحكم في مجموعة الأسلاك.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو القطعة البطل التي <div class="hero-box"> يجب أن تأخذ الحاوية خلفية اختارها المحرر.

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

في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد خلفية الحقل، مُدرج مع حقول مجموعة الأنماط الأخرى مثل Typography وBox Shadow.

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

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

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

أشر إلى الحقل في المحدد الخاص بك #

هذا هو الجزء الذي يعرقل الأشخاص إذا اعتادوا على حقول الرمز المميز حقل الخلفية لا يحتوي على {{shortcode}} لCSS الخاص بك. الخلفية عبارة عن حزمة من الخصائص، لذا لا يمكن طباعتها من خلال رمز مميز واحد؛ أ {{ token }} لهذا الحقل لا يخرج أي شيء مفيد. بدلا من ذلك، يمكنك ملء محدد يقوم الخيار والعنصر بإنشاء الأنماط.

بالنسبة لحاوية البطل، المحدد هو:

{{WRAPPER}} .hero-box

• {{WRAPPER}} يرمز إلى الحاوية الخاصة بعنصر واجهة المستخدم، مع تحديد نطاق الخلفية لعنصر واجهة المستخدم هذا وحده. تستخدم عناصر التحكم في المجموعة المحدد تمامًا كما هو مكتوب، لذا تقوم بالكتابة {{WRAPPER}} نفسك؛ لا شيء مُجهز لك.
• .hero-box هو العنصر الموجود داخل عنصر واجهة المستخدم HTML الذي يتلقى الخلفية.

انتبه: غادر {{WRAPPER}} إيقاف والمحدد يطابق كل منهما .hero-box في الصفحة، تصل خلفية عنصر واجهة مستخدم واحد إليها جميعًا. تأخذ عناصر التحكم في المجموعة المحدد بشكل خام، مما يجعل شحن هذا الخطأ أسهل.

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

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

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

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

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

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

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

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

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

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

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