الخط

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

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

ما يفعله حقل الخط #

• يضيف منسدلة قابلة للبحث إلى لوحة عنصر واجهة المستخدم الخاص بك في Elementor. القائمة لديها الافتراضي الخيار، أ نظام المجموعة (أريال، تاهوما، وهكذا) و جوجل مجموعة.
• يحفظ اسم العائلة كنص، على سبيل المثال Playfair Display.
• يكتب أ font-family قاعدة للعناصر التي تدرجها تحت محددات CSS. عندما يكون الاختيار عبارة عن خط Google، يقوم Elementor بتحميل هذا الخط على الصفحة لك.
• يعطيك أيضا رمزا، مثل {{ quote_font }}، هذا يطبع اسم العائلة.

جديد على البناء؟ اقرأ نظرة عامة على منشئ القطعة أولاً، ثم عد باستخدام عنصر واجهة المستخدم مفتوحًا.

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية للعنصر مثبتة ونشطة. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Pull Quote”: منطقة نص مسماة quote_text، حقل نص اسمه quote_author، وحقل الخط اسمه quote_font الذي يحدد محرف الاقتباس.

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

1. اذهب الى الإضافات الرئيسية > منشئ القطعة وافتح القطعة الخاصة بك.
2. انقر فوق أسلوب قم بعلامة التبويب وإضافة قسم، على سبيل المثال “Quote Style”.
3. يكتب font في مربع البحث الميداني على اليسار.
4. يجر الخط في القسم. انقر فوق القلم الرصاص الموجود في الحقل لفتح إعداداته.

النمط هو المكان الذي يتوقع المحررون العثور فيه على خيارات المحرف، ولكن الحقل يعمل في قسم المحتوى أو القسم المتقدم أيضًا.

شرح خيارات حقل الخط #

• ملصق: النص الموجود أعلى القائمة المنسدلة في Elementor، على سبيل المثال “Quote Font”.
• اسم: المعرف الفريد للحقل واسم الرمز المميز الخاص به. استخدم الحروف والأرقام والتسطير فقط، على سبيل المثال quote_font.
• وصف: تلميح يظهر أسفل القائمة المنسدلة في Elementor.
• القيمة الافتراضية: تبدأ العائلة بنسخة جديدة من الأداة بـ. اكتب الاسم تمامًا كما يظهر في قائمة Elementor، على سبيل المثال Playfair Display.

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

قم بتطبيق الخط باستخدام محددات CSS #

انتقل للأسفل إلى محددات CSS وانقر إضافة عنصر. يحتوي كل صف على صندوقين:

• محدد CSS: العنصر الذي يحصل على الخط. للحصول على اقتباس السحب فهو .pq-quote. لا تحتاج إلى الكتابة {{WRAPPER}}لأن المنشئ يضيفها لك ويحتفظ بالقاعدة داخل هذه الأداة.
• خصائص CSS: قاعدة الكتابة. {{VALUE}} يتم استبداله بالعائلة المختارة.

font-family: "{{VALUE}}", Georgia, serif;

يأتي صف جديد مليئًا بنص المثال، .text-1, .text-2 و color: {{VALUE}};. استبدل كليهما. إذا غادرت color في مربع الخصائص، ينتهي اسم الخط كقيمة لون ولا يتغير الخط.

الاقتباسات حولها {{VALUE}} احتفظ بالأسماء ذات المسافات، مثل Playfair Display، للعمل. Georgia, serif هو الاحتياطي أثناء تحميل الخط. لتصميم المزيد من العناصر، انقر فوق إضافة عنصر مرة أخرى وإضافة صف آخر.

اترك السهل محدد المربع في الأسفل فارغ. في اختباراتنا كتب color: Lora; لهذا الحقل، الذي لا يقوم بتعيين خط.

انقر حفظ الإعدادات عندما تنتهي.

لماذا لا تضع الرمز المميز في لوحة CSS؟ #

الرمز المميز يعمل هناك. font-family: "{{ quote_font }}", Georgia, serif; طباعة الاسم الصحيح. المشكلة هي التحميل. في اختباراتنا، لم يتم تحميل خط Google المستخدم فقط من خلال الرمز المميز على الواجهة الأمامية، لذلك رأى الزائرون الخط الاحتياطي. يمنح صف محددات CSS Elementor المعلومات التي يحتاجها لتحميل الخط، وقد تم نفس الاختيار بشكل صحيح.

احتفظ بالرمز المميز للأماكن التي تحتاج فيها إلى الاسم كنص، مثل فئة أو تسمية في HTML.

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

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

اختر عائلة وتحديثات المعاينة. في الصفحة المنشورة، يقوم Elementor بتحميل خط Google مع أنماط الأداة.

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

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

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

نصائح للعمل مع حقل الخط #

• استخدم محددات CSS بدلاً من الرمز المميز للتصميم. وهذا ما يجعل Google Fonts يتم تحميله.
• أضف دائمًا مكدسًا احتياطيًا بعد {{VALUE}}، مثل Georgia, serif أو Arial, sans-serif.
• ضع الحجم والوزن في لوحة CSS. يقوم حقل الخط بتعيين العائلة فقط.
• هل تحتاج إلى ضوابط الحجم والوزن والتباعد أيضًا؟ ال مجال الطباعة هو حقل احترافي يجمع كل منهم.
• يضيف كل خط Google تنزيلًا. عائلتين أو ثلاث عائلات في كل صفحة هو حد معقول.

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

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

أضف حقل الخط إلى قسم النمط، وقم بتعيين عائلة افتراضية، وأضف صف محددات CSS الذي يشير font-family: "{{VALUE}}" في العنصر الخاص بك. يحصل المحررون على قائمة خطوط قابلة للبحث في Elementor، ويتم تحميل خطوط Google على الصفحة بدون تعليمات برمجية إضافية. لتصميم النص الكامل، راجع مجال الطباعةو تحقق التسعير لما تتضمنه كل خطة.