يضيف حقل Box Shadow عنصر التحكم في ظل مربع Elementor إلى عنصر واجهة مستخدم مخصص تم إنشاؤه باستخدام الإضافات الرئيسية منشئ القطعة. يقوم المحررون بتعيين اللون والإزاحات والطمس والانتشار والموضع من نافذة منبثقة صغيرة، ويتم تطبيق الظل على العنصر الذي يشير إليه محدد CSS الخاص بك. إنه الحقل لرفع البطاقات من الصفحة أو تخفيف الأزرار أو إعطاء اللوحة مظهرًا مضغوطًا.
Box Shadow هو حقل احترافي. يتضمن البرنامج الإضافي المجاني أداة إنشاء عناصر واجهة مستخدم محدودة، وتأتي المجموعة الكاملة من الحقول مع ماستر أدونز برو.
ما يفعله حقل Box Shadow #
- فهو يضيف عنصر تحكم واحدًا إلى علامة التبويب "نمط" الخاصة بأداة واجهة المستخدم الخاصة بك: الملصق الخاص بك وأيقونة القلم الرصاص التي تفتح إعدادات الظل.
- الإعدادات هي اللون والأفقي والرأسي والضبابية والانتشار والموضع (المخطط التفصيلي أو الداخلي).
- العنصر يكتب
box-shadowCSS إلى العنصر الموجود في المحدد، لذلك لا تحتاج إلى رمز مميز في HTML أو CSS.
إذا لم تكن قد قمت ببناء عنصر واجهة مستخدم بعد، فاقرأ نظرة عامة على منشئ القطعة أولاً.
قبل أن تبدأ #
- WordPress مع تثبيت Elementor ونشطه.
- الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
- عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Testimonial Card” الذي تحتوي بطاقته على الفئة
quote-card.
كيفية إضافة حقل ظل الصندوق #
- اذهب الى الإضافات الرئيسية > منشئ القطعة وافتح القطعة الخاصة بك.
- انقر فوق أسلوب قم بعلامة التبويب وإضافة قسم، على سبيل المثال “Card Style”.
- يكتب
shadowفي مربع البحث الميداني على اليسار. يظهر Box Shadow وText Shadow. - يجر صندوق الظل في القسم. فتح إعداداته في الشريط الجانبي الأيسر.
تم شرح خيارات حقل ظل الصندوق #
- ملصق هو النص الموجود بجوار عنصر التحكم في Elementor، على سبيل المثال “Card Shadow”.
- اسم هو المعرف الفريد للحقل. الحروف والأرقام والشرطات السفلية فقط.
- وصف هي ملاحظة لك داخل البناء.
- محدد, نوع الظل الافتراضي, قيم الظل الافتراضية و لون الظل الافتراضي تظهر تحت الوصف. في اختباراتنا، لم يتم حفظ التغييرات المكتوبة في هذه المربعات وقام المنشئ بتسجيل خطأ، لذا لا تعتمد عليها في الوقت الحالي. قم بتعيين المحدد في الإعدادات الشائعة بدلاً من ذلك (القسم التالي) وأعط البطاقة ظل البداية في علامة التبويب CSS.
- القيمة الافتراضية لا يستخدم في هذا المجال.
اضبط المحدد #
قم بالتمرير إلى أسفل الشريط الجانبي واكتب فئة العنصر في محدد مربع تحت فئات التحكم. للحصول على بطاقة الشهادة:
.quote-card
ليس عليك الكتابة {{WRAPPER}}. يضيفه المنشئ أمام المحدد الخاص بك، فتصبح القاعدة {{WRAPPER}} .quote-card ويؤثر فقط على هذه القطعة. افصل عدة محددات بفواصل إذا كان يجب تطبيق ظل واحد على أكثر من عنصر واحد. إذا كان المحدد فارغًا، فسيستمر الظل على الغلاف الخارجي لعنصر واجهة المستخدم.
بعد الحفظ، يعرض مربع المحدد الموجود بالقرب من الجزء العلوي من الشريط الجانبي نفس القيمة.
أضف ظلًا احتياطيًا #
ضع ظل البداية في علامة التبويب CSS. يظهر حتى يقوم المحرر بتشغيل عنصر التحكم، ويستبدله ظل عنصر التحكم بعد ذلك
.quote-card {
box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}
انقر حفظ الإعدادات عندما تنتهي.
استخدم عنصر التحكم Box Shadow في Elementor #
أضف عنصر واجهة المستخدم إلى صفحة، أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. حدد عنصر واجهة المستخدم وافتح أسلوب علامة التبويب. تظهر التسمية الخاصة بك مع رمز قلم الرصاص.
انقر فوق القلم الرصاص لفتح النافذة المنبثقة. يؤدي ذلك إلى تشغيل الظل باستخدام قيم البداية الخاصة بـ Elementor: Horizontal 0، Vertical 0، Blur 10، Spread 0 والأسود بنسبة عتامة 50%. اضبطها وتحديثات البطاقة أثناء السحب
- لون يضبط لون الظل والعتامة. يبدو اللون الملون وشبه الشفاف أكثر نعومة من اللون الأسود.
- أفقي و عمودي حرك الظل جانبًا ولأعلى أو لأسفل.
- طمس ينعم الحافة. 0 يعطي ظلًا صلبًا.
- ينتشر ينمو الظل أو يقلصه. القيمة السالبة الصغيرة تمنع الضبابية الكبيرة من الانسكاب إلى الجوانب.
- موضع التبديل بين المخطط التفصيلي (خارج المربع) والمدخل الداخلي (داخله).
تعيين الموقف ل في مجموعة للحصول على مظهر مضغوط، مفيد لحقول الإدخال واللوحات الهادئة
يقوم السهم الدائري الموجود بجوار القلم بإعادة ضبط عنصر التحكم وإزالة الظل.
حالات الاستخدام الشائعة #
- البطاقات في أدوات الشهادة والتسعير والفريق والمدونة.
- الأزرار التي تحتاج إلى القليل من العمق، غالبًا ما تقترن بأسلوب التحليق.
- ظلال إزاحة صلبة لتصميمات جريئة ومسطحة.
- قم بتعيين الظلال على حقول الإدخال وأشرطة البحث واللوحات الغائرة.
نصائح للعمل مع حقل Box Shadow #
- استخدم المحدد الموجود أسفل الشريط الجانبي، واكتب الفئة فقط.
{{WRAPPER}}يضاف لك. - احتفظ باحتياطي
box-shadowفي علامة التبويب CSS، لا تبدو عناصر واجهة المستخدم الجديدة مسطحة. - بالنسبة لظلال البطاقات الناعمة، جرب Blur كبير، وإزاحة رأسية تبلغ حوالي نصف التمويه، وانتشار سلبي صغير.
- أعط العنصر نصف قطر حدودي. تتبع الظلال الزوايا، لذلك تحصل البطاقات المستديرة على ظلال مستديرة.
- للظلال على النص، استخدم حقل ظل النص بدلاً من.
الأسئلة المتداولة #
هل حقل Box Shadow مجاني؟
يعد No. Box Shadow أحد حقول Pro في Widget Builder، لذا يجب أن يكون Master Addons Pro نشطًا قبل أن تتمكن من إضافته إلى عنصر واجهة المستخدم.
هل أحتاج إلى إضافة {{WRAPPER}} إلى المحدد؟
لا يضيف البناء {{WRAPPER}} أمام محدد Box Shadow لك، لذا .quote-card يكفي.
لماذا لا يتم حفظ نوع الظل الافتراضي أو قيم الظل الافتراضية الخاصة بي؟
في اختباراتنا، لم تحتفظ هذه المربعات بتغييراتها. اضبط ظل البداية بـ box-shadow القاعدة في علامة التبويب CSS بدلاً من ذلك. يمكن للمحررين بعد ذلك تغييره باستخدام عنصر التحكم.
أين يوجد رمز ظل الصندوق الخاص بـ CSS الخاص بي؟
ليس هناك واحدة لاستخدامها. الظل عبارة عن عدة قيم في خاصية CSS واحدة، لذلك يكتب Elementor القاعدة إلى المحدد نيابةً عنك.
ما الفرق بين Box Shadow وText Shadow؟
يرسم Box Shadow حول مربع العنصر ويحتوي على Spread وInset. يتبع Text Shadow أحرف النص. استخدم Box Shadow للبطاقات والأزرار، وText Shadow للعناوين.
إلتحاق بالركب #
أضف حقل Box Shadow إلى قسم الأنماط، واكتب فئة العنصر الخاص بك في المحدد الموجود أسفل الشريط الجانبي، واحتفظ بظل احتياطي خفيف في علامة التبويب CSS. ثم يتحكم المحررون في الظل من نافذة منبثقة واحدة. بالنسبة لبقية تصميم البطاقة، راجع حدود و أبعاد الحقول، والتحقق التسعير لما تتضمنه كل خطة.
