مجال اللون

يعد السماح للمحرر بإعادة تلوين عنصر واجهة المستخدم دون فتح 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 فقط عندما تحتاج إلى الشفافية. بالنسبة لألوان العلامة التجارية الصلبة، فإن تركها يبقي المنتقي أكثر بساطة.
• قم بتعيين قيمة افتراضية معقولة. الإعداد الافتراضي الجيد يعني أن الأداة تبدو صحيحة لحظة إسقاطها على الصفحة.
• تعتمد على الألوان العالمية. شجع المحررين على الاختيار من اللوحة العامة حتى تظل الأدوات متسقة عبر الموقع.
• قم ببناء الحقل قبل الرجوع إلى الرمز القصير الخاص به. الرمز المميز موجود فقط بعد وجود الحقل على اللوحة.

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

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

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