الطباعة

ال مجال الطباعة يمنح عنصر واجهة المستخدم المخصص نفس استخدام عناصر واجهة المستخدم الأساسية للوحة الطباعة Elementor: عائلة الخطوط مع خطوط Google، والحجم، والوزن، والتحويل، والنمط، والديكور، وارتفاع الخط، وتباعد الحروف، وتباعد الكلمات، وكلها تستجيب لكل جهاز. داخل الإضافات الرئيسية منشئ القطعة، يمكنك إضافة الحقل مرة واحدة، وتوجيهه إلى محدد CSS، ويمكن لأي شخص يقوم بتحرير عنصر واجهة المستخدم في Elementor إعادة تصميم النص دون لمس التعليمات البرمجية.

مثل كل عنصر تحكم في Widget Builder، تدعم الطباعة شروط، حتى تتمكن من إبقائه مخفيًا حتى يتم تشغيل تبديل التصميم المخصص. يتم تشغيل إخراج الرمز المميز عبر أداة الإنشاء من خلال محرك قالب بناء جملة الغصين؛ يغطي كلا الدليلين التفاصيل والقيود.

على عكس حقول النص أو الألوان، لا يستخدم حقل الطباعة رمزًا قصيرًا في CSS الخاص بك. يمكنك إخبار الحقل بالمحدد الذي يتحكم فيه، ويقوم Elementor بكتابة أنماط الطباعة إلى هذا المحدد بمفرده. حقل واحد، محدد واحد، تم.

ما يفعله مجال الطباعة #

يعرض حقل الطباعة عنصر التحكم في مجموعة الطباعة الخاصة بـ Elementor في لوحة خيارات عنصر واجهة المستخدم الخاص بك. عندما يقوم شخص ما بتحديد عنصر واجهة المستخدم والنقر فوق أيقونة القلم الرصاص بجوار تسمية الحقل، يتم فتح نافذة منبثقة مع المجموعة الكاملة لعناصر التحكم النصية

• عائلة الخط: منسدلة قابلة للبحث تحتوي على خطوط النظام وخطوط Google وأي خطوط مخصصة مسجلة على الموقع.
• حجم الخط: شريط تمرير ومدخل بوحدات px وem وrem وvw، مستجيب لكل جهاز.
• وزن الخط: من 100 إلى 900 بالإضافة إلى عادي وجريء.
• التحويل والأسلوب والديكور: الأحرف الكبيرة والصغيرة، المائلة والمائلة، التسطير والخط.
• ارتفاع السطر، وتباعد الحروف، وتباعد الكلمات: ولكل منها مدخلاتها المستجيبة.

أيقونة الكرة الأرضية موجودة أيضًا، لذا يمكن للأداة متابعة أيقونة الموقع الخطوط العالمية الإعدادات المسبقة بدلاً من النمط لمرة واحدة. يتبع هذا نفس النمط الذي تتبعه حقول Widget Builder الأخرى: قم بإسقاط الحقل، وقم بتسميته، وقم بتوصيله. والفرق الوحيد هو كيفية الاتصال، من خلال محدد بدلاً من الرمز القصير. إذا كنت جديدًا في إنشاء عناصر واجهة المستخدم، فابدأ بـ نظرة عامة على منشئ القطعة أولاً.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة بطل المطعم مع <h1 class="bfh-title"> العنوان و أ <p class="bfh-lede"> مقدمة الفقرة في HTML الخاص بها.

كيفية إضافة حقل الطباعة #

في محرر Widget Builder، قم بتمرير لوحة الحقول الموجودة على اليسار حتى تجد الطباعة الحقل، مدرج مع حقول مجموعة الأنماط الأخرى.

اسحب حقل الطباعة إلى قسم أسفل محتوى, أسلوب، أو متقدم علامة التبويب. النمط هو الموطن الطبيعي له، على الرغم من أنه يعمل في أي مكان. بمجرد هبوطه، تفتح خيارات الحقل على اليسار.

شرح خيارات مجال الطباعة #

حدد حقل الطباعة لفتح إعداداته.

• ملصق: النص الموضح بجوار عنصر التحكم في Elementor، “Typography” افتراضيًا. مع وجود العديد من حقول الطباعة في عنصر واجهة مستخدم واحد، استخدم أسماء مثل “Title Typography” و“Button Typography”.
• اسم: المعرف الفريد للحقل. ويجب أن تحتوي فقط على الحروف والأرقام والشرطات السفلية، على سبيل المثال title_typography.
• وصف: النص المساعد الاختياري الموضح أسفل عنصر التحكم.
• محدد: محدد CSS الذي تنطبق عليه أنماط الطباعة. هذا هو الإعداد الوحيد الذي يجعل المجال يعمل، والذي سيتم تناوله في القسم التالي.
• القيمة الافتراضية: قم بربط الحقل اختياريًا بأحد الإعدادات المسبقة للخطوط العامة الخاصة بـ Elementor 5 الأساسي أو الثانوي أو النص أو اللكنة. تبدأ الأداة بعد ذلك بهذا الإعداد المسبق المطبق، وتتبعه إذا تغيرت الخطوط العامة للموقع.
• إظهار التسمية و فاصل: يتم تبديل العرض القياسي، بالإضافة إلى الشروط الإضافية لإظهار الحقل فقط عندما يكون لعنصر تحكم آخر قيمة معينة.

أشر إلى الحقل في المحدد الخاص بك #

هذا هو الجزء الذي يعرقل الناس إذا اعتادوا على المجالات الأخرى حقل الطباعة لا يحتوي على {{shortcode}} لCSS الخاص بك. قيمة الطباعة عبارة عن حزمة كاملة من الخصائص، وليست قيمة واحدة، لذلك لا يمكن طباعتها في إعلان CSS واحد. بدلا من ذلك، يمكنك ملء محدد يقوم الخيار والعنصر بإنشاء الأنماط لك.

بالنسبة لفقرة مقدمة البطل، المحدد هو:

{{WRAPPER}} .bfh-lede

• {{WRAPPER}} يرمز إلى الحاوية الخاصة بعنصر واجهة المستخدم، لذا فإن الأنماط لا تصل إلا إلى عنصر واجهة المستخدم هذا ولا تتسرب أبدًا إلى بقية الصفحة. ابدأ تشغيل المحدد به دائمًا.
• .bfh-lede هو العنصر الموجود داخل عنصر واجهة المستخدم HTML الذي يجب أن يصممه عنصر التحكم.
• لقيادة عدة عناصر باستخدام عنصر تحكم واحد، قم بفصل المحددات بفواصل ومنح كل منها خاصًا به {{WRAPPER}}: {{WRAPPER}} .bfh-title, {{WRAPPER}} .bfh-lede.

إذا تركت المحدد فارغًا، فسيعود الحقل إلى حاوية عنصر واجهة المستخدم بأكملها، والتي تقوم بتنميط كل جزء من النص في عنصر واجهة المستخدم مرة واحدة. هذا عادة ما يكون أكثر مما تريد. اضبط المحدد، ثم انقر حفظ الإعدادات.

تستمر ورقة الأنماط الخاصة بك في علامة التبويب CSS في العمل كمظهر بداية لعنصر واجهة المستخدم. أيا كان font-family أو font-size لقد كتبت هناك يبقى في مكانه حتى يختار المستخدم شيئًا ما في اللوحة؛ ثم تتجاوزه قيم عنصر التحكم.

استخدم عنصر التحكم في الطباعة في Elementor #

أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor، أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. حدد عنصر واجهة المستخدم وسيظهر عنصر التحكم في الطباعة في لوحته مع التسمية التي قمت بتعيينها، وأيقونة الكرة الأرضية للخطوط العالمية، وأيقونة القلم الرصاص للقيم المخصصة.

اختر عائلة الخطوط وحجمها #

انقر فوق أيقونة القلم الرصاص لفتح نافذة الطباعة المنبثقة. ال عائلة يبحث Dropdown في خطوط النظام ومكتبة Google Fonts الكاملة أثناء الكتابة. أسفله، مقاس يأخذ قيمة بـ px أو em أو rem أو vw، ويتيح لك رمز الجهاز تعيين حجم مختلف لكل نقطة توقف حيث يمكن أن ينخفض عنوان سطح المكتب 96px إلى 48px على الهواتف من نفس عنصر التحكم.

ضبط الوزن والتباعد والباقي #

نفس المنبثقة تحمل وزن, يحول, أسلوب, زخرفة, ارتفاع الخط, تباعد الحروف، و تباعد الكلمات. كل تغيير يظهر مباشرة في المعاينة، حتى تتمكن من مشاهدة العنوان وهو يشد أثناء سحب تباعد الحروف لأسفل. إذا لم يتغير شيء، فتأكد من أن المحدد الخاص بك يطابق بالفعل عنصرًا في عنصر واجهة المستخدم HTML؛ يفشل الخطأ المطبعي في اسم الفئة بصمت.

أو اتبع الخطوط العالمية للموقع #

انقر فوق أيقونة الكرة الأرضية بدلاً من ذلك واختر الأساسي أو الثانوي أو النص أو اللكنة. يتبع نص عنصر واجهة المستخدم الآن الإعداد المسبق العام، وعندما تقوم إعادة التصميم بتبديل خطوط الموقع، تتبع عنصر واجهة المستخدم هذا دون أن يلمسه أحد. إذا قمت بتعيين قيمة افتراضية في الحقل، يكون هذا الرابط نشطًا بالفعل عند إسقاط عنصر واجهة المستخدم لأول مرة على الصفحة.

في مثالنا، يتم تبديل العنوان إلى وجه البرنامج النصي بدقة 98 بكسل، ويتم اختياره مباشرة من قائمة خطوط Google، وتعيد المعاينة رسم لحظة تحميل الخط.

حالات الاستخدام الشائعة #

• العناوين في عناصر واجهة المستخدم البطل والراية حيث يريد كل موقع خط العرض الخاص به.
• أزرار يجب أن يتطابق ذلك مع طباعة الأزرار الموجودة بالموقع.
• عناوين البطاقات ومقتطفات منها مع حقول منفصلة لكل منها، يتم قياس العناوين والنص الأساسي بشكل مستقل.
• الحاجيات الشهادة والاقتباس حيث يأخذ الاقتباس حرفًا مائلًا ويبقى الإسناد في خط النص.
• الحاجيات التي تواجه العميل حيث يجب على المحررين إعادة تصميم النص بحرية دون فتح CSS على الإطلاق.

نصائح للعمل مع مجال الطباعة #

• خيار المحدد هو الاتصال بأكمله. لا يوجد رمز قصير للطباعة للصقه في CSS 1. قم بتعيين المحدد واترك Elementor يكتب الأنماط.
• ابدأ دائمًا المحدد بـ {{WRAPPER}}. بدونها، تنطبق الأنماط على كل تطابق على الصفحة، وليس فقط على عنصر واجهة المستخدم الخاص بك. في قائمة مفصولة بفواصل، يحتاج كل جزء إلى جزء خاص به {{WRAPPER}}.
• احتفظ بأنماطك الأساسية في علامة التبويب CSS. إنها الشكل الذي تبدو عليه الأداة عند قطرة جديدة؛ يتجاوز عنصر التحكم فقط ما يغيره المستخدم فعليًا.
• حقل واحد لكل دور نصي. يمنح حقل العنوان وحقل النص وحقل الزر للمحررين تحكمًا نظيفًا. حقل واحد يشير إلى عنصر واجهة المستخدم بأكمله يعمل على تسوية كل شيء بنمط واحد.
• استخدم الإعدادات الافتراضية للخطوط العالمية لمواقع العملاء. يؤدي ربط الحقل بالمرحلة الابتدائية أو الثانوية إلى إبقاء الأدوات المخصصة متوافقة مع نظام تصميم الموقع من اليوم الأول.

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

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

يقوم حقل Widget Builder Typography بتسليم المحررين اللوحة التي يعرفونها بالفعل من عناصر واجهة المستخدم الخاصة بـ Elementor، مع خطوط Google والأحجام سريعة الاستجابة والإعدادات المسبقة العامة، على أي عنصر من عناصر واجهة المستخدم المخصصة الخاصة بك. قم بتسمية الحقل، وقم بتعيين المحدد عليه {{WRAPPER}} بالإضافة إلى فئة العنصر الخاص بك، وينتقل كل قرار خط من ورقة الأنماط الخاصة بك إلى اللوحة. إقرانه مع مجال الحدود و ال حقل النص لإنشاء لوحة عناصر واجهة مستخدم تغطي المحتوى والأسلوب في مكان واحد. استكشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.