يعد السماح للمحرر بإعادة تلوين عنصر واجهة المستخدم دون فتح CSS أحد أكثر الأشياء المفيدة التي يمكن أن تفعلها عنصر واجهة المستخدم المخصص. ال مجال اللون في الإضافات الرئيسية منشئ القطعة يقوم بإسقاط منتقي الألوان الخاص بـ Elementor في لوحة عناصر واجهة المستخدم الخاصة بك، مع استكمال الألوان العامة وقناة ألفا اختيارية. تقوم بتسمية الحقل، واختيار المكان الذي يعيش فيه، ويتم تغذية الرمز القصير الخاص به مباشرة إلى CSS الخاص بك.
مثل كل حقل Widget Builder، يدعم حقل اللون شروط لرؤية اللوحة. يتم تقديم رمزه بواسطة محرك قالب بناء جملة الغصين، وهو ما يتيح لك طباعة اللون المختار في أي مكان في CSS الخاص بك. يغطي كلا الدليلين الإعداد والقيود.
هذا هو التحكم في الأسلوب، لذلك في العرض التوضيحي يقع تحت أسلوب علامة التبويب. يعمل الحقل بنفس الطريقة بغض النظر عن علامة التبويب التي وضعتها فيها. المكان الذي يعيش فيه هو مكالمتك، ويتعلق الأمر بالطريقة التي تريد بها تنظيم عناصر التحكم في عنصر واجهة المستخدم المخصص لديك.
ماذا يفعل حقل اللون #
يعرض حقل اللون منتقي الألوان الأصلي لـ Elementor في لوحة خيارات عنصر واجهة المستخدم الخاص بك. ينقر المحررون على العينة، ويختارون لونًا (أو لونًا عامًا من السمة)، وتقوم عنصر واجهة المستخدم الخاص بك بإخراج تلك القيمة أينما وضعت الرمز القصير المطابق. في معظم الأحيان يعني ذلك خاصية CSS مثل color, background، أو border-color.
نظرًا لأنه يستخدم منتقي Elementor الخاص، يحصل المحررون على عناصر التحكم التي يعرفونها بالفعل: العينة، وقطارة العين، والألوان الحديثة، ولوحة الألوان العامة. قم بتشغيل قناة ألفا ويمكنهم ضبط الشفافية أيضًا.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
- أداة مخصصة مفتوحة في محرر Widget Builder. أول واحد؟ ابدأ بـ نظرة عامة على منشئ القطعة.
كيفية إضافة حقل اللون #
في محرر Widget Builder، ابحث عن لوحة الحقول الموجودة على اليسار واسحب لون الحقل في القسم. نظرًا لأن اللون هو اختيار التصميم، فإن أسلوب علامة التبويب هي المنزل الطبيعي، ولكن محتوى و متقدم علامات التبويب تقبله أيضًا. بمجرد وضع الحقل في مكانه، تفتح خياراته على اليسار ويظهر الرمز القصير الخاص به في التوثيق الشريط الجانبي بجوار محرر التعليمات البرمجية.
تم شرح خيارات حقل اللون #
حدد حقل اللون لفتح إعداداته. تتطابق معظم الخيارات مع الحقول الأخرى، بالإضافة إلى حقل خاص باللون.
- ملصق: النص الموضح أعلاه هو المنتقي في Elementor، على سبيل المثال “Text Color”.
- اسم: المعرف الفريد للحقل. الحروف والأرقام والتسطير فقط. يصبح هذا هو الرمز القصير الخاص بك، لذلك يتم تسمية الحقل
colorيعطيك{{color}}. - وصف: النص المساعد الاختياري الموضح أسفل عنصر التحكم.
- ألفا: قم بتشغيل هذا للسماح بالشفافية في المنتقي. مع إيقاف تشغيله، يمكن للمحررين اختيار الألوان الصلبة فقط. قم بتمكينه عندما تحتاج إلى قيم rgba، مثل تراكب شبه شفاف.
- القيمة الافتراضية: لون البداية كقيمة سداسية، مثل
#FFFFFF. اضبط هذا بحيث تبدو الأداة منتهية قبل أن يلمسها أي شخص.
الإعدادات الشائعة: سريعة الاستجابة وديناميكية والمزيد #
أدناه القيمة الافتراضية تحصل على نفس الشيء الإعدادات المشتركة كما هو الحال في كل حقل في المنشئ: إظهار التسمية، وكتلة التسمية، والتحكم في الاستجابة، والدعم الديناميكي، والواجهة الأمامية المتاحة، والفاصل، والشروط. التحكم في الاستجابة مفيد هنا إذا كنت تريد لونًا مختلفًا لكل جهاز. ال التوثيق الميداني للنص يغطي كل من هذه بالتفصيل.
قم بتوصيل الحقل بالرمز الخاص بك #
حقل اللون اسمه color ينتج الرمز المميز {{color}} في الشريط الجانبي للتوثيق. قم بإسقاطه في CSS الخاص بك كقيمة لأي خاصية لون. على سبيل المثال، لتلوين نص البطل:
في محرر CSS ستكتب شيئًا مثل .hero-content { color: {{color}}; }. عندما يختار المحرر لونًا في Elementor، يقوم Master Addons بتبديل الرمز المميز لتلك القيمة ويتم إعادة تلوين النص مباشرة. نفس الرمز المميز يعمل ل background, border-color، أو أي شيء يأخذ لونًا، ويمكنك إعادة استخدامه في أي عدد تريده من القواعد. شيء واحد يجب مشاهدته: احتفظ بالرمز المميز كقيمة كاملة، لذا color: {{color}};، غير ملفوفة بين علامتي اقتباس، وإلا فلن يتم تطبيق CSS.
استخدم التحكم في اللون في Elementor #
اسحب عنصر واجهة المستخدم المخصص الخاص بك إلى الصفحة وافتحه في محرر Elementor. ضمن علامة التبويب التي وضعت فيها الحقل، يظهر التحكم في الألوان كعلامة تبديل قياسية مع زر الألوان العامة بجواره. انقر عليه، واختر لونًا، وستقوم الأداة بالتحديث على اللوحة القماشية.
يمكن للمحررين اختيار لون لمرة واحدة أو النقر فوق أيقونة الكرة الأرضية لسحبها من الألوان العامة للموقع، مما يحافظ على عناصر واجهة المستخدم المخصصة على العلامة التجارية. إذا قمت بتشغيل الدعم الديناميكي، فسيظهر رمز العلامات الديناميكية هنا أيضًا.
حالات الاستخدام الشائعة #
- لون النص للعناوين والفقرات.
- لون الخلفية للأقسام والبطاقات والأزرار.
- ألوان الحدود واللهجة مرتبطة بلوحة العلامة التجارية.
- تراكب الصبغات استخدام قناة ألفا للشفافية.
- تحوم الدول عند إقرانه بحقل لون ثانٍ.
نصائح للعمل مع مجال اللون #
- ضعه في أي مكان يناسب القطعة الخاصة بك. الأسلوب هو التقليد، لكن الحقل يعمل تحت أي علامة تبويب، لذا فإن التنظيم يتحكم بالطريقة المنطقية بالنسبة لك.
- قم بتشغيل Alpha فقط عندما تحتاج إلى الشفافية. بالنسبة لألوان العلامة التجارية الصلبة، فإن تركها يبقي المنتقي أكثر بساطة.
- قم بتعيين قيمة افتراضية معقولة. الإعداد الافتراضي الجيد يعني أن الأداة تبدو صحيحة لحظة إسقاطها على الصفحة.
- تعتمد على الألوان العالمية. شجع المحررين على الاختيار من اللوحة العامة حتى تظل الأدوات متسقة عبر الموقع.
- قم ببناء الحقل قبل الرجوع إلى الرمز القصير الخاص به. الرمز المميز موجود فقط بعد وجود الحقل على اللوحة.
الأسئلة المتداولة #
ما هو حقل اللون في Master Addons Widget Builder؟
يضيف حقل اللون منتقي الألوان الخاص بـ Elementor إلى عنصر واجهة مستخدم مخصص. تقوم بتسمية الحقل، ووضع الرمز القصير الخاص به في CSS الخاص بك، وأي لون يختاره المحرر في Elementor يتم تطبيقه على عنصر واجهة المستخدم الخاص بك. وهو يدعم الألوان العامة وقناة ألفا اختيارية.
كيف يمكنني استخدام الرمز القصير {{color}} في عنصر واجهة المستخدم المخصص الخاص بي؟
أضف حقل لون اسمه color، ثم في محرر CSS استخدم الرمز المميز كقيمة خاصية، مثل .hero-content { color: {{color}}; }. يستبدل Master Addons الرمز المميز باللون المختار، وبالتالي يتم إعادة تلوين عنصر واجهة المستخدم بناءً على اختيار المحرر.
هل يدعم حقل اللون الشفافية؟
نعم. قم بتشغيل خيار Alpha في إعدادات الحقل ويتيح منتقي Elementor للمحررين ضبط الشفافية وإنتاج قيم rgba. مع إيقاف تشغيل Alpha، يسمح المنتقي فقط بالألوان الصلبة. استخدمه للتراكبات أو الخلفيات شبه الشفافة.
هل يمكنني وضع حقل اللون خارج علامة التبويب "النمط"؟
نعم. يعمل حقل اللون ضمن علامة التبويب المحتوى أو النمط أو المتقدم. النمط هو الخيار المعتاد للتحكم في التصميم، ولكن المكان الذي تضعه فيه يعود إلى الطريقة التي تريد بها تنظيم خيارات عنصر واجهة المستخدم المخصص لديك.
هل يمكن لحقل الألوان استخدام الألوان العامة للموقع؟
نعم. نظرًا لأنه يستخدم منتقي Elementor الأصلي، يمكن للمحررين النقر فوق زر الألوان العامة والاختيار من لوحة السمات. يؤدي اختيار الألوان العامة إلى الحفاظ على توافق عناصر واجهة المستخدم المخصصة مع بقية العلامة التجارية للموقع.
إلتحاق بالركب #
يقوم حقل لون منشئ عناصر واجهة المستخدم بتحويل اللون المشفر إلى منتقي قابل للتحرير داخل عنصر واجهة المستخدم المخصص الخاص بك. قم بتسميته، واختر ما إذا كنت تريد السماح بـ alpha، وتعيين الإعداد الافتراضي، ثم قم بتوصيل الأسلاك {{color}} في CSS الخاص بك. بعد ذلك، يمكن لأي شخص إعادة تلوين عنصر واجهة المستخدم من Elementor، باستخدام الألوان العامة والشفافية عند النقر. قم بإلقاء نظرة على بقية عناصر واجهة المستخدم والإضافات الرئيسية، والتحقق من صفحة التسعير لما تتضمنه كل خطة.
