ال منشئ عناصر واجهة المستخدم الرئيسية يحول HTML وCSS وJavaScript الخاص بك إلى عنصر واجهة مستخدم Elementor حقيقي، مع عناصر تحكم قابلة للتحرير في لوحة Elementor. يمكنك تصميم لوحة الخيارات، وتوصيلها بالكود الخاص بك باستخدام الرموز القصيرة، وتتصرف الأداة مثل أي عنصر Elementor أصلي. لا PHP، ولا توجد لوحة معيارية للمكون الإضافي، ولا يوجد محرر تعليمات برمجية منفصل للتوفيق.
يعمل نظامان تحت كل ما هو موضح هنا: شروط دع أي عنصر تحكم يظهر أو يخفي بناءً على قيمة حقل آخر، و محرك قالب بناء جملة الغصين يحول أسماء الحقول الخاصة بك إلى رموز مميزة، {% if %} الشيكات، و {% for %} حلقات في علامات التبويب HTML وCSS وJS. يغطي كلا الدليلين الإعداد والقيود.
يمر هذا الدليل عبر لوحة خيارات Widget Builder تمامًا كما تظهر على الشاشة: إضافة عنصر واجهة مستخدم جديد، وسحب الحقول إلى علامات التبويب المحتوى والنمط والمتقدم، وكتابة التعليمات البرمجية، واستخدام الرموز القصيرة الديناميكية، وتحميل مكتبات CDN، وأخيرًا تصدير أو استيراد عنصر واجهة مستخدم كملف JSON. يمكنك العثور على الميزة في صفحة منشئ القطعة وداخل كامل الحاجيات والإضافات قائمة.
ما يفعله منشئ القطعة #
تمنحك معظم الإضافات مجموعة ثابتة من الأدوات. يمنحك هذا الأدوات اللازمة لإنشاء الأدوات الخاصة بك. يمكنك تجميع لوحة خيارات من أنواع الحقول الجاهزة (العنوان والنص واللون والرقم والأبعاد والمحول والمزيد)، وإسقاط التعليمات البرمجية الخاصة بك، وربط الحقول بهذا الرمز باستخدام رموز رمزية بسيطة للرمز القصير. يقوم حفظ عنصر واجهة المستخدم وMaster Addons بتسجيل رمز قصير وعنصر واجهة مستخدم Elementor يمكنك سحبهما إلى أي صفحة.
فكر في الأمر باعتباره الجسر بين مقتطف على طراز CodePen وعنصر واجهة مستخدم Elementor قابل للتحرير بالكامل. بمجرد إنشائه، يمكن لأي شخص في فريقك تعديل الألوان والتباعد والنص من محرر Elementor دون فتح المصدر على الإطلاق.
قبل أن تبدأ #
- ووردبريس مع ال العنصر منشئ الصفحات مثبت ونشط.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- HTML وCSS الأساسية. JavaScript اختياري ومطلوب فقط لعناصر واجهة المستخدم التفاعلية.
افتح أداة إنشاء عناصر واجهة المستخدم وأضف عنصر واجهة مستخدم جديدًا #
من لوحة تحكم WordPress، انتقل إلى الإضافات الرئيسية → منشئ القطعة. هذا يفتح أدوات الإضافات الرئيسية الشاشة، التي تسرد كل عنصر واجهة مستخدم مخصص قمت بإنشائه بالإضافة إلى فئته ومؤلفه والرمز القصير الذي تم إنشاؤه. في الأعلى سترى ثلاثة أزرار: إضافة القطعة الجديدة, استيراد القطعة، و فيديو تعليمي.
انقر إضافة القطعة الجديدة. أ إنشاء القطعة الجديدة يظهر الحوار بحقلين:
- عنوان القطعة (مطلوب): اسم وصفي لعنصر واجهة المستخدم الخاص بك، على سبيل المثال “Hero section”. هذا ما ستبحث عنه في لوحة Elementor لاحقًا، لذا اجعله شيئًا ستتعرف عليه.
- فئة القطعة: فئة العنصر التي تم تجميع عنصر واجهة المستخدم ضمنها (المفضلة افتراضيًا). تحافظ الفئات على عناصر واجهة المستخدم المخصصة الخاصة بك منظمة في المحرر.
أدخل عنوانًا، واختر فئة، وانقر حفظ التغييرات. يفتح Master Addons محرر Widget Builder لعنصر واجهة المستخدم الجديد الخاص بك.
داخل واجهة Widget Builder #
ينقسم البناء إلى ثلاث مناطق عمل، من اليسار إلى اليمين
- لوحة الحقول (يسار): مكتبة قابلة للبحث من أنواع التحكم التي تقوم بسحبها إلى عنصر واجهة المستخدم الخاص بك، مثل العنوان والنص ومنطقة النص وعنوان URL واللون والرقم والمحول والتحديد والاختيار وWYSIWYG والرمز والتاريخ والوقت.
- لوحة الإعدادات (في الوسط): ال محتوى, أسلوب، و متقدم علامات التبويب التي تقوم فيها بترتيب هذه الحقول إلى أقسام. هذه هي لوحة الخيارات الفعلية التي سيراها المستخدمون في Elementor.
- لوحة التعليمات البرمجية (يمين): ال HTML, CSS, شبيبة، و يشمل علامات التبويب التي تكتب فيها العلامات والأنماط والبرامج النصية ومراجع المكتبة.
يحمل الشريط العلوي اسم عنصر واجهة المستخدم مع وجود رمز تروس الإعدادات بجواره، بالإضافة إلى ذلك معاينة و حفظ الإعدادات أزرار.
قم بإنشاء لوحة الخيارات: علامات التبويب المحتوى والنمط والمتقدمة #
هذا هو المكان الذي تقوم فيه بتصميم عناصر التحكم. اختر حقلاً من اللوحة اليسرى واسحبه إلى قسم أسفل محتوى, أسلوب، أو متقدم علامة التبويب. اتبع نفس المنطق الذي يستخدمه Elementor: النص والروابط ضمن المحتوى، والألوان والطباعة ضمن النمط، والتباعد والتخطيط ضمن Advanced.
كل قسم لديه عنوان القسم (التسمية الموضحة في رأس القسم) و أ اسم القسممعرف فريد ستشير إليه في الكود الخاص بك. أضف عددًا من الأقسام والحقول حسب احتياجات الأداة.
على سبيل المثال، إسقاط أ مجال اللون في علامة التبويب "النمط" للسماح للمستخدمين بإعادة تلوين عنصر واجهة المستخدم، و مجال الأبعاد في علامة التبويب "متقدم" للتحكم في الحشو على الجوانب الأربعة. كل نوع حقل له وثائقه الخاصة إذا كنت تريد القائمة الكاملة للخيارات.
الرموز القصيرة الديناميكية: قم بتوصيل الحقول بالرمز الخاص بك #
هذا هو الجزء الذي يربط كل شيء معًا. كل حقل تضيفه يولد أ رمز قصير، وتظهر تلك الرموز في التوثيق الشريط الجانبي بجانب محرر التعليمات البرمجية. أضف حقل اللون وستحصل عليه {{color}}. أضف حقل الأبعاد وستحصل على {{dimensions}}.
قم بإسقاط هذه الرموز المميزة في HTML أو CSS أو JS الخاص بك أينما تريد أن تصل قيمة الحقل. عندما يقوم المستخدم بتغيير عنصر التحكم هذا في Elementor، يقوم Master Addons بتبديل الرمز المميز بالقيمة المباشرة، بحيث يظل الكود الخاص بك ديناميكيًا. شيء واحد يجب تذكره: الرمز المميز موجود فقط بمجرد وجود الحقل المطابق على اللوحة، لذا قم ببناء الحقل أولاً، ثم قم بالإشارة إلى الرمز القصير الخاص به.
أضف HTML وCSS وJS #
مع جاهزية اللوحة والرموز القصيرة، قم بالتبديل إلى علامات تبويب التعليمات البرمجية الموجودة على اليمين والصق العلامات والأنماط والبرامج النصية.
علامة تبويب HTML: اكتب بنية عنصر واجهة المستخدم وقم بوضع رموز الرمز القصير حيث تنتمي القيم الديناميكية.
علامة التبويب CSS: نمط العلامات. قم بالإشارة إلى نفس الرموز المميزة للرمز القصير لسحب الألوان والأبعاد المختارة في اللوحة.
علامة التبويب شبيبة: أضف JavaScript لأي سلوك تفاعلي، مثل تأثيرات التمرير أو شريط التمرير. يعمل الفانيليا JS العادي، وكذلك يفعل jQuery بمجرد تحميله ضمن "يتضمن".
إذا كنت تحتاج فقط إلى حقل رمز داخل اللوحة بدلاً من المحرر الرئيسي، فإن حقل الكود يسقط مدخلات مميزة لبناء الجملة في عناصر التحكم الخاصة بك.
يتضمن: تحميل مكتبات CDN CSS وJS #
افتح ال يشمل علامة التبويب لإرفاق المكتبات الخارجية التي تعتمد عليها عنصر واجهة المستخدم الخاص بك. هناك قائمتان: مكتبات CSS و مكتبات شبيبة. لكل واحد تضيف أ مقبض (اسم فريد) و عنوان URL المصدر أو المقبض المسجلثم انقر إضافة CSS أو أضف شبيبة.
هذه هي الطريقة التي يمكنك بها سحب شيء مثل Font Awesome من CDN، أو jQuery، دون تحرير السمة الخاصة بك. تقوم الإضافات الرئيسية بإدراج المكتبة فقط عندما تكون الأداة موجودة بالفعل على الصفحة، بحيث تظل صفحاتك الأخرى نظيفة.
هل تحتاج إلى أيقونات داخل الأداة؟ تقوم Master Addons أيضًا بشحن ثمانية مجمعة مكتبات الأيقونات يمكنك استخدامه بدون مكالمة CDN خارجية.
إعدادات عنصر واجهة المستخدم: العنوان والرمز والفئة والتصدير #
انقر فوق أيقونة العتاد بجوار اسم الأداة في الشريط العلوي لفتحه إعدادات القطعة في اللوحة اليسرى. من هنا يمكنك التحكم في كيفية ظهور الأداة داخل Elementor
- عنوان القطعة: إعادة تسمية القطعة. يظهر هذا العنوان في قائمة عناصر واجهة المستخدم Elementor.
- أيقونة القطعة: انقر تغيير الأيقونة لاختيار أيقونة من منتقي أيقونات Master Addons. يمكنك استخدام أي أيقونة مضمنة أو فئة Font Awesome.
- فئة القطعة: اختر فئة Elementor التي تظهر الأداة ضمنها، بحيث يتم تجميعها مع عناصر واجهة المستخدم ذات الصلة.
- أداة التصدير: قم بتصدير تكوين عنصر واجهة المستخدم بالكامل كملف JSON يمكنك حفظه أو نسخه احتياطيًا أو مشاركته مع أي شخص.
يقوم منتقي الأيقونات بتجميع آلاف الرموز في فئات مثل جميع الأيقونات، وأيقونات Elementor، وأيقونات الخط البسيط، وأيقونات الخطوط المميزة، والأيقونات الخطية، وأيقونات المواد. قم بالتصفية بالاسم، وحدد واحدًا، وانقر فوق يُدرج.
استيراد عنصر واجهة مستخدم من ملف JSON #
المشاركة تعمل في كلا الاتجاهين. العودة إلى أدوات الإضافات الرئيسية الشاشة، انقر فوق استيراد القطعة زر. يتيح لك مربع الحوار سحب وإسقاط أ .json ملف، أو تصفح له. فقط .json يتم دعم الملفات المصدرة من Widget Builder.
يمكن لأي شخص لديه ملف JSON الخاص بأداة ما استيراده واللوحة والتعليمات البرمجية والتضمين وكل شيء، ثم استخدامه على موقعه الخاص في ثوانٍ. وهذا يجعل Widget Builder طريقة مرتبة لإعادة استخدام الأدوات عبر المشاريع أو تسليمها إلى العميل.
نصائح لبناء عناصر واجهة مستخدم مخصصة موثوقة #
- أقسام الاسم بوضوح. ينتهي اسم القسم في الكود الخاص بك، لذا اجعله قصيرًا وذو معنى.
- أضف حقلاً قبل الرجوع إلى الرمز القصير الخاص به. الرموز موجودة فقط بعد وجود الحقل المطابق على اللوحة.
- استخدم المعاينة كثيرًا. تحقق من المعاينة المباشرة قبل الحفظ حتى تتمكن من التقاط الرمز المميز المفقود مبكرًا بدلاً من الصفحة المباشرة.
- قم بتحميل المكتبات من خلال التضمين، وليس مضمنًا. فهو يحافظ على نظافة التعليمات البرمجية الخاصة بك ويقوم بتحميل البرامج النصية فقط عند الحاجة إليها.
- تصدير كما تذهب. يتضاعف تصدير JSON كنسخة احتياطية وملف المشاركة الخاص بك.
- عدم رؤية عنصر واجهة المستخدم الخاص بك في Elementor؟ تحقق من دليل استكشاف الأخطاء وإصلاحها لإصلاحات الرؤية.
الأسئلة المتداولة #
ما هو منشئ عناصر واجهة المستخدم الرئيسية للإضافات؟
إن Widget Builder هي أداة في Master Addons for Elementor تعمل على تحويل HTML وCSS وJavaScript الخاصة بك إلى عنصر واجهة مستخدم Elementor قابل للتحرير. يمكنك تصميم لوحة خيارات من حقول السحب والإفلات وتوصيلها بالرمز المميز الخاص بك باستخدام رموز الرمز القصير، دون الحاجة إلى PHP.
كيف تعمل الرموز القصيرة {{color}} و{{dimensions}}؟
يقوم كل حقل تضيفه إلى لوحة الخيارات بإنشاء رمز مميز للرمز القصير، مثل {{color}} أو {{dimensions}}. تقوم بوضع الرمز المميز في HTML أو CSS أو JS، وتستبدله Master Addons بالقيمة التي يحددها المستخدم في Elementor، مما يجعل عنصر واجهة المستخدم ديناميكيًا.
هل يمكنني إضافة مكتبات CSS وJS خارجية إلى عنصر واجهة مستخدم مخصص؟
نعم. افتح علامة التبويب "يتضمن"، وأضف مقبضًا وعنوان URL لمصدر CDN ضمن مكتبات CSS أو مكتبات JS، ثم انقر فوق "إضافة". تقوم الإضافات الرئيسية بتحميل المكتبة فقط على الصفحات التي تستخدم الأداة، لذلك لا تؤدي إلى إبطاء بقية موقعك.
كيف يمكنني مشاركة عنصر واجهة مستخدم Elementor مخصص؟
افتح إعدادات عنصر واجهة المستخدم من أيقونة الترس وانقر فوق "تصدير عنصر واجهة المستخدم" لتنزيل ملف JSON. يمكن لأي شخص بعد ذلك استخدام زر استيراد عنصر واجهة المستخدم الموجود على شاشة Widget Builder لسحب ملف JSON هذا واستخدام عنصر واجهة المستخدم على موقعه الخاص.
هل يتم تضمين أداة إنشاء الأدوات مجانًا؟
يعد Widget Builder جزءًا من الإضافات الرئيسية لـ Elementor. انظر صفحة التسعير للحصول على تفاصيل الخطة الحالية والميزات المضمنة في كل مستوى.
إلتحاق بالركب #
يقوم برنامج Master Addons Widget Builder بسد الفجوة بين مقتطف التعليمات البرمجية وعنصر واجهة مستخدم عنصر الإنتاج. قم ببناء اللوحة، واكتب HTML وCSS وJS، وقم بتوصيلها برموز الرمز القصير، وقم بتحميل أي مكتبات تحتاجها، ثم قم بتصدير النتيجة أو استيرادها كـ JSON. قم بإلقاء نظرة على بقية مكتبة عناصر واجهة المستخدم الرئيسية للإضافات لمعرفة ما يمكنك بناءه أيضًا.
