ال حقل ظل النص يضيف التحكم في ظل النص الخاص بـ Elementor إلى عنصر واجهة المستخدم المخصص لديك: الإزاحة الأفقية والرأسية، والتعتيم، واللون مع العتامة، ويتم تطبيقه على أي نص يشير إليه المحدد. داخل الإضافات الرئيسية منشئ القطعةإنها أسرع طريقة للسماح للمحررين بالاحتفاظ بالعنوان الرئيسي قابلاً للقراءة على صورة مشغولة أو إعطاء نوع العرض دفعة دقيقة.
مثل كل عنصر تحكم في Widget Builder، يدعم Text Shadow شروط، مفيد للكشف عنه فقط عند تمكين خيار الظل، ويتم تشغيل إخراج الرمز المميز عبر المنشئ عبر محرك قالب بناء جملة الغصين. يغطي كلا الدليلين الإعداد والقيود.
Text Shadow هو عنصر تحكم جماعي، وهو الأصغر في العائلة الذي يتضمن الطباعة والخلفية. الأسلاك متطابقة: لا يوجد رمز مميز في CSS الخاص بك، فقط خيار محدد يخبر Elementor بالعنصر الذي سيتم تصميمه.
ما يفعله حقل ظل النص #
- يعرض عنصر التحكم في مجموعة الظل النصية لـ Elementor، مفتوح من أيقونة القلم الرصاص بجوار ملصق الحقل.
- الإزاحات الأفقية والرأسية ضع الظل حول الحروف الرسومية.
- طمس ينعمها، من حافة مكررة صلبة إلى توهج واسع.
- لون يتضمن قناة ألفا للظلال الواقعية منخفضة العتامة.
- يكتب CSS نفسه إلى المحدد الذي تقدمه؛ لا يوجد رمز القالب.
لم تقم ببناء عنصر واجهة مستخدم من قبل؟ ابدأ بـ نظرة عامة على منشئ القطعة وارجع بمجرد أن يكون لديك واحدة مفتوحة.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة لافتة الصور مع
<h2 class="banner-title">العنوان يجلس على الصورة.
كيفية إضافة حقل ظل النص #
في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد ظل النص الحقل، مُدرج مع حقول مجموعة الأنماط الأخرى مثل Typography وBox Shadow.
اسحبه إلى قسم أسفل أسلوب علامة التبويب، عادةً ما تكون بجوار حقل الطباعة الذي يقوم بتصميم نفس النص. بمجرد هبوطه، تفتح خيارات الحقل على اليسار.
تم شرح خيارات حقل ظل النص #
- ملصق: النص الموضح بجوار عنصر التحكم في Elementor، على سبيل المثال “Title Shadow”.
- اسم: المعرف الفريد للحقل والحروف والأرقام والتسطير فقط.
- محدد: محدد CSS الذي ينطبق عليه الظل. هذا هو الاتصال نفسه، الذي سيتم تغطيته بعد ذلك.
- يستثنى من: يزيل عناصر التحكم الفرعية الفردية من المجموعة عندما تريد نافذة منبثقة مشذبة.
- الوصف وإظهار الملصق والفاصل والشروط هي خيارات العرض القياسية التي رأيتها في الحقول الأخرى.
أشر إلى الحقل في المحدد الخاص بك #
مثل ضوابط المجموعة الأخرى، لا يحتوي حقل Text Shadow على {{shortcode}} لCSS الخاص بك. يقوم الظل بتجميع الإزاحات والطمس واللون في خاصية واحدة، لذا أ {{ token }} بالنسبة للمجال لا يطبع شيئا مفيدا. ال محدد الخيار يحمل الاتصال بأكمله.
بالنسبة لعنوان الشعار، المحدد هو:
{{WRAPPER}} .banner-title
{{WRAPPER}}يرمز إلى الحاوية الخاصة بعنصر واجهة المستخدم، مع الاحتفاظ بالظل داخل عنصر واجهة المستخدم هذا. تقوم عناصر التحكم في المجموعة بتطبيق المحدد كما هو مكتوب، لذلك{{WRAPPER}}هل لك أن تكتب؛ لم تتم إضافته بالنسبة لك..banner-titleهو عنصر النص الموجود داخل عنصر واجهة المستخدم HTML الخاص بك.
انتبه: تخطي {{WRAPPER}} وأنماط المحدد كل .banner-title عبر الصفحة، بما في ذلك تلك الموجودة في عناصر واجهة المستخدم الأخرى. الإعداد يعكس مجال الطباعة بالضبط، المحدد الذي يعمل هناك يعمل هنا.
إذا كان التصميم يستدعي ظلًا افتراضيًا، فاحتفظ به في علامة تبويب CSS الخاصة بعنصر واجهة المستخدم كبديل. يتجاوزه عنصر التحكم بمجرد قيام المحرر بتعيين القيم.
استخدم عنصر تحكم Text Shadow في Elementor #
أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor، أو أعد تحميل المحرر إذا كان مفتوحًا بالفعل. يعرض عنصر التحكم التسمية الخاصة بك وأيقونة القلم الرصاص التي تفتح نافذة الظل المنبثقة.
اختر لونًا، ثم اضبط Blur والإزاحتين. الظل الداكن عند العتامة المنخفضة مع بضع بكسلات من التمويه يحافظ على العنوان مقروءًا أثناء التصوير الفوتوغرافي؛ الإزاحات الأكبر مع عدم وجود ضبابية تنتج تأثير عرض قديم. تحديثات المعاينة مع كل تغيير. اضبط النتيجة على أخف صورة من المحتمل أن يستخدمها الموقع، وليس فقط الصورة التجريبية، لأن الظل الذي يتم الاتصال به على خلفية داكنة يمكن أن يختفي تمامًا على خلفية مشرقة.
حالات الاستخدام الشائعة #
- العناوين فوق الصور في عناصر واجهة المستخدم الخاصة بالبطل واللافتة، حيث يقوم الظل بإعادة شراء التباين.
- النص على خلفيات الفيديو، والتي تتغير باستمرار وتحتاج إلى حافة إضافية.
- عرض تأثيرات النوع مثل ظلال الإزاحة الصلبة على الأرقام الكبيرة.
- نص خفيف على الصور الخفيفة، حيث تحافظ الهالة الداكنة الناعمة على التسميات التوضيحية قابلة للقراءة.
- الشارات والتسميات الجلوس على التدرجات أو المناطق المنقوشة.
نصائح للعمل مع حقل Text Shadow #
- خيار المحدد هو الاتصال بأكمله. لا يوجد رمز مميز لعناصر تحكم المجموعة، لذلك لا يوجد شيء في علامة التبويب CSS لهذا الحقل.
- ابدأ دائمًا المحدد بـ
{{WRAPPER}}. يتم استخدامه بشكل خام، وبدونه يصل الظل إلى كل عنصر مطابق في الصفحة. - قم بإقرانه بحقل الطباعة على نفس المحدد. ثم يتم وضع قرارات الخط والظل لعنوان واحد معًا في اللوحة.
- تفضل الألوان منخفضة العتامة. الظلال المبنية من قناة ألفا الملونة موجودة في التصميم؛ نادرًا ما يفعل اللون الأسود الصلب.
- استخدم استبعاد للتبسيط. إذا كانت الأداة تحتاج فقط إلى التمويه واللون، فإن تقليم المجموعة يبقي النافذة المنبثقة صغيرة.
- قم بشحن نسخة احتياطية في علامة التبويب CSS عندما يعتمد التصميم الافتراضي على وجود الظل هناك.
الأسئلة المتداولة #
ما هو حقل Text Shadow في Master Addons Widget Builder؟
فهو يضيف عنصر تحكم مجموعة الظل النصية الخاصة بـ Elementor إلى عنصر واجهة مستخدم مخصص، مع إزاحة أفقية ورأسية، وطمس، ولون. يمكنك توجيه الحقل إلى محدد CSS مثل {{WRAPPER}} .banner-title، ويكتب Elementor الظل لهذا النص.
أين يوجد الرمز القصير لظل النص لعلامة التبويب CSS؟
لا يوجد. Text Shadow هو عنصر تحكم جماعي، لذا لا تتم طباعة قيمته أبدًا من خلال ملف {{token}}؛ رمز مميز لأنه لا يخرج شيئًا مفيدًا. قم بتعيين خيار المحدد بدلاً من ذلك وسيتم إنشاء CSS لك.
كيف يختلف Text Shadow عن Box Shadow؟
يقوم Text Shadow بسحب الظل من الحروف الرسومية للنص نفسه ولا يحتوي على إعدادات انتشار أو إدراج. Box Shadow مستمد من مربع العنصر. استخدم Text Shadow للعناوين والتسميات، وBox Shadow للبطاقات والأزرار والحاويات.
لماذا يظهر ظلي على العناوين في عناصر واجهة المستخدم الأخرى؟
المحدد يفتقر {{WRAPPER}}، لذلك فهو يطابق الفصل في كل مكان على الصفحة. تأخذ عناصر التحكم في المجموعة المحدد تمامًا كما هو مكتوب. بادئة مع {{WRAPPER}} وحفظ.
هل يمكن لحقل Text Shadow واحد تغطية عدة عناصر نصية؟
نعم. فاصلة - افصل المحددات وابدأ كل منها بـ {{WRAPPER}}، على سبيل المثال {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-sub. كلاهما يتبعان نفس التحكم.
هل لا تزال قاعدة ظل النص في عنصر واجهة المستخدم CSS الخاص بي مطبقة؟
نعم، كإعداد افتراضي. يتجاوز إخراج عنصر التحكم قيمة ورقة الأنماط بمجرد قيام المحرر بتكوين النافذة المنبثقة، وهي بالضبط الطريقة التي يجب أن يتصرف بها الاحتياطي.
إلتحاق بالركب #
يعد حقل Widget Builder Text Shadow عنصر تحكم صغير يحل مشكلة متكررة: النص الذي يجب أن يظل قابلاً للقراءة بغض النظر عن الصورة التي يسقطها المحرر خلفه. قم بتسمية الحقل، وقم بتعيين المحدد عليه {{WRAPPER}} بالإضافة إلى فئة النص، ويعيش الظل في اللوحة منذ ذلك الحين. يشارك نموذج المحدد الخاص به مع مجال الطباعة، والذي ينتمي عادة إلى نفس العنوان على أي حال. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.
