ال حقل ظل الصندوق يضع التحكم القياسي في الظل الخاص بـ Elementor في لوحة عنصر واجهة المستخدم المخصص لديك: الإزاحة الأفقية والرأسية، والتعتيم، والانتشار، واللون مع العتامة، والتبديل الداخلي. داخل الإضافات الرئيسية منشئ القطعةهو الحقل الذي يتيح للمحررين رفع البطاقة من الصفحة، أو تخفيف الزر، أو تجويف الإدخال دون لمس ورقة الأنماط.
يدعم التحكم في Box Shadow شروط، طريقة نظيفة لإظهارها فقط عند تشغيل تبديل الظل، ويتم التعامل مع إخراج الرمز المميز عبر أداة الإنشاء بواسطة محرك قالب بناء جملة الغصين. يغطي كلا الدليلين الإعداد والقيود.
Box Shadow هو عنصر تحكم في المجموعة، وهو نفس عائلة الطباعة والخلفية. الاتصال بأداة واجهة المستخدم الخاصة بك هو محدد CSS، وليس رمزًا مميزًا: يمكنك إخبار الحقل بالعنصر الذي تقوم بإنشائه، ويكتب Elementor الظل هناك بمفرده.
ما يفعله حقل Box Shadow #
- يعرض التحكم في مجموعة الظل الصندوقية لـ Elementor، مفتوح من أيقونة القلم الرصاص بجوار ملصق الحقل.
- الإزاحات الأفقية والرأسية ضع الظل حول العنصر.
- طمس وانتشار التحكم في النعومة والوصول.
- لون يتضمن قناة ألفا، ومن هنا تأتي معظم جودة الظل.
- تبديل الموقف التبديل بين الظل الخارجي والإدخال.
- يكتب CSS نفسه إلى المحدد الذي تقدمه؛ لا يوجد رمز القالب.
إذا كنت جديدًا في بناء الأدوات، فإن نظرة عامة على منشئ القطعة هو المكان المناسب للبدء.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة الشهادة التي
<article class="quote-card">يجب أن تحمل ظلًا يتحكم فيه المحرر.
كيفية إضافة حقل ظل الصندوق #
في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد صندوق الظل الحقل، مُدرج مع حقول مجموعة الأنماط الأخرى مثل الخلفية وظل النص.
اسحبه إلى قسم أسفل أسلوب علامة التبويب، عادةً بجانب حقلي الحدود والأبعاد في قسم تصميم البطاقة. بمجرد هبوطه، تفتح خيارات الحقل على اليسار.
تم شرح خيارات حقل ظل الصندوق #
- ملصق: النص الموضح بجوار عنصر التحكم في Elementor، على سبيل المثال “Card Shadow”.
- اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط.
- محدد: محدد CSS الذي ينطبق عليه الظل. هذا هو الاتصال نفسه، الذي سيتم تغطيته بعد ذلك.
- خيارات الحقول: تجاوزات لعناصر التحكم الفرعية داخل المجموعة، مثل تغيير القيمة الافتراضية التي يبدأ منها الظل.
- الوصف وإظهار الملصق والفاصل والشروط هي خيارات العرض المعتادة.
أشر إلى الحقل في المحدد الخاص بك #
مثل كل مجموعة تحكم، لا يحتوي حقل Box Shadow على {{shortcode}} لCSS الخاص بك. الظل عبارة عن عدة قيم يتم دمجها في خاصية واحدة، و {{ token }} بالنسبة للمجال لا يطبع شيئا مفيدا. ال محدد الخيار هو الاتصال بأكمله.
بالنسبة لبطاقة الشهادة، المحدد هو:
{{WRAPPER}} .quote-card
{{WRAPPER}}يرمز إلى الحاوية الخاصة بعنصر واجهة المستخدم ويحافظ على نطاق الظل لهذا العنصر. تستخدم عناصر التحكم في المجموعة المحدد تمامًا أثناء كتابته، لذا اكتب{{WRAPPER}}نفسك..quote-cardهو العنصر الموجود داخل عنصر واجهة المستخدم HTML الذي يهبط عليه الظل.
انتبه: محدد بدون {{WRAPPER}} مباريات كل .quote-card على الصفحة، تقوم إعدادات الظل الخاصة بعنصر واجهة المستخدم بإعادة تصميمها جميعًا. لا شيء يحذرك؛ انتشرت الأنماط ببساطة.
احتفظ بظل احتياطي في علامة التبويب CSS الخاصة بعنصر واجهة المستخدم إذا كان التصميم يعتمد على واحد. إنها النظرة عند القطرة الأولى، وتتولى قيم عنصر التحكم المهمة بمجرد أن يفتح المحرر النافذة المنبثقة.
استخدم عنصر التحكم Box Shadow في Elementor #
ضع عنصر واجهة المستخدم على صفحة في Elementor، وأعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. يعرض عنصر التحكم التسمية الخاصة بك باستخدام أيقونة قلم رصاص؛ يؤدي النقر فوقه إلى فتح نافذة الظل المنبثقة.
اضبط اللون أولاً، ثم اسحب Blur لأعلى وحافظ على الإزاحات صغيرة لمظهر البطاقة الناعمة، أو ادفع Vertical لأعلى بدون Blur للحصول على ظل رسومي ثابت. قم بقلب الموضع للإدراج للحقول والآبار المضغوطة. تتبع المعاينة كل تغيير. ملاحظة تخطيط واحدة: لا تشغل الظلال أي مساحة في التدفق، لذلك يمكن أن ينزف انتشار كبير في الأقسام الموجودة أعلى وأسفل دون تحريك أي شيء، وهو ما يستحق التحقق عندما تكون الأداة بين صفوف ضيقة.
حالات الاستخدام الشائعة #
- بطاقات في الشهادة والتسعير وأدوات الفريق، حيث يفصل الظل الناعم البطاقة عن الصفحة.
- أزرار التي تحتاج إلى عمق في الحالة الافتراضية.
- إطارات الصور، إعطاء الصور حافة مرفوعة تشبه الطباعة.
- القضبان والألواح اللاصقة حيث يشير الظل إلى الارتفاع فوق المحتوى.
- تعيين حقول النموذج، باستخدام التبديل الداخلي للحصول على مظهر غائر.
نصائح للعمل مع حقل Box Shadow #
- خيار المحدد هو الاتصال بأكمله. لا يوجد رمز ظل مربع لعلامة تبويب CSS؛ توقع واحد هو الطريق المسدود الأكثر شيوعًا مع عناصر التحكم في المجموعة.
- ابدأ دائمًا المحدد بـ
{{WRAPPER}}. يستخدمه الحقل بشكل خام، ويتركه ينسكب الظل على كل عنصر مطابق في الصفحة. - قم بتجميعها مع الحدود والأبعاد. تشكل الحقول الثلاثة معًا قسمًا كاملاً لتصميم البطاقة في اللوحة.
- اعتمد على اللون ألفا، وليس الظلام. الظل الأسود بنسبة عتامة تتراوح من 10 إلى 15 بالمائة يقرأ بشكل أفضل من الظل الرمادي الصلب، وهو يستحق ملاحظة في وصف الحقل الخاص بك.
- احتفظ بنسخة احتياطية في عنصر واجهة المستخدم CSS. إذا كان التصميم يحتاج إلى ظل افتراضيًا، فقم بشحنه في ورقة الأنماط ودع عنصر التحكم يتجاوزه.
الأسئلة المتداولة #
ما هو حقل Box Shadow في Master Addons Widget Builder؟
فهو يضيف عنصر تحكم مجموعة ظل مربع Elementor إلى عنصر واجهة مستخدم مخصص، يغطي الإزاحات، والتمويه، والانتشار، واللون، والتبديل الداخلي. يمكنك توجيه الحقل إلى محدد CSS مثل {{WRAPPER}} .quote-cardويكتب العنصر الظل إلى ذلك المحدد.
أين يوجد الرمز القصير لظل المربع لعلامة التبويب CSS؟
لا يوجد. Box Shadow عبارة عن عنصر تحكم جماعي، لذا لا تتم طباعة قيمته أبدًا من خلال ملف {{token}}؛ رمز مميز لأنه لا يخرج شيئًا مفيدًا. املأ خيار المحدد بدلاً من ذلك وسيتم إنشاء CSS لك.
لماذا يظهر ظلي على عناصر واجهة المستخدم الأخرى أيضًا؟
المحدد مفقود {{WRAPPER}}. تطبق عناصر التحكم في المجموعة المحدد تمامًا كما هو مكتوب، لذا .quote-card وحده أنماط كل مباراة على الصفحة. تغييره إلى {{WRAPPER}} .quote-card وحفظ.
هل يمكنني عمل ظل داخلي؟
نعم. يقوم تبديل موضع المنبثق بتحويل الظل إلى الداخل، مما يسحبه داخل حواف العنصر، وهو العلاج المعتاد للمدخلات والآبار الغائرة.
ما هو إعداد خيارات الحقول؟
فهو يتجاوز عناصر التحكم الفرعية الفردية داخل المجموعة، على سبيل المثال إعطاء الظل قيمة بداية محددة مسبقًا بحيث يفتح عنصر التحكم بظل قابل للاستخدام بدلاً من الظل الفارغ.
هل يتعارض الظل الموجود في عنصر واجهة المستخدم CSS الخاص بي مع عنصر التحكم؟
رقم. ظل ورقة الأنماط هو المظهر الافتراضي، ويتجاوزه إخراج عنصر التحكم بمجرد قيام المحرر بتعيين القيم. الاحتفاظ بالرجوع هناك هو الإعداد الموصى به.
إلتحاق بالركب #
يمنح حقل Widget Builder Box Shadow المحررين تحكمًا حقيقيًا في العمق: حقل واحد، محدد واحد يبدأ بـ {{WRAPPER}}، ويظهر الظل المنبثق بالكامل في اللوحة. إنه يعمل على نفس نموذج المحدد مثل مجال الطباعة، لذلك ينتقل الإعداد مباشرة بين عناصر تحكم المجموعة. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.
